用途：该技能用于从参考 UI 图片中系统化提取设计系统，并生成可直接用于实现的 UI 设计提示词。适用于用户提供 UI 截图、设计稿或设计参考，需要提取配色、字体、间距，或希望按参考风格构建 MVP 界面、生成多个风格一致的界面变体时。
主要能力与工作流：整体流程为分析视觉模式→生成设计系统文档→创建 PRD→产出可实现的 UI 提示词。
第一步收集输入：参考图片目录、项目想法文件，以及可选的已有 PRD（若已有则跳过第三步）。
第二步从图片提取设计系统：使用 Task 工具配合通用子代理，采用 assets/design-system.md 模板，分析配色（主色、辅色、强调色、功能色）、排版（字体、字号、字重、行高）、组件样式（按钮、卡片、输入框、图标）、间距系统、动画与过渡模式，存在深色模式时一并记录。输出保存为 documents/designs/{image_dir_name}_design_system.md。
第三步生成 MVP PRD（未提供时）：使用 assets/app-overview-generator.md 模板，把 {项目背景} 替换为项目想法文件内容，涵盖电梯演讲、问题陈述、目标受众、独特卖点、功能列表、UX/UI 考虑，并与用户交互细化需求。
第四步合成最终 UI 实现提示词：用 assets/vibe-design-template.md，将 {项目设计指南} 替换为设计系统、{项目MVP PRD} 替换为 PRD，产出包含设计美学原则、配色排版指南、应用概览与功能需求、实现任务的完整提示词，保存到 documents/ux-design/{idea_file_name}design_prompt{timestamp}.md。
第五步验证 React 环境，检查现有项目：find . -name "package.json" -exec grep -l "react" {} ;，若没有则提示用户执行：npx create-react-app my-app、cd my-app、npm install -D tailwindcss postcss autoprefixer、npx tailwindcss init -p、npm install lucide-react。
第六步实现 UI：按最终提示词在 React 项目中实现，创建多个设计变体（移动端 3 个、网页端 2 个），组织为独立组件 [solution-name]/pages/[page-name].jsx，并在展示页汇总所有变体。
限制与说明：这是一个高自由度工作流，可根据上下文调整步骤；模板提供结构但鼓励深入分析。PRD 阶段的用户交互对质量很关键，最终提示词质量直接影响 UI 实现效果。中间产物应保留以便迭代。资料来源未提供具体的收费、价格或平台信息。