⚡

设计到生产Skill design-to-production

这是一个将HTML设计原型自动化转换为生产级React组件的引导式工作流工具。它支持玻璃态拟物化（Glassmorphism）UI设计风格，通过5步标准化流程（分析→映射→脚手架→实现→验证）确保代码质量。关键词：HTML转React、设计原型实现、玻璃态拟物化、组件脚手架、前端开发工作流、UI组件转换、代码质量验证、shadcn/ui集成

前端开发 0 次安装 10 次浏览 更新于 3/2/2026

name: design-to-production description: 将HTML设计原型实现为生产级React组件的引导式工作流，采用玻璃态拟物化样式并强制执行质量标准。在将设计原型转换为生产代码时使用。 allowed-tools: [Read, Write, Edit, Bash, Glob, Grep]

设计到生产

将HTML原型转换为生产级React组件的引导式工作流。

TL;DR: 提供HTML文件路径 → 分析 → 映射组件 → 脚手架 → 实现 → 验证

自动触发

通过以下关键词自动触发：

  • “实现设计”、“原型到生产”、“转换HTML”
  • “玻璃态拟物化组件”、“设计原型”、“HTML转React”

快捷命令

# 步骤1：分析HTML原型
./.claude/skills/design-to-production/scripts/extract-structure.sh <html文件路径>

# 步骤3：脚手架组件（交互映射后）
./.claude/skills/design-to-production/scripts/scaffold-component.sh \
  --name "组件名称" \
  --module "practice" \
  --template "interactive-card"

# 步骤5：验证实现
./.claude/skills/design-to-production/scripts/validate.sh <组件路径>

5步工作流

示例：实现 glassmorphism_hints_panel_1.html

1. 分析    → 从HTML提取结构
2. 映射    → 选择shadcn组件 + 玻璃态拟物化类
3. 脚手架   → 生成带样板代码的.tsx文件
4. 实现    → 编写组件逻辑（由TODO引导）
5. 验证    → 检查质量标准

步骤1：分析

用户提供：HTML文件路径（例如：.superdesign/design_iterations/glassmorphism_hints_panel_1.html）

脚本运行：

./scripts/extract-structure.sh .superdesign/design_iterations/glassmorphism_hints_panel_1.html

输出：hints-panel-structure.json 包含：

  • 组件层次结构
  • CSS类（玻璃态拟物化工具类）
  • 交互元素（按钮、表单、输入框）
  • 布局模式（网格、弹性、垂直堆叠）

SKILL.md呈现：检测到的结构摘要

步骤2：映射（交互式）

SKILL.md引导您完成4个决策：

2.1 组件识别

  • 问题：“我们应该如何命名这个组件？”
  • 建议：从HTML文件名或标题提取
  • 示例：HintsPanel

2.2 模块放置

  • 问题：“这个组件属于哪个模块？”
  • 选项：practice, assessment, results, profile, questions, home
  • 示例：practice

2.3 shadcn/ui组件映射

对于每个交互元素：

  • 检测到：<button class="btn-glass">显示提示</button>
  • 建议：使用 @shared/ui/button 中的 Button
  • 确认：用户批准或覆盖

常见映射：

HTML元素 shadcn组件
<button class="btn-*"> Button
<div class="glass-card"> Card
<input type="text"> Input
<select> Select
徽章/标签 Badge

2.4 玻璃态拟物化类映射

  • 从HTML提取：class="glass-card neon-glow-purple text-glow"
  • 映射到React：className="glass-card neon-glow-purple text-glow"
  • 验证：检查 styles/glassmorphism.css 中的批准类

步骤3：脚手架

脚本生成 .tsx 文件使用模板：

./scripts/scaffold-component.sh \
  --name "HintsPanel" \
  --module "practice" \
  --template "interactive-card" \
  --props "title:string,hints:IHint[],onShowHint:(index:number)=>void"

输出：modules/practice/components/HintsPanel.tsx 包含：

  • ✅ TypeScript接口（I前缀）
  • ✅ 正确导入（@shared/ui/*，玻璃态拟物化类）
  • ✅ 来自HTML分析的props结构
  • ✅ 标记逻辑位置的TODO注释
  • ✅ 应用的玻璃态拟物化类

步骤4：实现

SKILL.md提醒：

  • 文件位置：modules/practice/components/HintsPanel.tsx
  • 质量标准：≤180行，复杂度<15，I前缀
  • 脚手架文件中的TODO项标记需要添加逻辑的位置

用户编写：业务逻辑、事件处理程序、状态管理

步骤5：验证

./scripts/validate.sh modules/practice/components/HintsPanel.tsx

检查：

  • ✅ 文件大小 ≤180行
  • ✅ 函数复杂度 ≤15
  • ✅ 接口命名（I前缀）
  • ✅ 玻璃态拟物化类有效性
  • ✅ 导入模式（@shared, @modules, @lib）
  • ✅ 无 any 类型

输出：通过/失败 + 修复建议

模板类型

为您的组件选择合适的模板：

模板 用途 包含内容
interactive-card 按钮、表单、用户操作 Card, Button, Input, 事件处理程序
display-card 只读内容、统计数据 Card, Typography, 徽章
layout-section 页面区域、容器 布局包装器、网格/弹性模式

常见模式

模式1：带玻璃态拟物化的按钮

HTML：<button class="btn-glass">操作</button> React：<Button className="btn-glass" onClick={handleAction}>操作</Button>

模式2：玻璃态卡片容器

HTML：<div class="glass-card neon-glow">内容</div> React：<Card className="glass-card neon-glow"><CardContent>内容</CardContent></Card>

模式3：渐变文本

HTML：<h1 class="gradient-text">标题</h1> React：<h1 className="gradient-text">标题</h1>

何时加载参考

SKILL.md自包含用于：

  • 运行5步工作流
  • 常见组件映射
  • 基本玻璃态拟物化类

需要时加载参考：

需求 加载
完整的玻璃态拟物化类列表 references/glassmorphism-mapping.md
shadcn组件决策指南 references/shadcn-component-guide.md
复杂布局模式 references/common-patterns.md
完整工作示例 examples/hints-panel-complete/

故障排除

脚本未找到：确保在项目根目录（frontend/）

无效的玻璃态拟物化类：检查 styles/glassmorphism.css 中的批准类

验证失败：运行质量审查器查看详细错误

版本：1.0.0 | 更新日期：2025年10月 模式：遵循模块脚手架优化结构