开源 · MIT · 无需注册

把「感觉不对」
换成 「12 号没过」

你在指挥模型做界面,但只能描述感觉——它改,你再看,你再说"还是不太对"。 问题不在模型,在于你手里没有一套能指名道姓的词。这份表就是那套词。

6 层决策骨架
30 个原子概念
21 种组件组合
12 种页面布局
1 份可抄的 DESIGN.md
先看这个 / THE STACK

做界面是自上而下的一串决定

新手最常见的卡点是从最底层开始纠结——一上来就问"圆角该用几像素", 而那一层恰恰是最不需要你操心的。30 个概念全部挂在这 6 层上。

L0意图
这一屏给看?他要完成什么
这层没有原子
L1信息层级
哪个最重要、哪些是一组的?
4 个原子
L2骨架布局
怎么排?屏幕变窄怎么办?多密合适?
6 个原子
L3组件与状态
用什么零件?没数据、出错了长什么样?
5 个原子
L4数值标度
具体几像素什么颜色
11 个原子
L5校验
看得清吗?暗色下还成立吗?
4 个原子
里面有什么 / CONTENTS

四部分

每个概念都画出来给你看,不是一段文字解释。滑杆能拖,标签页能切,容器能拉。

Part One

30 个原子

间距、亲密性、字阶、对比度、五态、变体矩阵……每个配一个能上手拨弄的演示,底部一行「怎么说出口」是可以直接抄进 prompt 的句子。

Part Two

33 种组合

21 个组件 + 12 种页面布局,全是真渲染不是截图。每张标注它由哪几号原子拼成,点编号跳回定义。

Part Three

工具与规范

每层选一个就够:Tailwind、shadcn/ui、Radix、Lucide。外加一张「什么时候该去读哪份文档」的地图。

Part Four

怎么说出口

项目开场的约束、12 行诊断表(左边是你的感觉,右边是能直接发出去的话),以及一份可直接抄的 DESIGN.md。

它不承诺什么 / SCOPE

它给你词汇,不给你保证

这份表不教你成为设计师,也不保证你照着说模型就会照做——那取决于模型、上下文和你提的其他要求。 它保证的是:界面不对劲的时候,你能说出哪一号不对,而不是"感觉不够精致"。

它会持续更新,而且你不用记得回来看

DESIGN.md 规范还在 alpha、工具在迭代、参照物半年就过期——这份表天然需要维护。 更新走 GitHub Release,点一下 Watch → Releases only 就会收到邮件,或者订阅 RSS

不做邮件列表,不做社群,也不承诺更新频率——只在真的有东西改的时候发一次 Release。