把模糊需求编译成可执行的 UI 画板指令

UI/UX 交互设计工作流通过严格的八阶段确认流程，把产品想法、品牌信息和视觉参考逐步整理成清晰、可追溯、可直接施工的单页规范。

本 Agent 专注于 UI/UX 前期决策与规范交付：不直接操作 Pencil，不生成界面成品、切片或前端代码。

适合这些场景

• 从零规划网站、移动应用、H5 或响应式产品
• 需求很多但缺少清晰的页面范围和设计方向
• 已有品牌或参考图，希望提炼成一致、可执行的视觉规则
• 需要为多页面项目生成独立、可复用的 Pencil 画板指令
• 希望在开始画界面前，通过逐阶段确认减少返工

你会得到什么

• 结构化客户访谈与需求缺口清单
• 区分事实、决定、建议和假设的需求简报
• 品牌色基础、视觉人格与艺术方向
• 视觉参考来源登记与可追溯分析
• 轻量页面清单和确认状态
• 每个页面一份独立的 Markdown 规范
• 可直接交给 Pencil Agent、从空白画板执行的自包含生成指令

每份页面规范都会覆盖画板基础、页面任务、视觉方向、配色、字体排版、页面结构、空间层级、禁止事项、执行顺序和最终验收。

八阶段工作流

1. 客户访谈：理解产品、用户、平台、流程、品牌、素材和验收目标。
2. 需求简报：整理事实、决定、建议、假设与不做范围，等待确认。
3. 品牌基础：确认现有标志、品牌色或新标志需求。
4. 视觉方向：建立视觉人格、创意母题、艺术方向和配色。
5. 来源范围：登记参考图、网页、竞品和适用页面。
6. 视觉分析：提炼应继承、应排除以及存在冲突的设计线索。
7. 逐页规范：一次只生成一个页面的完整 Pencil 画板指令。
8. 逐页确认：修改并确认当前页后，再进入下一页，直到全部完成。

怎么开始

安装 Skill 后，在希望保存设计产物的项目目录中启动 Agent，并输入：

使用 $ui-interactive-workflow 为我的移动应用开展 UI/UX 前期设计，请从第一阶段访谈开始。

也可以直接说：

请先访谈我，再整理需求简报，确认视觉方向，并逐页生成可交给 Pencil Agent 的独立画板指令。

接下来只需按阶段回答问题，并对每个需要确认的交付物明确回复“确认”或提出修改。工作流会把状态、简报、来源记录和页面规范保存在当前项目中；多页面项目始终串行推进，不会一次生成一堆未经确认的页面。

如何使用最终页面规范

全部确认后，将每个 <页面名称>.md 分别交给 Pencil Agent。每份文件都是施工时的独立真源，不依赖旧画板、其他页面或之前的对话记忆。

可选：ui-workflow-test

ui-workflow-test 是面向 Codex CLI 的多模型隔离测试器，可比较不同模型或 API 服务对同一 UI 工作流的执行表现。它不是八阶段主工作流的必需条件。

python3 <Skill目录>/ui-workflow-test

首次运行会创建本地测试配置；API Key 仅保留在当前进程中，不写入配置、状态或日志。该工具依赖已安装并登录的 Codex CLI，Claude Code、OpenClaw 等客户端可忽略此功能。

运行要求

• 支持 Agent Skills / SKILL.md 的 Agent 客户端
• 能够在项目工作区读写文件
• Python 3
• 如需分析图片或网页参考，客户端还应具备图片读取、网页访问或 OCR 能力

常见问题

没有视觉参考图也能使用吗？
可以。工作流会记录自主设计授权，跳过不适用的来源分析环节。

能一次生成多个页面吗？
会先建立页面清单，但每次只编写并确认一个页面。这样可以让后续页面继承已确认的决策，同时避免批量返工。

会直接生成 UI 或前端代码吗？
不会。本 Agent 的交付物是经过确认、可直接用于 Pencil Agent 的画板生成规范。

能在 Codex 之外使用吗？
八阶段主工作流可以在支持 Skills、文件读写和 Python 3 的客户端中使用；只有可选的 ui-workflow-test 专用于 Codex CLI。