用途：把设计规格（如 Figma 稿）翻译成可上线的 UI 组件，强调尺寸、间距、排版、颜色与交互状态与设计稿一致。
主要能力：从设计稿提取间距、宽高、字体族/字号/字重/行高/字距、颜色、边框与圆角、阴影；将设计值映射为设计系统令牌并生成 tokens.ts 与 Tailwind 配置；生成语义化结构并应用 Tailwind/CSS；补全 hover、focus、active、disabled 状态；按断点实现响应式；加入 ARIA、键盘导航等无障碍属性；记录组件变体与 props；输出含各状态与令牌映射的检查清单。文档给出 Button、Card、表单输入、图标按钮等翻译示例，以及像素到 Tailwind 类名的换算表。
使用方式：按工作流分析设计规格、映射令牌、生成结构、应用样式、添加状态、处理响应式、确保无障碍、记录变体。示例使用 cn 工具函数、cva 变体写法与 shadcn/ui 模式，并以 CSS 变量承载颜色系统。
适用场景：需要将设计稿快速落地为 React 组件、统一设计系统令牌、保证多状态与响应式一致性的前端与设计协作流程。
限制：资料未提供安装命令、运行环境要求、版本兼容性、是否收费及平台支持等具体信息，这些暂未提供；示例代码需结合项目实际工具与依赖使用。