第 3 章

做出完整的網站

預計時間 30 分鐘 這章結束時你有 完整的一頁式網站，而且你知道怎麼改

觀念：好網站的兩個重點

你現在有一個名片版網站了。這章要把它變成能幫你接案、賣東西的完整網站。只要記住兩件事：

看完做什麼，只選一個預約、購買、訂閱、私訊、下載，選一個最重要的。網站不是名片，是讓陌生人採取行動的地方，整個網站都圍繞這個行動來設計。
第一版七成像，剩下三成靠修改不用一開始就想得很完美。先讓 AI 做出來，再照著畫面說哪裡要改，這章大部分時間都花在這裡。

步驟 1：讓 AI 訪問你，做出完整網站

先準備照片（有的話）

在「我的網站」資料夾裡新增一個資料夾，取名「素材」。你的作品照、大頭照、Logo，有的就複製進去，檔名不用改。沒有也沒關係，AI 會先去免費圖庫找圖補上。

貼上這段

提示詞 ⑤　做出完整網站每個新網站用一次

我想把現在的名片版網站改成完整的一頁式網站。請照這個順序做：
1. 先訪問我：一次只問一題，附上選項讓我選，最多問 6 題。要問到：我是誰、給誰看、看完希望他做什麼（只選一個）、要放哪些內容、想要的感覺、不要什麼。
2. 把我的回答整理成「需求單.md」存在資料夾裡，給我看一眼，我說 OK 再繼續。
3. 照需求單做出網站，取代現在的名片版。電腦版和手機版都要好看、好用；「看完做什麼」的按鈕在最上面和最下面都要有。
4. 圖片：「素材」資料夾裡有我的照片就優先用。不夠的，從 Unsplash 或 Pexels 這類可免費商用的圖庫找適合的圖，下載到「素材」資料夾，並把每張圖的來源記在「素材/圖片來源.md」。網站用到的圖片，記得放進 public 資料夾，上線時才會一起送上去。
5. 我沒給的文字，先幫我寫一版。
6. 做好後先存一個版本（只存在電腦裡，先不要上線），打開預覽給我看，並用電腦和手機的尺寸各檢查一次。最後列出哪些圖片和文字是你暫時找的、寫的，我之後要確認。

回答問題的小技巧

說真話，不用修飾。「我其實想多接企業案」比「提供多元服務」有用十倍。
舉例子。「像某某人的網站那樣簡單」，AI 就懂了。
不知道就說不知道。請它「給我三個選項，說明差別」。

步驟 2：看預覽，說哪裡要改

Claude 會在旁邊打開預覽。這時網站還沒上線，只有你看得到，放心改。

修改公式：哪裡＋現在怎樣＋希望怎樣

複製貼上給 AI

〔哪裡〕現在〔怎樣〕，希望改成〔怎樣〕。

😐 太模糊	😀 一次就改對
感覺怪怪的	最上面的大標題太小，手機上看不清楚，請放大
顏色不對	按鈕的藍色太冷，改成跟 Logo 一樣的橘色
再好看一點	作品區一排三張太擠，手機上改成一排一張

最常做的修改，可以這樣說

你想做的事	可以這樣說
換成自己的照片	先把照片放進「素材」資料夾，再說「把作品區第二張換成素材資料夾裡的〔檔名〕」
改文字	「自我介紹那段改成：〔新的文字〕，口氣再輕鬆一點」
改價格或資訊	「方案 B 改成 12,000 元，其他不動」
加一區	「在聯絡按鈕上面加一區客戶回饋，先放三則，內容你先擬」
刪一區	「拿掉合作流程那一區」
調整順序	「把作品區移到自我介紹上面」

四個讓修改更順的習慣

一次改 1～3 件事。改太多，出錯時很難知道是哪一個。
截圖圈起來。截圖貼給 Claude，說「圈起來的地方」，比文字描述準。
說不出哪裡怪，就請它給選項。用下面這段。
改壞了就說。「剛剛那個修改我不喜歡，請改回去」；越改越亂，就說「請改回第一版存的那個版本」。

沒靈感的時候

這一區我說不出哪裡怪。請給我三種不同的設計，並排讓我在預覽裡比較，說明各自的差別，我選好再套用。

步驟 3：說「上線」

改到滿意了，就用第 2 章練過的那句：

日常上線第 2 章學過的那句

上線

Claude 說完成後，馬上用手機和電腦打開你的網址，看看完整的網站。

成功長什麼樣

資料夾裡有「需求單.md」「看完做什麼」只有一個
你自己改過至少一次，而且改成你要的樣子
網址上是完整的網站，不再是名片版
用電腦和手機都打開看過，字看得清楚，沒有東西超出畫面
你知道哪些圖片和文字是 AI 暫時放的AI 最後列給你的清單

卡住了？

狀況	怎麼做
AI 一次問了好幾題	說「請一次只問一題」
不知道要給誰看	說「請根據我做的事，給我三種可能的對象，說明各自適合放什麼」
想做的行動不只一個	說「我想要 A 和 B，請幫我判斷哪個最重要，另一個放在哪裡比較好」
圖片沒出現	說「網站上的圖片沒顯示，請檢查檔名和路徑」
AI 說找不到我的照片	確認照片真的在「我的網站」裡的「素材」資料夾，再把完整檔名告訴它
AI 找的圖不喜歡	說「把〔哪一張〕換掉，我想要〔什麼感覺〕的圖，給我三張選」
看不到預覽	說「請打開預覽給我看」；還是沒有，說「請告訴我預覽的網址」
對話太長，AI 變慢或忘東忘西	開新對話，說「先讀 AGENTS.md 和需求單.md，接著做」

萬用救援任何時候都能用

我卡住了。這是我看到的畫面（附截圖）。我是完全不懂程式的新手，請告訴我發生了什麼事，以及下一步要按哪裡。能由你處理的，請直接幫我處理。

都做完了嗎？