不二个人 IP 设计系统
生成具有个人风格的网页与图文设计。
使用前，准备这些
输入素材：照片、主题与视觉风格要求
- 在下方原始文档中确认支持的 AI 工具、模型和运行依赖。
- 打开原仓库，按作者的安装说明完成配置；模型 API 或外部服务可能需要单独开通。
- 用自己的素材试运行，再检查事实、版式与输出文件。
许可证：未明确声明，请查看原仓库的使用条件。
来源快照：2026-09-15。README ↗
可以这样开始
Personal Design Skill
一套给 AI 看的个人品牌设计系统。
ESTHER不二 · 小红书 · Twitter / X
开源的是方法论，不是我的身份。
本仓库开源的是我整理出的设计方法论、设计规范、工作流程、布局模式、组件模式和相关模板。你可以基于 CC BY-NC-SA 4.0 学习、修改和分享这些内容，但这不代表你获得了使用 ESTHER不二 / Esther / 不二 / esthersjw 的姓名、头像、IP形象、Logo、品牌标识、个人账号标识或本人形象进行创作、运营、发布、商业合作或对外背书的许可。
使用这套系统时，请替换为你自己的姓名、头像、IP和品牌信息。任何使用本仓库内容制作的账号、作品、产品、课程、Agent 或服务，都不得让人误以为由我制作、授权、合作或背书。协议要求的署名仅表示内容来源，不等于身份授权。
把审美写成操作手册，AI 每次帮你做页面时必须翻这本手册，不能自由发挥。限制 AI 的自由度 = 保证输出质量。
⚠️ 使用前请先完成
brand-dna.md的配置： 默认品牌色可直接使用，如需替换成你自己的请同步修改模板变量；并放入你自己的头像。
Demo
用这套系统生成的真实页面：
📖 教程型 - 分享会页面
信息清晰、步骤明确、有节奏的单页科普/教程。
🔗 在线预览
📖 教程型 - Design Skill 拆解
把审美写成操作手册——从纠正AI到做出自己的Design Skill的完整过程。
🔗 在线预览
🎪 活动页 / Landing
视觉冲击、深浅面板交替、强节奏感的活动邀请页。
🔗 在线预览
📱 App 型 / 功能型
功能优先、交互感、信息密度高的应用型页面。
🔗 在线预览
📕 小红书图文卡片
3:4 比例、字大、手机可读、一键导出 PNG 的图文卡片。
🔗 在线预览
📱 公众号排版
杂志编号风：全内联样式 + section 标签，复制粘贴进微信公众号编辑器即可。
🔗 在线预览
📜 布局 Playground
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 公众号排版场景规范
7 步工作流
AI 每次做设计必须按这个顺序走：
| # | 做什么 | 为什么 |
|---|---|---|
| 1 | 问 5 个问题(类型/受众/几屏/素材/约束)。类型含：教程/活动页/App/卡片/公众号 | 不自作主张 |
| 2 | 读 brand-dna + 对应场景文件 | 先学规矩再动手 |
| 3 | 从 assets/ 复制对应模板 | 从半成品开始，不从零写 |
| 4 | 从 layouts.md 选 3-5 种布局 | 每个 section 不能一样 |
| 5 | 从 components.md 选组件 | 禁止用 HTML 默认样式 |
| 6 | 对照 checklist 自检 | P0 不过就打回 |
| 7 | 交付 HTML 文件 | 浏览器打开就能看 |
品牌基因速览
三色（默认配色，可在brand-dna.md中替换为你自己的）
| 颜色 | 色值 | 比例 |
|---|---|---|
| 主色 | #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 能执行的规则。
Credits
- 方法论灵感来源于 归藏 的 PPT Skill——“限制AI的自由度 = 保证输出质量”这个核心思路参考了他的设计
- Built with Cola — the first OS with a soul
License
本仓库中的方法论、设计规范、工作流程、布局模式、组件模式、模板和文档，采用 CC BY-NC-SA 4.0 协议。
- ✅ 可以学习、使用、修改和分享本仓库中的方法论与设计内容
- ✅ 必须注明来源：ESTHER不二 / esther-design-system
- ❌ 禁止将本仓库内容用于商业用途
- 🔄 修改后必须以相同协议分享
- ❌ 署名不等于姓名、头像、IP、Logo、品牌标识或本人形象的使用授权
- ❌ 不得使用我的名字、头像、IP或其他身份标识创建看起来由我运营、授权、合作或背书的账号、作品、产品、课程、Agent或服务
Name, Image and IP Notice
ESTHER不二、Esther、不二、esthersjw 及与我相关的姓名、头像、IP形象、Logo、品牌标识、个人账号标识和本人形象，不属于本仓库 CC BY-NC-SA 4.0 的授权范围。
你可以在协议要求的范围内进行事实性来源署名，但不得把这些名称或视觉资产用作自己的账号名、用户名、头像、品牌名、角色名、产品名或对外宣传素材，也不得暗示与我存在官方关系。