Interface Lab
Knowledge RAG

设计知识库

由社区维护、审核后发布,并在 Agent 页面创作前被 RAG 检索为设计约束。

提交新原则
8 条已发布原则 / 全库 192 条
Design Systems Page Patternstokens / settings

设计系统 Token 设置页

Token 设置页必须让语义、别名、模式、影响组件、版本 diff 和发布风险同时可见,不能只是颜色和数字输入表单。

Design token 是跨设计工具、代码平台和组件库传播的设计决策。设置页的核心任务不是编辑值,而是解释一个值如何被引用、在哪些模式下变化、会影响哪些组件和版本。96%
Typography Color Accessibilityoklch / color

OKLCH 感知均匀色阶

OKLCH 让 agent 能围绕 lightness、chroma 和 hue 生成更可控的主题色阶,但仍需要语义映射、色域检查和对比矩阵。

色阶不是把一个 hex 色线性变亮变暗。健康的主题色阶应让视觉亮度、饱和度、品牌语气和使用语义一起受控。94%
Typography Color Accessibilitycolor / contrast

对比度生成色阶

用目标对比度生成色阶可以提高主题可访问性,但生成结果必须再映射为语义 token 和状态用途。

可访问色彩系统不应在设计结束后才审计对比度,而应把对比度目标前置到色阶生成和 token 命名中。92%
Frontend Implementationshadcn / component-governance

Copy-in 组件治理

shadcn/ui 这类复制源码组件进入项目后就变成本地资产,必须有 token 映射、状态矩阵、升级策略和授权记录。

复制源码组件的优势是可控和可改,代价是项目团队自己承担一致性、升级、授权声明和设计系统适配。91%
Design Systems Page Patternstokens / theme

语义主题 Token 的作用域

主题 token 要定义作用域和层级,让组件消费语义角色,而不是散落一次性颜色值。

设计系统的主题能力来自少量可预测的语义开关:强调色、灰阶、面板背景、缩放、圆角和组件变体。90%
Design Systems Page Patternstokens / editor

Token 编辑器模式

Token 编辑器模式把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

Token 编辑器需要让设计决策、引用关系和影响范围可见。87%
Design Systems Page Patternstokens / design-system

设计 Token 治理

Token 要表达角色和约束,不只是把色值、字号和间距集中保存。

可维护 token 需要命名、范围、默认值和禁止用法,才能被人和 Agent 共同使用。82%
Typography Color Accessibilitycolor / tokens

色彩角色系统

颜色应先定义角色,再选择具体色值,避免一个颜色承担太多含义。

主色、背景、边框、文字、状态和强调色都应有稳定职责。82%