跳到主要內容

Claude 設計師如何一人負責7個產品

分享

這篇文是由 Anthropic 的設計師 Ryan Mather (@flomerboy) 所發表，他在文中分享了自己如何利用剛發布的 Claude Design，以「一人之力負責公司 7 個產品線設計」的心得與建議。

📝 推文核心內容翻譯（使用 Claude Design 的 7 個建議）：

  1. 設定好你的設計系統和核心畫面 (Design System & Core Screens)

    這裡非常值得你花上一個小時的時間進行前期的設定與最佳化。把你現有的程式碼庫、設計檔和品牌素材都餵給 Claude，讓它自動建構出一套設計系統。之後的每個專案都會自動套用你的顏色、字體和組件，長期下來能帶來極大的複利效應。

  2. 與你的工程師即時迭代 (Iterate in real-time)

    過去那種「設計師出圖 → 丟給工程師實作 → 來回修改」的模式已經過時了。現在最好的方式是，開個會與工程師一起看著畫面設計新功能。Claude 製作原型的速度極快，你們可以在對話中持續迭代、圍繞概念與限制即興發揮，看著想法當場成形。

  3. 使用評論工具進行快速精準的修改 (Comment tool for precision)

    在產出粗略的初稿後，你可能會有數十個細節想要微調（例如按鈕間距、顏色更改等）。用文字去描述所有想要的變更是很麻煩的——所以千萬別那樣做！直接在元素上點擊評論並給出具體的修改指示即可，精準又快速。

  4. 讓 Claude 為你的想法製作影片展示 (Video Demos)

    一般來說，Claude Design 幾乎可以實現任何你能想到的事情。老實說，它的運作邏輯其實更像是 Claude Code（程式碼代理），而不是傳統基於畫布 (canvas-based) 的設計工具。

  5. 善用連接器 (Connectors，尤其是 Docs/Slack)

    一旦設定好連接器，你可以丟給它這樣的提示詞：「請閱讀這份產品吐槽大會 (product roast) 的會議記錄，並針對裡面提到的所有問題，製作一份探索不同設計解決方案的簡報 (Deck)。」然後你就可以出門散個步放鬆一下，帶著全新的視角回來看它自動生成的結果，把複雜的腦力活交給它。

  6. 讓 Claude 建立客製化的即時工具 (Custom on-the-fly tools)

    總體而言，請不要試圖用過去使用傳統畫布工具的思維來使用 Claude Design。這是一個完全不同的物種，擁有不同的能力。大膽去嘗試並享受其中的樂趣吧！你會發現自己產出的設計將遠勝於傳統的工作方式。

  7. 關鍵時刻，別怕手工慢下來 (手工打磨藝術部分)

    對於全新的圖示、核心插畫、產品命名或是品牌形象，這類工作別指望 AI 模型能給你完美的答案。這不是 Claude 不夠聰明，而是這些環節本質上考驗的是你個人的品味與判斷力。他將這部分稱之為「代理式設計 (Agentic Designing) 的藝術部分」。

💬 相關熱門留言與社群討論翻譯：

這篇推文在科技與設計圈引起了極大的共鳴，許多業內人士與投資人（如李惠子、Leyna等）也對此發表了深刻的評論：

  • 對 Figma 等傳統工具的顛覆性威脅：

    「Claude Design 的威脅半徑是精準且有限的。但在『軟體設計』的領域裡，它絕對是真正的顛覆者。這並不是因為它設計出來的東西更好看，而是因為它將『設計 → 程式碼』的鏈路徹底打通，直接攻擊了 Figma 這類純粹用來『生產設計稿』工具存在的合理性。現在非設計師也能直接拿到『可運作的原型』，這是一個巨大的結構性變化。」

  • 關於給 AI 的反饋必須具體：

    留言中也補充了官方教學的一個重點：「看著不對勁」是對 AI 最差的反饋；而「將表單欄位的間距改成 8px」才是 AI 代理 (Agent) 最愛聽的明確指令。Claude 非常擅長處理具象且具體的要求，但不擅長揣摩人類抽象的審美情緒。

  • 設計領域的 ChatGPT 時刻：

    「Claude Design 迎來了設計領域的 Claude Code 時刻，AI 真正把從構思到開發的摩擦力降到了最低。」

(註：由於推文下方的留言會隨時間不斷增加，以上為該推文最具代表性及被廣泛引用的核心留言與社群迴響。)

留言

張貼留言

這個網誌中的熱門文章

Vibe Coding：到底?氛圍驅動程式開發必殺技?

Vibe Coding（氛圍編程） 是由 OpenAI 共同創辦人 Andrej Karpathy 在 2025 年提出的革命性程式開發方式，它讓開發者透過自然語言與 AI 對話來生成程式碼，徹底改變了傳統的編程模式。 這種開發方式的核心理念是 「順著感覺走」 ，讓 AI 處理技術細節，開發者專注於創意和需求描述。 Vibe Coding 需要基本上的規劃和執行，但並沒有強制規範，從日常經驗來說可分為三個階段， 前期準備、開發過程、和後期維護 三個關鍵階段。每個階段都有其特定的任務和注意事項，正確執行這些步驟將大幅提升開發效率和程式品質。 將靈感與需求透過 AI 快速轉化成產品功能或原型。以下幫你分成 「前、中、後」 三階段要做的事情，適合你自己做、或帶團隊做 前期：設定 vibe & 準備素材 這個階段的重點是 「建立開發語境」 ，因為 AI 的生成表現高度依賴前期提供的上下文與資料。 明確目標 ：釐清要解決的問題、預期要做的功能與核心價值。例如在筆記軟體的情境中，可能是：「我要做一款讓使用者能用 Markdown 記錄筆記，並提供標籤與全文搜尋功能的簡單 App。」 收集靈感 ：觀察同類產品（如 Obsidian、Notion）、蒐集市場痛點（例如太多筆記軟體無法脫機使用，或同步效能差）。 建立語境 ：準備初步 prompt、背景知識、產品定位、品牌調性、目標使用者輪廓等。 確認資源 ：決定用哪些工具（Gemini、ChatGPT、設計軟體、流程管理工具等）。 確認完上述內容之後，就可以先開始進行準備規格，進行第一次的 Vibe Coding 方向驗證 提示詞模板準備 很多人會跳過這步驟，但一份 「好的 AI 提示詞模板」 將決定接下來每一次 AI 對話的品質。有效的提示詞模板需具備： 描述具體且無歧義 包含技術要求和約束條件 提供範例資料和測試案例 指定程式碼風格和慣例 例如針對筆記軟體的案例：   「建立一個支援 AI 功能純文字筆記，輸入內容可即時渲染；需支援儲存到本地檔案，提供標籤欄位做分類；以 React 架構，程式風格採用 Tailwind style components 並使用 hooks。」 開發工具選擇 開發工具的選擇 同樣重要，目前市場上主要的 ...
張貼留言
繼續閱讀>>

Claude Code Hooks：自動化與安全的最佳實踐

寫在最前頭，這份文章主要寫起來是給自己看， 同時內容是比較適合開發者，工程師們可以做些自動化處理的簡單筆記。 Claude Code hooks Claude Code hooks 是一種強大的自動化機制，允許用戶在 Claude Code 的不同生命週期階段，自定義執行 shell 指令。這種設計讓開發者能夠將規則和自動化行為嵌入到應用層級，確保每次都能可靠執行，而不必依賴 LLM（大型語言模型）是否會選擇執行某項操作。 Hooks 的核心用途 通知 ：自訂收到 Claude Code 等待用戶輸入或執行權限時的提醒方式。 自動格式化 ：如在每次檔案編輯後自動執行 prettier （針對 .ts 檔）、 gofmt （針對 .go 檔）等。 日誌記錄 ：追蹤所有執行過的命令，便於合規或除錯。 自動反饋 ：當 Claude Code 產生不符合團隊規範的程式碼時，自動給出反饋。 自訂權限 ：阻擋對生產環境檔案或敏感目錄的修改[^1]。 配置與結構 Hooks 透過設定檔進行配置，分為全域（ ~/.claude/settings.json ）、專案（ .claude/settings.json ）、本地專案（ .claude/settings.local.json ）以及企業級策略設定。每個 hook 由「事件名稱」和「匹配器」組成： "hooks": { "PreToolUse": [ { "matcher": "Bash", "hooks": [ { "type": "command", "command": "jq -r '...'" } ] } ] } matcher ：用於匹配工具名稱（支援正則表達式），如 Write 、 Edit|Write 、 Notebook.* 。 hooks ：當匹配時要執行的命令陣列。 type ：目前僅支援 "command" 。 ...
張貼留言
繼續閱讀>>

[CSS] z-index 在不同瀏覽器繼承問題

今天會討論到這個課題，是因為要實做一個Popup dialog，所以我們希望的結果如下圖。 可是在IE7 卻發生了這樣的情況。 Popup不論怎麼設定z-index都無法浮在最上層，我們看一下html架構發生什麼事情。
27 則留言
繼續閱讀>>