Lessons

先把「好看」拆开。一套 UI 让人觉得专业,九成来自一致:同一个圆角、同一套灰阶、同一种间距节奏,处处相同。而一致不是靠品味守出来的,是靠结构长出来的——这个结构就是阶梯:token(色值、字号、圆角这些最小决定)→ 语义变量(primary、muted——给决定起名字,让「主色」和「蓝色」分开)→ 法典(什么场合用什么)→ 组件 → 区块 → 页面 → 工程,再往上,多个工程共享同一套底层,就是 monorepo。铁律只有一条:每一级只许引用下一级,不许自带值。

换色演示暴露的就是违反这条铁律的代价。47 个字面量意味着「品牌色是什么」这个决定被做了 47 次——而被做了 47 次的决定,改起来就要改 47 处,并且漏掉的那几处不会报错,它们只是安静地错着,直到某个暗色模式的 hover 被客户截图。1 个 token 意味着这个决定只做过一次,于是改动也只有一次。这一课往后的所有内容——组件所有权、代码原型——都建立在这个地基上:决定住在哪,改动就发生在哪。

传统组件库的形态:npm install,组件活在 node_modules 里,你租它——它更新你跟着动,它有 bug 你等修,它的样式你用 !important 去打。shadcn 换了一个前提:组件被复制进你的仓库,从落地那一刻起就是你的代码。这个差别平时看不见,它在六个具体的时刻爆发:出 bug 的那天、换品牌色的那周、只需要一半功能的那次裁剪、上游发大版本的那天、让 agent 改 UI 的每一天、缺一个 prop 的下午。图鉴里那六个星期一,每一个你大概率都亲历过其中的「租」侧。

「归你所有」常被误解成「从零造轮子」,它不是。上游仍然在,但角色变了:它是 diff 的来源,不是要跟随的版本——读它的 changelog,把值得要的能力 merge 进你的组件,跳过对你是破坏的部分。升级的单位是能力,不是版本号。真正贵的从来不是拥有,而是中间那个姿势:既不拥有,又要定制——那才是 wrapper 套 wrapper、CSS 特异性战争和永久 fork 的来源。

一张设计稿本质上是一个承诺:界面大概长这样。而产品要回答的问题它都答不了——能点吗?暗色模式呢?列表为空的时候呢?这个日文名字长到换行的时候呢?加载中和加载失败呢?静态图对这些的回答都是「到时候再说」,而「到时候」就是返工的时候。代码原型用真组件、真 token、真数据形状搭,这些问题在第一天就有答案——因为原型和产品是同一种东西,只是更小。

过去反对代码原型的理由只有一个:写代码比画图慢。AI 把这个前提取消了——一句话让 agent 用你的组件库拼出一版,成本已经低于画一张认真的图,而保真度是生产级的。于是「没有 UI 设计师参与时如何保证质量」这个问题,答案不是雇一个,而是让每个原型都从 token 和法典里长出来:底层保证它不会难看,法典保证它不会走样。你现在看的这份课件,就是这么做出来的——它没有设计稿,它的设计稿就是这个仓库。