Istruzione
第一步：请你先深度阅读文章内容，然后帮我提取出这篇文章的核心主旨观点，然后采用尼采金句的风格进行润色，变成一个尼采式的金句。
第二步：请按照下面的要求和模板，为刚才提炼的金句制作一个深色高端风格的海报：
【设计要求】
1. 视觉风格：
- 深色背景（黑色系）
- 金色和蓝色作为高亮色
- 现代科技感与奢华质感结合
- 动态光效和渐变效果
2. 布局结构：
- 顶部：徽章式标签 + 大标题 + 副标题
- 中部：金句主体（关键词高亮发光）+ 可视化图形水印
- 下部：洞察卡片（毛玻璃效果）
- 底部：装饰线 + 英文标语
3. 关键设计元素：
- 动态光晕背景（金色和蓝色渐变球体）
- 几何装饰线条
- SVG 可视化图形作为水印（需根据金句主题设计）
- 金句中的关键对比词用不同颜色高亮（金色/蓝色）
- 文字发光效果和底部荧光线
- 半透明毛玻璃卡片
- 装饰性大图标作为背景
4. 尺寸要求：
- 画布：1080×1350px
- 所有内容必须在可视范围内，无需滚动
5. 可视化图形设计原则：
- 根据金句核心主题设计 SVG 图形
- 图形应该简洁、抽象、有寓意
- 使用金色渐变，透明度约 0.08
- 尺寸约 300×300px，放置在金句左上方
代码示例模板：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[金句主题] - 金句海报</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300;400;500;600;700;900&family=Noto+Sans+SC:wght@300;400;500;600;700;900&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Noto Serif SC', serif;
background: #1a1a1a;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.container {
width: 1080px;
height: 1350px;
background: linear-gradient(165deg, #0a0a0a 0%, #1a1a1a 50%, #0f0f0f 100%);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
}
/* 动态光效背景 */
.glow-effect {
position: absolute;
width: 600px;
height: 600px;
border-radius: 50%;
filter: blur(120px);
opacity: 0.15;
animation: float 8s ease-in-out infinite;
}
.glow-1 {
background: radial-gradient(circle, #d4af37 0%, transparent 70%);
top: -200px;
left: -100px;
}
.glow-2 {
background: radial-gradient(circle, #6495ed 0%, transparent 70%);
bottom: -200px;
right: -100px;
animation-delay: -4s;
}
@keyframes float {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(50px, 50px) scale(1.1); }
}
/* 金色几何线条 */
.geometric-lines {
position: absolute;
width: 100%;
height: 100%;
opacity: 0.1;
}
.line {
position: absolute;
background: linear-gradient(90deg, transparent, #d4af37, transparent);
height: 1px;
}
.line-1 { top: 15%; left: 0; right: 0; transform: rotate(-15deg); }
.line-2 { top: 85%; left: 0; right: 0; transform: rotate(15deg); }
.line-3 { left: 20%; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent, #d4af37, transparent); }
/* 顶部区域 */
.top-section {
padding: 60px 100px 0;
position: relative;
z-index: 10;
}
.header-badge {
display: inline-block;
padding: 12px 40px;
background: rgba(212, 175, 55, 0.1);
border: 1px solid rgba(212, 175, 55, 0.3);
border-radius: 50px;
font-family: 'Noto Sans SC', sans-serif;
font-size: 13px;
letter-spacing: 4px;
color: #d4af37;
font-weight: 500;
text-transform: uppercase;
backdrop-filter: blur(10px);
margin-bottom: 40px;
}
.main-title {
font-size: 64px;
font-weight: 900;
color: #ffffff;
line-height: 1.2;
margin-bottom: 25px;
letter-spacing: 2px;
text-shadow: 0 0 40px rgba(212, 175, 55, 0.3);
}
.title-gradient {
background: linear-gradient(135deg, #ffffff 0%, #d4af37 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.subtitle {
font-family: 'Noto Sans SC', sans-serif;
font-size: 14px;
color: #888;
letter-spacing: 3px;
font-weight: 300;
}
/* 中央内容区 */
.center-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0 100px;
position: relative;
z-index: 10;
}
/* 超大金句展示 */
.quote-display {
width: 100%;
max-width: 880px;
text-align: center;
margin-bottom: 80px;
position: relative;
}
/* SVG 可视化图形水印 */
.quote-visual {
position: absolute;
top: -120px;
left: -100px;
width: 300px;
height: 300px;
opacity: 0.08;
}
.visual-graphic {
width: 100%;
height: 100%;
}
.main-text {
font-size: 48px;
font-weight: 600;
line-height: 1.5;
color: #ffffff;
position: relative;
margin-bottom: 50px;
}
.text-block {
margin: 25px 0;
position: relative;
display: inline-block;
}
/* 金色高亮（用于关键词1）*/
.emphasis-1 {
position: relative;
display: inline-block;
color: #d4af37;
font-weight: 700;
text-shadow: 0 0 30px rgba(212, 175, 55, 0.5);
}
.emphasis-1::after {
content: '';
position: absolute;
bottom: 8px;
left: 0;
right: 0;
height: 8px;
background: linear-gradient(90deg,
rgba(212, 175, 55, 0.4) 0%,
rgba(212, 175, 55, 0.1) 100%);
z-index: -1;
}
/* 蓝色高亮（用于关键词2）*/
.emphasis-2 {
position: relative;
display: inline-block;
color: #6495ed;
font-weight: 700;
text-shadow: 0 0 30px rgba(100, 149, 237, 0.5);
}
.emphasis-2::after {
content: '';
position: absolute;
bottom: 8px;
left: 0;
right: 0;
height: 8px;
background: linear-gradient(90deg,
rgba(100, 149, 237, 0.4) 0%,
rgba(100, 149, 237, 0.1) 100%);
z-index: -1;
}
/* 普通文字（不需要高亮的部分）*/
.connector {
color: #666;
font-size: 38px;
font-weight: 400;
}
/* 分隔符 */
.separator {
width: 120px;
height: 3px;
background: linear-gradient(90deg,
transparent 0%,
#d4af37 50%,
transparent 100%);
margin: 50px auto;
box-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
}
/* 底部洞察卡片 */
.insight-panel {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(212, 175, 55, 0.2);
border-radius: 20px;
padding: 40px 60px;
max-width: 850px;
backdrop-filter: blur(20px);
position: relative;
overflow: hidden;
}
.insight-panel::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg,
transparent 0%,
#d4af37 50%,
transparent 100%);
}
.insight-label {
font-family: 'Noto Sans SC', sans-serif;
font-size: 13px;
letter-spacing: 3px;
color: #d4af37;
font-weight: 600;
text-transform: uppercase;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.insight-body {
font-size: 23px;
line-height: 1.8;
color: #cccccc;
font-weight: 400;
text-align: center;
}
/* 底部信息 */
.bottom-info {
padding: 45px 100px 50px;
text-align: center;
position: relative;
z-index: 10;
}
.bottom-line {
width: 200px;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(212, 175, 55, 0.3) 50%,
transparent 100%);
margin: 0 auto 20px;
}
.footer-text {
font-family: 'Noto Sans SC', sans-serif;
font-size: 12px;
color: #555;
letter-spacing: 5px;
font-weight: 300;
text-transform: uppercase;
}
/* 装饰性图标 */
.deco-icon {
position: absolute;
color: rgba(212, 175, 55, 0.08);
font-size: 150px;
}
.icon-1 {
top: 150px;
right: 100px;
transform: rotate(20deg);
}
.icon-2 {
bottom: 200px;
left: 80px;
transform: rotate(-15deg);
}
/* 边框装饰 */
.border-frame {
position: absolute;
border: 1px solid rgba(212, 175, 55, 0.15);
pointer-events: none;
}
.frame-top-left {
top: 50px;
left: 50px;
width: 100px;
height: 100px;
border-right: none;
border-bottom: none;
}
.frame-bottom-right {
bottom: 50px;
right: 50px;
width: 100px;
height: 100px;
border-left: none;
border-top: none;
}
</style>
</head>
<body>
<div class="container">
<!-- 动态光效 -->
<div class="glow-effect glow-1"></div>
<div class="glow-effect glow-2"></div>
<!-- 几何线条 -->
<div class="geometric-lines">
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
</div>
<!-- 装饰图标（根据主题替换 Font Awesome 图标类名）-->
<i class="fas fa-[图标名称] deco-icon icon-1"></i>
<i class="fas fa-[图标名称] deco-icon icon-2"></i>
<!-- 边框装饰 -->
<div class="border-frame frame-top-left"></div>
<div class="border-frame frame-bottom-right"></div>
<!-- 顶部区域 -->
<div class="top-section">
<div class="header-badge">[英文主题标签]</div>
<h1 class="main-title">
<span class="title-gradient">[中文主标题]</span>
</h1>
<p class="subtitle">[英文副标题]</p>
</div>
<!-- 中央内容区 -->
<div class="center-content">
<!-- 金句展示 -->
<div class="quote-display">
<!-- SVG 可视化图形（根据主题定制设计）-->
<div class="quote-visual">
<svg class="visual-graphic" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<!-- 在这里设计符合主题的 SVG 图形 -->
<!-- 使用 #d4af37 和 #f0d778 作为主要颜色 -->
<!-- 示例：圆形、路径、多边形等组合 -->
</svg>
</div>
<div class="main-text">
<!-- 根据金句内容调整，将关键对比词分别用 emphasis-1 和 emphasis-2 高亮 -->
<div class="text-block">
<span class="emphasis-1">[关键词1]</span>
</div>
<div class="text-block">
<span class="connector">[连接文字]</span>
</div>
<br><br>
<div class="text-block">
<span class="emphasis-2">[关键词2]</span>
</div>
<div class="text-block">
<span class="connector">[连接文字]</span>
</div>
</div>
</div>
<!-- 分隔符 -->
<div class="separator"></div>
<!-- 洞察面板 -->
<div class="insight-panel">
<div class="insight-label">
<i class="fas fa-[图标名称]"></i>
[洞察标签]
</div>
<div class="insight-body">
[洞察内容第一行]<br>
[洞察内容第二行]<br>
[洞察内容第三行]
</div>
</div>
</div>
<!-- 底部信息 -->
<div class="bottom-info">
<div class="bottom-line"></div>
<div class="footer-text">
[英文标语]
</div>
</div>
</div>
</body>
</html>
Agent
