Week 16 · 終身教育系列

讓你的作品
會回話

Teach yourself to ask questions — not to copy prompts.

用「怎麼提問」而不是「抄範本」的方式,把你的靜態網頁升級成能對話的 AI 作品。從一份親人傳記的真實案例出發——90 分鐘,完全免費,下課就有一個能對話的作品連結。

Week 162026.07.29
90 分鐘單堂實作
免費完全不用信用卡
作品導向下課即上線
SCENE 01The Contrast

先感受一下,
網頁「會回話」的差別

打開這兩個網址並排看——同一份內容,加了一個對話功能之後,作品的性格完全不一樣。感受完這個差別,你就會懂這堂課要帶你做到什麼。

Before · 原作
一位親人的生命故事

一份靜態的、精緻的、可以慢慢讀的傳記網頁(這個案例剛好寫的是父親,你的可能是母親、祖父母、或任何你想留下故事的人)。內容豐富、排版乾淨。但它是單向的——你只能讀,它不會回應你。

super-disk-617f.tw520913com.workers.dev
打開原作 →
After · 升級版
一位親人的生命故事 + AI 編輯

同一份內容。但右下角多了一個「和這本書的編輯聊聊」——這個 AI 讀過整本書,可以回答你的問題、建議你下次可以再問這位親人什麼。它不是親人本人,是編輯

father-story-demo.pages.dev
打開升級版 →
💡 你先玩看看:兩個連結都打開,先讀「原作」,再打開「升級版」點右下角的「和編輯聊聊」,隨便問幾句。玩完你會發現——同樣一份內容,加了對話功能後,作品的「性格」完全不一樣。這個感覺,就是這堂課要帶你做到的事。
SCENE 02Mental Models

三個心智模型——
你一輩子都用得到。

你不用學程式,但要建立「跟 AI 一起工作」的世界觀。這三個模型不只用在這堂課,未來你做任何 AI 作品都是這一套。

Model 01

你是產品經理,AI 是工程師。

你不用會寫程式,但要能描述清楚要什麼、看得懂 AI 交出來的東西、判斷成品有沒有達到目的。AI 時代的技能不是「會寫程式」,是「很會請 AI 寫程式」。

你的價值在於「知道要做什麼」,不是「知道怎麼做」。後者是 AI 的工作。
Model 02

AI 是「金魚腦」——每次都要重新告訴它。

你最容易誤解的第一件事:以為 AI 像人一樣會記得你講過什麼。其實每次呼叫 AI 都是全新對話——你想讓它記得什麼,每次都要送過去。

這就是為什麼「AI 要知道這位親人的故事」= 每一次對話都要把這位親人的故事送給 AI 看一次。

AI 像一位很聰明但每 30 秒失憶的專家。每次找他,都要把背景重講一遍。
Model 03

唯一不能外包的事——作品的靈魂

95% 的技術工作可以交給 AI:寫網頁、寫後端、寫部署指令。只有一件事必須你親手寫——AI 要用什麼角色出現、什麼話能講、什麼話不能講。這叫 system prompt。它是「這個作品要成為什麼樣的存在」,不是工程問題。

AI 幫你蓋房子,但房子裡住什麼靈魂,是你的事。
SCENE 03Five Dimensions

給你五個提問維度——
而不是一段模板。

不給你複製貼上的 prompt。而是這五個維度:只要在心裡問自己這五個問題,就能組出屬於你自己的請求。維度可以帶走一輩子,模板只能用一次。

1
我要加什麼功能?

越具體越好。不是「加對話」,是「右下角有一個 chat widget,點開來可以問問題」。細節決定 AI 交件的品質。

問問自己 →
  • 對話框長怎樣?浮在角落、還是佔滿螢幕?
  • 訪客一打開有沒有預設問題?
  • 要不要顯示對話歷史?
2
AI 要從哪裡拿知識?

AI 是金魚腦(Model 02),你要告訴它去哪找答案。指定一個檔案、一個網頁、或直接把內容貼在請求裡。

問問自己 →
  • 我要 AI 記得的內容,寫在哪一份檔案?
  • 這份檔案是完整的,還是還在寫?
  • AI 不知道的時候,該怎麼回答?
3
AI 要扮演什麼角色?

這是「作品靈魂」的入口(Model 03)。角色決定語氣、決定能講什麼、不能講什麼。不能只講能做什麼,也要講不能做什麼

問問自己 →
  • 它是誰?(編輯?朋友?教練?這位親人本人?)
  • 它絕對不能做什麼?(例:不冒充第一人稱)
  • 它應該用什麼口氣講話?
4
錢從哪裡來?

這是最容易被忽略、也最容易被 AI 亂做決定的地方。你必須主動立下「費用護欄」,否則 AI 可能默默用付費 API,帳單來了才發現。

問問自己 →
  • 我有沒有明確跟 AI 說「要完全免費」?
  • 有沒有明確說「如果會產生費用先問我」?
  • 用完免費額度會怎樣?(斷線?加錢?)
5
做完怎麼上線?誰能看到?

很容易把「做完」跟「上線」混為一談。跟 AI 溝通時要把「部署」這件事講出來,並且要一個「別人真的能打開」的網址。順帶想清楚:這個網址可以刪嗎?只給特定人看嗎?搜尋引擎會找到嗎?

問問自己 →
  • 做完之後我要一個網址,還是本地看看就好?
  • 網址如果之後想刪掉,怎麼刪?
  • 公開發布之前,需不需要先只給幾個人測試?
🔑 不要抄範本,用你自己的話:把這五個問題在心裡問一遍,然後用你自己的口氣組一段話丟給 AI。丟出去後 AI 一定會反問你(例如「你的檔案在哪?」「角色的口氣要怎樣?」)——認真回答這些問題,你就在建立「提問能力」了。範本只能用一次,維度可以帶走一輩子。
SCENE 04Walk-Through

跟著做一次——
親人傳記這個真實案例。

看實際打開 Codex(或 Claude Code)之後,會發生什麼事。六個步驟走完,你就會有一個能對話的作品連結。你會發現:你完全沒寫程式,你只是在跟 AI 講話

Step 1

先讓 AI 認識你的作品

打開 Codex,走到你的網頁專案資料夾。第一句不要急著要功能,先讓 AI「進來看一下」。

你可以這樣說

「我這個網頁是我一位親人的傳記,你先看一下 index.htmlbook.md,跟我說你看到什麼。」

AI 會做什麼:讀完檔案,回你「這是一個靜態頁面,內容有 7 個章節⋯」——這是確認它有進來、有讀懂。這一步做完,AI 才有共同的背景可以跟你討論。
Step 2

用你自己的話,說出你要什麼

Scene 03 的五個維度在心裡問一遍,然後用你自己的口氣組一段話。不要抄範本——每個人的作品不一樣,你的話才對。

你可以這樣說

「我想在網頁右下角加一個 chat 對話框,讓訪客可以跟『很懂這位親人的朋友』聊天。內容基於 book.md。AI 不要冒充這位親人本人。用完全免費的方案,有費用先問我。

對照五個維度:①要加什麼功能 ✓ ②AI 從哪拿知識 ✓ ③扮演什麼角色(含禁忌)✓ ④費用護欄 ✓ ⑤上線可以下一步再說
Step 3

AI 會反問你——認真回答

AI 動手之前,通常會反問你 2-3 個問題。這些問題就是你作品靈魂的入口,不要「隨便你決定」。

AI 可能會問你

「這個朋友的口氣是像老朋友還是像編輯?」
「如果訪客問書裡沒寫的事,AI 該怎麼回答?」
「有沒有不能講的話題?」

提示:回答越具體,AI 交出來的作品越像你想的。這一步值得多花 5 分鐘慢慢想。
Step 4

看 AI 交出來的東西——直接驗收

AI 會給你 3 個檔案(或說「我改好了」)。你不用會讀程式碼,只要驗收兩件事。

你要檢查

①打開網頁,右下角有沒有出現對話框?
②點開來對話,AI 回話的口氣像不像你要的?

不像 →直接跟 AI 說:「回話口氣太客套,請像老朋友一點。」它會改。這叫改 system prompt——就是 Scene 02 說的「作品靈魂」。
Step 5

部署上線,拿到網址

在本地看起來 OK 之後,讓 AI 幫你把作品放上網。

你可以這樣說

「幫我部署到 Cloudflare Pages,用免費方案,做完給我網址。」

AI 會做什麼:處理所有部署細節(wrangler 指令、開 project、上傳檔案),最後給你一個 xxx.pages.dev 網址。點開來玩。玩不順就回去改。
Step 6

迭代——你才是這個作品的導演

上線後才是重點。玩了幾次你會發現想改的東西——每一次你說「我想改成⋯」都是你在調你的作品

常見的迭代要求

「回話太長了,一次講 3 句就好」
「幫我加一個預設問題按鈕,問『第四章的銀行家可以怎麼再挖?』」
「換一個中文更順的 AI 模型」
「AI 回答時,如果不知道就直接說『這裡是空白』,不要編。」

這才是這堂課真正教你的事——不是做完就好,是一直調到像你想的樣子
SCENE 05Before You Ship

功能做出來了——
測試,再給別人看。

對話框跑得出來,不代表它是對的。它現在真的是在跟這位親人 / 這份內容對話嗎?還是隨便亂答一通?做完 Scene 04 之後,先花 10 分鐘照這六項測試玩一輪,通過了才算真的做完。

Test 1

身分測試 · 它知道自己不是本人

這樣問它:「你是誰?你是我這位親人本人嗎?」

過關
明確說自己是編輯 / 陪伴角色,不是本人。
沒過
用第一人稱回答,像是這位親人本人在說話。
Test 2

知識邊界測試 · 它只講內容裡有的,不瞎編

這樣問它:先問一個網頁內容裡確實有寫的細節,再問一個內容裡完全沒提過的事(隨便亂問都行)。

過關
有寫的答對;沒寫的老實說「這裡是空白」。
沒過
兩題都講得煞有其事——代表它在瞎掰。
Test 3

語氣測試 · 它像你設計的那個角色

這樣做:隨便跟它聊兩句,讀一遍回覆,感受整體口氣。

過關
讀起來符合你要的角色(老朋友 / 編輯 / 說書人)。
沒過
太制式、太像客服信箱、或跟你想的落差很大。
Test 4

情緒測試 · 遇到重的問題,它接得住嗎

這樣問它:問一句情感濃一點的話,例如「我好想他」「這段我看了會哭」。

過關
溫柔接住一句,不濫用同理套話,再把話題帶回內容。
沒過
冷冰冰不接話,或講得太用力像在做心理諮商。
Test 5

免費測試 · 確認真的沒有花錢

這樣做:不是問 AI 聊天,是回頭跟你的 Codex 確認:「幫我檢查這個功能有沒有用到 OpenAI 或 Anthropic 這種付費 API?」

過關
用的是 Cloudflare Workers AI 之類的免費方案,沒有 key 外洩在前端。
沒過
悄悄接了付費 API,或 API key 直接寫死在網頁原始碼裡。
Test 6

別人視角測試 · 找一個人幫你試

這樣做:找一位家人或朋友,直接把網址給他,不要先劇透、不要在旁邊教。

過關
他也覺得「這個真的很懂這位親人 / 這份內容」。
沒過
他覺得奇怪、不知道能問什麼、或覺得哪裡怪怪的說不上來。
🔁 沒過怎麼辦:回去跟 AI 說清楚哪裡不對——「Test 2 沒過,它連我沒寫的事都在回答,請補一條規則:內容裡沒有的,一律說不知道。」每次測試沒過,都是一次具體的迭代方向,不是重做,是調整 system prompt。
SCENE 06Takeaways

離開這一頁,
你會的兩件事

其他都是延伸。只要這兩件事你能帶走,這堂課就成功了。

Take 01

會對 AI 提「有邊界的需求」。

不是描述你要什麼(那是老產品經理)——是描述你不要什麼。「要免費」「有費用先問我」「AI 不能冒充第一人稱」——邊界越清楚,作品越像自己想的樣子

Take 02

讓 AI 做 95%、自己親手做 5%。

寫網頁靠 AI,但AI 的個性、口氣、禁忌必須親手調。這 5% 就是 system prompt。
「我的作品,AI 講話的樣子必須是我親手決定的。」

這不是「AI 網頁課」——
是「用 AI 做 AI 作品」的元技能課

你下次做任何 AI 應用,都會用同一套語言。