Interface Lab
Knowledge RAG

设计知识库

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

提交新原则
7 条已发布原则 / 全库 192 条
Typography Color Accessibilitycharts / accessibility

图表可访问编码

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

可访问图表不是给图像加一句 alt,而是让视觉编码、文字总结、交互状态和数据替代路径共同传达同一证据。94%
Typography Color Accessibilityoklch / color

OKLCH 感知均匀色阶

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

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

对比度生成色阶

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

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

深色模式对比调校

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

深色模式不是反转颜色,需要重新检查文本、边框、状态色和阴影层级。84%
Typography Color Accessibilityaccessibility / color

颜色不能单独传达含义

状态、风险、分类和选中不能只靠颜色表达,必须有文字、图标、形状或位置辅助。

色盲、低视力、打印和弱光场景都会削弱颜色语义。82%
Typography Color Accessibilitysurface / color

表面上的可读颜色

背景表面变化时,文字、边框、图标和状态色都要随表面重新校准。

同一个色值在不同背景上会有不同视觉强度,不应机械复用。82%
Typography Color Accessibilitycolor / tokens

色彩角色系统

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

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