Personal Design System

把审美写成
操作手册

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

🎨 设计系统 ✨ 不像AI

核心逻辑

SKILL.md

流程 — AI按什么步骤干活

brand-dna.md + references/*

规范 — 能用什么、不能用什么

assets/template-*.html

起点 — 从模板改，不从零写

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

支持 4 种场景

Tutorial #1

📖

教程 / 介绍页

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

Landing #2

🎪

活动页 / Landing

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

App #3

⚡

App型 / 功能型

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

Cards #4

🖼️

小红书图文卡片

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

文件结构

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 文件浏览器打开就能看

品牌基因

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

IP三色 ↓

#2B7FD8 蓝 — 主色调、标题、超链接 60%

#F4D758 黄 — 强调、装饰、高亮 30%

#E84A5F 红 — 点缀、CTA、标签 10%

字体 ↓

汇文明朝体中文标题

Fraunces 英文装饰

Caveat 手写/注释

Fira Code 代码/终端

禁忌清单

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做的"

质量检查

必须全过

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

应过

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

加分

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

怎么用（Fork 指南）

1 Fork 这个仓库

2 改 brand-dna.md — 换成你的颜色、字体、气质关键词

3 改 assets/avatar.jpg — 换成你的头像

4 组件库可以先不动，等你积累了自己的偏好再替换

5 把整个文件夹放到你的 AI 能读到的地方

6 告诉 AI："做页面之前先读 SKILL.md"

核心原则 🔑

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

把审美写成操作手册