
Claude Fable 5 網站設計完整教學:由品牌 Brief、Claude Code 到響應式 QA
先校正 Fable 5 的模型身份、香港供應、方案與資料保留,再由虛構品牌 brief、repository 規則、第一個 vertical slice、逐輪改版、browser 驗收走到 staging 交付。本文不承諾一鍵生成高價網站,而是提供可追溯、可審核的繁體中文 Claude Code 工作流。
Codex、Claude Code、AI Studio 與程式工作流的實作、限制和驗證方法。

先校正 Fable 5 的模型身份、香港供應、方案與資料保留,再由虛構品牌 brief、repository 規則、第一個 vertical slice、逐輪改版、browser 驗收走到 staging 交付。本文不承諾一鍵生成高價網站,而是提供可追溯、可審核的繁體中文 Claude Code 工作流。

三者不是同一類工具:n8n 擅長把既有服務編排成可觀察工作流,Claude Code 是可讀寫程式庫及執行指令的 agentic coding tool,Google AI Studio Build 則已由快速原型進化成支援 Node.js、Secrets、Firebase、GitHub 與 Cloud Run 的全端建構環境。本文按 2026 年 7 月官方資料校正影片中的過時定位,提供決策矩陣、五個實際場景、組合架構、提示詞、費用快照和上線 QA,並附 6 張去識別教學畫面/資訊圖與 1 段人工審核動態預覽。

由需求清單、結構化 Prompt、Google AI Studio Build、第一版預覽、對話式改版、全螢幕驗收到 Code/GitHub/ZIP/Cloud Run 交付,完整建立可審核的網站原型流程。本文同時修正影片已過時的 Gemini 3 Pro Preview 選項,加入響應式、無障礙、圖片授權、資料私隱、密鑰、測試及發佈檢查。

由零開始在 Windows 安裝 Ollama、選擇合適模型 tag、以終端機測試本機推理,再用 Docker 和 Open WebUI 建立瀏覽器聊天介面。本文按目前官方文件更新舊有 Llama 3/Qwen2 示範,加入硬件與儲存規劃、localhost-only 安裝、資料持久化、更新備份、檔案檢索和完整私隱邊界。

AI Agent 不只是會聊天的模型,也不是把每一步都交給 AI。本文由目標、指示、工具、狀態、記憶、規劃、退出條件、人工批准到 evals,拆解一個可控制的 agent loop;再以 n8n 與 Coze 作選型例子,設計第一個低風險、可測試、可回復的自動化專案。附 4 段去識別預覽、架構表、決策矩陣、驗收清單和完整規格模板。

把一張遊戲截圖轉成可執行工作流:先拆核心循環、介面、資產與技術風險,以 Brainstorming skill 逐題確認設計,寫成設計文件和驗收目標,再用 ImageGen 建立原創素材、Codex 完成 vertical slice,最後以實際遊玩測試控制、碰撞、節奏和 UI。附逐張人工審核的去識別畫面、5 段預覽與完整提示。

影片示範 Repomix 整理 repository 上下文,以及 Codex++ 加入即時預覽、tweak manager 與開發者摘要。本文按目前官方文件重新分類:先用 Codex Skills/Plugins/MCP,再按需要使用 Repomix;Codex++ 會修改及重新簽署桌面 App,只適合能審查、隔離與復原風險的進階用戶。
老闆 AI 簡報 · The Boss Briefing
同一班香港老闆同高管一齊,收取精簡、不誇張、教你實際運用 AI 的簡報。完全免費。