H
Howardism
Plate IIAI Coding Practice機器翻譯 · machine-translated過時翻譯 · stale translationENHOWARDISM

以選擇來設計

Nate Parrott 的 Claude Design 實務:當產生候選方案幾乎不花成本時,設計師的工作會移到兩端——先離開鍵盤釐清意圖,再親手編輯最後一哩路——而中間則變成『先要十個選項,再重新混搭可行的兩個。』若沒有方向引導,模型就會收斂到一種容易辨認的慣用美學,因此明確的美學指引是關鍵輸入,而保真度本身也成了控制旋鈕(視覺元素可能造成干擾時,先從線框圖開始)

Article metadata
Publication details
Published:July 25, 2026
Filed:Concept
Domain:AI Coding Practice
Tags:Human AI CollaborationDesignWorkflowPrompting
Reading:12 min
Source:AI-synthesised
About this piece

Articles in this journal are synthesised by AI agents from a curated wiki and are refreshed automatically as new concepts arrive. Topics, framing, and editorial direction are curated by Howardism.

「以選擇來設計」的插圖

資料來源#

摘要#

這是 Nate Parrott 每日使用 Claude Design 一年後描述的工作實務——他正是打造這項工具的人(case-study,第一手陳述,未經量化)。整體形狀像一根槓鈴:前端投入大量人力(先決定自己真正想要什麼,通常是在電腦以外的地方),後端也投入大量人力(親手編輯最後一哩路);成本高昂的中間環節——產出候選成果——則一次生成十個,再從中挑選,而非親自撰寫。

「先要十個選項,再重新混搭。大多數都不會好,沒關係;總會有一兩個可用。接著說:『我喜歡選項 B,也喜歡一點選項 D。給我五個把兩者揉在一起的變體。』」

設計師稀缺的資源不再是製作,而是辨識與規格化:精確掌握想要什麼,才能清楚提出要求;也要能從九個差強人意的選項中認出符合心意的那一個。

槓鈴#

前端——提示之前先想清楚。「我花很多時間寫提示,然後才開始設計。」採用的方法刻意避開鍵盤:按工具的語音按鈕口述、在沙發上用手機的 Notes app 打字、散步時錄下語音備忘,再稍後貼上逐字稿。這條原則不受輸入管道限制:趁不在電腦前時弄清楚自己想要什麼,坐下來後模型才能照著你的確切構想執行。 坐在工具前才開始思考,會把快速的部分浪費在緩慢的工作上。

**中間——廣泛生成,再重新混搭。**產生十個選項,預期其中一兩個可用,再要求模型提供融合它們的變體。請注意這個做法的前提:評估十個候選方案,比親自撰寫一個更省力。對視覺工作而言,這個前提成立,也正是這種做法合理的原因。

**後端——最後一哩路交給人工。**最後微調時直接操作(重新排列、刪除、編輯文字、調整大小、更換顏色),不要用提示逐項要求,原因有二:「直接編輯不耗 token,而且像尺寸和對齊這種小調整,用眼睛判斷本來就更好。」第二個理由更持久——有些決定直接做比描述更快,模型再怎麼進步也改變不了這點。這清楚反駁了「模型變好就能吸收迴圈中的每個步驟」這項假設:最後一哩路不是能力不足,而是指點操作與文字描述之間的頻寬不匹配。

另外兩種技巧也基於同一個頻寬理由:畫出無法描述的內容(在紙上畫出版面、拍照後上傳),以及指著元素說明(點選元素,對著評論欄口述,而不是寫一段文字說明自己指的是哪個元素)。

預設美學確實會造成失敗#

「若沒有方向引導,Claude 會選它最喜歡的某種美學。你大概認得出來。」

這句話出自工具打造者之口,直截了當,還附上了談論其慣用風格的媒體報導連結。這是支持 Why AI Lags at Design 第 3 個理由的直接第一手證據——設計需要新意,程式碼則受益於已知模式,因此回歸平均值對程式碼而言是特性,對設計而言卻是缺陷。Ambrosino 從模型為何落後的角度提出論證;Parrott 描述的則是每天遇到同一現象,必須主動設法應對:

  • 明確指定字型與色彩。
  • 提供情緒板圖片作為靈感。
  • 讓 Claude 發想字型與色彩的搭配,反覆調整到感覺合適——藉模型擺脫它自己的預設,而非接受那個預設。

這種脫離預設的方法可以推而廣之:美學規格沒有明確說明時,結果就會落入美學預設;所以美學指引不是最後才加上的潤飾,而是起始階段不可或缺的輸入。

脫離預設的邊界。一項獨立第三方測試——Evangeline 使用 Meta 的 Astryx 設計系統製作 Salt & Straw(I tested Meta's "agent-ready" design system Astryx. Here's the results.,case-study,n=1)——為此劃定了界線。完整指定的品牌素材(DESIGN.md、分層 token 檔案)確實能扭轉預設美學:在一個完整的多螢幕產品中,珊瑚色、扁平卡片的深度與字體排版都正確無誤。但 Astryx 只有四種元件可深度自訂;所有不在這組範圍內的元件——例如進度條、狀態標籤——無論規格怎麼寫,都會採用 Astryx 自己預設的藍色。因此,這種收斂在設計系統提供設定欄位時,可以透過脈絡修正;沒有設定欄位時,脈絡就無從發揮作用:問題出在設計系統的涵蓋範圍,而非模型的品味上限。值得注意的是,模型全程都正確讀懂了品牌;只是沒有地方能套用品牌設定。還有兩點值得記住:沉默才是風險(品牌顏色若剛好與系統預設相似,看起來就像成功——Astryx 用 Blue Bottle 測試時正是如此),而規格即使在涵蓋範圍內也可能遭違反(某個分段控制項仍加上了陰影,儘管規則明確寫著「永遠不要加陰影」)。完整測試請見 Living Design System。

把保真度當成控制旋鈕#

「保真度不重要時,先做線框圖。要求線框圖快得多,而且能讓 Claude 專注於設計的高層結構,而不是視覺呈現。」

這同時做到兩件事:加快速度,也提供一種引導機制——降低保真度,讓模型和審查者都聚焦在結構上。這是實務工作者對 Polish No Longer Signals Readiness 的回應:當潤飾幾乎免費,它就不再能代表流程進度;因此想得到結構方面的回饋,設計師必須刻意壓下本來會自動出現的潤飾,免得對話被拉到錯誤的層次。

提供真正的脈絡#

「把重複性工作轉化為設計系統」——上傳品牌檔案、標誌、簡報、螢幕截圖、字體規格,Claude 就會產生設計系統,讓「之後製作的每件成品都從你的選擇出發,而不是從空白頁開始。」連結 GitHub 後,它會擷取現有的元件與畫面;「試幾次就能相當精確地重現現有設計。」

這是 Living Design System 以第一方產品功能登場,而非手工製作的 design_system.html;也是將美學預設反制方法提升一個層次的同一種解法:以你自己的素材取代模型的先驗印象。

打造用來製作成品的工具#

Claude Design 的開場動畫是在 Claude Design 裡面製作的——但不是直接做:「我不是動畫師,所以先讓 Claude Design 替我打造一個客製影片編輯器,再用那個編輯器製作動畫。」這是一個比常見情況再深入一層的一次性微型應用程式:它不是用來編輯計畫的介面,而是為人類不熟悉的媒介打造一整套創作工具;工具生成後,人就能在自己有能力評判、卻不會製作的領域裡直接操作。這是槓鈴後端的極致延伸——如果最後一哩路需要一件不存在的工具,就生成那件工具。

這套實務不適用的情況#

Parrott 明確說明了適用界線,這在第一方文章中並不常見:

  • **沒有圖像模型。**Claude Design「不是為圖像生成而打造,所以不適合設計標誌——但這並沒有阻止人們嘗試。」請帶上你已有的標誌。
  • 不適用於要出貨的正式軟體。「如果你要交付正式軟體,請使用 Claude Code。」兩者的分工是構想與生產,可以雙向往返,而非能力高下之分。

延伸閱讀#

  • HTML as the New Markdown — 另一位 Anthropic 實務工作者從不同路徑獨立抵達相同前提:Parrott 的突破是「Claude 很擅長使用 HTML……我們認為 HTML 是網站的格式,但它同時也是豐富、可互動的視覺媒介——你能在投影片、影片檔或 PDF 裡做的任何東西,都能在網頁中完成。」Thariq Shihipar 把這個想法用在計畫上,Parrott 則用在設計上,兩人都沒有引用對方。
  • Why AI Lags at Design — 預設美學收斂是第 3 個理由的第一手佐證(設計需要新意;模型會回歸平均值),這是從為了縮小差距而打造的工具內部觀察到的現象。
  • Polish No Longer Signals Readiness — 先做線框圖就是實際應對方式:刻意降低保真度,讓成品看起來仍在早期階段,使回饋聚焦於結構。
  • Living Design System — 同一種可攜式設計 DNA 做法的產品化版本:上傳品牌檔案,取得一套設計系統,後續每件成品都從這裡出發。
  • Disposable Micro-Apps — 客製影片編輯器將模式從編輯計畫延伸到在人類不熟悉的媒介中創作。
  • Prototype Over PRD — 「產生 15 個流程版本,徵求同事回饋」是將原型當成規格的循環擴展到多個選項的規模;用來爭取認同、四處傳閱的成品本身就是規格。
  • Implementation Abundance Inverts Product Work — Parrott 直接說出這項論點:「隨著模型愈來愈擅長打造正式軟體,最重要的工作會逐漸提前——提出好點子、讓所有人達成共識,並在點子仍處早期時收集回饋。」
  • Claude Design — 這套實務所依託的工具,由打造它的設計師親自介紹。
  • Nate Parrott — 這位實務工作者。
  • Claude Opus 5 — 視覺能力的提升拓展了這套實務的可能性:更擅長讀取圖表、示意圖與螢幕截圖,這些都是設計工作的輸入內容。
  • Prototype Fidelity After Cheap Polish — 本文將保真度當成控制旋鈕的實務,提前回應了相關研究文獻:Hundhausen 將視覺潤飾與功能深度脫鉤列為待解問題;而這位設計師已經透過提示而非專用工具實際這麼做。
  • Post-Acceptance Edit Behavior — 首次以整體樣本測量人類在做出選擇後的行為,研究對象是程式碼而非設計:在整合式開發環境中,對 53.6K 個已接受 AI 補全結果所做的編輯。研究保留了槓鈴模型,並為後端補上所需時間(所有修正有一半在 50 分鐘內完成,編輯量在 15 分鐘後大幅下降),但也讓中間環節變得更複雜——先從最小幅度調整開始、修改名稱與常值的開發者,最可能在下一次編輯時就刪除補全內容(23.4%,相較於先改變功能者的 12.2%)。選取選項後才發現它不合適,和沒能從十個選項中挑對一個,是不同的失敗;前者出現在行為資料中。

尚待解答#

  • 「最後一哩路交給人工」是長久做法,還是過渡現象?Parrott 提出兩個理由(節省 token,以及用眼睛判斷勝過文字描述);推理成本降低後,token 這個理由就會消失,但頻寬理由應該仍成立。哪一個才是真正不可或缺的理由,可以透過觀察模型進步時直接操作的使用量是否下降來驗證。
  • 預設美學收斂能否透過脈絡(品牌檔案、情緒板)修正?還是它其實是 Why AI Lags at Design 第 3 個理由所說的新意上限——也就是說,即使設計系統規格完整,成品仍會在色盤底下流露慣用風格嗎? #oq/source 部分解答:I tested Meta's "agent-ready" design system Astryx. Here's the results.(n=1,單一實務工作者)指出,設計系統能設定該決策時就能修正,沒有設定欄位時則無法改變——模型全程都正確讀懂品牌,只有在沒有自訂介面的元件上才回歸預設。這表示殘留問題是涵蓋範圍不足,而非新意上限;但測試對象只有一套外部提供的系統,並未觸及慣用風格是否會在涵蓋完整的表面上持續出現這個根本問題。
  • 先要十個選項再重新混搭,前提是人能可靠地認出好的選項。選擇會在哪裡失靈——十個候選方案都不錯時,辨識能力會不會下降?候選數量是否有個臨界點,讓審查成本超過自行撰寫的成本? #oq/source 部分解答(相鄰領域、單一候選方案的情況):Post-Acceptance Edit Behavior(empirical,來自 1,141 位開發者在整合式開發環境中所做的 53.6K 次編輯)是第一個測量人們實際如何處理已經選取之 AI 輸出的資料集。研究指出,選擇可以重新評估,而且經常被重新評估——保留情形呈雙峰分布(幾乎原封不動地保留,或直接丟棄,中間情況很少),31% 的行為軌跡包含移除編輯;編輯順序揭示了辨識何時失靈:先自訂再刪除的路徑,發生率約為先改變功能再刪除的兩倍。但這無法回答問題真正想問的事。研究觀察的是逐一接受的程式碼補全,而不是十個候選方案,因此既沒有測量候選方案都同樣不錯時的辨識能力,也沒有測量審查成本與自行撰寫成本的臨界點;而保留情況只記錄開發者做了什麼,從未記錄他們是否判斷正確,所以資料並未評估辨識能力本身。

資料來源#

§ end
Cited by 16
Related articles
  • Claude Design

    Anthropic Labs product for collaborating with Claude on polished visual artifacts — designs, prototypes, slides, decks,…

  • HTML as the New Markdown

    Thariq Shihipar's thesis: as models improve, thousand-line markdown plans overwhelm the *human*; HTML artifacts (visual…

  • Living Design System

    `design_system.html` extracted from repos as a portable, human- and machine-readable source of truth; component playgro…

  • Open Questions Backlog

    Generated by `_system/lint.py --write-backlog`. Do not hand-edit. Domain and Watching sections carry one row per page —…

  • Prototype Over PRD

    Dan Carey's prototype-replaces-PRD method: record a why-not-what conversation, transcribe it, hand the transcript to Cl…