第一次動手：替週末散步做一張邀請網頁

這一章，我們真的要動手了。練習的活動叫「週末散步小隊」：不比速度，不拚步數，走累了可以坐一下。

最後你會得到一個資料夾 weekend-walk，裡面有一個 index.html。HTML 是網頁的一種檔案格式；現在只要知道，這個檔案可以存放頁面內容，也可以打開來看。把網頁單獨放進一個資料夾，是為了讓第 7 章可以直接把它預覽成完整網站，再決定要不要發佈。

開始前，準備兩件事

先打開 Agent.Space，登入你的帳號。把教學留在這個分頁，到另一個分頁操作，方便隨時回來看看。

接著確認有可用的額度。Agent.Space 有兩種付費方式：方案，以及按用量計費的積分。新註冊的帳號通常會收到一筆「新用戶贈額」，可以先用在按量計費的模型上；實際金額、有效期限和可用模型以產品顯示為準。沒有可用額度時，可以先把整個流程讀完，不必一再送出同一個任務。

這次不用準備圖片、網域，也不用安裝軟體。活動、地點和路線全都是練習用的虛構素材。

1. 替這件事建一個 Workspace

第一次登入時，Agent.Space 會請你填一個稱呼、回答幾個簡單的問題，然後來到歡迎頁。這裡有兩張卡片：「查看範例」會打開一個唯讀的範例專案，適合先看看別人做了什麼；「建立 Workspace」就是我們這次要走的路。已經有 Workspace 的話，從左上角的 Workspace 切換選單選「建立 Workspace」，效果一樣。

在「建立 Workspace」視窗裡，填這三項：

• 名稱：預設是「我的 Workspace」，改成「週末散步小隊」。
• 雲端電腦位置：Agent 的雲端電腦和 Workspace 的檔案會放在這個地區。系統會依你的時區推薦一個，通常直接用就好；建立之後就不能再改。
• 時區：預設跟著你的瀏覽器。所有成員和 Agent 都會共用這個時區。

點「建立 Workspace」。完成後，左上角顯示的就是你剛剛填的名字。它就是這次專案的家。

2. 選一個 Agent 和相容的模型

建立完成後，頁面會直接問你：「要和哪位 Agent 一起開始？」下面一排卡片就是可以選的 Agent，Codex 已經預設選好；你也可以換成 Claude Code，或清單裡其他目前可用的 Agent。

模型在輸入框下方的模型按鈕裡選。Agent.Space 通常已經幫你選好一個目前可用的模型；第一次可以不改，也可以換成你有額度的相容模型。Agent 和模型的差別，隨時可以回去看第 2 章。

如果介面提示「需要方案」「額度已用完」或「積分不足」，按旁邊的按鈕去選方案或儲值。模型不相容、沒有額度、服務暫時無法使用，處理方式都不一樣，先看清楚它顯示的具體原因。

3. 把下面這段任務傳給它

你送出的任務要求，也叫 Prompt。這段可以直接複製；先照著做一遍，再改成你自己的活動。

幫我替「週末散步小隊」做一張繁體中文的活動邀請網頁。
這是一個虛構的練習活動，頁面上要標明「範例活動」。活動介紹：週末一起慢慢走一段路，不比速度，走累了可以休息。集合時間：週六下午 3 點。註明這只是範例安排，不對應真實的活動日期。集合地點：梧桐公園南門（虛構地點）。路線安排：南門集合 → 沿湖散步 → 草坪休息，全程約 90 分鐘。準備清單：水、好走的鞋、帽子；下雨就改期。參加說明：真的要辦活動時，請先聯絡主辦人確認具體日期和地點。
頁面要輕鬆、清楚，手機上也讀得順。讓集合時間和地點一眼就找得到。做一個「看看怎麼參加」按鈕，點了之後跳到本頁的參加說明。不要收集報名資料，不需要登入、地圖或外部圖片。
把頁面和它的樣式存到 Workspace 的 weekend-walk 資料夾裡，檔名 index.html。不要依賴其他檔案或外部資源，不要只把程式碼貼在聊天裡，也先不要公開發佈。完成後檢查內容是否齊全、按鈕跳轉是否正確，並告訴我檔案在哪裡、怎麼查看。如果有沒能完成的檢查，請直接說明。

這段話交代了目標、資料和完成方式。細節稍微多一點，是為了讓你之後有東西可以對照檢查，不是因為 Agent 只聽得懂某種神奇格式。不想打字的話，也可以點輸入框裡的「語音輸入」，說完再把轉出來的文字檢查一遍。

4. 看它工作，也留意它的提問

送出後，Agent 可能會讀取目前的目錄、建立檔案、執行檢查。出現工具名稱和執行紀錄很正常，那些是它正在操作的線索。

它也可能在回覆裡問你想要什麼風格。直接在輸入框回答就好：「簡單一點，像傳給朋友看的週末邀請。」它還在忙的時候，你送出的內容會先進入佇列，輪到時再執行。

有些 Agent 會在執行某些操作前，跳出「需要發起人確認」的權限請求，按鈕上的文字由 Agent 自己提供。看清楚它準備執行的動作和對象再決定；不確定的話，可以選「取消本次請求」。這次任務的範圍只是建立邀請頁和檢查它。

等它完成後，先看總結裡有沒有 weekend-walk/index.html，以及哪些檢查已經做完、哪些還沒做。不要只看到「已完成」三個字就關掉視窗。

5. 找到檔案，打開來看看

如果 Agent 的回覆裡出現這個檔案的卡片，點一下就會在右側打開。也可以從左側欄進入「檔案」，打開 weekend-walk 資料夾，點 index.html。HTML 檔案預設以預覽方式打開；要看程式碼時，再切換到「編輯」或「分欄」。

這裡看到的是檔案預覽：頁面和樣式都在同一個檔案裡，所以能完整顯示。如果它只在聊天裡給了程式碼，可以直接補一句：

請把剛才的網頁實際存成 Workspace 裡的 weekend-walk/index.html，完成後告訴我儲存結果。我需要能在檔案區找到並打開它。

如果檔案在，但打不開，把介面上顯示的具體錯誤告訴 Agent，說明失敗發生在「開啟檔案」這一步。先找出原因，再決定怎麼修。

6. 當一次認真但不吹毛求疵的檢查員

把頁面縮到跟手機差不多的寬度，讀一遍，點一下按鈕。檢查這幾件事：

• 活動名稱、範例標記、時間、地點、路線和準備清單都在。
• 小螢幕上文字讀得清楚，不需要左右拖動整個頁面。
• 「看看怎麼參加」確實跳到了參加說明。
• 頁面沒有偷偷變成要填資料的報名表。

版面跟這裡描述的不完全一樣，很正常。Agent 每次產生的樣式都可能不同，先判斷它有沒有達到這些要求。

第一份網頁打得開，你就完成了這章最重要的事。下一章我們挑一個具體的地方改一改，看看怎麼把「總覺得少了點什麼」說成 Agent 能執行的要求。