想做一個記帳工具、家長聯絡簿、預約系統或作品集網站，第一步先把「誰會用、要完成什麼、第一版只需要哪些功能」寫成幾句人看得懂的話。接著讓 AI 依序協助設計畫面、建立功能、處理資料、測試流程，最後才選擇上線方式。這條路也適用於 Claude Design、Lovable、Codex、Claude Code 與其他能產生程式或原型的工具。
Anthropic 今年 4 月推出 Claude Design，讓使用者以文字、文件、既有網站或程式碼製作視覺原型；官方說明也把原型交接到 Claude Code 列為其中一種工作方式。這條順序已有具體示範：一個加密貨幣作品集網站先完成視覺原型，接著加入帳號、個人資料、儀表板與 AI 對話功能，最後取得可供登入的網址。案例使用 Claude Design 與 Lovable；採用 Codex 或其他工具時，同樣依序處理畫面、功能、資料與測試。
| 項目 | 讀者要知道的事 |
|---|---|
| 這套流程要完成什麼 | 做出可讓真人試用的第一版 App，再決定是否投入正式開發與上線 |
| 可用工具 | 視覺原型工具、AI 程式代理、資料庫與部署平台都能各自負責一段 |
| 影片案例 | 先做網站外觀，再依序加入登入、個人資料、儀表板、AI 功能與網址 |
| 最需要自己決定的事 | 使用者、第一版功能、哪些資料可保存、誰可看見資料、什麼情況算完成 |
| 對台灣讀者 | 可先以繁體中文需求、台灣使用情境與假資料試跑；涉及個資、付款與會員資料時，再確認服務的資料地區、條款與費用 |
| 成熟度 | AI 工具可協助製作原型與第一版程式；正式服務要處理權限、資料安全、測試與維護 |
一、先用一句話說清楚 App 要替誰完成什麼
先寫下「誰在什麼時候遇到什麼麻煩，打開 App 後要完成哪個動作」。例如，「讓社團幹部在活動前收集報名、統計餐點並寄出提醒」比「做一個活動管理 App」更容易讓 AI 產出有用的頁面與流程。
這句話也決定後面的取捨。使用者若只是自己，第一版可先保存自己的資料；若要服務多人，就要及早寫下帳號、管理者與一般使用者各自能看見什麼。把目標講清楚，AI 才能協助拆出畫面、資料欄位與操作順序。
二、把第一版功能縮到一個人能試用
第一版只保留能讓使用者完成核心任務的功能。活動管理 App 可以先有建立活動、填寫報名資料、查看名單三件事；通知、付款、統計圖表與聊天機器人排到下一輪。功能少，才能真的走完填寫、保存、修改與查詢的每一個畫面。
請 AI 先產出一張功能清單，並為每項標示「第一版要有」或「之後再做」。接著要求它列出使用者從打開 App 到完成任務的步驟。這份清單會成為後續每一次修改的共同基準，避免畫面越做越多、核心流程卻沒有完成。
三、先決定畫面與操作流程，再要求 AI 生第一版
在提示裡交代頁面數量、每頁的目的、品牌色彩、字體感覺、手機或電腦優先，以及可參考的網站或截圖。Claude Design 的官方說明支援從文字、圖片、文件、程式碼與網站擷取元素開始，並能以行內留言、直接編輯或調整控制項修正畫面。使用 Codex 時，也可把同一份頁面說明、參考素材與驗收條件交給它建立前端。
這一步的目標是讓人看得懂 App 怎麼走：首頁要引導什麼動作、表單有哪些欄位、完成後會看到什麼。先把主畫面、填寫頁與結果頁做出來，下一步的功能才有明確容器可接。
四、讓 AI 先完成一條能走到底的操作
選一條最重要的路徑，要求 AI 把它做成可點、可輸入、可看到結果的版本。例如，使用者建立一筆活動、填完資料、送出後回到自己的名單頁。這時可以使用假資料，重點是確認按鈕、欄位、提示文字與返回路徑是否合理。
影片示範先完成視覺原型，再交由另一個工具補功能；全程採用 Codex 的使用者，則可要求它在同一個專案內建立畫面、假資料與操作流程。兩種作法都要保留每一輪修改的需求，下一次才知道改的是色彩、欄位還是功能規則。
五、帳號、資料與權限要在功能加入時一起寫清楚
一旦 App 要保存姓名、聯絡方式、交易、健康、工作或會員資料，就要和 AI 一起定義資料規則：誰能新增、誰能修改、誰能看見、多久刪除，以及管理者如何處理例外。影片中的作品集案例把登入與個人資料隔離放在同一輪，讓每個帳號只看到自己的觀察清單與持有紀錄。
先用假帳號與假資料測試，再把規則寫成明確需求，例如「一般會員只能讀寫自己建立的資料；管理者可看活動總名單，不能看會員密碼」。AI 可以協助建立程式與測試案例，資料權限的範圍仍由服務經營者決定。
六、把 AI 功能當成一項任務，也要列出它能讀什麼
聊天助手、摘要、推薦或自動分類，都應該回答一個具體問題。若 App 是社團活動工具，AI 可以協助整理常見問題或草擬提醒文字；它是否能讀取報名資料、能傳給哪一個模型服務、回覆是否需要人工覆核，都要先寫明。
影片的案例在儀表板加入可參考個人清單的聊天功能。這種設計使回覆更貼近使用者當下資料，也提高了資料範圍與錯誤回覆需要處理的程度。正式啟用前，先測試敏感資料、空白資料、錯誤輸入與使用者要求刪除資料的情境。
七、用真人試走流程，再決定上線範圍
請三到五位目標使用者各自完成同一項任務，記錄他們在哪個畫面猶豫、輸入什麼資料、是否能理解結果，以及失敗後能否回到正確步驟。再請 AI 根據這些紀錄提出修改清單，先處理會阻斷任務的問題，再調整文案與外觀。
上線前至少確認：帳號能建立與登出、資料不會在不同使用者之間混在一起、手機畫面可操作、錯誤訊息有下一步、聯絡方式與資料處理說明可找到。要部署時，再選擇自己能管理的網域、資料庫與費用方案；上線後每次新增功能都回到同一套七步流程。
工具可以換，需求與驗收不能省略
偏好視覺探索的人，可以先用設計工具整理畫面，再交給程式工具實作；習慣直接做程式的人，則可把需求、參考圖與測試條件一次交給 Codex。OpenAI 對 Codex 的說明指出，它能讀寫專案檔案、執行測試與型別檢查，並留下可供人審閱的執行紀錄。工具改變的是工作介面，使用者問題、資料規則與驗收責任仍留在 App 的規格裡。
第一次試跑可選一個低風險題目：個人閱讀清單、社團活動報名、作品集或內部待辦。先讓少數人使用一週，確認真正有人完成核心任務，再加入付款、多人協作、外部串接或自動決策功能。
常見問題
完全不會寫程式，也能照這七步做嗎？
可以先完成前四步，做出畫面與一條可試走的流程。第五步開始涉及帳號、資料庫與權限時，需求要寫得更精確；若服務要收集敏感資料或收款，可找熟悉資安與法規的人一同檢查。
全程都用 Codex 可以嗎？
可以。把每一步的需求、參考素材與驗收條件交給 Codex，讓它建立專案、修改程式與執行測試。畫面品質取決於你提供的視覺方向與每輪回饋；上線前的資料規則與真人測試仍要逐項完成。
第一版做完就能收費或公開服務嗎？
第一版完成後，先確認資料處理、帳號權限、付款流程、服務條款、錯誤處理與客服安排。面向少數受邀使用者試跑，能較早看見真正的操作問題，再決定公開範圍。
資料來源與更新紀錄
- Claude Design 的發布日期、支援輸入、視覺原型、協作與交接方式：Anthropic〈Introducing Claude Design by Anthropic Labs〉，2026 年 4 月 17 日。
- Codex 可讀寫專案、執行測試與保留執行證據的工作方式：OpenAI〈Introducing Codex〉。
- 「設計先行、功能接續、測試與發布」的 17 分鐘案例流程：YouTube〈How to Use Claude Design to Build an App (Step by Step)〉。影片中的工具操作與成果為創作者示範，本文將其整理為通用流程。
- 本文更新時間：2026 年 8 月 4 日。
