用途：用于构建或修改面向用户的前端界面，产出可访问、性能良好、视觉精致且贴合真实设计系统的生产级 UI，而非泛化的“AI 风格”界面。
主要能力：覆盖组件架构（同目录组织组件、测试、Storybook、自定义 hook 与类型；优先组合而非过度配置；容器组件负责取数、展示组件负责渲染）；状态管理选型（局部、提升、Context、URL、服务端状态、全局 store），避免超过三层的 prop drilling；设计系统遵循（统一间距刻度与圆角、语义化颜色 token、排版层级不跳级）；无障碍（WCAG 2.1 AA，键盘可达、ARIA 标签、焦点管理与焦点陷阱、对比度、不以颜色单独传达信息）；响应式（移动优先，测试 320/768/1024/1440px）；加载与过渡（骨架屏、乐观更新）；有意义的空态与错误态。
必要用法：交互元素优先使用 button 等原生可聚焦元素，而非带 onClick 的 div；表单需 label 或 aria-label；内容变化时迁移焦点；使用设计系统的间距（如 1rem、0.75rem）而非任意像素值。
限制与提醒：避免常见“AI 美学”——紫色/靛蓝配色、过度渐变、全部 rounded-2xl、通用 hero、Lorem ipsum、超大内边距、千篇一律卡片网格、重阴影。组件超过 200 行应拆分。需验证无控制台报错、可键盘操作、屏幕阅读器可读、多断点响应、加载/错误/空态齐全。详细无障碍清单见 references/accessibility-checklist.md。