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

执行流程：

读取 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 实现效果
保留所有中间产出以便后续迭代和优化