Interface Lab
Knowledge RAG

设计知识库

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

提交新原则
5 条已发布原则 / 全库 192 条
Frontend Implementationaria / components

ARIA 组件契约

自定义交互组件在写样式前要先定义 native-first 决策、name/role/value、ARIA/DOM 状态、键盘矩阵、焦点路径、视觉状态和测试断言。

ARIA 不是给 div 补语义的魔法层;组件只有在原生语义、键盘行为、可访问名称、状态属性和视觉状态互相一致时,才是可实现的。96%
Frontend Implementationaria / apg

ARIA APG 组件模式契约

手写复杂 widget 前,先从 WAI-ARIA APG 提取角色、状态、属性、键盘表、焦点策略和测试断言;能用原生或成熟 primitive 时不从零造。

ARIA 是语义和交互契约,不是给 div 补魔法属性。自定义 combobox、dialog、tabs、treegrid、menu、listbox 等组件必须先证明它们的键盘、焦点和辅助技术模型成立。95%
Interaction Responsive Motionkeyboard / navigation

键盘优先导航

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

可键盘完成的界面通常也更清晰,因为焦点顺序暴露了真实任务结构。86%
Typography Color Accessibilityfocus / keyboard

焦点顺序与阅读顺序

焦点顺序与阅读顺序把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

可见布局和辅助技术顺序不一致,会破坏导航和理解。86%
Typography Color Accessibilityfocus / keyboard

可见焦点状态

键盘和辅助技术用户需要清楚知道当前焦点在哪里,焦点态不能被 reset 掉。

焦点态是交互路径的一部分,不是浏览器默认样式的瑕疵。82%