Geist
设计系统 · Vercel打开网站 ↗
值得学的地方
- 左边是按 Foundations / Brands / Components 分组的长目录，右边用格子把品牌、图标、组件、颜色、字体各放一格预览。
- 格子之间只用细线分隔，整页几乎只有黑白灰，颜色只出现在色板那一格里。
- 顶部搜索框带 ⌘K 提示，文档再长也能一下跳到想找的组件。
这一页里的界面词
想让 AI 做出这种感觉，可以这样说
做一个设计系统的文档首页：浅色背景，左侧一列分组目录（基础、品牌、组件），顶部一个带 ⌘K 提示的搜索框。右侧主区先是标题和一句说明，下面用细线分成两列格子，每格是一个预览（logo、图标墙、组件样例、色条、字体），格子下方写名字和一句说明。整体只用黑白灰，颜色只出现在色板格里。
同一家的品牌规范
Vercel 的 DESIGN.md：色值、字号、圆角都拆好了，可以整份交给 AI。