用 Claude 做網站，先要線框圖再要完稿：兩段 prompt 做出一看不像 AI 的首頁

大家叫 AI 做網站，常常第一句就說「幫我做一個漂亮的首頁」。結果配色、照片、排版一次全丟給它決定，做出來就很像其他 AI 網站。這篇換個順序：先要一張灰階線框圖，結構定好了，再要完稿。示範用的是一間虛構的台北小花店「日常花事 Everyday Bloom」，下面的線框圖和完稿都是 Claude Design 實際做出來的，照片是 ChatGPT 生成的。

01先搞懂：線框圖是什麼，為什麼要先做

線框圖（wireframe）就是網站的骨架：只有灰階的方框和文字，照片的位置畫一個打叉的框代替。它只回答三件事：有哪些區塊、什麼順序、按鈕放哪裡。

一次要成品，Claude 要同時決定結構、配色、字型和照片，哪一項出錯你都得整頁重來。先要線框圖，它只要專心排結構；你也能在還沒上色前，就先把順序改對。

左邊是灰階線框圖的首頁主視覺，右邊是同一區做好的完稿，花店門口照片加襯線標題 — 同一個首頁主視覺：左邊是線框圖，右邊是完稿。位置和按鈕都沒變。

02準備：先看參考，再打開 Claude Design

到 Pinterest 搜尋你這一行的網站，例如花店就搜「florist website homepage design」。
挑 3 到 5 張你喜歡的，每張寫一句它好在哪裡。
打開 claude.ai/design，登入 Claude 帳號，開一個新專案。我們選的是做線框圖的模板，模板名稱之後可能會改，找不到就用一般專案也可以。

我們替花店寫下的參考重點是：主視覺用一張真的花束照片，不用色塊；標題用一行大大的襯線字；整頁一個米白底色加一個重點色；日期、價格這類資訊集中在一個區塊，其他地方留白。這些句子之後可以直接貼進 prompt。

Claude 官方頁面寫明，Claude Design 包含在每一種方案裡，免費方案也能用。claude.ai/design 這個獨立網站會開到 2026 年 12 月 14 日；現在在一般的 Claude 對話裡也已經能用 Claude Design。

Claude Design 官方介紹 — 方案、claude.ai/design 開放日期、匯出格式

03第 1 步：第一段 prompt，只要線框圖

第一段：線框圖（把［］換成你的）

幫［店名］畫首頁線框圖：給 3 個方向，灰階、不要配色、圖片用叉叉框代替，每一區旁邊用小字寫為什麼這樣排。全部繁體中文。

我們實際貼的是：「幫台北小花店『日常花事』做首頁線框圖：灰階、不要配色，圖片位置用打叉的框，每一區旁邊用小字寫為什麼這樣排。給 3 個方向。」

Claude Design 做出的三個首頁線框圖方向並排，右側都有小字說明 — Claude 給的 3 個方向：經典直排、雜誌編排、訂花優先。每一區右邊都有它寫的說明。

三個方向差在哪裡：經典直排是主視覺、本週花束、訂花步驟一路往下；雜誌編排的照片大小交錯，像在翻雜誌；訂花優先則是一進來就看到快速訂花的表單。

04第 2 步：讀它寫的理由，挑一個方向

每一區旁邊的小字，是這一步最有用的地方。例如主視覺大圖，它寫「第一眼建立品牌氛圍」；本週花束，它寫這是「主要營收入口」，用限量數字製造「這週才有」的感覺。

經典直排線框圖的上半部，右邊是導覽列、主視覺大圖、本週花束的說明文字 — 經典直排的上半部：右邊的小字就是 Claude 說明為什麼這樣排。

客人第一個想做的事（訂花、預約、看價格），有沒有在第一個畫面就看得到？
每一區的理由你同不同意？不同意的，直接跟它說要改哪一區。
有沒有哪一區拿掉也沒差？拿掉，頁面會更清楚。
用手機寬度再看一次，順序還順不順。

我們挑了 A 經典直排。整頁只有六個區塊：主視覺、本週花束（三款）、訂花只要三步、花藝課程、來店裡走走、頁尾。

05第 3 步：先在 ChatGPT 把照片生好

線框圖裡每個叉叉框，就是一張要準備的照片。照我們的線框圖數一數，需要六張：店面、三款花束、單車外送、花藝課。

照片提示詞（每張開一個新對話，把［］換成你的）

幫［店名］生成一張［店面／商品／服務］的照片：［主角和場景］，［暖色自然光、米白和粉色調］，方形構圖，畫面裡不要文字，不要拍到人的臉。

六張 ChatGPT 生成的花店照片：店面、麥穗乾燥花、芍藥花束、粉色玫瑰花束、單車籃裡的花束、花藝課桌面 — 我們在 ChatGPT 生好的六張照片，色調都統一成米白加粉色。

06第 4 步：第二段 prompt，照線框圖做完稿

回到同一個 Claude Design 專案，附上照片，貼第二段 prompt。重點是叫它「結構不動」和「另存新檔」。

第二段：完稿（把［］換成你的）

照方向［A／B／C］的線框圖做首頁完稿：結構和區塊順序完全不變，叉叉框全部換成我附的照片，配色［主色＋米白］、標題用襯線字。另存成新檔案，不要改線框圖。

本週花束區塊：左邊三列叉叉框，右邊三列真的花束照片加名稱和價格 — 本週花束：線框圖是三列，完稿還是同樣三列，名稱和價格也一樣。

訂花只要三步區塊：左邊是叉叉框，右邊換成單車籃裡的花束照片 — 訂花只要三步：叉叉框換成單車外送的照片，三個步驟的位置沒變。

仔細看會發現，文字變得比較完整。線框圖寫「選花束」，完稿寫「選一款本週花束」。文案可以變，區塊和順序不能變。

07第 5 步：兩個檔案並排，一區一區對

左邊是整頁線框圖，右邊是整頁完稿分成兩欄，從主視覺到來店裡走走 — 左邊是整頁線框圖，右邊是完稿（太長了，分成兩欄）。從主視覺到地址，六個區塊都對得上。

區塊順序跟線框圖一樣嗎？
每個叉叉框都換成你的照片了嗎？有沒有同一張照片用了兩次？
數量一樣嗎？例如三款花束還是三款。
主要按鈕（我要訂花、報名課程）還在原本的位置嗎？
地址、營業時間、價格這些資訊，有沒有換成你的真實資料？

花藝課程區塊：左邊是叉叉框和報名按鈕，右邊換成花藝課桌面照片和報名課程按鈕 — 花藝課程：照片換上了，日期和「報名」按鈕還在同一個地方。

08要注意

「日常花事 Everyday Bloom」是虛構品牌，頁面上的地址、價格和課程日期都是示範用的，不是真的店。
線框圖和完稿由 Claude Design 生成，照片由 ChatGPT 生成。這篇是 2026 年 10 月做的，介面和模板名稱之後可能會改。
真的要上線，把 AI 生成的照片換成你店裡的實拍，客人才不會覺得被騙。
官方列出的匯出格式有 PDF、PPTX、獨立的 HTML 檔，也可以送到 Canva。要變成能上線的網站，還需要另外架設。
Pinterest 的參考圖只拿來看方向，不要把別人的設計或照片直接放進你的網站。