Instruction
# 金句海报提示词
请按照下面提示词的要求与规范，使用我的HTML示例模板为[金句]生成内容页面：
{
"视觉设计": {
"风格": "Magazine Layout",
"主题": "浅色，类似发黄的信纸色",
"氛围": "现代高端"
},
"字体与排版": {
"布局": "文字居中，留白充足",
"重点": "突出金句，讲究层次感和留白",
"颜色": "黑白为主，点缀一抹金色",
"整体气质": "高级、沉稳、简约"
},
"视觉元素": {
"类型": [
"几何线条",
"细边框",
"杂志排版感的矩形块"
]
},
"色彩与效果": {
"高亮色使用": "单色透明度渐变",
"规则": "每种高亮色独立使用，避免不同高亮色之间的渐变混杂"
},
"技术要求": {
"图标库": [
"Font Awesome",
"Material Icons"
],
"加载方式": "通过CDN加载",
"避免": "不要使用emoji作为主要图标"
},
"内容要求": "完整呈现所有内容要点，不省略任何信息",
"尺寸": {
"区域": "1080×1350",
"展示方式": "无需滚动即可完整展示",
"语言": "中文为主"
}
}
注意：请严格按照示例模板代码制作。
HTML示例模板：
<!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;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Noto Serif SC', serif;
background: linear-gradient(135deg, #f7f3e9 0%, #f0ead6 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: #2c2c2c;
line-height: 1.6;
}
.container {
width: 1080px;
height: 1350px;
background: #faf8f0;
border: 2px solid #e8e2d4;
box-shadow: 0 20px 60px rgba(0,0,0,0.1);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
padding: 80px 60px;
}
.header {
text-align: center;
margin-bottom: 120px;
position: relative;
}
.header::after {
content: '';
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 2px;
background: linear-gradient(90deg, transparent, #d4af37, transparent);
}
.magazine-title {
font-size: 32px;
font-weight: 300;
color: #2c2c2c;
letter-spacing: 8px;
margin-bottom: 15px;
position: relative;
}
.main-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
}
.quote-section {
max-width: 800px;
position: relative;
margin-bottom: 60px;
}
.quote-icon {
position: absolute;
top: -40px;
left: -60px;
font-size: 80px;
color: rgba(212, 175, 55, 0.15);
}
.main-quote {
font-size: 42px;
font-weight: 400;
line-height: 1.8;
color: #1a1a1a;
margin-bottom: 40px;
position: relative;
z-index: 2;
}
.highlight-1 {
background: linear-gradient(120deg, rgba(212, 175, 55, 0.2) 0%, rgba(212, 175, 55, 0.05) 100%);
padding: 8px 16px;
border-radius: 4px;
position: relative;
}
.highlight-2 {
background: linear-gradient(120deg, rgba(100, 149, 237, 0.15) 0%, rgba(100, 149, 237, 0.05) 100%);
padding: 8px 16px;
border-radius: 4px;
margin: 20px 0;
}
.highlight-3 {
background: linear-gradient(120deg, rgba(220, 20, 60, 0.12) 0%, rgba(220, 20, 60, 0.05) 100%);
padding: 8px 16px;
border-radius: 4px;
color: #2c2c2c;
font-weight: 500;
}
.decorative-line {
width: 200px;
height: 1px;
background: linear-gradient(90deg, transparent, #d4af37, transparent);
margin: 60px auto;
}
.insight-box {
background: rgba(255, 255, 255, 0.6);
border: 1px solid #e8e2d4;
border-radius: 8px;
padding: 40px;
margin: 40px 0;
position: relative;
backdrop-filter: blur(10px);
}
.insight-title {
font-family: 'Noto Sans SC', sans-serif;
font-size: 18px;
font-weight: 500;
color: #d4af37;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.insight-text {
font-size: 24px;
color: #333;
line-height: 1.6;
}
.geometric-accent {
position: absolute;
top: 200px;
right: 80px;
width: 100px;
height: 100px;
border: 2px solid rgba(212, 175, 55, 0.3);
border-radius: 50%;
transform: rotate(45deg);
}
.geometric-accent::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
border: 1px solid rgba(212, 175, 55, 0.5);
border-radius: 4px;
transform: translate(-50%, -50%) rotate(-45deg);
}
.footer {
text-align: center;
margin-top: auto;
padding-top: 40px;
border-top: 1px solid #e8e2d4;
}
.footer-text {
font-family: 'Noto Sans SC', sans-serif;
font-size: 12px;
color: #999;
font-weight: 300;
}
.side-decoration {
position: absolute;
left: 30px;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 300px;
background: linear-gradient(180deg, transparent, rgba(212, 175, 55, 0.6), transparent);
border-radius: 2px;
}
.number-accent {
position: absolute;
top: 120px;
left: 80px;
font-family: 'Noto Sans SC', sans-serif;
font-size: 120px;
font-weight: 100;
color: rgba(212, 175, 55, 0.08);
z-index: 1;
}
</style>
</head>
<body>
<div class="container">
<!-- 侧边装饰线 -->
<div class="side-decoration"></div>
<!-- 背景数字装饰 -->
<div class="number-accent">01</div>
<!-- 几何装饰元素 -->
<div class="geometric-accent"></div>
<!-- 页头区域 -->
<div class="header">
<h1 class="magazine-title">[页面标题]</h1>
</div>
<!-- 主内容区域 -->
<div class="main-content">
<!-- 引用文字区域 -->
<div class="quote-section">
<i class="fas fa-quote-left quote-icon"></i>
<div class="main-quote">
<span class="highlight-1">[第一段高亮文字]</span><br>
<span class="highlight-2">[第二段高亮文字]</span><br>
<span class="highlight-3">[第三段高亮文字]</span>
</div>
</div>
<!-- 装饰线 -->
<div class="decorative-line"></div>
<!-- 洞察框 -->
<div class="insight-box">
<div class="insight-title">
<i class="fas fa-lightbulb"></i>
[洞察标题]
</div>
<div class="insight-text">
[详细说明文字]
</div>
</div>
</div>
<!-- 页脚区域 -->
<div class="footer">
<div class="footer-text">
<i class="fas fa-star"></i>
[页脚文字]
<i class="fas fa-star"></i>
</div>
</div>
</div>
</body>
</html>
Agent
