# UI Blueprint

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

- Skill: `haomingz/ui-blueprint` (Agent Skill, multi-file: 5 files)
- Install (CLI): `npx skillmds@latest add haomingz/ui-blueprint`
- Raw SKILL.md: https://api.skillmd.com/api/skills/haomingz/ui-blueprint/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: haomingz (https://skillmd.com/u/haomingz)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/haomingz/ui-blueprint

---


# 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 项目：
```bash
find . -name "package.json" -exec grep -l "react" {} \;
```

如果没有找到，告知用户需要初始化：
```bash
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 实现效果
- 保留所有中间产出以便后续迭代和优化