主題、風格、互動、發布權限一起說
一句自然語言大家很容易把「AI 做網站」想成在對話框打一行字，幾秒後畫面就出現。真正可重複、能部署的做法，多了幾層平常看不到的工作：需求要被轉成規格，版型與語氣要有來源，互動要能在手機使用，搜尋與 AI 讀取要一起處理，最後還要有人檢查與機器擋門。
適合誰
- 想示範 AI 做網站，卻不知道怎麼解釋背後流程的人
- 已經會跟 AI 對話，想把成果做成可重複工作流的人
- 希望網站最後能接回正式官網，不只停在本機預覽的人
你可以帶走什麼
- 一張可以播放、暫停、前後切換的六步流程圖
- 技能包、4O、跨家檢查與部署閘門各自負責什麼
- 一句話如何變成可審、可驗、可發布的網站
按播放，看這句需求怎麼往下跑
這張圖共用同一個進度狀態。上方六格、下方四條泳道與右側成果會一起變化，所以停在任何一步，都看得見誰正在做、用到什麼、卡在哪一道門。
一句話到正式網站
等待口述
可播放、可拖曳、可用鍵盤控制的工作流模擬
STEP 01
口述需求
產出：一份可執行的需求摘要
辨認受眾、頁型、機制、來源與停止條件
brief v1使用者原話與本輪補充，不改寫成假引言
對話真相源是否能寫檔、能否公開、誰負責最後檢查
需求完整
01 / 06
鍵盤：先點一下播放器，再用 ← → 切換步驟，空白鍵播放或暫停，R 重播。系統設定減少動態時不自動播放，仍可逐步切換。
展開六步文字版（不執行 JavaScript 也能讀）
- 口述需求：把要做什麼、給誰看、要什麼風格與現在能不能發布講清楚。
- 技能包路由：讀寫作、網頁、官網與 4O 的既有規則。
- 官方版型施工：在獨立工作桌套深度文章模板並做互動。
- 4O 與技術驗收：同時檢查搜尋、AI 讀取、引用與代理使用，再測手機和互動。
- 跨家檢查：由 Claude Code 檢查內容、結構與部署風險。
- 受控發布：通過 preflight，再合併、發布並驗正式網址。
第一步的工作，是把口述整理成能施工的條件
這次口述裡其實已經有四個關鍵條件：內容是「怎麼用 AI 做網站」、視覺沿用知識官網、互動核心是動態工作流、成品要能進深度文章。後來再補一條：做完交給 Claude Code 檢查，沒有重大矛盾就直接部署。
AI 先做的轉換把自然語言拆成內容目標、視覺系統、互動機制、資料來源、驗收方式與發布權限。條件沒說清楚的地方保留成待確認，不能自行補成使用者講過的話。
這也是口述很適合當起點的原因。人先講清楚自己要的結果，技能包與流程再把容易遺漏的細節補齊，不需要一開始就會寫 HTML、CSS 或部署指令。
技能包把風格與版型，變成下一次還能沿用的規則
如果每次都只說「幫我做得好看」，AI 每次會重新猜一次。這次能直接指定知識官網風格，是因為顏色、字體、導覽列、文章首屏、手機斷點、卡片元件與部署邊界，已經寫進技能包和官網模板。
守住原話與事實，安排深度文章的導言、適合誰、能帶走什麼、正文與 FAQ。
決定單頁 HTML、RWD、動態機制、鍵盤操作、靜態 fallback 與互動驗收。
套官方暖色拿鐵版型，接文章資料、搜尋別名、互聯、封面與正式發布流程。
技能包保留的是做法文章內容仍要回到這次口述與實際工作紀錄。版型可以重複，案例與結論不能靠模板自動生出來。
就近延伸閱讀
- Claude Skills 是什麼？把你的專業流程，變成 AI 能重複執行的知識資產：這段說技能包保留做法，那篇從頭解釋技能包是什麼、怎麼做。
網站生成時，4O 同輪進來檢查
網站要同時服務人與 AI。4O 把四個常被拆開做的問題，放回同一輪施工。
標題、摘要、網址、標題階層與站內連結，讓人透過搜尋找到。
先給直接答案，再用結構、FAQ 與可抽取段落，讓 AI 能回答。
交代工作紀錄、來源邊界與實際做法，讓觀點有機會被引用。
提供可讀 HTML、結構化資料與權限邊界，讓代理能理解與使用。
文章頁本身只放得下文章層的結構。上線時，官網流程還會重建文章索引，並接上搜尋別名、站內互聯、sitemap 與給 AI 讀的索引檔。這些站層級工作不能用一個 meta 標籤代替。
就近延伸閱讀
- AI 時代，網站開始同時服務人與 AI｜從 Claude 匯入 Cookie 到 WebMCP：這段只講 4O 在做網站流程裡的位置，那篇用同一套四層框架整理網站 AI 化的改造順序。
部署的工作流，是把成品安全地接回正式官網
工作日誌記下的現行做法，是每篇文章先在自己的工作桌施工。成品通過檢查後，才合併回主站，重建全站生成檔，再從唯一發布入口送出。這能避免一篇文章把另一個正在施工的頁面一起帶上線。
| 階段 | 實際動作 | 完成證據 |
|---|---|---|
| 獨立施工 | 用文章 slug 開專屬 worktree 與分支，套官方模板，新增文章頁與 article.json。 | 工作桌乾淨、來源檔範圍明確。 |
| 內容與互動驗收 | 檢查標題階層、4O、互聯、鍵盤操作、390px 手機版與靜態 fallback。 | 檢查腳本、瀏覽器實測與跨家審稿結果。 |
| 合併發布 | 由 merge-publish.sh 合併文章分支，重建生成檔，再交給 scripts/publish.sh。 | preflight 全綠、main commit 與 publish tag。 |
| 線上驗收 | 檢查正式文章網址、索引、封面與站內連結，不以「指令成功」當完成。 | 正式網域 HTTP 200，內容與本次版本一致。 |
發布仍有停止條件跨家審查抓到重大矛盾、秘密掃描命中、工作區有別人的未提交內容、preflight 失敗，任何一項出現就停。這些情況不能用「先上線再說」繞過。
就近延伸閱讀
- 兩個 AI 同時改一個網站，為什麼會打架？：表格第一列的「一篇文章一張工作桌」，那篇交代它是怎麼從事故長出來的。
- 多個 AI 改同一個網站，怎麼不打架：發佈閘門：表格第三列的 preflight 與唯一發布入口，那篇講這道閘門的三層設計。
所以，一句話真正啟動的是整套既有工作流
使用者說的是結果，AI 接的是一整套先前寫好的判斷與檢查。
主題、受眾、風格、互動方式與是否允許發布，由人拍板。
讀技能包與工作紀錄，產出文章、頁面、互動與必要接線。
跨家找矛盾，機器查結構與部署條件，最後驗正式網址。
這樣的示範重點不在「AI 幾秒寫出多少行程式」。重點是同一句需求下次再來，系統仍知道該用哪個版型、哪幾個檢查、在哪裡停、什麼證據才算完成。
常見問題
AI 做網站，是每次都從空白開始嗎？
流程會先讀既有技能包、官方版型與檢查規則，再依這次需求填入內容與互動。規則愈完整，AI 每次重新猜的地方愈少。
我只會用說的，也能開始嗎？
可以。先講清楚你要給誰看、希望對方看完做什麼、喜歡哪個既有風格、需不需要互動、現在能不能公開。AI 再把口述轉成施工規格。
4O 在這個流程裡負責什麼？
SEO 處理被人找到，AIO 處理被 AI 回答，GEO 處理觀點能被引用，AXO 處理代理能在授權邊界內理解與使用。四項一起進入頁面與站層級檢查。
AI 寫完可以直接部署嗎？
流程可以接著發布，但仍要通過跨家檢查、程式驗收、秘密掃描與正式網址驗證。只看到部署指令成功，還不能算網站真的上線。
為什麼還要找 Claude Code 檢查？
這一頁由 OpenAI 家族模型施工，再交給 Anthropic 家族的 Claude Code 檢查內容矛盾、互動與發布風險。不同家族的盲點不同，審查結果要實際回收並讀過才算完成。
延伸閱讀
這篇提到過的
- Claude Skills 是什麼？把你的專業流程，變成 AI 能重複執行的知識資產：技能包是什麼、怎麼做。
- AI 時代，網站開始同時服務人與 AI｜從 Claude 匯入 Cookie 到 WebMCP：4O 四層框架放到整個網站怎麼排順序。
- 兩個 AI 同時改一個網站，為什麼會打架？：一篇文章一張工作桌的來由。
- 多個 AI 改同一個網站，怎麼不打架：發佈閘門：preflight 與唯一發布入口的設計。
再往前後延伸
- 怎麼設計讓兩個 AI 互審？：三種不同程度的審查機制設計：本篇第五步的跨家檢查只用到一種深度，那篇比較三種審查深度各自抓得到什麼。
- 我做的網頁，要放在哪裡別人才打得開？｜託管平台決策樹：本篇的網站接回既有官網；如果你還沒有網站，要先決定放在哪個平台。
下次先把需求講清楚，再讓工作流接手
先不用學會所有技術名詞。準備一個想做的網站，講清楚對象、用途、風格與能不能公開，再把重複做法寫進技能包。
這篇示範的核心
一句話負責啟動，技能包負責重複，4O 負責可見與可用，跨家審查與發布閘門負責收尾。