Personal Design Skill

一套给 AI 看的个人品牌设计系统。把审美写成操作手册，AI 每次帮你做页面时必须翻这本手册，不能自由发挥。限制 AI 的自由度 = 保证输出质量。

⚠️ 使用前请先完成 brand-dna.md 的配置： 默认品牌色可直接使用，如需替换成你自己的请同步修改模板变量；并放入你自己的头像。

适用场景

• 教程型页面（分享会、科普）
• 活动邀请页 / Landing Page
• App 功能型页面
• 小红书图文卡片（3:4 比例）
• 公众号排版（杂志编号风）
• 布局模式探索与组件库预览

效果预览

以下是用这套系统生成的真实页面，可直接在线查看：

• 教程型 - 分享会页面：在线预览
• 教程型 - Design Skill 拆解：在线预览
• 活动页 / Landing：在线预览
• App 型 / 功能型：在线预览
• 小红书图文卡片：在线预览
• 公众号排版：在线预览
• 布局 Playground（16 种布局模式）：在线预览
• 组件库全览（51 个组件）：在线预览

核心能力

• 预设布局模式：AI 只能从 16 种经过验证的布局模式中选择，不能自由发明布局。
• 组件库：51 个可复用组件，禁止使用 HTML 默认样式。
• 品牌色与字体规范：定义主色、强调色、点缀色及字体组合，AI 必须严格遵守。
• 质量检查清单：P0（必须全部通过）、P1（应过）、P2（加分），确保输出符合品牌调性。
• 7 步工作流：从询问需求到交付 HTML，每一步都有明确规范。

工作方式

1. 用户提供：
   • 品牌基因配置（brand-dna.md），包括颜色、字体、气质关键词、禁忌等。
   • 头像图片（放入 assets/avatar.jpg）。
   • 可选：替换模板中的作者名，同步修改颜色变量。
2. AI 处理：
   • 按 7 步工作流执行：
     1. 询问 5 个问题（类型、受众、几屏、素材、约束）。
     2. 读取 brand-dna.md 和对应场景规范文件。
     3. 从 assets/ 复制对应模板。
     4. 从 layouts.md 选择 3-5 种布局（每个 section 不能相同）。
     5. 从 components.md 选择组件。
     6. 对照 checklist.md 自检，P0 不通过则打回。
     7. 输出 HTML 文件。
3. 用户获得：
   • 一个可直接在浏览器中打开查看的 HTML 文件，符合品牌风格。

你需要提供

以下配置是使用前的必要步骤：

1. 配置 brand-dna.md：
   • 默认品牌色（主色 #2B7FD8、强调色 #F4D758、点缀色 #E84A5F）可直接使用，如需替换：
     • 同步修改 assets/template-*.html 中 :root 的变量。
     • 公众号模板（template-wechat.html）为内联样式，需手动搜索替换色值（快捷方法：在所有模板文件中搜索 #2B7FD8 替换为你的主色，#F4D758 替换为强调色，#E84A5F 替换为点缀色）。
2. 放入头像：将你的头像图片放入 assets/avatar.jpg。
3. 替换作者名：在 assets/template-cards.html 中替换作者名为你自己的。

你会获得

• 一个完整的 HTML 页面，无需额外配置即可在浏览器中打开。
• 页面严格遵循你的品牌规范：颜色、字体、布局、组件、气质。
• 支持多种类型：教程、活动页、App、小红书卡片、公众号排版。

使用示例

将配置好的仓库链接发给你的 AI Agent，并说：

帮我读这个设计系统，以后做页面按这个规范来。

AI 就会按照 7 步工作流和品牌规范生成页面。

注意事项

前置条件

• 必须完成 brand-dna.md 的配置（默认品牌色可直接使用，但建议替换为你的品牌色）。
• 必须放入你自己的头像（assets/avatar.jpg）。

限制

• AI 不能随便发明布局 → 只能从 16 种里选。
• AI 不能随便用颜色 → 只能用你定义的品牌色 + 扩展规则。
• AI 不能随便写样式 → 必须从组件库里选。
• AI 做完要自检 → 对照 checklist 逐条过，P0 不过就打回。

质量检查要求

P0（必须全部通过）：

• 品牌三色比例 · 无禁忌元素 · 无 HTML 默认样式 · 暖底背景 · 衬线+无衬线混搭 · 响应式 · 每 section 布局不同 · clamp() fluid sizing · 截图发社交媒体不会被说“又是 AI 做的”。

P1（应过）：

• 至少一个视觉惊喜 section · 字号对比极端 · Scroll Reveal 动效 · 大装饰数字/英文。

P2（加分）：

• 图片溢出容器 · 深色面板打破节奏 · 装饰元素克制 · prefers-reduced-motion。

禁忌

• 蓝紫渐变 · glassmorphism · neon · bounce 动画 · Inter/Roboto · 所有 section 居中 · HTML 默认样式 · 看起来像 AI 生成的通用模板。

许可证

本设计系统采用 CC BY-NC-SA 4.0 协议。

• ✅ 可自由使用、修改、分享
• ✅ 必须署名：ESTHER不二 (esthersjw)
• ❌ 禁止商用
• 🔄 修改后必须以相同协议分享