设计知识库
由社区维护、审核后发布，并在 Agent 页面创作前被 RAG 检索为设计约束。
Forced Colors 与高对比支持
高对比不是暗色模式；forced-colors 会改写许多颜色属性，组件必须用系统颜色、真实 outline 和非颜色冗余保持可辨。
可访问色彩系统要尊重用户代理的高对比渲染，而不是强行保留品牌色。关键状态应在颜色被系统接管、阴影被移除、背景图失效时仍然可理解。95%Typography Color Accessibilitycharts / accessibility图表可访问编码
图表可访问编码把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
可访问图表不是给图像加一句 alt，而是让视觉编码、文字总结、交互状态和数据替代路径共同传达同一证据。94%Typography Color Accessibilitybackground / texture装饰背景可读性
纹理、图案、渐变、噪声和媒体背景必须服从文字、控件、语义和性能，而不是把内容压成氛围图。
背景是层级和氛围的支持层；一旦承载信息、影响阅读或移动，它就需要语义替代、对比证据、运动降级和授权记录。94%Typography Color Accessibilityoklch / colorOKLCH 感知均匀色阶
OKLCH 让 agent 能围绕 lightness、chroma 和 hue 生成更可控的主题色阶，但仍需要语义映射、色域检查和对比矩阵。
色阶不是把一个 hex 色线性变亮变暗。健康的主题色阶应让视觉亮度、饱和度、品牌语气和使用语义一起受控。94%Typography Color Accessibilitycolor / contrast对比度生成色阶
用目标对比度生成色阶可以提高主题可访问性，但生成结果必须再映射为语义 token 和状态用途。
可访问色彩系统不应在设计结束后才审计对比度，而应把对比度目标前置到色阶生成和 token 命名中。92%Typography Color Accessibilityforms / input触控键盘与输入目的
触控键盘与输入目的把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
移动端输入字段应匹配正确键盘、自动完成和输入目的，减少错误和操作成本。86%Typography Color Accessibilitymotion / reduced-motion减少动效可访问性
减少动效可访问性把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
动画和过渡需要尊重用户的减少动态偏好，并提供不依赖动效的信息路径。86%Typography Color Accessibilityforms / labels表单标签持久可见
表单标签持久可见把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
表单字段标签应在输入前后都可见，帮助用户确认字段含义和上下文。86%Typography Color Accessibilitystatus / aria状态消息公告
状态消息公告把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
状态变化只靠颜色、toast 或视觉位置变化，会让部分用户错过关键反馈。86%Typography Color Accessibilityauthentication / accessibility可访问认证流程
可访问认证流程把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
安全流程也要降低认知负担，帮助用户完成而不是考验用户。86%Typography Color Accessibilityforms / errors错误摘要模式
错误摘要模式把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
用户需要先知道有多少错误、在哪里、如何修复，而不是逐行搜索红字。86%Typography Color Accessibilitytarget-size / touch目标尺寸与间隔
目标尺寸与间隔把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
点击目标要有足够尺寸和间隔，尤其在移动端、工具栏和密集列表中。86%Typography Color Accessibilityfocus / keyboard焦点顺序与阅读顺序
焦点顺序与阅读顺序把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
可见布局和辅助技术顺序不一致，会破坏导航和理解。86%Typography Color Accessibilitylinks / contrast链接对比与可供性
链接对比与可供性把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
链接是导航承诺，用户必须能在阅读流中快速识别可点击文本。85%Typography Color Accessibilitycognitive-load / copy降低认知负担的文案
降低认知负担的文案把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
用户不应该为了完成任务记住系统状态、上一屏信息或隐含规则。84%Typography Color Accessibilitycontent / plain-language清晰语言
清晰语言把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
可理解性是可访问性的一部分，复杂文案会增加所有人的认知负担。84%Typography Color Accessibilitylocale / language语言与本地化格式
语言与本地化格式把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
日期、数字、货币、单位和语言方向要符合用户地区习惯并避免歧义。84%Typography Color Accessibilityforms / placeholder占位符不能替代标签
占位符不能替代标签把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
占位符适合展示格式示例，不适合作为唯一说明或关键指导。84%Typography Color Accessibilityicons / aria图标可访问名称
图标可访问名称把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
只有图标的按钮和状态必须有可访问名称，装饰图标则应从辅助技术中隐藏。84%Typography Color Accessibilitydark-mode / contrast深色模式对比调校
深色模式对比调校把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
深色模式不是反转颜色，需要重新检查文本、边框、状态色和阴影层级。84%Typography Color Accessibilitytypography / spacing文本间距韧性
文本间距韧性把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
界面应能承受用户调整行高、字距、字号或浏览器缩放后仍不遮挡内容。84%Typography Color Accessibilityforms / redundant-entry减少重复输入
减少重复输入把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
重复输入增加认知负担、错误率和放弃率，尤其影响辅助技术用户。84%Typography Color Accessibilitytouch-target / mobile可访问交互目标
按钮、链接、菜单项和图标按钮需要足够命中区域，移动端尤其不能只看视觉尺寸。
视觉小不等于点击区域小；交互目标需要稳定尺寸和明确反馈。82%Typography Color Accessibilityaccessibility / color颜色不能单独传达含义
状态、风险、分类和选中不能只靠颜色表达，必须有文字、图标、形状或位置辅助。
色盲、低视力、打印和弱光场景都会削弱颜色语义。82%Typography Color Accessibilitysurface / color表面上的可读颜色
背景表面变化时，文字、边框、图标和状态色都要随表面重新校准。
同一个色值在不同背景上会有不同视觉强度，不应机械复用。82%Typography Color Accessibilityfocus / keyboard可见焦点状态
键盘和辅助技术用户需要清楚知道当前焦点在哪里，焦点态不能被 reset 掉。
焦点态是交互路径的一部分，不是浏览器默认样式的瑕疵。82%Typography Color Accessibilityforms / accessibility可访问表单反馈
表单反馈要靠近字段、解释原因，并在提交前后都能被用户理解。
错误信息不是惩罚，而是帮助用户完成任务的导航。82%Typography Color Accessibilitysemantic-color / state语义色与状态色
成功、警告、错误、信息、选中和待处理状态应有明确且稳定的视觉语言。
状态色是系统反馈，不应被随意用于装饰或品牌强调。82%Typography Color Accessibilitycontrast / accessibility可读性对比
文本对比必须优先服务阅读，尤其是小字号、禁用态、次级说明和按钮文字。
低对比会让精致感变成不可用，特别是在移动端和弱光环境。82%Typography Color Accessibilitycolor / tokens色彩角色系统
颜色应先定义角色，再选择具体色值，避免一个颜色承担太多含义。
主色、背景、边框、文字、状态和强调色都应有稳定职责。82%Typography Color Accessibilitytypography / font-pairing按功能配对字体
字体配对应从产品功能出发：品牌表达、长文阅读、数字比较和控件标签各有任务。
字体差异要有明确用途，避免为了风格混搭造成阅读负担。82%Typography Color Accessibilitytypography / font-weight字重强调
字重用于建立强调，而不是把每个标签都加粗。
粗体过多会失去强调能力，并让密集界面显得沉重。82%Typography Color Accessibilitytypography / readability行高与行长
长文本需要舒适行高和可读行长；密集界面也要避免文本互相压迫。
行长太宽会丢行，行高太紧会拥挤，行高太松会破坏信息密度。82%Typography Color Accessibilitytypography / hierarchy字号层级
字号层级应服务页面结构，避免在小面板里使用 hero 级标题。
清楚的字号阶梯能让标题、标签、正文、数字各司其职。82%