---

name: ui-blueprint description: "从参考 UI 截图或设计稿中提取完整的设计系统，生成包含配色、字体、组件和间距规范的设计文档，并最终产出可直接用于实现、风格一致的 MVP 界面提示词。当用户提供 UI 截图并希望提取设计规范、构建设计系统文档、或需要基于参考风格创建新界面时触发。"

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（项目概念文档）

执行流程：

1. 读取 reference-images/saas-dashboard/ 中的 5 张图片
2. 使用 Task 工具 → design-system.md 模板 → 分析图片
3. 保存至 documents/designs/saas-dashboard_design_system.md
4. 使用 Task 工具 → app-overview-generator.md 结合项目概念
5. 通过与用户互动完善 PRD
6. 使用 vibe-design-template.md 组合设计系统 + PRD
7. 保存至 documents/ux-design/project-management-app_design_prompt_20251025_153000.md
8. 检查 React 环境，如需初始化则通知用户
9. 使用最终提示词实现 UI

补充说明

• 这是一个高自由度的工作流——根据实际情况灵活调整步骤
• 模板提供结构框架，但鼓励深思熟虑的分析而非机械填写
• PRD 生成过程中的用户互动对质量至关重要
• 最终提示词的质量直接影响 UI 实现效果
• 保留所有中间产出以便后续迭代和优化