我蓋了一個落地頁，但過程中完全沒打開過 Figma。主要使用的工具是 Claude Design 和 Claude Code，製作期為一週，總共與 AI 進行了超過 300 次的來回交流。
從這 300 次互動中，我學到的是，雖然「製作」這個行為因為 AI 而變得輕鬆許多，但最終品質的上限仍然取決於人類的判斷力。AI 處理的是提供候選方案之前的所有環節，而從候選方案中，將其提升到預期調性，則是負責判斷品質並送回修改的人的工作。
我建立了 Design Harness 的文件網站，這是一個透過四個層面（限制、脈絡、驗證、評估）來處理設計的框架。因為這是一個關於設計的網站，我也有個次要目標，就是想看看在表面細節和互動上能走多遠。
https://x.com/kgsi/status/2072829167285207077
我將會回顧我採取的步驟，以及這 300 次互動花費在哪些地方，還包含了實際的螢幕截圖。
我如何區分使用 Claude Design 和 Claude Code
我用兩個主要工具分工來搭建這個落地頁。Claude Design 是一個對話式設計生成工具，你透過聊天下達指示，它會即時產出一個 HTML 原型。Claude Code 則是一個在終端機中運行的編碼 Agent，會直接修改程式碼。
分工很明確：Claude Design 擅長在早期塑造原型。這次，我提供了一份總結設計方針和線框稿的文件，回答了幾個問題後，第一個版本的落地頁就產出了。這個方法在嘗試方向、探索破壞性創意的階段很有效。
另一方面，像是響應式支援和無障礙細節這類，要將其提升到產品品質的工作，則需要用 Claude Code 來打磨。
用 Design 決定設計，用 Code 完成細節。 我按照這個順序使用它們。
動手之前，先全部訴諸語言
當我決定製作這個網站時，方向已經確定了。我腦中想的是：「如果在經典的海外風格調性上，加入現代的字體和效果，會發生什麼事？」這個概念本身就是從 Design Harness 文件衍生出來的。
請注意，由於 Claude 無法自行生成圖像，我將這部分交給 ChatGPT Images 2.0。我從範例網站圖片中挖掘替代構想，建立理想網站的靈感板，並生成背景圖片。我事先把所有東西都用文字和圖像具體化，定義出『好』的方向。 後續所有的互動本質上都是在與這個方向進行對照。
用 Codex (ChatGPT Image 2.0) 探索視覺調性，搜尋各種圖片和靈感板。
打磨需要數百次互動（至少）
準備工作完成後，就開始了與 Claude Design 的反覆來回。回顧截圖，總共有超過 200 次互動（以總製作時間來看大約是一週）。以下是各個階段的互動次數分配：
- 「落地頁網站生成需求」：約 80 次
- 「Design Harness 動畫」：約 80 次
- 「KV 文字背景顯示動畫」：約 50 次
- 「改進 Design Harness 說明」：約 10 次
開場載入動畫和主視覺效果，特別是這裡耗費了非常多次互動。這些效果並非一次完成，而是我疊加指示逐步打磨出來的（例如從底部出現的效果、疊加模糊效果等）。
Claude Design 的截圖。由於隨著上下文增加，準確度會下降，所以我為每個重要任務都開了新的對話來探索。
另外，我還用 Claude Code 在打磨響應式支援和無障礙細節，所以總共加起來大約是 300 次互動。根據感覺，我認為 Hero 區塊花費了最多時間。
從 Claude Design 移交給 Claude Code 時，我使用了「分享」功能，但我建議透過「匯出」傳送整個 zip 檔案。雖然「傳送到」比較方便，但它有圖片傳輸限制，而且再現準確度沒那麼高。
從數字上看，這可能像是一件苦差事，但下達指示本身已經變得更容易了。你不再需要完全理解 HTML 和 CSS。Claude Design 有註解功能，可以直接在畫面上的元素上添加評論。只要你指出想修改的部分，幾乎任何詳細的指示都能被理解。因此，我給出的指示大致分為三類：
- 用註解指出元素，修正細節。
- 用文字描述動態效果，例如 KV 文字背景顯示。
- 將調性重新對齊到「經典海外風格」…… 現在唯一需要的技能，就是把動態和調性訴諸語言的能力。
讓我們以導覽列的反覆修改為例。
最初，這是一個滑鼠懸停時底線滑動的效果。但這很難理解，於是我提供了一個參考實作 URL，讓它改成文字隨機替換效果。但這樣一來，文字在替換時寬度會改變，導致選單位置跑掉。當我要求固定寬度後，間距又變得不一致。即使我回饋說「間距還是不對」，問題也沒解決。最後，我放棄調整寬度，改用固定寬度的等寬字體來設定導覽列，這樣字元寬度不變，替換時就不會移動。這大約花了 5 次互動。
那 300 次互動，大部分都在重複這個循環：提供想參考的網站或實作 URL 來指明方向；簡短地用文字描述對輸出結果的不滿，例如「間距不再一致了」，然後送回修改；如果同樣的問題修正兩次都沒成功，就不再微調，而是改變前提。到頭來，我從未寫過一份長篇的規格文件。
順帶一提，雖然這次我幾乎沒用到，但有一個叫做「動畫詞彙與技能」的文件，如果善加利用，應該能讓下達指示更有效率。https://animations.dev/vocabulary
「製作」與「判斷」的行為
回顧這些互動的內容，這是一個判斷輸出品質，並反覆送回修改的過程。 製作行為本身現在幾乎可以完全交給 AI 處理。只要下達指示，候選方案就會立刻出現。但動畫時機對嗎？留白夠嗎？什麼是好的，什麼是壞的？AI 無法判斷。要讓 AI 一次就輸出預期的調性，目前仍然不可能。如果想提高品質，你只能親自判斷，然後送回修改。
這大概就是為什麼，簡單的輸出無法達到這種品質水準。加州大學柏克萊分校資訊學院的一項研究，觀察了 13 場設計師使用生成式 AI 工具的過程，將輸出傾向於一種看起來「高品質」卻又熟悉風格的現象，稱為 「收斂陷阱」 。
https://x.com/kgsi/status/2074250174986362999
如果沒有將作品送回修改的判斷力，輸出就會停留在那種不屬於任何人的、千篇一律的整潔感上。 那 300 次互動中的大部分，就是用來將輸出從那種狀態，拉回我們預期的調性。
那些能夠「判斷」的人會怎樣？
有一種觀點認為，AI 最終將能完全處理這些美學和品質判斷。我認為在某些領域，這確實會發生。
然而，在這超過 300 次的互動中，每次都是因為我察覺到了不協調感而將作品送回修改，在過程中完全沒有看到任何自動化的跡象。當然，這只是我搭建一個落地頁的 n=1 經驗，我目前還不知道其他設計工作是否也適用。
完成這個過程後，我的預測是，「動手製作」的職位將會減少。一個需要花一週來設計落地頁的工作，將會被只需要花半天與 AI 反覆溝通的工作取代。屆時，能留在位子上的人，將是那些擁有知識和判斷標準，能夠在候選方案一字排開的瞬間，說出「右邊的提案可以，但動畫部分重做」的人。我認為，能夠精通 AI 並做出判斷的人，其需求實際上會增加。
設計師應該磨練的重點，將從他們的「手」，轉移到他們的「眼」。 我在那 300 次互動中做出的判斷，最終依賴於我親手製作東西的經驗。如果真是如此，在我們親手製作東西的次數越來越少的世界裡，有可能只訓練出「眼光」嗎？
順帶一提，可以學習「設計」技能的策展網站「Parascope」目前正成功營運中 👉 http://parascope.design/
