unipus-design-ui

🎯 快速开始

1. 提供 PRD：发给我你的 PRD 文件（.md / .docx / .pdf）、飞书文档链接，或直接粘贴文字
2. 等待页面清单：我解析后会列出所有页面和缺失问题
3. 确认清单：告诉我页面是否完整，补充缺失信息
4. 等待设计 Prompt：我生成完整的 AI 生图 Prompt
5. 确认 Prompt：检查描述是否准确
6. 进入 Figma Make：附上 PM 提供的 Figma 原型，激活 Make Kit（如有），粘贴 Prompt 生成设计稿
7. 发给 PM 确认风格：草图发给 PM 线下确认
8. 精修后：告诉我「可以生成评审清单了」，我输出自查清单

---

📥 输入要求

• PRD 格式：支持飞书文档链接、.md / .docx / .pdf 文件，或直接粘贴文字
  • 飞书链接 → 自动调用 unipus-feishu-read-write 拉取文档内容
• PRD 状态：需求已明确，不需要再讨论需求本身
• 如果没有 PRD：这个 Skill 用不了，需要先用 PRD 开发技能

---

Purpose

把 PRD 转化为设计师可以直接使用的两个核心产出：

1. 完整的 AI 生图设计 Prompt：一次输入即可生成多页原型
2. 设计评审自查清单：根据 PRD 动态生成，精修阶段对照使用

Skill 价值： PRD 写的是「做什么」，设计师和 AI 生图工具需要的是「怎么画」。两者之间存在翻译损耗：

• PRD 里的功能描述 → 需要拆解成页面 + 状态 + 交互
• 缺失信息（空态/错误态/边界情况）PRD 通常不写，但设计必须处理
• 交互细节、状态切换、跳转关系需要明确描述

这个 Skill 的价值是消除翻译损耗，让设计师把时间花在设计决策上，而不是需求拆解上。

不做什么： 本 Skill 不替代设计师出图，不生成像素级 UI 规范，不介入精修过程。设计决策由设计师主导，Skill 负责把需求翻译清楚。

---

Key Concepts

什么是 Figma Make？

Figma 官方的 AI 生图工具，根据文字描述直接在画布上生成可编辑的页面设计。

特点：

• 输入一段完整描述 → 自动生成可编辑的页面设计
• Prompt 越完整，生成质量越高
• 支持多页面结构 + 页面间跳转
• 生成结果可插入画布手动编辑
• 可附加参考设计稿、截图，以及接入团队设计系统（Make Kit）

好的 Prompt 包含：

• 页面结构（每个页面有什么区域/组件）
• 状态描述（正常态/空态/加载态/错误态/成功态）
• 交互逻辑（点击后跳转哪里、有什么反馈）
• 功能细节（每个功能的行为描述）

---

Application

Phase 1：解析 PRD，梳理页面清单

输入： 用户提供 PRD（飞书文档链接 / .md / .docx / .pdf 文件 / 直接粘贴文字）

• 飞书链接 → 调用 unipus-feishu-read-write 拉取内容后解析

执行： 逐段阅读 PRD，提取并整理：

页面清单输出格式：

| 页面名称 | 核心功能 | 主要用户操作 | 备注 |
|---------|---------|------------|------|

同时输出：

• 缺失信息清单：设计需要但 PRD 未说明的内容
• 设计难点预警：复杂交互或边界状态

🔴 卡点 1 等设计师确认：

1. 页面清单是否完整？（有没有漏掉的页面？）
2. 缺失信息清单里的问题，哪些可以先给推荐方案继续？

---

Phase 2：生成完整设计 Prompt

输入： 确认后的页面清单 + 补充信息

执行： 生成一份完整设计 Prompt，结构如下：

[产品定位]
一句话描述产品用途和目标用户

[页面列表]
逐页描述：
- 页面名称
- 布局结构（主要区域划分）
- 核心组件
- 状态枚举（正常态/空态/加载态/错误态/成功态）
- 数据示例

[页面跳转关系]
明确说明每个跳转触发条件和目标页面

[弹窗/特殊交互]
描述需要单独设计的弹窗、模态框等

关键原则：

• 只描述功能，不描述样式：不提及颜色/圆角/边框/间距等 UI 细节，风格由 PM 原型和 Make Kit 决定
• 不写设计规范：规范数值由设计师参考自己团队的规范，Prompt 中不虚构
• 描述要具体：每个页面有什么组件、组件有什么用、点击后发生什么
• 数据示例用真实感内容：填写「张伟」「英语听力训练课」等真实感数据，比「xxx」占位符能让 AI 生成更贴近真实的界面

🔴 卡点 2：设计师确认 Prompt 准确，或提出修改意见迭代。

---

Phase 3：在 Figma Make 中生成设计稿

前提： Figma 付费账号（Professional 及以上），有 Full seat 权限。

将 Phase 2 的 Prompt 粘贴进 Figma Make，结合以下功能提升生成质量：

---

附上 Figma 设计稿作为参考（默认步骤）

有 PM 原型、过往设计稿，或需要在现有稿子上做迭代时，将其附进输入框作为参考，Make 会读取图层结构和布局，在此基础上生成设计稿。

操作：

1. 打开 Figma → 右上角菜单 → Make，进入 Make 编辑界面
2. 在原型 / 参考稿中选中目标 Frame 或图层，右键 → Copy link to selection 复制图层链接
3. 在 Make 输入框点击 Attach a design，粘贴刚才复制的链接
4. 粘贴 Phase 2 的 Prompt，发送生成

适用场景：附 PM 原型作结构参考、附过往设计稿保持风格一致、在现有稿上迭代局部页面。

---

上传截图或其他参考图

没有 Figma 原型时，可以上传截图作为布局参考。

操作：

• 点击 Add images and files，选择截图（支持 JPEG、PNG、SVG、WEBP）
• 也可以直接拖拽图片到输入框
• 图片作为「风格参考」使用——Make 参考布局、色彩和元素位置，不会 1:1 复刻
• 如需 1:1 还原，在 Prompt 中说明「请按这张图 1:1 重建」

---

接入设计系统（Make Kit）

如果团队配置了 Make Kit，激活后 Make 生成时会自动套用设计系统的组件、颜色和样式，生成结果直接符合团队规范。

日常使用：

1. 在输入框旁点击 Select a Make kit
2. 从列表选择团队的 Kit
3. 粘贴 Prompt 后生成，结果自动应用设计系统

Make Kit 配置（一次性，由设计系统负责人完成）：

Make Kit 包含三部分：

• npm 包：提供组件库的代码上下文
• 设计库变量和样式：从 Figma 设计文件导入颜色、字号、间距等 token
• Guidelines 文档：用 Markdown 写的使用规则，告诉 Make 什么时候用什么组件

配置步骤：

1. 发布设计系统到 Library：在设计系统文件中点击菜单 → Publish to Library
2. 新建 Make 文件 → 右上角 Settings → Create a kit → 选择 Assemble your kit
3. 添加 npm 包（填写组件库包名）+ 导入 Library 样式
4. 点击 Add guidelines，让 Make 自动生成 Guidelines，或手动在 guidelines/ 文件夹写 Markdown
5. 用 Prompt 测试效果，确认组件和样式被正确调用
6. 点击 Publish kit 发布给团队

📖 Get started with Make kits

---

生成后： 满意后点击右上角 Copy design，在 Figma 画布中粘贴，发给 PM 进行风格确认。评审通过后进入精修阶段。

---

Phase 4：生成设计评审自查清单

触发方式： 精修完成后，设计师/PM 手动告诉我「可以生成评审清单了」

执行： 根据当前 PRD 的具体内容，动态生成自查清单，结构如下：

## 设计评审自查清单
> 基于：[PRD 名称] | 生成时间：[日期]

### 功能完整性
- [ ] 每个页面是否都有对应设计？
- [ ] 核心功能入口是否清晰可见？

### 状态覆盖
- [ ] 空态、加载态、错误态、成功态是否覆盖？
- [ ] 边界情况是否有对应提示？

### 交互完整性
- [ ] 页面跳转关系是否完整？
- [ ] 按钮点击后是否有反馈？

### 边界情况
- [ ] 错误提示是否设计？
- [ ] 权限限制（未登录等）是否考虑？

### 图层结构与命名规范
- [ ] 图层层级是否清晰：页面 > 组件 > 元素，严禁层级混乱
- [ ] 组件和元素命名是否遵循公式：`[组件类型]_[具体名称]`（全英文）
  - 示例：`Input_username`、`Button_submit`、`Card_historyItem`
- [ ] 相关联元素是否已编组（Group），禁止散落图层
- [ ] 页面内各 Frame/Group 是否按功能区块分层命名

### 组件一致性
- [ ] 同类组件（按钮/输入框/卡片）样式是否统一？
- [ ] 是否复用了设计系统中已有组件，避免重复造轮子？

### 文字与内容适配
- [ ] 超长文字是否有截断方案（省略号/换行限制）？
- [ ] 不同内容长度下（空/短/长）布局是否稳定不变形？

---

Examples

Phase 1 输出示例

页面清单：
| 首页   | 登录入口、新建按钮、历史记录列表 | 查看/继续/下载 | 需要区分已登录/未登录态 |
| 制作页 | PPT预览、参数配置、视频生成     | 上传/配置/生成 | 含多个生成状态          |

缺失信息：
1. 历史记录最多保存几条？超出后如何处理？
2. 生成失败后用户可以重试吗？

---

Common Pitfalls

Prompt 太短，AI 自由发挥

症状： 只写了功能名，没写布局和状态 后果： 生成的页面结构和预期完全不同 修复： Phase 2 确保每页有布局+状态+示例数据

跳过卡点直接生成

症状： 跳过卡点 1/2，直接开始写 Prompt 后果： 漏掉页面或需求理解偏差，后期返工 修复： 每个卡点必须经过设计师确认

把风格和规范写进 Prompt

症状： Prompt 里写了「蓝色按钮」「圆角 8px」等样式描述 后果： 限制 Make Kit 和设计系统的发挥空间 修复： Prompt 只描述功能，风格由 PM 原型和 Make Kit 决定

跳过 Phase 4 直接交付

症状： 精修完成后直接给开发，没有对照自查清单检查 后果： 遗漏状态覆盖、图层混乱、命名不规范，开发切图费劲，返工成本高 修复： Phase 4 是交付前必须走的最后一关，不可跳过

---

Common Issues

Q: PRD 信息太少怎么办？

A: Phase 1 会列出缺失信息清单。如果 PRD 过于简略（只有几行字），建议先补充 PRD 再使用这个 Skill，否则生成的 Prompt 质量无法保证。

Q: 生图效果不好怎么办？

A:

1. 检查是否附上了 PM 原型（布局骨架很关键）
2. 检查是否激活了 Make Kit（没有设计系统参考时生成容易偏差）
3. 检查 Phase 2 的 Prompt 是否描述够具体
4. 可以把生成结果发给我，我帮你分析问题

---

References

• Figma Make
• Get started with Make kits