Design System

一套设计系统，人能用，AI 也能用。

如何建立设计系统，以及 AI 时代它该长成什么样子。以该网站效果为说明展开。

01 · 全貌

一套设计系统里有什么

设计系统一般有六层，对应 AI 时代的转化在下方指向对应层显示。

02 · AI 时代的基础

每类基础三份文件：规则、纲要、代码
值只在一个文件里，纲要从代码生成
用法写成判断条件，不只是列值

本站

所有值写在一个文件里；组件只引用名字，不写死数值

之前做过的两套

02 · 给 AI 读

同一套系统，AI 来用的时候区别在哪

用四个问题对比：同一件事，给人的系统怎么答，给 AI 的系统怎么答。

给人的系统给 AI 的系统

规范在哪人写在文档和设计稿里，人去翻AI每个对象有三份文件：规则、纲要、代码，AI 直接读

怎么找到人靠记忆和搜索AI每个对象有编号，按编号找到规则和代码

怎么用人人照着做，做完再由人核对AI先读规则，再写方案，再按纲要找到代码去生成

怎么保持一致人靠评审、靠自觉，不对就返工AI改一处，规则、纲要和页面一起变

03 · 逐个看

这个网站的系统，一样一样看

选一样看。右边切到「AI 读」，看到的就是 Agent 实际读的那份文件。

正文色--ink-2←色值 --ref-mist-a74←rgb(245 245 247 / 0.74)用在：胶囊、文字块、数字、图表、表格、原则卡、故事、案例头、项目卡、入口卡

04 · 工作流

Agent 是怎么用这套系统的

四步，每一步都有一个明确的产物。点开产物看真文件；第二步读的，就是上面那些。

1Intent
意图识别
先把一句话的需求写清楚：要做什么页面，讲哪几段，有什么限制。拿不准的地方留成问题，不猜。
in
一句话需求
out
2Retrieval
知识检索
按编号只取这次用得上的规则、组件和 token，不把整套都读一遍。
in
requirement
out
3Synthesis
方案设计
在规则范围内组合出方案：页面结构、用哪些区块、每块放什么，最后自己对照限制检查一遍。
in
knowledge
out
4Codegen
代码生成
按纲要找到真实的代码位置，只改要改的文件，然后跑检查和构建。
in
solution
out
下面这块看板

A2UI：需求一变，方案和设计响应生成

同一份经营数据。左边定需求：谁在看、为了什么、什么形式；方案按规则生成，右边是按方案组装的页面。

① requirement · 这里由你直接给

谁在看看多少

为了什么怎么看

什么形式怎么呈现

③ solution · 规则算出来的

sections

01数字 · 6 个 · 小 · 对比 2 组
02图表 · 趋势 · 2 条线 · 大
03图表 · 条形 · 渠道 4
04图表 · 条形 · 商品 5
05预警 · 3 条

notes

— 熟手：6 个指标带昨天和 7 天均值的对比，预警只给结论
— 看结果：数字在前，预警最后
— 图表：趋势放大，渠道、商品、漏斗都画成条

④ 页面 · 组件拼出来的

每日经营数据

服饰旗舰店 · 今日 · 更新于 16:00

今日目标 15 万

指标 · 6

对比昨天 · 对比7 天

¥12.86 万

销售额

昨天 +12.1%7 天 +8.1%

1284

订单

昨天 +9.6%7 天 +6.2%

3.82 万

访客

昨天 +6.4%7 天 +3.5%

3.36%

转化率

昨天 +0.10pp7 天 +0.21pp

¥100.2

客单价

昨天 +2.7%7 天 +1.8%

4.1%

退款率

昨天 +1.2pp7 天 +1.3pp

趋势 · 分时销售额

千元 / 小时

0 时6121824

今天昨天

渠道 · 销售额

占比

搜索¥5.87 万 · 46%
推荐¥3.12 万 · 24%
付费¥3.01 万 · 23%
直播¥8,600 · 7%

商品 TOP 5 · 销售额

冰丝防晒衣¥2.13 万
轻薄风衣¥1.9 万
亚麻阔腿裤¥1.47 万
基础款 T 恤¥1.25 万
牛仔半裙¥9,870

预警 · 3

退款率 4.1%，比 7 天均值高 1.3pp
「轻薄风衣」库存 38 件，按今天的速度明天中午售罄
直播渠道转化 1.1%，只有全店均值的三分之一