开源 · MIT

你缺的不是审美,是词

指挥模型做界面时,你只能说"再精致点"——它改,你看,你说"还是不太对"。 卡住的不是审美,是你手里没有能指认问题的名字。

6层决策骨架
30个概念,都能拨弄
33种组件与布局
1份可抄的 DESIGN.md
The Stack

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

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

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

四部分

每个概念都画出来给你看。滑杆能拖,标签页能切,容器能拉宽看断点翻转。

Part One

30 个概念

间距、亲密性、行长、对比度、五态、变体矩阵。每个配一个能上手拨弄的演示,底部一句话是可以直接抄给模型的约束。

Part Two

33 种组合

21 个组件加 12 种页面布局,全是真渲染。每张标注它用到哪几个概念,点一下跳回定义。

Part Three

工具与规范

每层选一个就够:Tailwind、shadcn/ui、Radix、Lucide。另有一张"什么时候该读哪份文档"的地图。

Part Four

怎么说出口

项目开场的约束、一张从"感觉"查到具体病因的诊断表,以及一份填满数值、可直接抄进项目的 DESIGN.md。

Scope

它给你词汇,不给你保证

它不教你成为设计师,也不保证你照着说模型就会照做——那取决于模型、上下文和你提的其他要求。 它能做的是:界面不对劲时,你说得出具体是哪里不对。

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

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

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