开源！审美超好的
内容Design Skill来了
可以复刻的个人品牌设计系统，
一键生成PPT/图文卡片
02
它是什么
告诉 AI 用什么颜色、字体、布局、组件，
以及什么绝对不能用。
以及什么绝对不能用。
📝 一段文字
→
🤖 AI + 规范
→
✨ 品牌页面
03
支持 4 种场景
📖
教程/介绍页
信息清晰、步骤明确
🎪
活动页/Landing
视觉冲击、有节奏感
📱
App型/功能型
功能优先、交互感
🖼️
小红书图文卡片
3:4比例、一键导出PNG
04
核心逻辑
限制AI的自由度 = 保证输出质量
Step 1 — Brain
SKILL.md
流程 — AI按什么步骤干活
↓
Step 2 — Rules
brand-dna + references
规范 — 能用什么不能用什么
↓
Step 3 — Start
assets/template-*.html
起点 — 从模板改，不从零写
05
7 步工作流
1
问 5 个问题类型 / 受众 / 几屏 / 素材 / 约束
2
读规范brand-dna + 对应场景文件
3
拷模板从 assets/ 复制对应模板骨架
4
选布局从 15 种布局中选 3-5 种组合
5
选组件从组件库里填充，禁止默认样式
6
自检对照 checklist 逐条过，P0必须全过
7
交付输出 HTML，浏览器直接打开
06
品牌三色
蓝60% · 黄30% · 红10%（红永远是点缀）
蓝 — 头发
主色调、标题、超链接、重点标记
#2B7FD8
黄 — 裙子
强调、装饰、badges、高亮
#F4D758
红 — 蝴蝶结
点缀、CTA、高亮下划线
#E84A5F
60%
30%
10%
07
字体系统
标题用衬线 · 正文用无衬线 · 字号对比极端
中文标题 — Huiwen Mincho
在AI时代认真生活
中文正文 — Noto Sans SC
把审美写成操作手册
英文装饰 — Fraunces
Design with Intention
手写注释 — Caveat
Key Insight ✦ Notes here
代码/终端 — Fira Code
const skill = new DesignSystem()
08
文件结构
├── SKILL.md ← 7步工作流（大脑）
├── brand-dna.md ← 颜色/字体/气质/禁忌
├── README.md ← 你在看的这个
├── assets/ ← 模板骨架
├── template-tutorial.html
├── template-landing.html
├── template-app.html
├── template-cards.html
└── avatar.jpg
└── references/ ← 规则和零件
├── layouts.md 15种布局
├── components.md 2988行组件库
├── checklist.md 质量检查
└── scene-*.md 4个场景规范
09
组件库
2988行代码 — 每个组件都是写好的 HTML+CSS，AI 直接复制进去用
卡片
×5 种变体
引用块
×5 种风格
代码面板
×4 种变体
流程步骤条
箭头连接
Do/Don't对比
×4 种展现
聊天气泡
用户 vs AI
三列卡片
×5 种排列
Pull Quote
大字金句
10
🚫 绝对禁忌
✕
蓝紫渐变、cyan、neon、纯黑白
✕
Inter / Roboto / Arial 等 overused 字体
✕
glassmorphism、渐变文字、AI光效
✕
HTML默认样式 — blockquote / 列表 / 表格
✕
bounce / elastic 动画、无限循环动画
✕
所有section居中、千篇一律卡片网格
✕
看起来像AI生成的通用模板
11
质量检查 Checklist
P0 必须全过
品牌三色比例 6:3:1
无禁忌元素（无默认HTML样式）
暖底背景 #fefcf6
衬线 + 无衬线混搭
每 section 布局不同
截图发Twitter不会被说"又是AI做的"
P1 应过
至少一个视觉惊喜 section
字号对比极端（大的很大，小的很小）
大装饰数字/英文点缀
P2 加分
深色面板打破节奏
装饰元素克制
prefers-reduced-motion
12
怎么用（Fork 指南）
1
Fork 这个仓库把整个文件夹下载到本地
2
改 brand-dna.md换成你的颜色、字体、气质关键词
3
换 avatar.jpg放上你自己的头像
4
放到 AI 能读到的地方Cola Skill / Claude Project / 任何支持上下文的工具
5
告诉 AI：做页面之前先读 SKILL.md核心是你的审美判断力，文件只是把判断写成规则
"
核心不是这些文件本身，
是你的审美判断力。
文件只是把你的判断
写成了 AI 能执行的规则。
— from README.md
14
做完问自己三个问题
01
这个页面截图发到 Twitter 上，
会不会被人评论
"又是AI做的"？
02
能不能一眼认出
这是"不二的"？
03
有没有哪个部分
让你觉得"见过很多次了"？
"
等于把审美写成了操作手册，AI 每次帮我做页面时必须翻这本手册，不能自由发挥。
关注 Esther不二
▪️在AI时代认真生活的女生｜INTJ
▪️跟Agent搭档的第1年
▪️南大/米理建筑→AI ColaOS building
💕关于[她]在AI时代
▪️跟Agent搭档的第1年
▪️南大/米理建筑→AI ColaOS building
💕关于[她]在AI时代