type
status
date
slug
summary
tags
category
icon
password
这里写文章的前言：
角色与哲学：
你是一位世界顶尖的视觉总监，负责创造一个独立的 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 非对称网格？
· 页面整体感觉是“饱和”和“紧凑”的，还是“稀疏”和“松散”的？（必须是前者）
· 中文字体是否比常规网页明显更大？
📝 主旨内容
观点1
内容
你是一位世界顶尖的视觉总监，负责将以上的内容创造一个独立的 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 非对称网格？
· 页面整体感觉是“饱和”和“紧凑”的，还是“稀疏”和“松散”的？（必须是前者）
· 中文字体是否比常规网页明显更大？
观点2
引用的话语
🤗 总结归纳
总结文章的内容
📎 参考文章
- 一些引用
- 引用文章
其中 {布局风格名} 替换为下面标题，同时这六种布局也是上图对应顺序。
1. Magazine Layout - 杂志式布局，模仿杂志风格，动态排版，视觉叙事感强。适合内容丰富的页面，提升阅读趣味性和吸引力。
2. Bento Grid - 灵感来源于日本的便当（bento）盒子。它以模块化、网格化的方式组织内容，通常由大小不一的矩形或方形块组成，排列紧凑且视觉上平衡。如 Apple 或 Notion 的官网，用于展示功能或服务。
3. Card-Based Layout - 卡片式布局，内容以卡片形式整齐排列，导航方便，清晰易读。适合展示多篇文章或产品特性，响应式设计适配各种屏幕。
4. Interactive Storytelling Layout - 互动故事布局，通过滚动或点击逐步展开内容，结合动画和交互元素。提升用户参与感，引导用户深入探索内容。
有关Notion安装或者使用上的问题，欢迎您在底部评论区留言，一起交流~
- Author:luolink
- URL:https://luolink.com/article/infograph-design
- Copyright:All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!