用途：该技能提供从 HTML 设计原型到生产级 React 组件的引导式转换流程，强调玻璃拟态（glassmorphism）样式与质量规范落实。可由“implement design”“prototype to production”“convert HTML”“glassmorphism component”“design prototype”“HTML to React”等关键词自动触发。
主要能力：核心为五步工作流——分析（分析 HTML 结构）、映射（交互式选择 shadcn 组件并映射玻璃拟态类）、脚手架（生成 .tsx 模板）、实现（编写组件逻辑）、验证（检查质量规范）。附带脚本用于提取结构、生成组件和校验实现，支持从 HTML 中抽取组件层级、CSS 类、交互元素与布局模式。提供 interactive-card、display-card、layout-section 等模板，以及按钮、玻璃卡片、渐变文字等常见模式。
使用方式：先执行 ./.claude/skills/design-to-production/scripts/extract-structure.sh <html-file-path> 分析原型；随后交互式完成组件命名、模块归属、shadcn 组件映射与玻璃拟态类映射；再用 ./.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> 验证。
适用场景与限制：适用于采用 shadcn/ui、@shared/@modules/@lib 导入规范、玻璃拟态样式体系的前端项目。质量规范包括文件不超过 180 行、函数复杂度低于 15、接口以 I 前缀命名、禁止 any 类型。需在项目根目录（frontend/）运行脚本，映射类需对照 styles/glassmorphism.css 中的已批准类。具体支持范围、依赖环境与版本约束以官方资料为准，暂未提供更多细节。