Driftless

全部文档

从现有界面抽出 token

已经有一个产品时,不必从零选风格。按下面的顺序把现有界面翻译成 token。

先定三块颜色

看最大的底,那是 background。看卡片或列表的底,那是 surface。看主按钮,那是 primary。按钮上的字是 onPrimary,页面上的正文是 onBackground。不要把 logo 色和按钮色混成两个强调色。

再量字和圆角

标题、正文、标签各记一个字号、字重和字体。按钮和输入框的圆角通常就是 rounded.md。卡片更大一档。全圆的胶囊是 rounded.full。

写进编辑器,不要写进截图

在风格库选一个最接近的起点,进编辑器只换颜色和字体,对照你的界面改 token。导出 DESIGN.md 之后,把文件放进仓库,而不是把截图丢给 Agent。

本站不做的事

不会根据 URL 自动爬你的网站。那一步需要后端,现在不做。手工抽出的 token 更可控,也更适合交给 Agent。