同一張草圖，四種投入程度：從「上傳草圖、五分鐘生出一頁能打開的雛形」，一路到「存成雛形助手、用即時預覽工具邊改邊分享、最後交工程做正式版」。想快有快的、想長遠有長遠的，多數人停在第 1 階就夠。
還沒用過 AI？免費版就能試，不用付錢——先看 30 秒新手上路 →
你在紙上畫好了網頁的線框圖，或看到別家網站覺得「就是這種感覺」，很想趕快讓大家看到一個能點、能捲、長得出來的東西——開會比手畫腳講半天，不如直接打開給人看。但「先做個樣子看看」這種小需求，往往還是得排隊等工程師：人家手上一堆正事，你的雛形只能等。結果想法卡在你腦袋裡，遲遲對不齊。
好消息是，這正是這兩年 AI 最拿手的事之一：丟一張草圖給它，幾分鐘就生出一頁能打開的網頁。難的不是生不出來，是它太熱心——會自己加一堆你沒要的東西，還做得很像成品，害人以為「這就能上線了」。
只想馬上動手？ 你就一張草圖、想趕快看到能點的樣子，直接跳到下面的 [第 1 階](#t1) 照做即可。中間這段「AI 會怎麼坑你」是幫你少踩雷的，之後回頭看也行。
AI 生網頁最愛做的事，就是手癢自我發揮：你只畫了三個區塊，它給你一個華麗的動畫首頁；你只要一頁靜態的樣子，它硬塞看起來會動、點了卻沒反應的假按鈕；你還沒想好文案，它就掰一段煞有其事的假文字、假數據填進去。更麻煩的是，它做出來的東西看起來很像成品，容易讓人誤會「這就能上線」——然後真的拿去當正式產品用，出事。所以重點只有一句：講清楚這是雛形、溝通用，忠實照草圖做，沒畫的先別加。
AI 老實說：生網頁這件事，我最會坑你的地方是「手癢」。你明明只畫了三格、只想要一個能看的樣子，我卻很想幫你做得漂亮一點——加動畫、補文案、塞張示意圖、把按鈕做得像真的會動，做完還很有成就感地跟你說「這個可以上線囉」。拜託別信那句最後的話。 請這樣用我：一開口就告訴我「這是雛形、溝通用、忠實照畫、沒畫的先別加」，我才會乖乖照你的草圖排，把力氣花在對齊你的想法，而不是自我發揮。你把我框住，我才真的幫得上忙。
它具體會怎麼坑你？五個「先做個樣子」時天天發生的例子：
| 你草圖上的東西 | AI 可能自作主張 | 但其實是… |
|---|---|---|
| 你只畫三個區塊、其他留白 | 自己補一個華麗首頁、加動畫、多塞你沒要的區塊 | 你要的是忠實照畫，多出來的都得再花時間刪 |
| 按鈕只是想看個樣子 | 做成看起來會動、點了卻沒反應的假按鈕 | 開會的人以為功能好了，其實是空殼 |
| 文字你還沒想好、先寫「標題」 | 塞一段煞有其事的假文案、假數據 | 那是它掰的，被當真拿去對外會出包 |
| 草圖上沒指定圖片 | 從網路抓一張示意圖塞進去（外部連結） | 換台電腦、斷網、分享出去就破圖 |
| 整份就是個雛形 | 做得很像成品、還跟你說「可以上線了」 | 安全、效能、資料都還沒做，直接推出去會出事 |
看出來了嗎？每一個「幫忙」都長得很像貼心——一頁華麗、看起來能用、其實是空殼的假成品，比一張醜醜的草圖危險得多，因為它會騙過會議室裡所有人。這就是為什麼下面每一步，都要先把 AI 框住。
xxx.html 用瀏覽器打開（第 1 階有手把手教存檔，跟著做一次就會）。（HTML 是網頁骨架、CSS 是外觀樣式，湊起來就是一頁網頁——不用懂，會存會開就好。）兩條紅線，整篇只講這一次，後面看到就是提醒你別忘：
① 別把真實資料貼上雲端 AI。 草圖和你請它填的內容裡，別放真實客戶名、電話、金額、個資——雛形常被截圖、被轉傳。更要注意：草圖本身若是公司還沒公開的產品規劃、內部 UI，它就可能是公司機密，丟上消費級 AI 前先確認公司政策；有些免費／個人方案預設會拿你的對話去改進模型，記得到設定裡把「用我的資料改進模型」關掉。真正敏感的東西，等第 4 階在公司內部環境再處理。
② 雛形不是產品，別直接上線。 雛形只用來對齊想法，安全、效能、真資料都還沒做，別當成品推出去。
上面那四個步驟，是你每次做雛形都要做的事。下面這四個層級，是「你想把這件事做到多省事、走多遠」——是兩回事，別搞混。
只想把這一張草圖變成能看的樣子？直接看第 1 階就好，而且大多數人做雛形，一輩子都停在第 1 階——夠用。第 2～4 階等你「常常要做」或「要真的上線」再回來。
先對號入座，再往下讀：
| 你的情況 | 適合 |
|---|---|
| 偶爾一次、想馬上看到樣子跟人討論 | 第 1 階（多數人停這就夠） |
| 常常要做雛形、每次都想套自家品牌色/慣用版型 | 第 2 階 |
| 要邊開會邊改、還想丟個連結給人自己點 | 第 3 階 |
| 對齊完了、真的要上線給客戶用 | 第 4 階（交工程） |
最快的方式，就是把草圖拍照丟給 AI、貼一段講清楚「這是雛形、忠實照畫」的指令。這張卡分兩段：A 是第一次登入（沒用過先做這段），B 是上傳草圖生頁（每次都做這段）。完全沒用過就照 A 走一遍，之後每次只要做 B。
A. 第一次打開 Claude／ChatGPT（照做一次，之後就會了）
claude.ai（或 ChatGPT 打 chatgpt.com）再按 Enter。不要用 Google 搜尋點進去，免得點到假網站。看到你上傳的草圖縮圖出現在對話框上方、旁邊還能打字，就準備好了。
B. 上傳草圖、生出一頁（每次做雛形都走這段）
demo.html。（不改存檔類型的話，記事本會偷偷存成 demo.html.txt，而 Windows 又預設隱藏副檔名，你看到的還是「demo.html」、雙擊卻用記事本打開——這是新手最常卡住、又最難發現的一步。）存好後雙擊那個檔就會用瀏覽器打開。傳草圖前提醒一句：雛形很容易被截圖轉傳，草圖和內容先用「範例客戶 A」「0900-000-000」這種假資料頂著（紅線 ① 詳見上面「解方」）。
如果你常常要做雛形（每週都在把某個企劃畫成頁面），第 1 階最煩的是每次都要重貼那串規則、重講一次「我們的品牌色是這個、按鈕長這樣」。把它存成一個記得你風格的專屬助手，下次點開、丟草圖就好。
先講錢：把「常用助手」做到最完整（大容量知識庫、RAG）通常要月費（ChatGPT Plus 或 Claude Pro，約 US$20/月）。但別急著付——Claude 免費版現在也能開 Project、放少量知識庫，先用免費試試夠不夠；真的「每週都要做、資料量大」再升級。
Project（專案），把上面那段指令放進專案「自訂指令」，再把你們的品牌色碼、常用字體、慣用的頁首/頁尾樣式、範例元件放進專案知識庫。（免費版也能建 Project、約可建 5 個並放少量檔案；付費版容量與 RAG 大很多——你帳號實際能放多少，以畫面顯示為準。）Explore GPTs → ＋ Create，開一個自訂 GPT，把指令貼進 Instructions，品牌規則、範例截圖上傳當它的 Knowledge。（做自訂 GPT 需要 ChatGPT Plus；免費版可以用別人做好的。）這裡藏了整篇最省事的一件事：你在第 1 階寫的那段「雛形＋忠實照畫」規則，原封不動就能貼進這裡當專案指令，再加上你的品牌色和常用元件。之後你只要丟草圖、說一句「照我們的風格做一頁雛形」，它就自動套好——規則和品牌只設定一次，以後每張草圖都省下重講的功夫。
還有 第 3 階、第 4 階（進階——想邊開會邊改、或要真的上線再看）。點卡片標題就能展開，多數人用不到、可以先跳過。
當你要邊開會邊調——「這欄改窄一點」「加個深色模式看看」「換成手機版」，希望講一句、畫面當場就變，還想丟一個連結給同事自己點，這時候比起在對話框裡貼程式碼，更順手的是「畫面即時預覽」型的工具：
一般對話式 AI（Claude／ChatGPT）是「你說 → 它把程式碼／畫面給你看」；即時預覽工具（v0、Bolt 這類）則是把「聊天」和「網頁畫面」擺在同一個螢幕：你在左邊講一句「按鈕改藍色」，右邊的網頁立刻跟著變，還能一鍵生出一個分享連結。適合開會當場調、給人自己點。你不用會寫程式，但坦白說介面比對話框複雜些，第一次可以請懂一點的同事陪你點一次。
但書：這一階雖然畫面很炫，額度和帳號設定還是要花點時間摸；不確定就先停在第 1、2 階，那已經能解決九成的「先做個樣子」需求了。別為了炫而拿大砲打小鳥。
雛形的任務，到「大家看法一致」就結束了。要真的上線給客戶用，一定要交給工程師接手——雛形只證明了「長相和流程對了」，但安全（別人能不能盜資料）、效能（很多人同時開會不會掛）、資料（真的存進資料庫、串後端）這些，AI 生的雛形通通沒做。把雛形直接推出去當產品，是這整件事最大的地雷（紅線 ②）。
一句話收心：你的價值不在「會不會自己刻出正式網站」，在先用雛形把想法講清楚、把大家對齊。對齊完，剩下的交給專業的——這樣分工，你快、工程師也省事。
用 AI 把草圖變雛形，成敗不在它多會做網頁，在你有沒有把用途講清楚、還有你想走多遠：
重點從來不是技術多強——能先做出一個「能點的樣子」，你的想法就不用再卡在嘴上，開會一打開，大家秒懂。
Ridgeline · by Lucas