AI 功能都做到了，網站卻醜到不能再醜
功能真的都有，但畫面醜到不能再醜
最近在做一個新的站點，一樣會先透過 AI 做過研究、討論需求、撰寫計劃研究等等。然後隨著 AI 越來越強，有時候我會想要「挑戰從計劃 → 開發完成」一口氣完成。
結果它確實做完了。
我要的功能大致都有，需求也不能說沒做到。可是畫面一打開，我腦中只有一句話：真的醜到不能再醜 😆
問題不是某個按鈕壞掉，而是整體的版面、資訊層級、留白和細節都不太對。每個區塊單獨看好像還可以，全部放在一起就不像同一套網站。
我後來也開了 Claude Code，試著在已經做好的版本上繼續調整。它可以幫我修元件、換顏色、改排列等等。但它的腦袋像是固執的老頭一樣，一直卡在我不喜歡的那個版本裡面，怎麼樣都是脫離不了那個糟糕的風格。
改到最後，我還是決定回頭，把開發流程重新走一次。
恩…是啦，工具都有做出來，是這樣沒錯，但不是這樣…
模型變強了，需求還是不能跳過
以前做網站，常見的流程是先整理使用者故事，接著畫 wireframe、做 mockup，確認畫面之後才開始前端與後端開發。
現在 AI 可以把很多步驟加快，但我覺得這個順序還是不能整個跳掉，最基本的概念大概如下：
- 釐清需求：跟 AI 多次對話，確認它的產出符合我的需求。
- 繪製草圖：接著我會請它畫 wireframe。如果需求比較明確、風格也都定義好了，我甚至會直接請它畫 mockup。這個設計稿可以直接放在 Artifact，你可以透過註解或各種方式與它討論。
- 進入開發：接下來開發就會穩定很多，說實在也會比較省 Token。
我現在的開發流程：先釐清需求、畫草圖，再到 Artifact 上標註、修正，確認後才進正式開發。
我自己也很常貪快。看到模型能力越來越好，就會想說：「這次說不定可以直接做到底吧？」偶爾小工具確實可以，但只要網站有多種資料、好幾個頁面，或你對畫面有自己的想法，一步到位通常不太穩。
AI 會努力把你講的功能做出來，但「好不好看」、「資訊應該怎麼排」、「哪個東西要先看到」，這些事情如果沒先講，翻車的機率還是偏高。
它一猜，通常就會做出一個功能都有做到的網站、但絕對不是你想要的網站。
Artifact 是個好工具，你絕對要使用它
文字有一個很麻煩的地方：就是每個人幻想出來的畫面都不一樣，不是你跟人有這樣的問題，跟 AI 當然也是會這樣，所以不管是 ChatGPT 或 Claude 都有推出 Artifact，他會產出畫面後讓你可以跟 AI 在畫布上討論。
Claude 會先把網站草稿、單頁介面或互動畫面做成一個獨立區塊。畫面出來之後，我們就不用繼續用很抽象的方式描述，而是可以直接針對看得到的內容修改。
像是：
- 這個區塊太擠，資訊需要拆開。
- 手機版第一眼要先看到今天的日期，不是星座。
- 這個按鈕不應該這麼醒目。
- 上方資訊太多，可以先收起來。
- 我希望整體更像工具，不要像活動 Landing Page。
這些話在沒有畫面時很難講。真的看到介面之後，哪裡不對通常一下就會浮出來。
我會直接在設計稿上逐點留言。比起重新寫一大段 prompt，指出哪個區塊要怎麼改清楚很多。
我通常會使用 Claude Design 搭配 Artifacts，把畫面先做出來，再一個一個補上我的想法。現在 AI 很強沒有錯，但是決定要提供給使用者什麼東西，還是來自開發者的決定。
有時候來回次數不少，但每一輪都看得到畫面的變化，方向也比較不容易跑掉。
如果你也想這樣做，可以直接從這三句開始
很多人不是不知道要先討論，而是不知道這個細節該怎麼操作，通常我的三個步驟會像如下。
第一階段：釐清需求
我想做一個跟日期和時間有關的網站。
我需要以下功能：
- …
- …
使用技術如下：
- …
請先進行研究，並且與我討論
不要進行開發
這個階段可以用使用者故事來描述。例如「身為一個要安排連假出遊的人，我想快速看到國定假日與農曆日期」，等等
而更重要的是後面的三個小要求：
- 進行研究：先讓 AI 多增加這個網站開發目標的認識（有可能有你沒想到的地方）
- 與我討論：針對需求進行討論，確認雙方認知一致
- 不要進行開發：有時候你幾句話他就直接動手了，這個是阻止他動手開始做
第二階段：繪製草圖
請根據剛才確認的需求製作 wireframe；如果資訊架構已經明確，再做成可以預覽的 Artifact。
先不要進入正式開發。
接下來，不管你是 mockup 或者是 wireframe，都先請他生成之後與其討論。
生成之後，他會提供一個網址給你，你可以在上面加入相關的註解。那麼，這個階段你的目標就是把這整個網站改成你想要的樣子。
請記得，都要等他都確認是你想要的樣子之後，再開始進行開發。
第三階段：進入開發
開始開發
這一段就看你可以動用的預算，還有使用的模型等等，就把它開下去。
在上面幾點如果都討論清楚的情況下，說實在，第一版的開發就會蠻接近於設計稿的樣式。
多花的時間，通常會在後面省回來
先討論、畫 wireframe、做 Artifact，再來回調整，當然比一句「幫我做網站」慢。但這個時間絕對是值得的。
如果方向沒有先對齊，AI 寫程式雖然很快，後面還是要一直改。更麻煩的是，當錯的設計已經變成很多元件和 CSS，AI 的邏輯很容易卡在錯誤的方向上，導致於裡外不是人的感覺。
相反地，在 Artifact 階段把畫面修好，正式開發時會輕鬆很多。AI 有一個清楚的參考，我們也知道自己最後要的是什麼。
AI 越會做，開發者要決定的事情越多
以往我們在人工開發的時候，大部分的精力都會放在執行上面，因為寫程式本身需要花費很多時間。但是現在有了 AI 介入，其實大部分的程式碼都可以由 AI 生成。這時候可以分為三個階段：
- 構想
- 執行
- 驗收
我們人類在執行這段時間基本上都會抽出來，抽出來之後，剩餘的時間都在構想跟最後的驗收上面。
以往大部分時間都花在執行；現在執行交給 AI，人的時間移到構想與驗收。
所以決策能力以及你個人品味，將會影響到構想跟驗收的成果。如果你本身有良好的品味，或是你很了解這個網站的使用者想要什麼樣的東西，那自然而然你所規劃的內容，就更會符合使用者的需求。