從描述蓋專案
一個 prompt 從想法到可動 app
⏱ 預估 ~8 分鐘
01 · 讀一讀
我們來蓋真的東西。目前為止你建單一檔、做小編輯。但 Claude Code 能處理更多 — 你可以給它完整專案描述，看它把整個東西蓋出來。
拿到好結果的秘訣是夠明確。你提供越多功能、行為、設計的細節，Claude 越能一次就接近你要的。
我們要蓋一個 書籤管理器 — 一個簡單的 web app，可以存、看、刪書籤。不用 server — 所有東西用瀏覽器的 localStorage 跑。
02 · Prompt 範本
給 Claude 詳細的專案描述。注意這個 prompt 多明確 — 列每個功能、描述行為、指明技術做法。
幫我做一個簡單的書籤管理網頁 app：
- 一個 HTML 頁面，上面有表單可以新增書籤（URL 和標題）
- JavaScript 把書籤存到 localStorage
- 一個清單顯示所有存下來的書籤
- 每個書籤都要有刪除按鈕
- 乾淨、現代的 CSS 樣式
- 全部做成單頁 app（不需要伺服器）
03 · 真機練習
在瀏覽器打開 Claude 建的 HTML 檔試試。加幾個書籤、重新整理確認它們存著、測試刪除按鈕。
open index.html
04 · 確認清單
徹底測試書籤管理器。每個功能驗證能動就勾。
- 我能加 URL 跟標題的書籤
- 書籤列在列表
- 刪除按鈕能刪書籤
- 重新整理後書籤還在
05 · 選擇題
什麼讓 prompt 對 Claude Code 更有效？
- 字越少越好
- 用程式碼而不是自然語言寫
- 一次問所有東西
- 對功能、技術棧、結構都明確
06 · 填空
請 Claude Code 蓋專案時，給有具體功能的 _____ 描述產出比含糊請求好太多。
07 · 讀一讀
你剛剛用自然語言描述蓋了一個完整可動的 web app。想想用手寫要多久 — 設定 HTML 結構、寫 localStorage 的 JavaScript、處理表單送出、做刪除邏輯、用 CSS 把每樣東西排版。
用 Claude Code，第一版花幾秒。如果有什麼不對，你迭代：叫 Claude 修、加功能、改設計。
這就是 AI 輔助開發的力量。你帶想法跟判斷，Claude 帶速度。
重點整理
- 詳細 prompt 產出更好 — 列你想要的每個功能
- 繼續之前永遠自己測試輸出
- 東西不對就描述問題、請 Claude 修
- Claude 幾秒蓋出來，手寫要花久很多
08 · 選擇題
你想叫 Claude Code 蓋待辦清單 app。哪個 prompt 一次就會產生最佳結果？
- 蓋一個有輸入欄加任務、有列表顯示所有任務、有勾選打完成、每個任務有刪除按鈕、有 localStorage 重新整理仍保留的待辦清單 web app
- 蓋一個待辦 app
- 用 JavaScript 做點有用的
- 蓋有所有功能的待辦 app
09 · 填空
Claude 蓋完專案後，繼續之前永遠自己 _____ 輸出。
⚠ 完整互動體驗需要 JavaScript。請啟用 JavaScript 後重新整理。
※ 本站為獨立繁中教學專案，非 Anthropic 官方產品。Claude™ 為 Anthropic, PBC 商標。