用途：把设计原型转换为可投入生产的、带类型的组件。适用于将 HTML 原型转为 React 组件、把 super-design 输出（.superdesign/design_iterations/*.html）转为生产代码、把 Figma 导出拆分为可复用组件、从原型 CSS/内联样式提取设计令牌，以及将 mockup 或概念验证 UI 产品化。
主要能力：按“分析输入→检测技术栈→拆分组件→生成代码”的流程工作。分析阶段识别原型类型（super-design、通用 HTML、Figma 导出）与结构；技术栈检测扫描 package.json 判断框架（react、vue、svelte、@angular/core），检查 tsconfig.json 或 typescript 依赖判断是否输出 TypeScript，并识别样式方案（tailwindcss、styled-components/@emotion/react、CSS/SCSS），默认 React + TypeScript + Tailwind CSS。组件拆分采用原子设计方法，识别重复模式（出现 2 次以上即提取）、逻辑分组、交互元素与数据展示模式。设计令牌从原型 CSS/样式中提取颜色、字体、间距与圆角。生成阶段为每个组件创建 TypeScript props 接口、使用 forwardRef、加入无障碍属性、采用项目样式方案并添加 JSDoc。
使用方式：按步骤执行分析、检测、拆分、提取令牌、生成组件与集成指引；集成指引说明文件放置位置、导入语句、对等依赖与用法示例。命名约定为组件 PascalCase（如 ProductCard.tsx）、props 类型 PascalCase + Props、CSS 类 kebab-case、设计令牌 camelCase。转换模式包括 class→className、onclick→onClick、for→htmlFor、value 需配合 onChange、内联样式转 Tailwind 类或样式对象。与 super-design 集成时需读取 HTML 引用的主题 CSS、映射主题变量为设计令牌、保留原型动画与 Tailwind 响应式断点。
限制：资料未提供具体安装命令、收费方式、平台支持范围与效果数据，暂未提供。