用途：该技能针对用户提供的参考 UI 图片，通过多步工作流系统化地提取设计系统，并生成可直接用于实现 UI 的设计提示词。
主要能力：从参考图片中分析色彩（主色、辅色、强调色、功能色）、字体（字族、字号、字重、行高）、组件样式（按钮、卡片、输入框、图标）、间距体系、动画/过渡及暗色模式变体；可生成结构化 PRD，并组合成最终实现提示词；还包含 React 环境检查与 UI 实现步骤。
使用方式：需先提供参考图片目录与项目概念文件，可选已有 PRD。按步骤用 Task 工具配合 assets/design-system.md、assets/app-overview-generator.md、assets/vibe-design-template.md 模板依次提取设计系统、生成 PRD、合成最终 UI 提示词；输出保存到 documents/ 各子目录。若无可用的 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 截图或设计参考并希望提取设计规范；从视觉示例生成设计系统文档；构建与参考审美一致的 MVP UI；按统一设计原则创建多个 UI 变体。
限制：这是一个自由度较高的工作流，实际效果依赖用户提供的图片与概念信息；PRD 生成需要用户交互澄清；资料未说明具体平台兼容性、收费或性能保证，暂未提供相关内容。