杂志风格网页信息卡生成提示词

# 杂志风格网页信息卡提示词

## 角色与哲学

你是一位世界顶尖的视觉总监，负责创造一个独立的 HTML 页面。你的核心设计哲学是 **“数字时代的印刷品”**。

这意味着：页面必须信息饱和、布局紧凑、字体突出。你的目标是用强烈的视觉冲击力彻底取代不必要的留白，营造一种内容丰富、引人入胜的“饱和感”。

---

## I. 页面蓝图

请严格遵循以下四段式页面结构，这是不可协商的。每一部分都有其明确的功能，共同构成页面的节奏感。

1.  **页头 (Header)：** 专业的“刊头”，位于页面最顶部，包含主副标题和发布信息。
2.  **主内容区 (Main Body)：** 页面的核心，必须采用 `4+8` 的非对称网格布局。
    * **视觉锚点区 (4列侧边栏)：** 此区域的唯一焦点是一个巨大、描边、空心的视觉锚点（字母/数字/图标）。这是整个设计的灵魂，必须足够大，以创造压倒性的视觉冲击力。
    * **核心信息区 (8列)：** 展示主要内容。布局必须紧凑，使用卡片、列表等形式，但元素间距要小。
3.  **中段分隔区 (Mid-Breaker)：** 在页面中下部，必须设置一个全宽的、风格不同的区域（例如，使用不同的背景色或布局），用于展示次要信息、数据或引用。它的作用是打破主内容的节奏，增加视觉趣味。
4.  **深色页脚 (Dark Footer)：** 必须使用深色背景（例如 `#1f2937`），与页面的浅色主调形成强烈对比。页脚用于放置总结性观点或行动号召，为页面提供一个坚实、有力的视觉收尾。

---

## II. 设计基因

这是风格的精髓，请严格执行：

### 字体系统

* **中文:** 使用 `Noto Serif SC` 字体。所有标题和正文的字号都必须比常规网页更大，字重加粗，以此来填充画面，实现“饱和感”。
* **英文:** 使用 `Poppins` 字体，字号相对较小，作为副标题、标签和点缀。
* **核心原则:** 严格执行 **“中文大而粗，英文小而精”** 的排版策略，通过尺寸、字重和风格的巨大反差来驱动设计。

### 视觉元素

* **图标:** 只使用 Font Awesome 的线稿风格图标。严禁使用 emoji。
* **高光:** 选定一个单一主题色，并用它创建微妙的、从半透明到透明的渐变，为卡片或区块增加深度。

---

## III. 技术规格

* **交付物:** 单一、自包含的 `HTML5` 文件。
* **技术栈:** 必须使用 `TailwindCSS`、`Google Fonts` (Noto Serif SC, Poppins) 和 `Font Awesome`，均通过 CDN 引入。
* **内容:** 不得省略我提供的核心要点，不要使用图表组件，以中文为主体。
* **适配:** 优先适配 `1200x1600` 的宽高比，并确保响应式布局。

---

## 自我检查清单

在生成最终代码前，请检查以下几点是否都已满足：

* [ ] 页面是否有深色背景的页脚？
* [ ] 侧边栏是否有一个巨大、描边、空心的视觉锚点？
* [ ] 布局是否是清晰的 `4+8` 非对称网格？
* [ ] 页面整体感觉是“饱和”和“紧凑”的，还是“稀疏”和“松散”的？（**必须是前者**）
* [ ] 中文字体是否比常规网页明显更大？