design-system

设计系统 + 品牌手册生成器

为 Claude 提供参考资料（网站 URL、截图或现有品牌素材），它会生成两个与该品牌风格一致的文件：

1. design-system.html — 可滚动的参考页面，涵盖颜色、排版、原则、组件、图标和字标。
2. brand-book-a4.html → brand-book-a4.pdf — 单页 A4 纵向页面，将品牌核心信息排在一张便于分享、可直接打印的海报上。

两个输出文件都是独立的 HTML（Google Fonts CDN + 内联 CSS + 内联 SVG，无需构建步骤）。PDF 通过无头 Edge/Chrome 渲染。

此技能不对字体、颜色或主题做任何预设。 所有内容都来自用户提供的参考资料。如果没有参考资料，请先询问，不要自行编造。

---

工作流

1. 获取参考资料。 URL、截图、现有网站，或品牌描述。如果用户尚未提供，请先询问。
2. 提取信息。 如果是 URL → 使用 WebFetch 获取并检查 HTML/CSS。如果是截图 → 使用 Read 查看并识别颜色和字体。提取以下内容：
   • 十六进制颜色值（品牌实际使用的主色、辅助色和任何强调色）
   • 字体（检查 <link> 标签、CSS font-family 声明，或通过视觉识别）
   • 标语 / 价值主张
   • 有据可查的设计原则
   • Logo / 标志（如果参考资料中有，提取为内联 SVG）
   • 主题方向（浅色 / 深色 / 使用了哪些表面样式）
3. 确认提取结果。 简短列出找到的信息。只询问缺失部分。
4. 将两个文件生成到 design/ 文件夹中。
5. 通过无头 Edge/Chrome 渲染 PDF。
6. 展示给用户。 发送 PDF 和 design-system.html。
7. 根据反馈迭代。

---

需要询问的内容（仅限无法提取的信息）

• 品牌名称 — 单个品牌或品牌系列（母品牌 + 产品 + 工作室）
• 标语 — 一句简短的话
• 设计原则 — 4–6 条设计规则（如果品牌未发布任何原则，则省略此部分，不要自行编造）
• 团队或产品系列（可选）— 4–8 项，每项包含一种颜色和对应角色
• 参考资料中看不到的颜色 / 字体

绝不要编造品牌信息。 颜色、字体、名称、标语、Logo 和设计原则都必须来自用户或参考资料。如果某个部分没有来源材料，就省略，不要用虚构内容填充。

绝不要重绘 Logo。 使用参考资料中的原始 SVG。如果 Logo 是光栅图像，请向用户索取 SVG，或留空并注明。

---

输出 1：design-system.html（可滚动的参考页面）

按以下顺序排列各部分（没有来源材料的部分予以省略）：

1. 页眉 — 品牌组合标识 + 标语 + 版本/日期
2. 颜色层级 — 品牌实际使用的主色、辅助色、三级色，附十六进制颜色值 + 用途说明
3. 扩展色板 — 其他品牌颜色（状态、类别等）
4. 排版 — 使用品牌实际字体的展示字体、正文字体、等宽字体示例；字重阶梯
5. 设计原则 — 品牌记录的原则
6. 组件 — 符合品牌风格的按钮、卡片、徽章
7. 图标 — 品牌采用的图标风格（内联 SVG、像素艺术、线框、填充等）
8. 字标 / 组合标识 — 基于品牌标志 + 字标的 2–3 种名称样式
9. 页脚 — 文件路径、版本、任何交叉引用说明

匹配品牌的表面样式（浅色与深色）、圆角、边框处理方式和字体层级。如果品牌风格圆润柔和，不要默认使用锐利风格。如果品牌风格繁复大胆，不要将其简化为极简风格。

---

输出 2：brand-book-a4.html → brand-book-a4.pdf

单页 A4 纵向页面（210mm × 297mm）——一眼呈现品牌核心信息。

必需的打印 CSS

@page { size: A4; margin: 0; }
* { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.page { width: 210mm; height: 297mm; padding: 18mm 16mm 14mm; }

布局（从上到下，单页 A4）

1. 页眉 — 左侧为品牌标识组合，右侧为版本 + 标语
2. 颜色层级 — 3 个色板块（主色 / 次色 / 第三色），使用品牌的实际颜色
3. 中间双栏 — 字体卡片（品牌字体）+ 原则卡片（品牌已记录的原则）
4. 团队 / 产品行（可选）— 如果品牌有产品系列，则放置 6 个小卡片
5. 文字标识 · 组合标识 — 3 个展示名称样式的卡片
6. 页脚 — 文件路径 + 交叉引用说明

渲染为 PDF

Windows（Edge）：

"/c/Program Files (x86)/Microsoft/Edge/Application/msedge.exe" \
  --headless --disable-gpu --no-pdf-header-footer \
  --print-to-pdf="brand-book-a4.pdf" \
  "file:///absolute/path/to/brand-book-a4.html"

macOS（Chrome）：

"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \
  --headless --disable-gpu --no-pdf-header-footer \
  --print-to-pdf="brand-book-a4.pdf" \
  "file://$PWD/brand-book-a4.html"

Linux（Chromium）：

chromium --headless --disable-gpu --no-pdf-header-footer \
  --print-to-pdf="brand-book-a4.pdf" \
  "file://$PWD/brand-book-a4.html"

---

文字标识样式

可提供的 3 种组合标识样式（根据品牌调性调整）：

1. 图标 + 文字标识 — 图标置于品牌名称旁边。字重 / 字距与品牌自身的文字标识一致。
2. 分字重组合标识 — PART1PART2，其中一半为粗体，另一半为细体。适用于伞形品牌 / 集团名称。
3. 强调色组合标识 — PART1PART2，其中一半使用品牌主色。适用于工作室 / 子品牌。

仅包含适合该品牌的组合标识变体。单词品牌无需采用分字重样式。

---

骨架模板

参见 examples/template.html，其中包含带占位符标记（{{PRIMARY}}、{{DISPLAY_FONT}} 等）的结构骨架。复制该模板，将标记替换为提取的信息，并根据品牌增删版块。

---

规则

• 先提取，再询问。 参考资料中能预填的内容尽量预填。
• 绝不编造品牌信息。 不得虚构颜色、字体、名称、标语、原则或徽标。
• 绝不重绘徽标。 使用用户提供的原始 SVG。
• 删除无法查证的版块。 跳过版块也好过填入虚构信息。
• 贴合品牌，而非强加风格。 模板只规定结构；视觉语言应源自参考资料。
• 适配单页 A4。 如果内容溢出，请缩小内边距或删除一个版块。
• HTML 自包含。 使用 Google Fonts CDN + 内联 CSS + 内联 SVG，无需构建步骤。
• 渲染 PDF。 不要只交付 HTML；使用无头 Edge/Chrome 完成整个任务。