完整專案實作：從想法到作品
章節導讀
- 自己知道从哪里开始
- 正常输入可以得到结果
- 遇到问题时自己会绕过去
- 第一次打开也知道怎样操作
- 等待和失败时能看懂发生了什么
- 结果可以继续编辑、复制或保存
1. 從頭到尾用一次你的產品
先別急著添加登入、團隊協作和資料看板。打開現在的產品，像使用者一樣從第一頁開始，一直用到拿到結果。哪一步還需要你在旁邊解釋，哪一步就是接下來要改的地方。
在我們的電商內容工作台裡，一次完整的使用大概是這樣：
一位電商運營上傳商品圖片，補充必要資訊，生成一版圖文草稿，檢查結果後複製或保存，用於後續修改和上架。
先把這一小段做好就夠了。登入、團隊權限和正式發布，都可以等產品真的需要時再加。
1.1 按真實的使用順序走一遍
先別看程式碼和元件，照著使用者會做的事情一步步往下走：
- 打開頁面，知道這個工具可以幫自己做什麼；
- 上傳一張商品圖片，填寫名稱、材質等必要資訊；
- 點擊“生成文案”，看見頁面正在處理；
- 檢查 AI 返回的標題和賣點，發現問題時可以修改或重新生成；
- 複製、下載或暫時保存結果，完成這次任務。
走完以後問問自己：如果我不在旁邊，對方會不會卡住？至於團隊成員管理、複雜資料看板這些不影響本次使用的功能，先記下來，不必現在就做。
這次要做到多大？
如果你能用一句話告訴別人要完成什麼，而且對方幾分鐘內就能動手嘗試，這個範圍通常正合適。
1.2 換到一個空白頁面再試
開發久了，頁面裡往往已經填好了資料，也留下了上一次生成的結果。我們因此很容易忘記，第一次打開時其實什麼都沒有。可以開一個無痕窗口，或者清空本機資料，再從頭試一次。
不用檢查很多內容，只試下面三次：
- 空白打開一次：不填內容直接點擊，看看頁面會不會提示需要填寫什麼；
- 正常生成一次：上傳圖片並生成內容，確認等待時有提示，結果出來後也有清楚的下一步；
- 模擬出錯一次：上傳不支持的文件，或者讓請求失敗，確認剛才填寫的內容還在，也可以重新嘗試。
遇到卡住的地方就記下來，下一節我們再逐個補好。
可以請 AI IDE 幫你檢查程式碼，但不要讓它替代實際操作：
請先不要修改程式碼。
按照下面這條使用者任務檢查當前專案：
使用者上傳商品圖片，填寫必要資訊，生成文案，
檢查結果後複製或保存。
請告訴我這條流程涉及哪些頁面和文件，
並列出目前可能中斷流程的地方。AI IDE 可以幫你找到可能有問題的程式碼，但頁面好不好用，還是要自己點過才知道。
2. 把幾個容易卡住的地方補好
自己從頭用一遍後，問題通常會出現在四個地方：剛打開頁面時、等待 AI 時、拿到結果以後，以及請求失敗時。這裡不需要複雜設計，只要讓人知道發生了什麼，接下來還能做什麼。
2.1 第一次打開，知道該做什麼嗎？
空白頁面不應只放一個輸入框。可以準備一句簡短說明、一組示例內容，或者在上傳區域標明支持的圖片格式和大小。
如果表單字段很多，先保留生成結果真正需要的部分。比如商品名稱、圖片和核心特點可能是必填項，品牌、參考鏈接和更多風格參數可以放到“更多設置”中。使用者第一次使用時，不應該先完成一份很長的登記表。
2.2 點了按鈕，頁面有沒有回應？
AI 請求往往需要幾秒甚至更久。點擊以後，按鈕應該顯示“生成中”並暫時避免重復提交；已經填寫的內容不要突然消失，頁面也不要立刻跳到一個空白結果區。
等待狀態不需要複雜動畫。讓使用者看見任務已經開始，並且原來的輸入和頁面位置仍然保留，就已經解決了大部分困惑。
如果圖片或影片需要排隊，可以進一步顯示“正在排隊”“正在生成”等階段。不要編造一個看似精確的百分比，除非接口真的提供了進度。
2.3 結果出來以後，下一步是什麼？
AI 返回內容不是流程的終點。使用者通常還要檢查事實、修改措辭，並把結果帶到下一步。因此結果區至少應提供一種可繼續操作的方式，例如編輯、複製、下載或重新生成。
這個頁面先保留使用者上傳的商品圖片，再把識別和生成結果放在下方。使用者可以對照原圖檢查內容，而不是只能接受模型的一次回答。
如果結果中存在模型無法確認的資訊，可以直接標出來，讓使用者補充或刪除。比起把一段文字包裝成“最終答案”，這種做法更符合真實工作過程。
2.4 出錯以後，還能不能繼續？
網絡中斷、額度不足和文件格式錯誤都會導致請求失敗。頁面不必向普通使用者展示整段技術報錯，但要說明這次操作沒有完成，並提供重試或返回修改的入口。
例如：
- 圖片格式不支持：說明當前支持的格式，並允許重新選擇；
- 必填資訊缺失：在對應字段附近提示，不要只彈出一句“參數錯誤”；
- AI 服務暫時不可用：保留已經填寫的內容，並提供“重新生成”；
- 生成結果不符合預期：允許修改輸入後再試，而不是讓使用者從頭開始。
如果刷新頁面會讓使用者丟掉一大段輸入，可以使用 LocalStorage 暫時保存表單草稿。這裡只保存繼續任務所需的普通資料，不要把 API Key、真實客戶資料或敏感文件寫進瀏覽器儲存空間。
可以把剛才發現的問題交給 AI IDE，一次處理：
請圍繞“上傳商品圖片並生成文案”這條流程，
檢查開始、等待、成功和失敗四個時刻。
優先修復會阻止使用者繼續操作的問題：
- 必填項缺少提示；
- 請求期間可以重復點擊；
- 失敗後輸入被清空；
- 結果沒有編輯、複製或重新生成入口。
修改前先告訴我準備改哪些文件，
完成後給出一套手動測試步驟。3. 請別人來用一次
自己做的頁面，用久了以後怎麼看都很順。找一個沒參與開發的人來用，往往幾分鐘就能發現我們一直沒注意到的問題。
最好找真正可能使用它的人。電商內容工具可以請做過運營、開過網店或經常製作商品內容的人來試。如果暫時找不到，找一位沒看過這個頁面的朋友也可以。
3.1 只告訴他要完成什麼
測試開始時，只說明目標：
請用這個工具，根據這張商品圖片生成一版標題和賣點。檢查內容以後，把你認為可以繼續修改的版本複製出來。
接下來先觀察，不要馬上告訴對方該點擊哪裡。記錄他停頓、返回、重復點擊和向你提問的位置。如果你一開口就解釋，原本應該由頁面解決的問題就會被掩蓋。
哪怕只找一兩個人，也能發現不少明顯問題。不用寫正式報告，記住他在哪裡停住就行。
比如，他打開頁面後一直沒有動，就補一句用途說明；反復點擊“生成”，就讓按鈕清楚地顯示“生成中”；拿到結果後不知道該做什麼，就加上編輯或複製；出錯以後又要重新填寫，就保留原來的內容，再給一個重試按鈕。
3.2 用完以後再聊一聊
使用者完成或放棄任務以後，再問：
- 剛才哪一步最不確定？
- 生成結果中，哪些內容你會直接使用，哪些一定要修改？
- 如果下次還要完成同樣的工作，你願不願意再用一次？為什麼？
不要只問“你覺得好不好用”。禮貌性的“挺好的”很難指導下一步修改，具體行為和具體例子更有價值。
使用真實素材時
測試者上傳的商品、錄音或文檔可能包含真實業務資訊。開始前要說明內容會發送給哪類 AI 服務，避免使用沒有授權的客戶資料，並在測試後刪除不再需要的文件。
4. 看看哪裡卡住，再改一遍
試用以後，你可能一下子記下很多問題。不用全部都改。先解決那些讓人沒法繼續、或者讓結果不可信的問題。
可以按照下面的順序處理：
- 無法完成任務：按鈕無效、請求失敗、結果無法帶走；
- 結果明顯不可信：編造資訊、無法核對、缺少必要來源；
- 操作容易誤解：不知道從哪裡開始，不清楚當前狀態；
- 使用成本過高：步驟重復、內容丟失、等待沒有反饋；
- 樣式和新增功能：不影響核心任務的美化與願望清單。
先挑最重要的一到三個。改完以後，自己再試一次；條件允許的話，也可以請剛才的人回來看看。只有原來的卡點真的消失，這次修改才算有用。
4.1 把具體問題告訴 AI IDE
不要只說“幫我優化一下”。把你剛才看到的情況寫進去，AI IDE 才知道應該改哪裡。比如：
使用者任務：上傳商品圖片並生成三條賣點。
觀察到的問題：
兩位測試者點擊“生成”後再次連續點擊，
因為頁面沒有明顯顯示請求已經開始，最後產生了重復任務。
請修改當前頁面：
1. 請求開始後禁用生成按鈕，並顯示“正在生成”；
2. 請求結束或失敗後恢復按鈕；
3. 不要清空使用者已經填寫的內容；
4. 修改後告訴我怎樣手動測試重復點擊和失敗情況。這樣寫，改動不容易跑偏，你也知道稍後該怎樣檢查。
4.2 改完以後再從頭試一次
一個地方改好了，也可能影響另一個地方。準備分享作品前，再試試下面四種情況：
- 一組資訊完整的正常輸入；
- 缺少一個必填字段；
- API 請求失敗或超時；
- 得到結果後進行編輯、複製或重新生成。
如果產品會保存草稿，再補一次刷新頁面後的測試。確認新功能正常以後，也要檢查原來的核心流程沒有被破壞。
5. 把作品整理好
現在，這個作品已經不只是在你的電腦上“能跑”了。別人用過它，你也根據真實問題改過一次。接下來把入口和說明整理好，就可以發給更多人看。
5.1 用一分鐘介紹清楚
可以按照下面的順序介紹：
- 誰遇到了什麼問題：例如電商運營準備首版圖文時，要反復整理圖片和賣點；
- 產品怎樣幫助他：上傳商品圖片和資料，生成一版可以繼續修改的內容；
- 接入了什麼 AI 能力：圖片理解與文本生成；
- 使用者怎樣完成任務：上傳、生成、檢查、修改、複製；
- 試用後改了什麼：例如補充等待狀態，並在失敗後保留輸入。
先讓別人聽懂你做了什麼，再補充使用的框架和模型。這樣比一上來羅列技術名詞更容易看懂。
5.2 準備好別人需要的內容
分享之前，準備好下面三樣東西：
- 可以運行的應用：提供訪問鏈接；如果還沒有部署，則寫清啓動命令和訪問地址；
- 30～60 秒演示影片：從輸入開始，完整展示一次核心任務，不要只快速切換頁面；
- 一頁專案說明：寫明目標使用者、核心問題、主要流程、AI 能力、一次使用者反饋，以及根據反饋完成的修改。
如果暫時無法讓別人遠程訪問，本地運行加演示影片也可以作為第一階段成果。重點是別人能夠看懂你做了什麼，並看到核心流程確實可以完成。
5.3 繼續做這個作品，還是換一個？
你可以繼續完成貫穿本章的電商內容工作台，也可以把同一套方法用到自己的場景，例如會議整理、有聲內容、學習輔助或行業小工具。AI 應用場景參考可以幫助你擴展方向。
不必為了顯得原創而重新做一個陌生題目。一個來自自己學習、工作或生活的問題，即使範圍很小，只要經過真實試用和修改，也比功能很多但沒有人用過的頁面更有說服力。
發出去之前
最後再打開一次分享鏈接，從頭用一遍。確認別人可以正常打開、AI 能返回結果，而且頁面和截圖里沒有 API Key，就可以把作品發出去了。
如果使用了別人的圖片、聲音或文檔，也記得先確認可以使用。
6. 📚 本章作業
完成併發布你的第一階段作品
不要再添加新功能。把現在的作品整理好，真正交給一個人使用。
- 完整用一次
- 從打開頁面開始，一直用到拿到、編輯或保存結果。
- 請一個人來試
- 先不教他怎麼操作，觀察他停在哪裡，再改好其中一個問題。
- 把作品發出去
- 準備訪問鏈接或啓動方式、30～60 秒演示影片，以及一段簡短介紹。
當別人能打開作品並獨立完成一次使用，Stage 1 就真正完成了。
下一步
完成這份作品後，你已經走過一條完整路徑：從真實問題出發，收斂第一版方案，做出可交互原型，接入 AI，再把產品交給使用者試用和修改。
進入 Stage 2 後，我們會繼續學習資料庫、使用者系統、支付、部署和更完整的前後端工程。它們會讓產品支持更多使用者和更真實的資料，但出發點仍然是這一階段學會的事情：先把一條有價值的使用者任務做完整。
你完成了第一阶段
从第一次让 AI 写出一个小游戏，到把自己的产品交给别人使用，你已经走完了一次真正的软件创作。