技能介绍

它解决什么问题

直接让模型写界面，产出的东西往往带着明显的「AI 味」：满屏紫色渐变、统一的 rounded-2xl、尺寸过大的卡片网格、模板化的 Hero 区，再加上占位文案掩盖了真实内容在长度与换行上的问题。这类界面在 demo 里看着还行，一旦进入生产环境就会暴露三件事：视觉层级混乱、缺少无障碍支持、窄屏上布局直接崩。这个技能的目标是把界面拉回工程标准：遵循项目真实设计系统、满足 WCAG 2.1 AA、交互模式经过思考，而不是像某个默认模板的产物。

核心能力

组件架构：与组件相关的文件集中放置（colocate）；优先组合而非配置，保持组件职责单一，把数据获取与展示分离；状态管理选择最简单的可行方案，props 传递不要超过三层，否则应引入 context 或重构组件树。

设计系统约束：间距必须来自一致的 spacing scale，不要随手发明数值；字体层级要完整，不能跳级，也不要把标题样式用在非标题内容上；颜色使用 text-primary、bg-surface 这类语义 token，而不是裸 hex；正文对比度不低于 4.5:1，大字号不低于 3:1；不能只靠颜色传达状态。

无障碍与响应式：键盘导航、ARIA 标签、焦点管理、有意义的空状态与错误状态是硬性要求，不是加分项；布局从移动端开始设计，并在 320px、768px、1024px、1440px 四个断点上验证。

常见借口与红旗

技能内置了一张「自我安慰 vs 事实」对照表，比如「无障碍以后再补」等于把工作量翻三倍，「只是原型」的代码最终都会变成生产代码。同时它列出了明确的红旗信号：组件超过 200 行、行内样式或任意像素值、缺少 loading/error/empty 状态、没有键盘导航测试、只用颜色区分状态，以及典型的「AI 外观」。

适用边界

这个技能提供的是约束与检查清单，不是自动生成代码的工具；它假定项目中已有可遵循的设计系统。如果你没有设计 token，它只能帮你建立纪律，无法凭空产出正确的视觉规范。详细的无障碍要求与测试工具见 references/accessibility-checklist.md。完成 UI 后应按技能末尾的 verify 清单逐项检查：控制台无报错、Tab 可遍历全部交互元素、读屏可传达页面结构、四个断点可用、状态齐全、dev tools 或 axe-core 无警告。