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