name: prototype-to-production description: 将设计原型（HTML、CSS、Figma导出文件）转换为可用于生产环境的组件。分析原型结构，提取设计令牌，识别可复用模式，并生成类型化的React组件。默认适配React + TypeScript技术栈，并可适应现有项目技术栈。 version: 1.0.0 category: 设计与前端 agents: [前端UI开发工程师, 快速UI设计师, 代码质量审查员] keywords: [原型, 生产, 组件, 设计, HTML, CSS, Figma, React, TypeScript, 转换, 设计令牌, 原子化设计]

原型到生产技能

通过分析结构、提取模式并生成整洁代码，将设计原型转换为可用于生产环境的、类型化的组件。

使用场景

将HTML原型转换为React组件
将super-design输出（.superdesign/design_iterations/*.html）转换为生产代码
将Figma导出文件分解为可复用组件
从原型CSS/内联样式中提取设计令牌
将UI模型或概念验证产品化

转换工作流

┌─────────────┐   ┌─────────────┐   ┌─────────────┐   ┌─────────────┐
│   分析输入  │──▶│  检测技术栈 │──▶│ 分解组件    │──▶│  生成代码   │
└─────────────┘   └─────────────┘   └─────────────┘   └─────────────┘
       │                 │                 │                 │
       ▼                 ▼                 ▼                 ▼
  识别类型和结构   扫描package.json   原子化设计方法论   TypeScript组件
                   和技术栈模式

步骤 1: 分析输入

检测原型类型和结构:

输入类型	检测方法	关键模式
Super-design	路径: `.superdesign/design_iterations/*.html`	Flowbite, Tailwind CDN, 主题CSS引用
通用HTML	任何 `.html` 文件	标准HTML结构，内联/外部CSS
Figma导出	Figma特定类名	`figma-`, 绝对定位，框架命名

Super-design分析:

读取原型文件 → 提取主题CSS引用 →
识别组件区域（页头、主体、页脚） →
将flowbite组件映射到等效组件

步骤 2: 检测项目技术栈

扫描目标项目以确定输出格式:

检查 package.json 中的框架:
- react / react-dom → React组件
- vue → Vue单文件组件
- svelte → Svelte组件
- @angular/core → Angular组件
检查TypeScript:
- 存在 tsconfig.json → TypeScript输出
- 依赖中有 typescript → TypeScript输出
检查样式方案:
- tailwindcss → Tailwind类
- styled-components / @emotion/react → CSS-in-JS
- CSS/SCSS文件 → 独立样式表

默认: React + TypeScript + Tailwind CSS

步骤 3: 组件分解

应用原子化设计方法论:

┌─────────────────────────────────────────────────────────┐
│ 有机体（复杂组合）                                        │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 分子（简单组合）                                     │ │
│ │ ┌─────────────────────────────────────────────────┐ │ │
│ │ │ 原子（原始元素）                                 │ │ │
│ │ │ 按钮、输入框、标签、图标、徽章、头像               │ │ │
│ │ └─────────────────────────────────────────────────┘ │ │
│ │ 表单字段、搜索栏、卡片、菜单项                       │ │
│ └─────────────────────────────────────────────────────┘ │
│ 页头、侧边栏、产品网格、评论线程                         │
└─────────────────────────────────────────────────────────┘

组件识别清单:

[ ] 重复模式（出现2次以上 = 提取）
[ ] 逻辑分组（页头、导航、内容区块）
[ ] 交互元素（按钮、表单、模态框）
[ ] 数据显示模式（卡片、列表、表格）

步骤 4: 提取设计令牌

从原型CSS/样式中提取:

{
  "colors": {
    "primary": "从按钮中提取",
    "secondary": "从次要元素中提取",
    "background": "从主体/容器中提取",
    "text": "从主体文本中提取"
  },
  "typography": {
    "fontFamily": "从font-family中提取",
    "fontSize": { "base": "16px", "lg": "18px", "xl": "20px" }
  },
  "spacing": {
    "derived-from-padding-margin-patterns": true
  },
  "borderRadius": "从圆角元素中提取"
}

完整模板请参见 templates/design-tokens-extract.json

步骤 5: 生成组件

为每个识别出的组件:

为属性创建TypeScript接口
应用forwardRef模式以支持DOM访问
包含可访问性属性
使用项目的样式方案
添加JSDoc文档

请参见 templates/component-base.tsx 和 templates/component-with-variants.tsx

步骤 6: 集成指导

提供清晰的说明，包括:

文件在项目结构中的放置位置
所需的导入语句
同级依赖（如有）
使用示例

组件输出标准

TypeScript属性接口

interface ComponentProps {
  /** 用于强调的主要变体 */
  variant?: 'primary' | 'secondary' | 'outline';
  /** 影响内边距和字体大小的尺寸 */
  size?: 'sm' | 'md' | 'lg';
  /** 禁用交互 */
  disabled?: boolean;
  /** 额外的CSS类 */
  className?: string;
  /** 内容 */
  children: React.ReactNode;
}

可访问性要求

每个组件必须包含:

语义化HTML元素（使用 <button> 而非 <div>）
键盘导航支持
必要的ARIA属性
焦点管理

命名约定

类型	约定	示例
组件	帕斯卡命名法	`ProductCard.tsx`
属性类型	帕斯卡命名法 + Props	`ProductCardProps`
CSS类	短横线命名法	`product-card-container`
设计令牌	驼峰命名法	`primaryColor`

转换模式参考

全面的HTML → React模式请参见 references/conversion-patterns.md

快速参考

HTML模式	React等效写法
`class="..."`	`className="..."`
`onclick="..."`	`onClick={handler}`
`for="..."`	`htmlFor="..."`
`<input value="">`	`<input value="" onChange={...}>`
内联样式	Tailwind类或样式对象

模板参考

模板	用途
`component-base.tsx`	带有类型和可访问性的基础组件
`component-with-variants.tsx`	带有变体/尺寸系统的组件
`design-tokens-extract.json`	令牌提取结构

转换示例

输入（super-design HTML）:

<button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
  提交
</button>

输出（React + TypeScript）:

interface ButtonProps {
  variant?: 'primary' | 'secondary';
  children: React.ReactNode;
  onClick?: () => void;
}

export const Button = ({ variant = 'primary', children, onClick }: ButtonProps) => {
  return (
    <button
      className={cn(
        'px-4 py-2 rounded-lg transition-colors',
        variant === 'primary' && 'bg-blue-600 text-white hover:bg-blue-700'
      )}
      onClick={onClick}
    >
      {children}
    </button>
  );
};

与Super-Design集成

转换super-design输出时:

读取HTML中引用的主题CSS文件
将主题变量映射到设计令牌
保留原型中定义的动画
维持Tailwind类中的响应式断点

Super-design文件夹结构:

.superdesign/
└── design_iterations/
    ├── theme_1.css      # 主题令牌
    ├── chat_ui_1.html   # 原型迭代1
    └── chat_ui_2.html   # 原型迭代2