杂志海报 2.0

根据提示词以及代码模板将内容生成精美、杂志级品质的可视化网页。

熱

314 ユーザー非非著名程序员

指示

请按照这个JSON结构中的规范，使用我的HTML示例模板为[具体主题]生成内容页面：

{

"visual_design": {

"style": "Magazine Layout",

"theme": "浅色，类似发黄的信纸色",

"atmosphere": "现代高端氛围"

"typography": {

"core_highlight": "超大字体或数字突出核心要点",

"chinese": {

"size": "大号粗体",

"effect": "强调视觉冲击力"

"english": {

"size": "小号字体",

"role": "点缀",

"contrast": "与中文形成比例反差，提升设计层次感"

}

"visual_elements": {

"large_elements": "超大视觉元素（标题、背景图或装饰）突出重点",

"contrast": "与小型元素形成强烈对比",

"graphics": "简洁的勾线风格图形（用于数据可视化或配图），保持现代感和清晰度"

"colors_and_effects": {

"highlight": "高亮色（单色透明度渐变）营造科技感",

"usage_rule": "每种高亮色独立使用，避免不同高亮色之间的渐变混杂"

"technical_requirements": {

"icons": {

"library": ["Font Awesome", "Material Icons"],

"load_method": "CDN",

"note": "避免使用emoji作为主要图标"

}

"content": {

"requirement": "完整呈现所有内容要点，不省略任何信息",

"language": "中文为主展示"

"layout": {

"scrolling": "支持滚动"

}

HTML示例模板：

<!DOCTYPE html>

<head>

<title>{{PAGE_TITLE}}</title>

<style>

/* 标题字体：思源宋体（Noto Serif SC） */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700;900&display=swap');

/* 正文字体：霞鹜文楷（LXGW WenKai） */

@import url("https://cdn.jsdelivr.net/gh/lxgw/LxgwWenKai/Webfont/lxgwwenkai.css");

/* 英文字体：Inter（保留原设计） */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap');

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: "LXGW WenKai", serif;

font-weight: 400;

background: linear-gradient(135deg, #f9f6f0 0%, #f3ede1 100%);

color: #2c2419;

line-height: 1.6;

overflow-x: hidden;

}

.magazine-container {

width: 1400px;

min-height: 1800px;

margin: 0 auto;

padding: 60px;

background: #fbf8f2;

box-shadow: 0 20px 40px rgba(0,0,0,0.1);

position: relative;

}

.header {

text-align: center;

margin-bottom: 40px;

position: relative;

}

.main-title {

font-size: 96px;

font-family: 'Noto Serif SC', serif;

font-weight: 900;

color: #1a1611;

margin-bottom: 15px;

letter-spacing: -2px;

text-shadow: 2px 2px 0px rgba(255,165,0,0.3);

}

.subtitle {

font-family: 'Inter', sans-serif;

font-weight: 300;

letter-spacing: 3px;

font-size: 22px;

color: #8b7355;

text-transform: uppercase;

}

.quote-mark {

position: absolute;

font-size: 200px;

color: rgba(255,165,0,0.15);

top: -80px;

left: -40px;

font-family: serif;

}

/* 双栏布局 */

.content-grid {

display: grid;

grid-template-columns: 1fr 2fr;

gap: 40px;

margin-bottom: 30px;

}

/* 观察框/侧边栏样式 */

.observation-box {

font-size: 36px;

background: linear-gradient(135deg, rgba(255,165,0,0.1) 0%, rgba(255,140,0,0.05) 100%);

padding: 30px;

border-left: 6px solid #ff8c00;

border-radius: 0 10px 10px 0;

}

.observation-title {

font-family: 'Noto Serif SC', serif;

font-size: 40px;

font-weight: 700;

color: #d2691e;

margin-bottom: 15px;

display: flex;

align-items: center;

gap: 10px;

}

/* 主要内容区域 */

.main-content {

font-size: 36px;

line-height: 1.8;

}

/* 高亮区域样式 */

.highlight-section {

background: linear-gradient(135deg, rgba(70,130,180,0.1) 0%, rgba(100,149,237,0.05) 100%);

padding: 25px;

margin: 25px 0;

border-radius: 10px;

border-left: 4px solid #4682b4;

}

/* 三栏卡片布局 */

.three-column-cards {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 20px;

margin: 30px 0;

}

.card {

background: white;

padding: 20px;

border-radius: 10px;

text-align: center;

box-shadow: 0 5px 15px rgba(0,0,0,0.08);

border-top: 4px solid #ff6b6b;

transition: transform 0.3s ease;

}

.card:hover {

transform: translateY(-5px);

}

.card-number {

font-size: 70px;

font-weight: 900;

color: #ff6b6b;

margin-bottom: 10px;

opacity: 0.8;

}

.card-title {

font-size: 36px;

font-weight: 700;

margin-bottom: 8px;

color: #333;

}

.card-desc {

font-size: 30px;

color: #666;

line-height: 1.5;

}

/* 统计数据展示 */

.stats-section {

display: flex;

justify-content: space-between;

margin: 30px 0;

background: white;

padding: 25px;

border-radius: 15px;

box-shadow: 0 8px 25px rgba(0,0,0,0.06);

}

.stat-item {

text-align: center;

flex: 1;

}

.stat-number {

font-size: 70px;

font-weight: 900;

color: #e74c3c;

display: block;

}

.stat-label {

font-family: 'Inter', sans-serif;

font-size: 30px;

color: #7f8c8d;

text-transform: uppercase;

letter-spacing: 1px;

}

/* 特殊高亮框（紫色主题） */

.special-highlight {

background: linear-gradient(135deg, rgba(138,43,226,0.1) 0%, rgba(147,112,219,0.05) 100%);

padding: 20px;

border-radius: 10px;

margin: 20px 0;

border: 2px dashed #9370db;

}

/* 绿色主题高亮框 */

.green-highlight {

background: linear-gradient(135deg, rgba(46,204,113,0.1) 0%, rgba(39,174,96,0.05) 100%);

padding: 20px;

border-radius: 10px;

margin: 20px 0;

border-left: 4px solid #27ae60;

}

/* 红色主题高亮框 */

.red-highlight {

background: linear-gradient(135deg, rgba(231,76,60,0.1) 0%, rgba(192,57,43,0.05) 100%);

padding: 20px;

border-radius: 10px;

margin: 20px 0;

border-left: 4px solid #e74c3c;

}

/* 结论区域 */

.conclusion {

background: #2c3e50;

color: white;

padding: 30px;

border-radius: 15px;

margin-top: 30px;

text-align: center;

}

.conclusion-text {

font-size: 40px;

font-weight: 700;

margin-bottom: 10px;

}

.conclusion-subtitle {

font-family: 'Inter', sans-serif;

font-size: 36px;

opacity: 0.8;

}

/* 通用样式 */

.icon {

margin-right: 8px;

}

.decorative-line {

height: 2px;

background: linear-gradient(90deg, transparent 0%, #ddd 50%, transparent 100%);

margin: 20px 0;

}

strong {

color: #d2691e;

font-weight: 700;

}

.pattern-bg {

position: absolute;

top: 0;

right: 0;

width: 300px;

height: 300px;

background: radial-gradient(circle, rgba(255,165,0,0.05) 0%, transparent 70%);

pointer-events: none;

}

/* 两栏等宽布局 */

.two-column-equal {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 30px;

margin: 30px 0;

}

/* 四栏布局 */

.four-column-cards {

display: grid;

grid-template-columns: repeat(4, 1fr);

gap: 15px;

margin: 30px 0;

}

/* 全宽内容区域 */

.full-width-content {

margin: 30px 0;

padding: 20px;

background: rgba(255,255,255,0.5);

border-radius: 10px;

}

/* 引用样式 */

.quote-section {

font-size: 40px;

font-style: italic;

text-align: center;

padding: 30px;

margin: 30px 0;

background: linear-gradient(135deg, rgba(52,73,94,0.1) 0%, rgba(44,62,80,0.05) 100%);

border-radius: 15px;

position: relative;

}

.quote-section::before {

content: '"';

font-size: 100px;

color: rgba(52,73,94,0.2);

position: absolute;

top: -20px;

left: 20px;

}

/* 时间轴样式 */

.timeline {

position: relative;

padding: 20px 0;

margin: 30px 0;

}

.timeline::before {

content: '';

position: absolute;

left: 50%;

top: 0;

bottom: 0;

width: 2px;

background: #ddd;

transform: translateX(-50%);

}

.timeline-item {

margin: 20px 0;

position: relative;

}

.timeline-item:nth-child(odd) {

text-align: right;

padding-right: 60%;

}

.timeline-item:nth-child(even) {

text-align: left;

padding-left: 60%;

}

.timeline-item::after {

content: '';

position: absolute;

top: 50%;

width: 12px;

height: 12px;

background: #ff6b6b;

border-radius: 50%;

transform: translateY(-50%);

}

.timeline-item:nth-child(odd)::after {

right: calc(40% - 6px);

}

.timeline-item:nth-child(even)::after {

left: calc(40% - 6px);

}

</style>

</head>

<body>

<h1 class="main-title">{{MAIN_TITLE}}</h1>

<p class="subtitle">{{SUBTITLE}}</p>

</div>

</h2>

<p>{{SIDEBAR_CONTENT}}</p>

</div>

<p>{{INTRO_PARAGRAPH}}</p>

<strong>{{HIGHLIGHT_LABEL}}：</strong>{{HIGHLIGHT_CONTENT}}

</div>

<div class="card-number">{{CARD1_NUMBER}}</div>

<div class="card-title">{{CARD1_TITLE}}</div>

</div>

<div class="card-number">{{CARD2_NUMBER}}</div>

<div class="card-title">{{CARD2_TITLE}}</div>

</div>

<div class="card-number">{{CARD3_NUMBER}}</div>

<div class="card-title">{{CARD3_TITLE}}</div>

</div>

<span class="stat-number">{{STAT1_NUMBER}}</span>

<span class="stat-label">{{STAT1_LABEL}}</span>

</div>

<span class="stat-number">{{STAT2_NUMBER}}</span>

<span class="stat-label">{{STAT2_LABEL}}</span>

</div>

<span class="stat-number">{{STAT3_NUMBER}}</span>

<span class="stat-label">{{STAT3_LABEL}}</span>

</div>

<p>{{MAIN_PARAGRAPH_1}}</p>

<p>{{MAIN_PARAGRAPH_2}}</p>

<p><i class="fas fa-star icon"></i><strong>{{SPECIAL_HIGHLIGHT_TITLE}}：</strong>{{SPECIAL_HIGHLIGHT_CONTENT}}</p>

</div>

<p>{{MAIN_PARAGRAPH_3}}</p>

<p>{{MAIN_PARAGRAPH_4}}</p>

</div>

</div>

<div class="conclusion-subtitle">{{CONCLUSION_SUBTITLE}}</div>

</div>

<!--

可选的其他布局组件示例：

1. 两栏等宽布局：

</div>

2. 四栏布局：

</div>

3. 引用样式：

重要的引用内容

</div>

4. 不同颜色的高亮框：

<div class="green-highlight">绿色主题内容</div>

<div class="red-highlight">红色主题内容</div>

5. 全宽内容区域：

全宽显示的内容

</div>

6. 时间轴：

</div>

-->

</body>

</html>

Agent

Webページを作成

Gemini 3 Pro

AIツール

Nano Banana Pro Prompts GPT Image 1.5 プロンプト Seedream 4.5 Prompts Gemini 3 Pro Prompts

ブログ

NotebookLMの代替案

製品

ユースケースショートカット料金

会社

お問い合わせ

プライバシーポリシー利用規約