當工程師也想畫畫——初試 Claude Design 心得

Claude 從「會寫程式的助理」搖身一變，也開始拿起畫筆走進設計的國度。週一這天，我抱著一點好奇又一點懷疑的心情走進了 Claude Design 的世界，本來只是想試著把自己 logo 的配色延伸成一整套設計系統，沒想到在按下那顆生成按鈕之後，整個下午就這麼被拐跑了。

💡 本文為個人週一午後的試用心得，並非正式教學文。文中不會深入展示自己專案的 design system 細節，請想嘗鮮的讀者直接到 Anthropic 官方一探究竟。

為什麼想動這個念頭？

身為後端出身、偶爾跨過去摸前端的工程師，我對「設計」這件事一直保有一種既敬畏又嚮往的心情。

敬畏的是那些看似信手拈來的排版與配色，一旦自己動手就會發現處處都是地雷；嚮往的則是看著設計師把一張張草稿疊成完整產品的那份魔法感。我從來沒碰過 Figma，平常想生出個能看的畫面時，大多是靠 Google 的 Stitch 先撐場面，再靠自己一點點硬兜出來。所以當 Anthropic 宣布 Claude 也能「設計」的那一刻，我的內心其實是既期待又擔心被傷害——它真的能比我現在手邊這套工具更懂我要什麼嗎？

第一次見面的小緊張

登入後的介面比我想像中安靜許多。

沒有鋪天蓋地的樣板，也沒有「請選擇您的產業」這類問卷式的開場白，就只是一個讓你說出需求的入口。

我其實心裡一直有個小小的願望：想用自己 logo 那組配色，延伸出一整套能同時套在部落格、也能套在日後 side project 上的設計系統。所以這一次我沒有先丟文字，而是直接把 logo 檔案拖了進去，想看看它會怎麼「讀」我這個起點。

有趣的是，它並沒有急著動手。

它先是反過來問了我幾個問題：「你希望這個畫面傳達什麼樣的氛圍？」、「主要的閱讀情境是什麼？」我一邊回答，一邊把兩個目標說了出來——一個是現在的部落格，一個是我這陣子在醞釀的預約系統小專案。這讓我想起以前跟設計師 kick-off 一個新需求時，那種你來我往的對話。我本來以為自己是來「下指令」的，結果反倒變成被引導著整理想法的一方。

從一張 logo 到一整組語彙

真正讓我愣了一下的，是它產出的不只是一張漂亮的畫面。

它把我丟進去的那個 logo，當成了整套系統的起點——從裡頭的色彩延伸出一組有層次的配色、再根據我描述的「部落格要好讀」、「預約系統要讓人安心下決定」這些模糊的形容詞，悄悄轉譯成了一整組彼此呼應的設計決策。每一個元件都不是孤零零地漂浮在畫布上，而是和其他元素之間有著清楚的關係。這種一致性，是我過去用各種 AI 繪圖工具時最常感到挫折的地方：單張好看，但放在一起就像從十個平行宇宙拼湊出來的。

這次，它終於是同一個宇宙的產物了。

更讓我驚喜的是，部落格和預約系統這兩種氣質差異不小的場景，最後竟然能共用同一套語彙，而不是被硬拗成同一個樣子。當我試著要求調整某個區塊的節奏時，它也沒有只改那一處，而是順勢把相關聯的地方一併補上。這種「牽一髮而動全身」的協調感，過去要嘛得仰賴一位很有經驗的設計師，要嘛就得花大把時間自己土法煉鋼。

和 Stitch 的小小對照

既然平常是靠 Stitch 產草稿，免不了要把兩邊擺在一起比一比。

Stitch 對我來說，一直像是那種「拿到就能上場」的萬能模板——給它一句話，它就端出一份完整到幾乎可以直接截圖交差的畫面。這份乾脆很適合快速驗證點子，但當我想繼續往下挖、想讓同一套視覺語言延伸到第二、第三個頁面時，就得重新拜託它一次，而每一次拜託，結果都像是不同場電影的分鏡。

Claude Design 給我的感覺則完全不同。

它比較不像是「生出一張成品」，而更像是「和你一起長出一套邏輯」。一開始它交給我的也許沒有 Stitch 那麼華麗，但每一步都在累積脈絡，所以當我想延伸到下一個情境時，不需要從零開始描述，它記得我們剛剛一起決定的那些默契。這對我這種「一個人要撐好幾個畫面」的工程師來說，比單張的精緻度還重要。

當然這並不是誰比誰好的問題。真要說的話，Stitch 更像是一位擅長交件的設計外包，Claude Design 則比較像是一位肯陪你開會、慢慢把產品聊出來的同事。

意料之外的小插曲

當然，這趟旅程也不是全程一帆風順。

偶爾它會誤讀我的需求，給出一版看起來很漂亮、但完全不是我要的方向的結果；也有幾次我想讓它再大膽一點，它卻保守地回到原本的樣貌。這時候就得像哄小孩一樣，耐下性子重新描述、換個角度切入，它才會突然「啊原來你是這個意思」地調整過來。

這過程意外地讓我對「如何描述需求」這件事，有了更深的體會。

原來我平常在 issue 上寫的那些 user story，離一個能讓 AI（甚至是活生生的同事）準確命中目標的敘述，還有一段距離。工具沒有問題，是提問的人需要練習。

喔對了，還有一個最現實的小插曲——它的專屬 usage 用得比我想像中快非常多。如果你也打算認真拿它蓋一整套設計系統，建議事前把目標想清楚、先列好想請它處理的畫面清單，不要像我一樣邊玩邊想，不然很容易在最興奮的時候被煞車。

結語

一個下午的試玩，遠遠談不上精通，但足夠讓我對未來的工作流有了新的想像。

過去我們習慣把「設計」和「開發」看作兩條獨立的軌道，中間靠交付物串接；而 Claude Design 讓我看見這兩條軌道有機會再靠近一點，讓工程師能更早進入討論，也讓設計語言能更順暢地延續到程式碼裡。

它不會取代真正的設計師——那些對使用者行為的細膩觀察、對品牌氣味的精準拿捏，依然是人類的舞台。但對於像我這樣偶爾需要一個人撐起整條產品線的工程師來說，它確實是一位值得邀請進團隊的新同事。

下次再試，我想把這次沒能做完的 side project 畫面一次補齊，順便挑戰一些更野的題目——當然，前提是先把 usage 存好存滿再出門。如果也被這趟實驗勾起好奇心，不妨找個空閒的午後，親自去按下那顆生成按鈕，相信會有屬於你自己的那一份小驚喜！