Design Ads - AI 知识海报设计器#

根据 references/design-system.md 中的完整设计规范，为用户生成专业级 AI 知识海报。

核心原则#

画布空间利用#

text

┌─ 1200px 宽 ─────────────────────────────┐
│120px│    960px 内容区 (必须充分利用)     │120px
│     │                                    │
│     │   封面：大字 + 留白 = 视觉冲击     │
│     │   内页：内容充实 + 排版整齐         │
│     │                                    │
│150px│                                    │150px
└─────┴────────────────────────────────────┘──
        ↑
    1800px 高，内容区 1500px

铁律：内容必须在 960x1500px 内容区内合理分布，不能集中在顶部一小块区域。

• 封面：用超大字号 + 合理留白撑满纵向空间，元素垂直均匀分布
• 内页：内容要充实，从标签区到底部分隔线之间填满，不留大块空白

封面 vs 内页的区别#

封面（3种）内页（3种）信息量精简 — 1个主标题+1行描述+图标/网格充实 — 标题+多段描述+列表/代码块字号策略超大标题占视觉主体（160-175px）标题大但内容更多（95-110px）目的吸引点击、传递核心概念展示详细信息、供阅读参考空间利用大字+留白营造高级感内容填满但排版整齐不拥挤移动端优化✅ 字号已增大 35-40% 以适配移动端观看✅ 字号已增大 35-40% 以适配移动端观看

多图拆分规则#

当内容在单张 1200x1800px 海报中放不下时， 必须拆成多张图：

• 每张图都有独立的完整结构（标签+标题+内容+分隔线）
• 多张图用序号区分： poster-01.png、 poster-02.png ...
• 拆分点以 逻辑单元 为准（如每个工具一张、每段 Prompt 一张）
• 向用户说明："内容较多，已生成 N 张海报"

工作流程#

第一步：理解需求#

向用户确认以下信息（如果用户未提供，主动询问）：

1. 主题内容 — 海报要表达的核心主题是什么？

2. 模板类型：

   • 封面-1 (cover-center): 居中图标型 — 合集/总览类
   • 封面-2 (cover-grid): 特性网格型 — 多要点/步骤类
   • 封面-3 (cover-list): 列表展示型 — 清单/教程类
   • 内页-1 (inner-tool): 工具详情型 — 单工具介绍
   • 内页-2 (inner-prompt): 提示词模板型 — Prompt/AI指令
   • 内页-3 (inner-persona): 人设系统型 — 角色设定

3. 主题色（可选）— 不指定则智能匹配

4. 具体内容 — 文字、列表、代码等

如果用户只给了模糊主题，智能推断并生成内容。

第二步：构建 HTML#

阅读 references/design-system.md 获取完整规范。

生成要求：

1. 严格遵循设计规范 中的数值
2. 画布: 1200x1800px，viewport meta 固定宽度
3. 字体: 标题用思源宋体 900 weight，正文用思源黑体
4. 图标: 内联 SVG
5. 渐变: CSS linear-gradient

写入临时文件： /tmp/design-ads-output.html

第三步：渲染为 PNG#

bash

node ~/.claude/skills/design-ads/scripts/render.js /tmp/design-ads-output.html <输出路径>.png

多张图时依次渲染。

自动复制功能：渲染完成后，HTML 源文件和 PNG 图片会自动复制到 下载目录 下的时间戳文件夹中：

text

~/Downloads/design-ads_2026-04-03_10-55-13/
├── design-ads-output-cover.html
├── poster-cover.png
├── design-ads-output-01.html
└── poster-01.png

第四步：交付结果#

1. 用 Read 工具打开图片让用户预览
2. 说明生成了几张图、每张的内容
3. 询问是否需要调整

内容生成指南#

封面类（精简信息 + 大字撑满空间）#

信息量控制：最多 3 个元素

• 主标题（1-2 行，超大字号 160-175px）
• 副描述（1 行或短段落，32-36px）
• 图标 / 网格卡片 / 列表项（三选一）

封面排版要点：

• 主标题字号要大到占据画布纵向 35-45% 的视觉比重
• 元素之间用充足留白分隔（不是空白，是有意的呼吸空间）
• 整体垂直居中偏上分布，底部留 10-15% 给分隔线
• 移动端优化：所有字号已增大 35-40%，确保在手机上清晰可读

内页类（内容充实 + 统一正文 + 标题突出）#

信息量：尽可能详细

• 工具名/章节名（超大标题 95-110px）
• 功能描述（2-4 句话，28-32px）
• 特性列表（3-6 项，每项可含简短说明）
• 代码/Prompt 块（如有，保留完整格式 26-28px）
• 适用场景（2-4 条）

内页排版要点：

• 标题区（标签+主标题+副标题）：占上部 25-30%
• 内容区（卡片/列表/代码块）：占中部 50-60%， 这是重点，要充实
• 底部：分隔线固定在距底 150px
• 正文统一用思源黑体 28-32px，不要混用多种正文字号
• 标题与正文的字号比至少 3:1 以上
• 移动端优化：所有字号已增大 35-40%，确保在手机上清晰可读

快速参考#

模板类型信息量关键元素cover-center封面精居中图标 + 超大标题(160-175px)cover-grid封面中Badge + 大标题(135-150px) + 2x2网格cover-list封面中Badge + 大标题(135-150px) + 列表卡片inner-tool内页充实标题(95-110px) + 描述 + GitHub卡inner-prompt内页充实标题(95-110px) + 代码块 + 标签inner-persona内页充实标题(95-110px) + 系统提示词 + 场景列表

移动端优化：所有字号已增大 35-40%，专为移动端观看优化

查看 assets/ 目录下的 6 张模板图片作为视觉参考。