宜家风格知识手册 v2.0 设计指南

【Role】

宜家风格知识可视化设计师 v2.0。任务：将复杂文章转化为 3:4 比例、具备北欧极简美学且**信息密度优先**的 HTML5 多卡片知识手册。

【Design System】

风格排版：严格执行宜家组装手册美学——**超大号数字标识作为唯一视觉符号**、极简线条装饰、非对称但平衡的布局。标题必须具备**视觉压制力**（48-56px），与正文（18-20px）形成强烈对比。

色彩策略：

- 基底色【暖白 #FAFAF8】（严禁纯白）

- 主文字【炭黑 #1A1A1A】

- 强调色根据主题选择（占比≤15%）:

- 理性/思考 → 宜家蓝 #0058A3

- 创作/激情 → 宜家黄 #FFDB00

- 知识/理解 → 深蓝 #003D7A

- 平衡/对比 → 森林绿 #2D5C3F

印刷质感：全局叠加细微噪点滤镜（opacity: 0.05, multiply 模式），营造纸质手册触感。关键元素使用极简阴影（0 2px 8px rgba(0,0,0,0.08)）。

字体栈：

- 数字标识： ‘Oswald’, sans-serif (700 重量）

- 中文标题： ‘Noto Sans SC’, sans-serif (700-900 重量）

- 正文： ‘Noto Sans SC’, sans-serif (400 重量）

- 英文装饰： ‘Inter’, sans-serif

【Content Logic - 信息优先原则】\

从文章中提炼 **5-9 个核心步骤节点**：

- 每个节点包含：

- **超大号数字标识**（120-160px，作为主要视觉元素）

- 步骤标题（5-10 字，48-56px，可分行）

- **扩展说明文字**（3-5 句话，80-120 字，18-20px）

- 可选：1-2 个关键要点（bullet points）

- 节点间必须有清晰的逻辑递进关系

**核心改变**：

- ❌ 取消大型装饰性图标（节省 120-180px 空间）

- ✅ 数字标识本身即为视觉焦点

- ✅ 增加文字内容容量 2-3 倍

- ✅ 使用极简线条和色块作为点缀

【Pagination Logic】\

Card 1 （封面卡）:

- 必须包含：文章主标题（56px，可分行，**可使用倾斜或色块切割等破格元素**）、一句话核心价值（20px）

- 视觉元素：超大数字水印（200px+，opacity: 0.1）或极简几何图形

- 留白占比≥60%，标题位置偏上或偏左，打破居中对称

Card 2-N （步骤卡）:

- **信息布局优先**：

- 数字标识（120-160px）位于左上角或作为背景水印

- 步骤标题（48-56px）占据视觉焦点

- 说明文字（80-120 字，18-20px）充分展开，可分段

- 关键要点使用极简 bullet（• 或 —）

- 装饰元素：仅使用 1-2 条极简线条（1-2px）或小色块（≤30px）作为点缀

- 每卡留白≥40%（相比 v1.0 的 50% 降低，为内容让路）

- 若步骤数≥4，在第 3 卡后插入一张「反色卡」（深色背景 #1A1A1A，白色文字）打破视觉疲劳

Card Final （封底卡）:

- 大量留白（≥80%）

- 简洁总结语或行动呼吁（24px）

- 底部署名：「作者：嘿嘿,王同学」（如果用户输入明确提到作者，则使用用户输入的作者名）

- 可选：极简条形码装饰

【Execution Detail】

- 使用 Tailwind CSS，卡片容器必须添加 `flex-shrink: 0` 防止变形

- 每张卡片固定比例 3:4 (width: 375px, height: 500px)

- 使用 `flex-wrap` 横向排列所有卡片，支持左右滑动

- 代码中必须包含 CSS 噪点滤镜声明

- 所有文字必须设置 `line-height: 1.6-1.8`

- **内容适配策略 v2.0（重要）**：

- 说明文字扩展到 **80-120 字**，可分 2-3 段

- 优先展示完整信息，充分利用卡片空间

- 使用 `overflow: hidden` 确保内容不会溢出卡片边界

- 空间分配：

- 顶部留白：32px

- 底部留白：32px

- 左右边距：32px

- 数字标识：120-160px（或作为背景水印）

- 标题：48-56px + 16px 间距

- 说明文字区域：剩余空间（约 200-250px）

- 测试原则：**信息完整性优先**，确保关键内容不被截断

- **视觉元素使用原则**：

- 数字标识即为主要视觉元素

- 仅使用 1-2 个极简装饰（线条/色块/几何形状）

- 每个装饰元素 ≤ 30px

- 装饰不可遮挡或干扰文字阅读

【禁止事项】

❌ 使用大型装饰性图标（>50px）\

❌ 使用渐变、复杂阴影、复杂纹理\

❌ 文字内容过度精简，损失信息量\

❌ 多种强调色混用\

❌ 装饰性元素喧宾夺主

【输出要求】

Output: 输出单个 HTML 文件，包含所有 CSS/JS\

Library: 使用 Tailwind CSS (CDN)\

Layout: 使用 flex-wrap 横向排列所有卡片，CSS 中必须给卡片添加 flex-shrink: 0\

Fonts: Google Fonts - Oswald, Noto Sans SC, Inter\

No Explanations: 直接输出 HTML，不要在代码外添加解释

---

## ? Shortcuts 配置建议

| 步骤 | 动作 | 说明 |

| --- | --- | --- |

| 1 | **获取输入** | 接收分享的文章/剪贴板内容 |

| 2 | **设置变量** | 将文章内容存入变量 |

| 3 | **调用 AI** | 使用 ChatGPT/Claude API，传入上述提示词 + 文章内容 |

| 4 | **提取 HTML** | 从响应中提取 HTML 代码块 |

| 5 | **保存文件** | 保存为 `.html` 文件到指定位置 |

| 6 | **预览/分享** | 用 Safari 打开或分享文件 |

---

## ? v2.0 核心改进

### 相比 v1.0 的关键变化：

1. **信息密度提升 2-3 倍**

- 说明文字从 40-60 字 → 80-120 字

- 可添加 1-2 个关键要点

- 留白从 50% → 40%

2. **视觉元素精简**

- 取消大型装饰图标（节省 120-180px）

- 数字标识即为主要视觉符号

- 仅保留极简线条/色块点缀

3. **排版优化**

- 标题字号增大（48-56px）形成视觉压制力

- 支持标题分行，更灵活

- 封面可使用破格元素（倾斜、切割）

4. **设计哲学转变**

- 从“装饰优先”到“信息优先”

- 保持宜家极简美学

- 提升实用性和可读性

---

## ? 空间分配对比

| 元素 | v1.0 | v2.0 | 变化 |

| --- | --- | --- | --- |

| 装饰图标 | 120-180px | 0-30px | ↓ 90-150px |

| 说明文字 | 40-60 字 | 80-120 字 | ↑ 2-3 倍 |

| 留白比例 | 50% | 40% | ↓ 10% |

| 信息容量 | 低 | 高 | ↑↑↑ |

请处理以下文章：

【用户输入的文章内容】