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 · 需求表單 — 生成前那張問卷，為什麼是整條流水線上最重要的一步。