跳到主要內容

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：為什麼 Junior 更快上手？Senior 要如何追趕？

現象層面（市場觀察） 最近有篇文章討論 junior & senior 開發者在 AI 時代的角色轉變，非常熱門。 身為 Cympack 產品開發團隊 ，我們也一直關注這個議題，在閱讀這篇文章時觀察到一些有趣的現象，對我們來說，這正好反映出 AI 正在改變開發生態，junior 借力 AI 快速成長、senior 則需要在 「架構思維」 與 「多 agent 協作」 中找到新定位，其中有些啟發（insight) 可以跟大家分享。 為什麼 Junior 更容易上手 vibe coding？ 心智負擔低 → Junior 沒有太多傳統 code workflow 的框架包袱 敢於嘗鮮 → Gen Z / 年輕工程師天生習慣用 prompt-based 工具、跟 LLM 互動 少「優雅程式設計」的束縛 → 不太糾結「這樣寫會不會不夠優雅」，反而 embrace 快速迭代、快速出成果 反觀 Senior： 熟悉大型系統設計 有豐富的「工程正統流程」知識（架構設計、測試策略、效能優化、設計模式） 對 AI 生成 code 的品質 / 維護性通常比較保留 部分 10+ 年資深工程師，對 prompt engineering 沒那麼熟練，還在觀望 技能面（未來的關鍵能力） Vibe coding 本質上 = prompt engineering + AI co-pilot 管理能力 能力項目 誰目前比較有優勢？ Prompt 撰寫 / AI 互動 Junior 較強（熟悉 chat-based 流程） 系統設計 / 架構把關 Senior 較強 AI 生成 code 驗證 / Bug 察覺能力 Senior 較強（能看出潛在問題） 快速疊代 / Hackathon 式開發 Junior 較強 長期維護性 / 穩定性 Senior 較強 總結 Junior 確實更快適應 vibe coding，並且更習慣以 「chat-based coding」 的工作流開發。 Senior 擁有驗證 AI 產物與系統設計的深度能力，但若不主動練習 vibe coding，長期會逐漸落後於新一波開發潮流。 就如同在 GAI 技術年會分享，希望帶給各位的感受， 『與 AI 協...
張貼留言
繼續閱讀>>

Vibe Coding 協作到自建 Dev Agent？從 Claude / Codex 到 OpenHands

過去一年，越來越多工程師開始 把 AI 真正帶進工作流程 。從一開始用 ChatGPT、Claude 來問語法問題，到後來很多人愛上 Cursor，直接在編輯器裡讓 AI 幫忙改 code、補 test case、甚至自動整理 PR。這樣的開發體驗，已經大大改變了我們寫程式的方式。 更現實的是，在很多企業內部、政府單位、或涉及機密資料的專案裡， 其實根本不能直接用 Cursor 或雲端 LLM 工具。   畢竟這些服務通常會把資料傳到雲端模型做處理，萬一專案裡有未公開的技術、敏感客戶資料，或是受限於法規 （像金融、醫療、政府標案） ，直接用雲端 AI 工具就會踩 紅線 。  因此，許多團隊反而更希望 「自己架一套 Dev Agent」 ，可以在內網執行，資料完全掌握在自己手上，該整合的內部工具、該讀的私有 repo、該串的 CI/CD pipeline，全部客製化、安全可控。 這時候，像 OpenHands 這樣的開源 Dev Agent 框架就特別有價值。它的出發點不是單純的 AI 助手，而是讓你能夠打造出一個真的可以跑在自己環境裡、可以理解整個開發流程的 AI 工程師。從建置到部署，從 CLI 操作到瀏覽器查詢， 從多檔案編輯到自動測試，全部都能自己完成，甚至還能針對不同專案調整專屬的工作流。 對很多開始探索 AI 協作開發的團隊來說，這是一條 從 「AI 幫你寫一段程式」，走向「AI 幫你解決一整個任務」 的進化路徑。而且，還是在可控、可自定義、安全的環境裡完成的。 🧩 主要概述 OpenHands 是由 All‑Hands AI 開發的開源「軟體開發代理人平台」，能模仿人類工程師從建立程式、修改程式碼、執行指令，到瀏覽網頁、呼叫 API……等一整套開發流程 它提供雲端（OpenHands Cloud）與本地 Docker 運行版本，用戶能配置 LLM（如 Claude、OpenAI、Gemini…) 📚 核心特性與怎麼使用 代理人的工具能力 支援代碼編輯、命令行、執行環境、網頁瀏覽、API 呼叫—接近人類開發者完整技能。其中 OpenHands Cloud 版本提供 $50 試用額度讓大家方便使用，又或者如果自己本機有 docker 的話，可以自己Local 版本透過 Docker 自架環境。 ...
張貼留言
繼續閱讀>>

Google Gemini 全端 AI Agent 快速入門 - 打造「思考」的 AI 助理

一套從搜尋、反思到輸出的全端 AI 代理人範例，讓你看懂什麼叫 Research Agent 在 AI 工具百家爭鳴的今天，大家都在問一個問題： 「我能不能不只問 AI 答案，而是讓它像一位助理一樣，有流程、有反思、還有出處，真正幫我完成一件事？」 Google 最近釋出了一個相當具有指標意義的開源專案 gemini-fullstack-langgraph-quickstart ，正是為了解這個問題而誕生。 這套系統到底是什麼？ 這個範例不是傳統 Chatbot，而是展示一個完整的 AI research agent ： 它會根據使用者的提問，自動發想搜尋關鍵字、查資料、整合重點，最後給出答案還附上引用來源。背後的邏輯設計得非常扎實，不只是能跑，更是具備可讀性、可擴展性與可商用性。 它的流程大致如下：  1. 使用者輸入問題（例如：「抖音是否影響台灣選舉？」）  2. Gemini LLM 幫你想出關鍵字（不只是照抄問題）  3. 呼叫 Google Search API 抓資料   4. LangGraph 控制流程 → 判斷資料夠不夠 → 若不足，自動補查  5. 整合最終答案，並產生 citation（來源說明） 你可以想像這就像一位實習助理幫你寫報告， 不只輸出一段內容，而是會 去查、會判斷、會補資料，而且說明「我為什麼這樣說」 。 LangGraph 是什麼角色？ LangGraph 就是整個 Agent 背後的控制系統 。 用白話講，它幫你定義 AI 每一步要幹嘛、遇到什麼狀況該走哪條路、要不要反思、要不要再查，甚至可以定義條件邏輯與資料流動。 這就不像寫一個單純的 Chat API，而是比較像「把一個流程圖變成可以跑的程式」。 對工程師來說，它提供了從 prompt 到流程控制的設計彈性；對產品設計來說，它讓 AI 有了 「多步驟任務執行」 的能力。 技術架構與使用方式 這整套系統是 Fullstack 架構，前後端都幫你整好了，技術選型也非常實用：   前端：Vite + React + TailwindCSS + Shadcn UI  後端：FastAPI + LangGraph...
張貼留言
繼續閱讀>>