serejaris UI 蓝图构建器
概述
该 skill 支持通过多步骤工作流从参考 UI 图片中系统性地提取设计系统：分析视觉模式 → 生成设计系统文档 → 创建 PRD → 产出可直接用于实现的 UI 提示词。
适用场景
- 用户提供了 UI 截图、设计稿或设计参考图
- 需要从现有设计中提取配色方案、字体排版、间距规范
- 希望基于视觉示例生成设计系统文档
- 构建需要匹配参考风格的 MVP 界面
- 需要按照统一设计原则创建多套 UI 方案
工作流程
第一步：收集输入材料
向用户索取：
- 参考图片目录：包含 UI 截图/设计稿的文件夹路径
- 项目创意文档：描述产品概念和目标的文档
- 已有 PRD（可选）：如果 PRD 已存在，跳过第三步
第二步：从图片中提取设计系统
使用 Task 工具启动通用子代理，提供以下内容：
提示词模板来自 assets/design-system.md：
- 分析配色方案（主色、辅色、强调色、功能性颜色）
- 提取字体排版（字体族、字号、字重、行高）
- 识别组件样式（按钮、卡片、输入框、图标）
- 记录间距系统
- 标注动效/过渡模式
- 包含深色模式变体（如有）
将参考图片附加到子代理的上下文中。
输出：按模板格式生成的完整设计系统 Markdown 文档
保存至：documents/designs/{图片目录名}_design_system.md
第三步：生成 MVP PRD（如未提供）
使用 Task 工具启动通用子代理，提供以下内容：
提示词模板来自 assets/app-overview-generator.md：
- 将
{项目背景}替换为项目创意文档的内容 - 模板会引导完成：电梯演讲、问题陈述、目标受众、独特卖点、功能列表、UX/UI 注意事项
与用户互动，完善和明确产品需求
输出：结构化的 PRD Markdown 文档
保存为变量供第四步使用（也可保存至 documents/prd/）
第四步：组合最终 UI 实现提示词
使用 assets/vibe-design-template.md 将设计系统和 PRD 组合：
替换规则：
{项目设计指南}→ 第二步提取的设计系统{项目MVP PRD}→ 第三步的 PRD 或用户提供的 PRD 文件
产出：完整的、可直接用于实现的提示词，包含：
- 设计美学原则
- 项目专属的配色/字体规范
- 应用概述和功能需求
- 实现任务说明（多套 UI 方案、组件结构）
保存至：documents/ux-design/{创意文件名}_design_prompt_{时间戳}.md
第五步：验证 React 环境
检查是否已有 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 项目中实现 UI。
该提示词会指导：
- 创建多套设计方案（移动端 3 套，Web 端 2 套）
- 按组件组织：
[方案名称]/pages/[页面名称].jsx - 将所有方案汇总到展示页面
模板资源说明
assets/design-system.md
用于提取视觉设计模式的模板。包含以下部分：
- 配色方案（主色、辅色、强调色、功能性颜色、背景色）
- 字体排版（字体族、字重、文本样式）
- 组件样式（按钮、卡片、输入框、图标）
- 间距系统（4dp-48dp 刻度）
- 动效规范（时长、缓动曲线）
- 深色模式变体
在分析参考图片时使用此模板，可确保设计系统的全面覆盖。
assets/app-overview-generator.md
用于协作式 PRD 生成的模板。引导完成以下内容：
- 电梯演讲
- 问题陈述与目标受众
- 独特卖点
- 目标平台
- 功能列表（含用户故事）
- 各界面的 UX/UI 注意事项
旨在通过与用户的交互式沟通来完善需求。
assets/vibe-design-template.md
将设计系统和 PRD 组合的最终实现提示词模板。包含：
- 美学原则（极简主义、留白、色彩理论、排版层次）
- 实用性要求（Tailwind CSS、Lucide 图标、响应式设计）
- 任务规格说明（多套方案、组件组织方式）
此模板生成的提示词可直接用于 UI 实现，无需进一步修改。
最佳实践
图片分析
- 开始分析前先阅读所有图片
- 在多个界面中寻找共同模式
- 同时关注显性样式（颜色、字体）和隐性原则（间距、层次）
- 如果参考图中包含深色模式，务必记录
设计系统提取
- 系统化进行：覆盖模板的所有部分
- 使用具体数值（十六进制色值、px 尺寸），避免笼统描述
- 在可推断的情况下，记录设计选择背后的原因
- 包含各种状态变体（悬停态、禁用态）
PRD 生成
- 与用户积极互动，澄清模糊之处
- 基于对问题的理解主动建议功能
- 确保 MVP 范围切实可行
- 为每个界面/交互场景记录 UX 注意事项
产出文件组织
- 设计系统文件名应具有描述性（基于图片目录名）
- 最终提示词带时间戳以便版本追踪
- 所有产出保存在
documents/目录下便于查阅 - 保留中间产出以便迭代优化
使用示例
用户提供：
reference-images/saas-dashboard/（5 张截图）ideas/project-management-app.md（项目概念文档）
执行流程：
- 读取
reference-images/saas-dashboard/中的 5 张图片 - 使用 Task 工具 → design-system.md 模板 → 分析图片
- 保存至
documents/designs/saas-dashboard_design_system.md - 使用 Task 工具 → app-overview-generator.md 结合项目概念
- 通过与用户互动完善 PRD
- 使用 vibe-design-template.md 组合设计系统 + PRD
- 保存至
documents/ux-design/project-management-app_design_prompt_20251025_153000.md - 检查 React 环境，如需初始化则通知用户
- 使用最终提示词实现 UI
补充说明
- 这是一个高自由度的工作流——根据实际情况灵活调整步骤
- 模板提供结构框架，但鼓励深思熟虑的分析而非机械填写
- PRD 生成过程中的用户互动对质量至关重要
- 最终提示词的质量直接影响 UI 实现效果
- 保留所有中间产出以便后续迭代和优化