用途：把 HTML 设计原型实现为生产级 React 组件，并强制符合玻璃拟态样式与代码质量标准。由关键词自动触发，如“implement design”“prototype to production”“convert HTML”“glassmorphism component”“HTML to React”。
主要能力：提供五步工作流——分析、映射、脚手架、实现、校验。分析阶段用脚本提取 HTML 结构，输出组件层级、CSS 类、交互元素与布局模式；映射阶段交互式确定组件名、所属模块、shadcn/ui 组件映射及玻璃拟态类映射；脚手架阶段按模板生成 .tsx 文件，含 TypeScript 接口、导入、Props 结构与 TODO 标记；实现阶段由用户编写业务逻辑；校验阶段检查文件行数、复杂度、接口命名、类有效性与导入模式。
使用方式：在项目根目录（frontend/）运行脚本。分析：./.claude/skills/design-to-production/scripts/extract-structure.sh <html-file-path>；脚手架：./.claude/skills/design-to-production/scripts/scaffold-component.sh --name "ComponentName" --module "practice" --template "interactive-card"；校验：./.claude/skills/design-to-production/scripts/validate.sh <component-path>。模板有 interactive-card、display-card、layout-section。
适用场景：将玻璃拟态 HTML 原型落地为 React 组件，常见于练习、评估、结果、个人资料、题目、首页等模块。
限制：需在项目根目录运行；玻璃拟态类须在 styles/glassmorphism.css 中已批准；校验失败可运行 quality-reviewer 查看详情。版本 1.0.0，2025 年 10 月更新。