04 · 界面总览：一次生成经过哪几步

界面本身不复杂——左边进度，右边预览，上面选类型。真正要搞清楚的是这条流水线的形状：哪一步在等你决定，哪一步在等它干活，以及哪一步跳过了会在后面加倍还回来。

一条流水线

官网把它概括成四段：挑起点 → 定视觉方向 → 生成产物 → 交付或做成视频。展开成实际操作是六步：

步	谁在动	你要给的东西
1 · 挑类型	你	这次要做的是网页、原型、deck、看板、图还是视频
2 · 挑设计系统	你	一个品牌方向。这一步定完，配色字体间距就锁死了
3 · 写提示词	你	一句话说清目标
4 · 填需求表单	你	它现场生成的问卷，问画布比例、受众、页数、语气
5 · 生成	Agent	—
6 · 改与导出	你	评论、标注、直接编辑，然后导出

第 2 步和第 4 步是新手最容易划过去的，也是「生成出来为什么这么普通」的答案所在。

产物类型

界面上能选的入口大致是这几个（不同版本名字略有出入，桌面版和 Web 版也不完全一致）：

入口	产出	典型用途
「Prototype」	单文件 HTML 界面	落地页、SaaS 界面、移动端界面
「Slideshow」	HTML deck	演讲、汇报、提案。官方 PPT 教程里叫「Deck Mode」
「Dashboard」	带图表的看板	数据面板、控制台
「Image」	位图	海报、封面、图标、头像。教程里叫「Image Mode」
「Video」	动效与视频	产品短片、数据动画，走 hyperframes
「Design System」	一份 DESIGN.md	从截图或 Figma 反向抽品牌

「Deck Mode」和「Slideshow」是同一个东西

官方 PPT 教程里写的是「Image Mode」「Deck Mode」，界面上的按钮写的是「Image」「Slideshow」。指的是同一件事：前者出一张图，后者出一份可编辑的 HTML deck。本书两种叫法都会出现，因为你在两个地方都会看到。

左边和右边

生成开始之后，界面分成两半：

• 左边是过程。 Agent 在读什么、在写哪个文件、跑到第几步，实时滚。这一栏值得看，尤其是第一次——你能从中看出它把你的提示词理解成了什么。
• 右边是结果。 沙箱里的实时预览。产物是真能跑的文件，不是截图，所以右边这个东西就是最终形态。

产物落在哪

在你的项目目录里。这一点值得单独强调一次，因为它决定了后面所有的协作方式：

• 能用 git 管，能 diff，能回滚。
• 能直接交给工程接着写，不用「导出再重建」。
• 不在任何厂商的数据库里。

三个精修工具

生成完之后，改的方式有三种，各有各的场合。这三个在 PPT 工作坊第 9 步 有详细写法，这里先建立印象：

工具	什么时候用	例子
「Comment」	问题挂在某个具体元素上	这个 logo 太大了；这句文案要改
「Mark」	问题是视觉区域的，说不清但能圈出来	这一组整体偏高了；这块要跟标题对齐
「Edit」	你已经知道要改成什么	改一个词、调一档字号

原则是：能用「Edit」直接改的别去重新生成，能圈出来的别用文字描述。整页重生成是最贵的一种改法，留给方向性的问题。

一个容易忽略的按钮

生成类型旁边通常还有「Critique」——让它对着五个维度给自己的产物打分（理念、视觉层次、细节、功能、创新），每项 0 到 10 分，输出一份带证据的报告，分成「保留 / 要改 / 顺手能修」三栏。

做完一版之后跑一次，比你自己盯着看有效得多。详见 进阶 / 反 AI 味。

下一步

05 · 需求表单 — 生成前那张问卷，为什么是整条流水线上最重要的一步。