Personal Design System

审美写成
操作手册

一套给 AI 看的个人品牌设计系统。告诉 AI 用什么颜色、字体、布局、组件,以及什么绝对不能用。限制AI的自由度 = 保证输出质量。

不二 🎨 设计系统 ✨ 不像AI
01

核心逻辑

1
SKILL.md
流程 — AI按什么步骤干活
2
brand-dna.md + references/*
规范 — 能用什么、不能用什么
3
assets/template-*.html
起点 — 从模板改,不从零写

限制AI的自由度 = 保证输出质量。

02

支持 4 种场景

Tutorial #1
📖

教程 / 介绍页

信息清晰、步骤明确、一步步看下来很舒服

Landing #2
🎪

活动页 / Landing

视觉冲击、有节奏感、让人忍不住往下看

App #3

App型 / 功能型

功能优先、交互感强、看板/书架/Canvas

Cards #4
🖼️

小红书图文卡片

3:4比例、字大、手机可读、一键导出PNG

03

文件结构

esther-design-system/
esther-design-system/
├── SKILL.md                    ← 7步工作流(大脑)
├── brand-dna.md                ← 品牌基因:颜色/字体/气质/禁忌
├── README.md                   ← 你在看的这个
├── assets/                     ← 模板骨架(起点)
│   ├── template-tutorial.html      教程页
│   ├── template-landing.html       活动页/Landing
│   ├── template-app.html           App型/功能型
│   ├── template-cards.html         小红书图文卡片
│   └── avatar.jpg                  IP头像
└── references/                 ← 规则和零件(知识库)
    ├── layouts.md                  15种布局模式
    ├── components.md               组件库(2988行)
    ├── checklist.md                质量检查清单
    ├── scene-tutorial.md           教程场景规范
    ├── scene-landing.md            活动页场景规范
    ├── scene-app.md               App型场景规范
    └── scene-cards.md              小红书卡片场景规范
7 04

工作流

AI 每次做设计必须按这个顺序走。不允许跳步。

# Action Why
1 问 5 个问题 不自作主张
2 读 brand-dna + 场景文件 先学规矩再动手
3 从 assets/ 复制模板 从半成品开始
4 从 layouts.md 选布局 每个 section 不能一样
5 从 components.md 选组件 禁止用 HTML 默认样式
6 对照 checklist 自检 P0 不过就打回
7 交付 HTML 文件 浏览器打开就能看
05

品牌基因

气质关键词:
可爱但有品质 · 手绘蜡笔感 · 有温度 · 不像AI · 一看就是"不二的"

IP三色 ↓
#2B7FD8 蓝 — 主色调、标题、超链接 60%
#F4D758 黄 — 强调、装饰、高亮 30%
#E84A5F 红 — 点缀、CTA、标签 10%
字体 ↓
汇文明朝体 中文标题
Fraunces 英文装饰
Caveat 手写/注释
Fira Code 代码/终端
06

禁忌清单

AVOID
  • 蓝紫渐变、neon、glassmorphism
  • Inter / Roboto / Arial 等overused字体
  • 所有section居中的千篇一律布局
  • bounce / elastic 弹跳动画
  • 渐变文字、AI光效
  • HTML默认 blockquote / 列表 / 表格
  • 看起来像AI生成的通用模板
PREFER
  • 暖底背景 #fefcf6 / #faf6eb
  • 品牌三色(蓝60 / 黄30 / 红10)
  • 每个section布局形式不同
  • expo ease-out 自然减速动效
  • 手绘蜡笔感装饰、虚线圆圈
  • 从 components.md 选用所有组件
  • 截图发Twitter不会被说"又是AI做的"
07

质量检查

P0

必须全过

  • 品牌三色比例正确
  • 无禁忌元素
  • 暖底背景、非纯黑白
  • 衬线+无衬线混搭
  • 响应式断点
  • 每section布局不同
  • clamp() fluid sizing
  • 无HTML默认样式
P1

应过

  • 至少一个视觉惊喜section
  • 字号对比极端
  • Scroll Reveal + stagger
  • 大装饰数字
  • 高亮标记或品牌色条
  • ::selection 黄色高亮
P2

加分

  • 图片溢出容器
  • 深色面板打破节奏
  • 装饰元素克制
  • prefers-reduced-motion
08

怎么用(Fork 指南)

1 Fork 这个仓库
2 brand-dna.md — 换成你的颜色、字体、气质关键词
3 assets/avatar.jpg — 换成你的头像
4 组件库可以先不动,等你积累了自己的偏好再替换
5 把整个文件夹放到你的 AI 能读到的地方
6 告诉 AI:"做页面之前先读 SKILL.md"
核心原则 🔑

核心不是这些文件本身,是你的审美判断力。文件只是把你的判断写成了 AI 能执行的规则。