一套给 AI 看的个人品牌设计系统。
把审美写成操作手册，AI 每次帮你做页面时必须翻这本手册，不能自由发挥。限制 AI 的自由度 = 保证输出质量。
⚠️ 使用前请先完成brand-dna.md的配置： 默认品牌色可直接使用，如需替换成你自己的请同步修改模板变量；并放入你自己的头像。
用这套系统生成的真实页面：
信息清晰、步骤明确、有节奏的单页科普/教程。
🔗 在线预览
把审美写成操作手册——从纠正AI到做出自己的Design Skill的完整过程。
🔗 在线预览
视觉冲击、深浅面板交替、强节奏感的活动邀请页。
🔗 在线预览
功能优先、交互感、信息密度高的应用型页面。
🔗 在线预览
3:4 比例、字大、手机可读、一键导出 PNG 的图文卡片。
🔗 在线预览
杂志编号风：全内联样式 + section 标签，复制粘贴进微信公众号编辑器即可。
🔗 在线预览
16种经过验证的布局模式一览。
🔗 在线预览
51个经过验证的可复用组件。
🔗 组件库预览
SKILL.md(流程 - AI 按什么步骤干活)
↓
brand-dna.md + references/*(规范 - 能用什么不能用什么)
↓
assets/template-*.html(起点 - 从模板改,不从零写)
- AI 不能随便发明布局 → 只能从 16 种里选
- AI 不能随便用颜色 → 只能用你定义的品牌色 + 扩展规则
- AI 不能随便写样式 → 必须从组件库里选
- AI 做完要自检 → 对照 checklist 逐条过，P0 不过就打回
esther-design-system/
├── SKILL.md ← 7步工作流(大脑)
├── brand-dna.md ← 品牌基因:颜色/字体/气质/禁忌(需配置)
├── assets/ ← 模板骨架(起点)
│ ├── template-tutorial.html 教程页模板
│ ├── template-landing.html 活动页模板
│ ├── template-app.html App型模板
│ ├── template-cards.html 小红书卡片模板
│ ├── html2canvas.min.js 卡片导出依赖
│ ├── avatar-placeholder.svg 占位头像(可替换为你自己的 avatar.jpg)
│ └── avatar.jpg ← 你的头像(需自行放入,仓库未附带)
└── references/ ← 规则和零件(知识库)
├── layouts.md 16种布局模式(附完整代码)
├── components.md 组件库(51组件,完整HTML+CSS)
├── checklist.md 质量检查清单(P0/P1/P2)
├── scene-tutorial.md 教程场景规范
├── scene-landing.md 活动页场景规范
├── scene-app.md App型场景规范
├── scene-cards.md 小红书卡片场景规范
└── scene-wechat.md 公众号排版场景规范
AI 每次做设计必须按这个顺序走：
| # | 做什么 | 为什么 |
|---|---|---|
| 1 | 问 5 个问题(类型/受众/几屏/素材/约束)。类型含：教程/活动页/App/卡片/公众号 | 不自作主张 |
| 2 | 读 brand-dna + 对应场景文件 | 先学规矩再动手 |
| 3 | 从 assets/ 复制对应模板 | 从半成品开始，不从零写 |
| 4 | 从 layouts.md 选 3-5 种布局 | 每个 section 不能一样 |
| 5 | 从 components.md 选组件 | 禁止用 HTML 默认样式 |
| 6 | 对照 checklist 自检 | P0 不过就打回 |
| 7 | 交付 HTML 文件 | 浏览器打开就能看 |
| 颜色 | 色值 | 比例 |
|---|---|---|
| 主色 | #2B7FD8 |
60% |
| 强调色 | #F4D758 |
30% |
| 点缀色 | #E84A5F |
10% |
| 用途 | 字体 |
|---|---|
| 中文标题 | 汇文明朝体 / Noto Serif SC |
| 中文正文 | Noto Sans SC |
| 英文装饰 | Fraunces italic |
| 手写/注释 | Caveat |
| 代码/终端 | Fira Code |
可爱但有品质 · 手绘蜡笔感 · 有温度 · 不像 AI · 一看就是你的
蓝紫渐变 · glassmorphism · neon · bounce 动画 · Inter/Roboto · 所有 section 居中 · HTML 默认样式 · 看起来像 AI 生成的通用模板
P0(必须全过)
品牌三色比例 · 无禁忌元素 · 无 HTML 默认样式 · 暖底背景 · 衬线+无衬线混搭 · 响应式 · 每 section 布局不同 · clamp() fluid sizing · 截图发社交媒体不会被说"又是 AI 做的"
P1(应过)
至少一个视觉惊喜 section · 字号对比极端 · Scroll Reveal 动效 · 大装饰数字/英文
P2(加分)
图片溢出容器 · 深色面板打破节奏 · 装饰元素克制 · prefers-reduced-motion
- Fork 或克隆本仓库
- 放入你的头像
assets/avatar.jpg - （可选）打开
brand-dna.md，把默认品牌色替换成你自己的，并同步修改assets/template-*.html里:root的变量。注意：公众号模板（template-wechat.html）全部是内联样式，没有 CSS 变量，需要手动搜索替换色值。快捷方法：在所有模板文件中搜索#2B7FD8替换为你的主色，#F4D758替换为你的强调色，#E84A5F替换为你的点缀色 - 把
assets/template-cards.html中的作者名替换成你自己的 - 把仓库链接发给你的 AI Agent，跟它说：
帮我读这个设计系统，以后做页面按这个规范来。
核心不是这些文件本身，是你的审美判断力。文件只是把你的判断写成了 AI 能执行的规则。
- 方法论灵感来源于 归藏 的 PPT Skill——“限制AI的自由度 = 保证输出质量”这个核心思路参考了他的设计
- Built with Cola — the first OS with a soul
本仓库采用 CC BY-NC-SA 4.0 协议。
- ✅ 可自由使用、修改、分享
- ✅ 必须署名：ESTHER不二 (esthersjw)
- ❌ 禁止商用
- 🔄 修改后必须以相同协议分享