用途：在生成组件代码之前先定义界面、状态与约束，让智能体产出更一致的组件。适用于 React、Vue 或设计系统相关工作。
主要能力：按流程定义组件用途与出现位置；将其归类为原始组件、组合型功能组件、布局组件或页面级模式；定义变体、尺寸、视觉状态、交互状态与数据状态；定义 props/输入（含受控与非受控行为）；定义插槽与组合规则；定义无障碍行为（语义、键盘交互、焦点管理、仅在需要时使用 ARIA、目标尺寸、减少动效）；定义响应式行为与令牌使用预期；编写实现与评审用的验收标准。
输出格式：以“Component specification: [Name]”为标题，依次包含 Purpose、Component type、Used in、Variants、States、Props / inputs（interface ComponentProps）、Slots / composition、Accessibility behavior、Responsive behavior、Design token requirements、Implementation boundaries、Acceptance criteria。资料中给出了 ProjectStatusBadge 的完整示例，涵盖状态变体、尺寸、props 类型、无障碍与令牌要求等。
常见错误防范：状态与无障碍行为未定义前不要写代码；不要把每个视觉选项都变成 prop，优先组合；语义令牌存在时不要用原始颜色、间距、字体或阴影；语义 HTML 已提供行为时不要加 ARIA。
边界：设计系统尚无令牌时不要使用，应先用 $ui-system-initializer 建立；组件已存在时不要使用，先查 $ui-system-governance 清单避免重复。
最终校验：规格需包含变体、状态、props、无障碍、响应式行为与验收标准；组件类型需说明其属于原始组件还是功能代码。另可参考 Design Engineering guide: Component Architecture（https://frontendguide.dev/docs/component-architecture）。