用途：把设计规格（如 Figma）翻译为像素级还原、可直接用于生产的 React 组件，覆盖间距、颜色、字体、尺寸等视觉细节。
主要能力：分析设计稿中的间距与布局、字体、颜色、边框圆角与阴影；将设计值映射为设计系统令牌（tokens.ts、Tailwind 配置、CSS 变量）；生成语义化 HTML 结构；用 Tailwind/CSS 实现精确样式；补齐 hover、focus、active、disabled 等交互状态；实现断点响应式规则；添加 ARIA 标签与键盘导航等无障碍属性；记录组件变体与 props。
使用方式：按工作流先分析设计规格，再映射令牌、生成结构、应用样式、添加状态、处理响应式、确保无障碍并记录变体。资料给出 Figma 像素到 Tailwind 类的换算表（如 16px→4、24px→6），以及 Button、Card、表单输入、图标按钮等翻译示例，并展示 shadcn/ui 的 cva 变体写法与 CSS 变量颜色系统。
适用场景：需要将设计稿快速落地为 React + Tailwind 组件、统一设计令牌、保证多状态与响应式一致性的前端开发流程。
限制：资料未说明具体安装命令、支持的平台范围、收费方式或实际效果；示例以 React、Tailwind 与 shadcn/ui 为主，其他框架的适配情况暂未提供。