用 Claude Design 打造一個 App

🧑‍🏫 Anthropic 的設計師 Nate 拿自己和朋友的小專案，示範怎麼用 Claude Design 設計 app 的新手引導畫面，再直接做出來。整個過程他沒有自己從零畫圖，而是丟需求、挑選項、給意見、試玩，最後一句話就讓 Claude 把成品做好。如果你想知道不是工程師也能怎麼和 AI 一起做設計，這支很值得看。

• 00:00 Nate 和朋友的 side project 點子：每天都是不同的主題，例如某天是「畫一張圖」，隔天是「只能發鳥叫聲」
  ↳ Nate 和朋友的 side project（工作以外自己做的小專案）是一個每天換主題的 app：今天大家都畫圖，明天只准發鳥叫聲，用每天不同的玩法吸引人回來。
• 00:00 講者 Nate 是 Anthropic 的設計師，這支影片分享他如何把 Claude design 用在個人專案
  ↳ 講者 Nate 本身是 Anthropic 的設計師。這支影片不是功能說明，而是他拿自己的私人專案，示範 Claude Design 在真實情況下怎麼用。
• 00:00 這個 app 需要一個 onboarding；Nate 說平常他不會在這上面多花心思
  ↳ 這個 app 需要 onboarding，就是新用戶第一次打開時看到的引導畫面，告訴他這是什麼、怎麼玩。Nate 坦白說，平常他不會在這上面多花力氣。
• 00:31 原因是 onboarding 只是 side project 裡很小的一塊；但有了 Claude design，他可以快速做一次 design spike，希望得到更好的結果
  ↳ 在小專案裡，onboarding 不是主角，花太多時間不划算。有了 Claude Design，他可以做一次 design spike（短時間快速試幾種設計方向），花的力氣少，成果反而可能更好。
• 00:31 操作步驟：打開 Claude Code → 連接自己的 repo → 切到 Artifacts 分頁 → 建立新的 design
  ↳ 步驟：打開 Claude Code（Anthropic 的寫程式工具），連上自己的 repo（存放這個專案程式碼的地方），切到 Artifacts 分頁（影片中建立 design 的分頁），新建一個 design。
• 00:31 請 Claude 先看目前專案裡已有的內容，再產出幾個選項；他下的指令是「Design a silly onboarding for this app」
  ↳ 他先讓 Claude 讀過專案裡現有的內容，這樣做出的設計才會貼合這個 app。指令只有一句「幫這個 app 設計一個搞笑的 onboarding」，並請它給幾個選項來比較。
• 00:31 交代完就去拿杯咖啡，回來再看 Claude 做出了什麼
  ↳ 交代完他就去拿咖啡。意思是 Claude 在做的時候不用一直盯著，人可以先去忙別的，回來再看結果就好。
• 00:31 用留言（comments）告訴 Claude 哪些地方可行、哪些不行
  ↳ 看完選項後，他用留言（comments）功能告訴 Claude 哪些可以留、哪些不行，就像跟同事對稿一樣，讓 Claude 照這些意見調整。
• 01:03 這次有些細節他不喜歡，就自己進 editor 動手修改，也可能再做出一些新選項
  ↳ 有些細節他不喜歡，就自己進 editor（可以手動修改設計的編輯畫面）直接改，不用凡事都叫 Claude 處理；也可以再請它多做幾個新選項。
• 01:03 接著請 Claude 做一個 click-through prototype，再去拿杯咖啡，回來看成果並實際操作試玩，評價是「不差」
  ↳ 接著他請 Claude 做 click-through prototype，也就是可以點來點去、模擬實際操作的試作版，但還不是正式 app。他回來親手點過一輪，覺得「不差」。
• 01:03 最後對 Claude 說「build it」，讓它直接把設計做出來，整個流程就完成了
  ↳ 設計確認後，他只對 Claude 說「build it」（把它做出來），Claude 就照著設計直接寫成程式。從設計到做好，整個流程就這樣完成。
• 01:03 Nate 的建議：下次準備寫程式、又想多花點時間思考設計時，可以試著和 Claude 一起協作
  ↳ Nate 的建議：下次要開始寫程式、又想多想一下設計時，不必自己從零開始畫，可以讓 Claude 先提方案，你負責挑選、給意見和修改。

Claude 產出設計選項後，Nate 不喜歡其中一些細節，他怎麼處理？