技能介绍
不二个人IP设计系统（esther-design-system）是一套给 AI 看的个人品牌设计系统，作者是自媒体人 / 设计师 esthersjw（ESTHER不二）。它的做法是把审美写成操作手册：AI 每次帮你做页面时必须翻这本手册，不能自由发挥——限制 AI 的自由度 = 保证输出质量。
它解决的是「AI 产出的页面总是千篇一律、不像自己的东西」这个问题。与其每次用语言描述风格偏好，不如提前把品牌色、字体、布局模式与组件库定死，让输出稳定落在自己的品牌调性里。
本设计系统采用 CC BY-NC-SA 4.0 协议：可自由使用、修改、分享；必须署名 ESTHER不二 (esthersjw)；禁止商用；修改后必须以相同协议分享。
适用场景
- 教程型页面（分享会、科普）
- 活动邀请页 / Landing Page
- App 功能型页面
- 小红书图文卡片（3:4 比例）
- 公众号排版（杂志编号风）
- 布局模式探索与组件库预览
核心能力
- 预设布局模式：AI 只能从 16 种经过验证的布局模式中选择，不能自由发明布局；一个页面里每个 section 的布局也不能相同，需从
layouts.md中挑选 3-5 种。 - 组件库：51 个可复用组件，禁止使用 HTML 默认样式。
- 品牌色与字体规范：定义主色、强调色、点缀色与字体组合，AI 必须严格遵守，配色比例也纳入检查项。
- 质量检查清单：分 P0（必须全部通过）、P1（应过）、P2（加分）三级，AI 完成后要逐条自检，P0 不通过就打回。
- 7 步工作流：从询问需求到交付 HTML，每一步都有明确规范。
质量检查的具体要求：
P0（必须全部通过）
- 品牌三色比例 · 无禁忌元素 · 无 HTML 默认样式 · 暖底背景 · 衬线+无衬线混搭 · 响应式 · 每 section 布局不同 ·
clamp()fluid sizing · 截图发社交媒体不会被说「又是 AI 做的」。
P1（应过）
- 至少一个视觉惊喜 section · 字号对比极端 · Scroll Reveal 动效 · 大装饰数字/英文。
P2（加分）
- 图片溢出容器 · 深色面板打破节奏 · 装饰元素克制 ·
prefers-reduced-motion。
明确禁忌：蓝紫渐变 · glassmorphism · neon · bounce 动画 · Inter/Roboto · 所有 section 居中 · HTML 默认样式 · 看起来像 AI 生成的通用模板。
效果预览
以下是用这套系统生成的真实页面，可直接在线查看：
- 教程型 - 分享会页面：在线预览
- 教程型 - Design Skill 拆解：在线预览
- 活动页 / Landing：在线预览
- App 型 / 功能型：在线预览
- 小红书图文卡片：在线预览
- 公众号排版：在线预览
- 布局 Playground（16 种布局模式）：在线预览
- 组件库全览（51 个组件）：在线预览
工作方式
AI 端按固定的 7 步工作流执行：
- 询问 5 个问题（类型、受众、几屏、素材、约束）。
- 读取
brand-dna.md和对应场景的规范文件。 - 从
assets/复制对应模板。 - 从
layouts.md选择 3-5 种布局（每个 section 不能相同）。 - 从
components.md选择组件。 - 对照
checklist.md自检，P0 不通过则打回。 - 输出 HTML 文件。
你需要提供
以下配置是使用前的必要步骤：
- 配置 `brand-dna.md`：包括颜色、字体、气质关键词、禁忌等。默认品牌色（主色
#2B7FD8、强调色#F4D758、点缀色#E84A5F）可直接使用；如需替换成自己的品牌色，要同步修改assets/template-*.html中:root的变量。公众号模板（template-wechat.html）为内联样式，需手动搜索替换色值（快捷方法：在所有模板文件中搜索#2B7FD8替换为你的主色，#F4D758替换为强调色，#E84A5F替换为点缀色）。 - 放入头像：将你的头像图片放入
assets/avatar.jpg。 - 替换作者名：在
assets/template-cards.html中替换作者名为你自己的。
你会获得
- 一个完整的 HTML 页面，无需额外配置即可在浏览器中打开。
- 页面严格遵循你的品牌规范：颜色、字体、布局、组件、气质。
- 支持多种类型：教程、活动页、App、小红书卡片、公众号排版。
使用示例
将配置好的仓库链接发给你的 AI Agent，并说：
帮我读这个设计系统，以后做页面按这个规范来。
AI 就会按照 7 步工作流和品牌规范生成页面。也可以直接下具体的需求，例如：
- 请阅读我的设计系统，根据 brand-dna.md 和 template-tutorial.html 的规范，为我设计一个关于“AI 提示词工程”的教程页面。
- 请参考 layouts.md 中的布局模式和 components.md 中的组件，为我创建一个具有视觉冲击力的活动邀请页。
- 请按照小红书卡片模板 template-cards.html 的要求，将这段文字内容转化为一张符合我品牌配色的图文卡片。
