这是什么
esther-design-system 是一套给 AI 看的个人品牌设计系统，由小红书博主 ESTHER不二（GitHub 用户 esthersjw）开源。它把审美判断写成 AI 能执行的操作手册：AI 每次帮你做页面时，必须按照这套系统里的品牌 DNA、布局模式、组件库和质量检查清单来工作，不能自由发挥。核心思路是“限制 AI 的自由度 = 保证输出质量”。
目前该仓库在 GitHub 上已获得 506 颗星、197 次 Fork，且没有未解决的 Issue，说明这套方法论受到不少创作者认可。
适合谁
适合以下人群：
- 想建立个人品牌、但不想每次做图都跟 AI 反复拉扯的创作者；
- 需要批量产出教程页、活动页、小红书图文卡片、公众号排版的运营者；
- 希望 AI 生成页面时保持统一视觉风格、不出现“AI 味”的设计师或博主；
- 对前端不熟悉，但愿意通过模板和规则让 AI 代劳的非技术用户。
能做什么
这套系统覆盖了多种常见页面场景，AI 可以根据你的需求生成：
- 教程型 / 介绍型 / 科普型单页；
- 活动页 / Landing Page；
- App 型 / 功能型页面（看板、书架、Canvas 等）；
- 小红书图文卡片（3:4 比例，一键导出 PNG）；
- 公众号排版（全内联样式，可直接粘贴进公众号编辑器）。
仓库内置了 16 种经过验证的布局模式、51 个可复用组件，以及 5 个场景子规范。AI 做设计时必须从模板开始改，从布局库中选 3-5 种布局，从组件库中选组件，最后对照质量清单自检。
使用前准备
在把仓库交给 AI 之前，你需要完成两件事：
- 准备一张自己的头像图片，放入
assets/avatar.jpg（仓库未附带头像，需要自行放入）； - （可选）打开
brand-dna.md，把默认品牌色替换成你自己的，并同步修改assets/template-*.html中:root的变量。默认品牌色为：主色 #2B7FD8（60%）、强调色 #F4D758（30%）、点缀色 #E84A5F（10%）。
如果你不想自定义，也可以直接使用默认配色，但记得把模板中的作者名替换成你自己的。
使用示例
获取仓库后，把仓库链接发给你的 AI Agent，并告诉它：
帮我读这个设计系统，以后做页面按这个规范来。
AI 会按照 SKILL.md 中的 7 步工作流执行：
- 先问你 5 个问题（类型、受众、Section 数、素材、硬约束）；
- 读取
brand-dna.md和对应场景文件； - 从
assets/复制对应模板； - 从
layouts.md选 3-5 种布局； - 从
components.md选组件； - 对照
checklist.md自检； - 交付 HTML 文件。
仓库还提供了多个真实 Demo 页面，你可以直接在线预览效果：
风险与注意事项
这个仓库采用 CC BY-NC-SA 4.0 协议，使用时有几个重要限制：
- 可以学习、使用、修改和分享方法论与设计内容，但必须注明来源：ESTHER不二 / esther-design-system；
- 禁止将仓库内容用于商业用途；
- 修改后必须以相同协议分享；
- 仓库开源的是方法论，不是作者的身份。你不能使用 ESTHER不二、Esther、不二、esthersjw 的姓名、头像、IP 形象、Logo、品牌标识或本人形象进行创作、运营、发布或商业合作；
- 使用这套系统时，请替换为你自己的姓名、头像、IP 和品牌信息，避免让人误以为账号或作品由原作者制作、授权或背书。
另外，虽然仓库没有在 GitHub 的 License 字段中标注，但 README 明确声明了上述协议，请务必遵守。