UI/UX Interactive Design Workflow / UI/UX 交互式设计工作流

把模糊的产品想法、品牌线索和视觉参考，整理成可以逐页执行的 Pencil Agent 画板生成规范。

This Agent turns rough product goals, brand inputs, and visual references into clear, traceable, page-by-page Pencil Agent canvas instructions.

Capafy Run Online edition: the Agent runs in Capafy’s hosted environment. Buyers do not need to install Codex CLI, choose a model provider, fill a Base URL, provide an API key, or run any local testing utility.

Capafy Run Online 专用版：Agent 在 Capafy 托管环境中运行。买家无需安装 Codex CLI、选择模型服务商、填写 Base URL、提交 API Key，或运行任何本地测试工具。

Best for / 适合场景

• Website, mobile app, H5, dashboard, SaaS, and responsive product planning

• Turning vague product requirements into confirmed UI/UX decisions

• Aligning brand color, visual personality, layout direction, and reference sources before design execution

• Producing one self-contained Markdown specification for each page

• Preparing page instructions that can be handed to Pencil Agent without relying on prior chat memory

• 网站、移动应用、H5、后台、SaaS 与响应式产品的前期 UI/UX 梳理

• 把不清晰的产品需求整理成可确认、可追踪的设计决策

• 在真正生成界面前，统一品牌色、视觉人格、艺术方向、参考来源和页面结构

• 为每个页面生成独立 Markdown 规格文件

• 输出可直接交给 Pencil Agent 从空白画板执行的页面生成指令

What You Get / 交付内容

• A structured discovery interview and missing-information checklist

• A requirements brief with facts, decisions, recommendations, assumptions, and exclusions

• Brand foundation and color decision records

• Visual personality, art direction, and source analysis

• A page index with confirmation status

• One independent page specification per approved page

• Canvas setup, layout structure, color, typography, hierarchy, execution order, forbidden outcomes, and acceptance criteria

• 结构化需求访谈与缺口清单

• 区分事实、决策、建议、假设和排除项的需求简报

• 品牌基础与颜色决策记录

• 视觉人格、艺术方向与参考来源分析

• 带确认状态的页面索引

• 每个已确认页面一份独立页面规范

• 包含画板设置、布局结构、颜色、字体、层级、执行顺序、禁止结果和验收标准的完整指令

Workflow / 工作流

1. Client Interview / 需求访谈
   Understand product goals, users, platforms, flows, brand assets, constraints, and acceptance criteria.
   了解产品目标、用户、平台、流程、品牌资产、限制条件和验收标准。

2. Requirements Brief / 需求简报
   Organize facts, open questions, recommendations, assumptions, exclusions, and decisions for approval.
   整理事实、待确认问题、建议、假设、排除项与待批准决策。

3. Brand Foundation / 品牌基础
   Confirm logo status, existing colors, new identity needs, and brand constraints.
   确认 Logo 状态、已有颜色、新品牌需求和品牌限制。

4. Visual Direction / 视觉方向
   Define visual personality, art direction, mood, color strategy, and design boundaries.
   定义视觉人格、艺术方向、情绪、颜色策略和设计边界。

5. Source Scope / 来源范围
   Register reference images, websites, competitors, screenshots, and how each source may or may not be used.
   登记参考图、网站、竞品、截图，并说明每个来源可以继承什么、不能继承什么。

6. Visual Analysis / 视觉分析
   Extract reusable visual rules, conflicts, risks, and decisions from the source material.
   从参考材料中提炼可复用视觉规则、冲突、风险与决策。

7. Page Specification / 页面规范
   Produce one complete Pencil canvas instruction for one page at a time.
   每次只生成一个页面的完整 Pencil 画板指令。

8. Page Approval / 页面确认
   Revise and approve the current page before moving to the next page.
   当前页面确认后再进入下一页，避免批量生成后返工。

How to Use / 使用方式

Start by describing your product or design goal in normal language. For example:

Example:
I want to design a mobile app for booking private fitness classes. Please interview me first, then create Pencil-ready page specifications one page at a time.

你可以直接用自然语言描述产品目标，例如：

示例：
我想设计一个预约私教课程的移动 App。请先访谈我，再逐页生成可以交给 Pencil Agent 的画板规范。

The Agent will ask for missing information, summarize decisions, and request confirmation at each major checkpoint. For multi-page projects, it creates a page index first, then works through pages serially.

Agent 会追问缺失信息、总结决策，并在每个关键阶段请求确认。多页面项目会先建立页面索引，再逐页串行推进。

Important Boundaries / 重要边界

• This Agent writes and confirms UI/UX specifications. It does not directly operate Pencil.

• It does not generate finished UI, sliced assets, production frontend code, or a live app.

• It does not include the local-only ui-workflow-test utility in this Capafy edition.

• It does not ask buyers to configure model providers, Base URLs, or API keys.

• 本 Agent 只编写和确认 UI/UX 规范，不直接操作 Pencil。

• 它不生成最终 UI 成品、不切图、不写生产前端代码，也不交付可运行应用。

• 这个 Capafy 版本不包含本地专用的 ui-workflow-test 工具。

• 它不会要求买家配置模型服务商、Base URL 或 API Key。

Final Output / 最终输出

The final page files are designed to be handed to Pencil Agent independently. Each page specification is self-contained, so Pencil Agent can start from a blank canvas without relying on hidden context, previous pages, or old conversation memory.

最终页面文件可以逐个交给 Pencil Agent。每份页面规范都是自包含的，Pencil Agent 可以从空白画板开始执行，不依赖隐藏上下文、其他页面文件或旧对话记忆。