Interface Lab
Knowledge RAG

设计知识库

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

提交新原则
6 条已发布原则 / 全库 192 条
Frontend Implementationmaterial / glass

半透明材质可读性契约

玻璃、acrylic、mica、smoke 和 backdrop blur 不能只是风格滤镜;它们必须明确 surface role、背景可变性、层级、对比度、用户偏好、forced-colors 和 fallback。

半透明材质的价值是把界面层级和背景上下文连接起来;如果它降低阅读、状态识别、键盘焦点或可访问偏好,它就应该退回不透明 surface。96%
Typography Color Accessibilitybackground / texture

装饰背景可读性

纹理、图案、渐变、噪声和媒体背景必须服从文字、控件、语义和性能,而不是把内容压成氛围图。

背景是层级和氛围的支持层;一旦承载信息、影响阅读或移动,它就需要语义替代、对比证据、运动降级和授权记录。94%
Typography Color Accessibilitycolor / contrast

对比度生成色阶

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

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

链接对比与可供性

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

链接是导航承诺,用户必须能在阅读流中快速识别可点击文本。85%
Typography Color Accessibilitydark-mode / contrast

深色模式对比调校

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

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

可读性对比

文本对比必须优先服务阅读,尤其是小字号、禁用态、次级说明和按钮文字。

低对比会让精致感变成不可用,特别是在移动端和弱光环境。82%