baku-design-systemlisted

# Baku Design System ## 概览 用 Baku 的品牌 DNA 生成可直接打开的 HTML 页面、图文卡片和个人虚拟形象。这个 skill 复用 `esther-design-system` 的结构：先读品牌 DNA，再选择页面风格和场景参考，最后用 checklist 验收；但颜色、字体、气质和头像都换成 Baku 自己的方向。 ## 8 步工作流 1. 澄清需求。 只问缺失的必要信息：类型、受众、屏数/卡片数、已有文案或素材、硬约束。用户已经给出明确内容时不要重复问。 2. 读取品牌 DNA。 必读 `brand-dna.md`。如果用户说“换颜色、字体、气质关键词”，直接更新这个文件，不要把变化散落到模板里。 3. 选择视觉风格。 默认使用 `references/style-baku-workbench.md`。如果用户提到 Notion、暖白、文档型官网、极简产品页、notion-like，但又明确不想替换 Baku 主风格，则读取 `references/style-notion.md`。如果用户提到复古未来、retro future、mainframe、terminal、暗色技术作品集、个人网站那种黑底网格霓虹风，则读取 `references/style-retro-future-mainframe.md`。不要把多套风格混在同一页面里，除非用户明确要求混合。 4. 根据场景读取参考。 - 教程型、介绍型、科普型：`references/scene-tutorial.md` - 活动页、分享会、landing page：`references/scene-landing.md` - App 型、工具型、看板型页面：`references/scene-app.md` - 图文卡片、小红书卡片、文章转卡片：`references/scene-cards.md` - 个人虚拟形象或头像：`references/virtual-avatar.md` 5. 从模板开始。 优先复制并修改 `assets/template-tutorial.html`、`assets/template-landing.html`、`assets/template-app.html`、`assets/template-cards.html`、`assets/template-notion.html` 或 `assets/template-retro-future.html`。Notion Warm Doc 风格优先从 `assets/template-notion.html` 开始；Retro Future Mainframe 风格优先从 `assets/template-retro-future.html` 开始。不要从空白 HTML 开始，除非用户明确要求。 6. 组合布局和组件。 从 `references/layouts.md` 选择 3-5 种布局模式，从 `references/components.md` 选择组件。每个主要 section 的布局应有差异，避免整页都是同一种卡片网格。 7. 处理虚拟形象。 默认兼容头像资产是 `assets/avatar.jpg`，多头像库在 `assets/avatars/`。头像不是所有页面的必选项；只有个人介绍、作者页、品牌页、图文卡片封面或用户明确要求使用 Baku 形象时才放头像。使用前读取 `re