by Rain Chu 8 月 29, 2026 | AI , claude , codex , OpenAI , 圖型處理 , 影片製作 , 繪圖
AI 做動畫已經不只是叫模型生一段畫面。更實用的方向，是把動畫規則、鏡頭語言、渲染流程和品質檢查包成 Skill，讓 Codex、Claude Code 或其他 coding agent 知道該怎麼完成一支片。
這次整理的七個 AI 動畫 Skills，剛好涵蓋七種常見需求，從網頁動效、Logo 開場、數據動畫，到產品廣告、手繪故事和動態設計原則都有。它們不是同一類工具，也不需要全部安裝。先看自己要做什麼，再選對 Skill，會比堆一大包能力有效得多。
先講結論，短片該選哪一個
如果目標是快速做社群短片，我會先選 HyperFrames，它讓 Agent 用 HTML、CSS 和 JavaScript 描述畫面，再輸出成影片，對 Codex 很直覺，若內容以數字、圖表或年度回顧為主，Remotion 會更適合。產品網站想做成有電影感的廣告，可以直接看 video-shotcraft。
Logo 動畫 選 Pixel2Motion，中文故事轉手繪 日記選 story-to-handdrawn-video。GSAP AI Skills 負責把網頁互動 做得更有彈性和節奏，LottieFiles motion-design-skill 則像一位動態設計導演 ，幫 Agent 先把時機、緩動和編排想清楚。
Skill 最適合的任務 主要輸出 我會怎麼選 HyperFrames 網頁式動畫、短影音、產品解說 HTML 影片工程 想用 Codex 快速做片先選它 GSAP AI Skills 網頁互動、滾動動畫、UI 動效 可執行的前端動畫 網站看起來太硬時使用 Pixel2Motion Logo reveal、品牌開場 SVG、HTML、GIF 或影片預覽 手上只有點陣 Logo 時使用 Remotion Agent Skills 數據、圖表、字幕、批次影片 React 影片工程 需要精準時間軸與可重複生成時使用 video-shotcraft 產品宣傳片、網站功能廣告 電影感 Remotion 成片 有真實產品畫面時最有價值 story-to-handdrawn-video 中文故事、手繪日記動畫 直式手繪無聲影片 敘事型短片可以直接套流程 motion-design-skill 節奏、緩動、動態設計審查 設計規則與改進建議 搭配其他 Skill 一起用
Skill 和動畫工具有什麼不同
GSAP、Remotion 和 HyperFrames 是能真正執行動畫或渲染影片的工具，Skill 則是給 AI Agent 的工作說明，裡面會放最佳做法、檔案結構、動效規則、操作命令、常見失敗和驗收方式，它不會讓模型突然變成動畫師，但可以減少 Agent 亂猜 API、亂排時間軸和做出模板感畫面的機會。
如果你還不熟悉這種能力包，可以先看我整理的自訂 Skill 完整教學 ，它的重點不是多一個聊天指令，而是把可重複的製作方法交給 Agent。
1. HyperFrames，把網頁變成可渲染的影片
HeyGen HyperFrames 的核心很簡單，先用 HTML 寫畫面，再把瀏覽器中的動畫確定性地渲染成影片，Agent 可以處理分鏡、CSS、GSAP、素材、字幕、音訊和輸出，因此很適合做產品解說、社群短片、動態圖表與網站展示。
它和傳統剪輯軟體的差別，是畫面本身可以被程式控制，只要資料結構固定，同一套模板就能換內容重新輸出，想深入理解它的架構，可以接著看HyperFrames 用 HTML 寫影片 。
npx hyperframes init my-video --example blank
cd my-video
npx hyperframes preview
npx hyperframes render2. GSAP AI Skills，讓網頁動效不再只是淡入淡出
GSAP AI Skills 是官方提供給 coding agent 的動畫知識包，涵蓋核心時間軸、Tween、ScrollTrigger、Flip、MorphSVG 和常見清理方式。它適合處理會浮、會彈、會跟著捲動改變的網站互動。
GSAP 的價值不是特效多，而是時間軸和控制能力成熟。Agent 知道怎麼設定 easing、stagger、觸發條件和資源清理後，做出來的動畫會比隨手拼 CSS transition 穩定很多。
npx skills add greensock/gsap-skills3. Pixel2Motion，一張 Logo 變成品牌動態開場
Pixel2Motion 會先把 PNG、JPG 或截圖中的 Logo 重建成平滑 SVG，再設計 motion、logo reveal 和 HTML 動態展示，它不是單純把圖片放大縮小，而是先處理向量結構，再對圖形部件安排動作。
這個流程很適合品牌開場、App 啟動畫面和社群短片片頭，官方專案也加入幾何比對、動作幀截圖和最終畫面檢查，讓 Agent 不只產出會動的檔案，也留下可審查的證據。
npx skills add nolangz/pixel2motion4. Remotion Agent Skills，用 React 做精準影片
Remotion Agent Skills 把 Remotion 的動畫、字幕、音訊、3D、圖表、渲染與元件設計規則交給 Agent。Remotion 本身以 React 組成影片，每一幀都能由程式和資料決定，因此很適合年度回顧、排行榜、圖表動畫、批次內容和字幕短片。
它的學習成本比單純 HTML 高，但大型專案會更好維護。之前整理的Codex 動態圖表和短影片工作流 ，就很適合拿 Remotion 處理需要精準幀數與資料驅動的部分。
npx skills add remotion-dev/skills
npx create-video@latest5. video-shotcraft，把產品畫面剪成電影感廣告
video-shotcraft 是一套以 Remotion 為基礎的產品影片製作 Skill。它提供超過一百張鏡頭配方卡、可預覽的動作樣式、2.5D 運鏡、節奏卡點、音效和可直接替換內容的完整模板。
最實際的用法，是把網站或桌面產品的真實畫面交給 Agent，再指定想使用的鏡頭卡。它會處理素材採集、分鏡、運鏡、轉場、聲音和品質檢查。相比只生成幾張氣氛圖，這條路更能把真正的產品功能講清楚。
npx skills add Vincentwei1021/video-shotcraft6. story-to-handdrawn-video，中文故事轉手繪日記動畫
story-to-handdrawn-video 能把中文故事或排序好的圖片，轉成直式手繪日記動畫，它會安排手寫文字、黑白線稿、彩色插圖與翻頁轉場，輸出可再加入旁白的 H.264 畫面。
這個 Skill 適合個人故事、知識小品、品牌創辦歷程和情緒型內容。它的風格很明確，不適合硬套在科技產品展示，但用在敘事題材時能快速建立一致的視覺語言。
git clone https://github.com/gnipbao/story-to-handdrawn-video.git
cd story-to-handdrawn-video
npm install7. motion-design-skill，先教 Agent 什麼叫手感
LottieFiles motion-design-skill 不綁定特定動畫框架。它教的是 timing、easing、choreography、情緒意圖和改寫成 UI 動效的經典動畫原則。CSS、GSAP、Framer Motion、Lottie 都能使用這套思考方式。
很多 AI 動畫技術上能跑，卻沒有重量、停頓和節奏，原因通常不是少一個套件，而是 Agent 沒先決定動作要傳達什麼。這個 Skill 最適合當成第二層能力，搭配 HyperFrames、GSAP 或 Remotion 一起使用。
npx skills add LottieFiles/motion-design-skill可以直接貼給 Codex 的繁體中文提示詞
不要只寫「幫我做一支動畫」。先把目的、尺寸、時長、素材、節奏和驗收條件講清楚。下面這份可以直接改主題使用。
請使用適合的動畫 Skill，製作一支 15 秒直式短片，比例 9:16。
目的
用最短時間介紹我的產品如何把文字整理成可搜尋的知識庫。
素材
使用專案中的真實產品截圖與品牌色，不要使用無關的 AI 圖片。
結構
0 到 3 秒呈現使用者找不到資料的痛點
3 到 8 秒展示匯入、整理與搜尋流程
8 到 12 秒用數字動畫顯示節省的時間
12 到 15 秒顯示產品名稱與行動文字
動效
畫面轉場要乾淨
數字使用平滑遞增
卡片進場要有重量感與短暫停頓
不要讓所有元素同時移動
限制
不要藍紫科技風
不要粒子背景
不要讓文字互相遮擋
不要使用未授權素材
驗收
先做 5 秒風格原型
確認手機畫面可讀後再完成全片
最後檢查每一幀是否有文字裁切、元素重疊和空白畫面我的建議組合
社群短片選 HyperFrames，加 motion-design-skill 控制節奏
網站互動選 GSAP AI Skills，加 motion-design-skill 做動態審查
數據影片選 Remotion Agent Skills
產品廣告選 video-shotcraft，再用真實頁面截圖
品牌片頭選 Pixel2Motion
故事內容選 story-to-handdrawn-video，再補旁白、字幕和音效
更完整的製作管線可以參考OpenMontage 本地 AI 影片工作流 。它把研究、腳本、素材、渲染和驗收串起來，而這七個 Skill 比較像其中的專業工位。先把一個工位用熟，再擴大成自動化流水線，成功率會高很多。
FAQ
完全不會寫程式也能用嗎？
可以從提示詞開始，但仍要看得懂 Agent 建立了哪些檔案、如何預覽和輸出。HyperFrames 與 video-shotcraft 對成品導向較友善，Remotion 更適合願意維護 React 專案的人。
只想做短片，最推薦哪一個 Skill？
一般社群短片先選 HyperFrames。數據類短片選 Remotion。產品宣傳片選 video-shotcraft。風格容易僵硬時，再加 motion-design-skill 幫 Agent 調整節奏。
安裝很多 Skill 會不會讓 Agent 更強？
不一定。能力太多會增加選擇和上下文成本。每次任務只啟用一個主要製作 Skill，再搭配一個設計或品質檢查 Skill，通常會比較穩定。
by Rain Chu 8 月 25, 2026 | 3D , AI , claude
用 Claude Code 或 Codex 產生 Remotion 專案並不難，真正困難的是讓動畫從「可以播放」進步到「看起來像專業設計」，只下一句提示詞，AI 通常能把元件放進時間軸，卻很難同時掌握分鏡、節奏、視覺層級、轉場與品牌質感。
比較可靠的方法，是先把 Remotion 的 Agent Skill 安裝到開發代理，接著把需求拆成分鏡、時間、版面與動態規則，先完成短片段，再逐幀檢查並反覆修正。本文會從安裝開始，整理一套 Claude Code 與 Codex 都能使用的流程，也會說明 GSAP、D3.js、Lottie、Three.js、Canvas 與 Blender 各自適合處理什麼工作。
Remotion 是什麼
Remotion 是一套以 React 撰寫影片的框架。畫面被拆成 Composition，每個 Composition 會定義尺寸、幀率與總幀數，元件再依目前幀數計算位置、透明度、縮放與其他狀態。最後可以在 Studio 預覽，也能透過命令列輸出影片。
這種逐幀且可重現的設計很適合 AI 代理。代理可以讀取程式碼、修改元件、調整時間點，再重新輸出指定幀進行比對。它也適合大量產生不同文案、數據或尺寸的影片，而不是每次都回到剪輯軟體手動修改。
為什麼一句提示詞通常做不好
空白專案只提供了一堆可以組合的零件，沒有現成的鏡頭語言、元件規則與品質標準，當需求只有「做一支有質感的 SaaS 動畫」，代理還要自行猜測品牌顏色、字級、轉場、每一幕的長度，以及什麼才算有質感，結果自然容易變成普通投影片。
沒有分鏡，所以所有資訊同時出現
沒有明確時間點，所以動畫速度忽快忽慢
沒有動態規則，所以每個元素使用不同節奏
沒有參考幀，所以代理只能猜測版面與層級
沒有驗收步驟，所以第一版直接被當成完成品
Agent Skill 的價值，就是先把 Remotion 的正確用法、常見陷阱與輸出流程交給代理，這和建立 Claude Code 自訂 Skill 的概念相同，先提供可重複使用的方法，再讓代理處理當次任務。
Claude Code 與 Codex 都能使用 Remotion Skill
Remotion 官方的 Agent Skills 文件 已列出 Claude Code 與 Codex 等開發代理。先確認電腦已安裝 Node.js，再建立空白專案並加入 Skill。
npx create-video@latest --yes --blank my-video
cd my-video
npm i
npx remotion skills add
npm run dev如果希望把官方 Skill 安裝成全域能力，可以執行下面的指令。
npx -y skills@latest add remotion-dev/skills -g -y官方能力不只包含基本規範，也有建立作品、字幕、地圖、SaaS 產品動畫、互動播放器、媒體處理、版本升級與輸出等分工
這表示 Codex 並不是只能修改既有 Remotion 程式，也能從規格開始建立專案並完成輸出。
可直接使用的繁體中文提示詞
提示詞不要只描述主題，也要同時定義格式、時間軸、視覺系統、動態語言與驗收方式．
下面這份範本可以直接貼給 Claude Code 或 Codex，再替換中括號內的內容。
請先讀取目前可用的 Remotion Skill 與專案規範，再建立一個可直接輸出的 Remotion Composition。
影片主題
[要傳達的產品或故事]
輸出格式
1920 x 1080
30 fps
總長 20 秒
Composition ID 使用 ProductLaunch
視覺方向
使用深灰、米白、青色與珊瑚紅
畫面安靜、精準、有產品發表會質感
禁止套用通用科技藍紫漸層
文字必須保留安全邊界並在手機縮圖中可讀
分鏡
0 到 3 秒顯示品牌名稱與一句核心價值
3 到 8 秒展示產品介面與主要操作
8 到 14 秒用三個步驟說明工作流程
14 到 18 秒顯示成果數據
18 到 20 秒收尾並顯示行動文字
動態規則
所有動畫都要由 useCurrentFrame、interpolate 或 spring 驅動
每次只讓一個主要資訊成為視覺焦點
入場使用淡入、位移與輕微縮放
不要使用無法由幀數重現的 CSS transition
不要使用 Math.random、目前日期或即時網路狀態
工作方式
先建立 5 秒的第一幕作為品質樣本
輸出第 0、30、60、90、120 與 149 幀供我檢查
確認沒有文字溢出、遮擋、跳動與空白畫面後，再完成全部分鏡
最後列出 Composition ID、預覽方式與輸出指令這個範本刻意要求先做 5 秒樣本。若第一幕的字體、間距與動態節奏不對，先修正視覺系統會比做完 20 秒後重來省下更多時間。
若想深入理解 Codex 產生動態內容的提示架構，可以延伸閱讀Codex 做動態圖表和短影片的工作流程 。
模仿參考動畫時要先拆解畫面
把整段參考素材轉成大量截圖，再一次交給代理，通常只能得到顏色和版面大致相近的結果。，集畫面缺少元素對應、時間關係與動態方向，代理不容易判斷一個物件是移動、被遮罩，還是切換成另一個元件。
每 0.5 到 1 秒擷取一張代表幀
標記每個鏡頭的開始時間與結束時間
列出背景、主體、文字、裝飾與遮罩等圖層
描述物件從哪裡進入、移動到哪裡、使用何種緩動
先重建最具代表性的 3 到 5 秒
輸出相同時間點的幀並排比較
軌跡動畫也可以用一張乾淨的路徑草圖輔助。把路徑、起點、終點與移動方向畫清楚，再要求代理將路徑轉成 SVG 或座標資料，通常比只用文字描述「繞一圈再飛出去」更準確。參考作品應作為鏡頭與節奏研究，不要直接複製商標、字體、插圖或其他受保護素材。
Remotion 與各種動畫工具怎麼選
工具 擅長內容 適合情境 Remotion 原生能力 React 元件、分鏡、字幕、影片組合 產品介紹、教學短片、批次影片 GSAP 時間軸、緩動、複雜介面動態 SaaS 首頁、產品發表、投影片式轉場 D3.js 資料轉換、SVG、客製圖表 統計變化、架構圖、地圖與路徑 Lottie JSON 向量動畫 圖示、付款流程、節慶與微動畫 Three.js 即時 3D 場景與模型 低多邊形場景、設備與空間示意 Fabric.js 與 p5.js Canvas 繪圖與自訂視覺 白板、手繪、幾何圖形與實驗動畫 Blender 建模、材質、燈光與高品質 3D 產品模型、車輛、角色與複雜鏡頭
Remotion 加 GSAP
GSAP 的 Timeline 很適合管理多段 Tween，也方便安排重疊、標籤與緩動。它能讓產品頁面以投影片般的節奏逐幕展開。不過 Remotion 最終仍要對每一幀得到固定結果，因此整合時應由目前幀數控制 GSAP 的進度，避免依賴瀏覽器實際經過的時間。
Remotion 加 D3.js
D3.js 是自由度很高的資料視覺化工具，關於人口統計變化、系統架構、交通路線與歷史路徑都很適合先由 D3 計算比例尺、座標與 SVG，再由 Remotion 控制每一段資料何時出現，資料來源應保存在專案內或在輸出前完成下載，避免輸出時受到外部 API 波動影響。
Remotion 加 Lottie
Lottie 適合圖示、付款成功、條碼掃描與簡短節慶動畫，官方套件需要安裝 @remotion/lottie 與 lottie-web。部分 Lottie expression 無法保證逐幀一致，正式輸出前應特別檢查是否閃爍。
npm i @remotion/lottie lottie-webRemotion 加 Three.js
Three.js 適合在 React Three Fiber 中載入 3D 模型，再用 Remotion 的目前幀數控制相機、模型與燈光，官方提供 @remotion/three 進行整合，低多邊形產品展示、工廠流程或地圖空間化很合適，複雜建模與擬真材質則應交給 Blender。
npm i three @react-three/fiber @remotion/three @types/threeBlender 與 MCP 的正確分工
Blender 可以完成建模、材質、燈光、相機與骨架動畫，透過合適的 MCP 連接器，Claude Code 或 Codex 可以呼叫 Blender 執行部分操作，但這不代表代理已具備專業 3D 美術判斷，最有效率的分工，是由 Blender 建立複雜 3D 資產與鏡頭，再輸出透明影片或圖片序列，最後交給 Remotion 疊加文字、圖表、字幕與音訊。
MCP 連接器屬於第三方整合時，要先檢查原始碼、權限範圍與維護狀態。不要讓來源不明的工具取得整台電腦或敏感專案的存取權。
如何輸出透明字卡與動畫覆蓋層
透明背景不能只把 CSS 背景設成透明，輸出格式也必須保留 Alpha 通道，若要放進 Final Cut Pro、Premiere 或 DaVinci Resolve，Remotion 官方建議使用支援 Alpha 的 ProRes 4444 或 4444 XQ，影格格式選 PNG，像素格式使用 yuva444p10le。
npx remotion render ProductLaunch out/overlay.mov --image-format=png --pixel-format=yuva444p10le --codec=prores --prores-profile=4444網頁若需要透明影片，可以輸出 VP8 或 VP9 的 WebM，搭配 PNG 影格與 yuva420p，瀏覽器支援並不一致，正式網站最好同時準備不透明的備用版本。
從需求到成品的完整工作流程
寫清楚目的 先決定受眾、平台、時長與希望觀眾記住的唯一重點拆分分鏡 每幕只安排一個主要訊息，標出開始與結束時間定義視覺系統 固定顏色、字體、間距、圓角、陰影與安全邊界安裝 Skill 讓代理先讀取 Remotion 的官方規範與相關能力先做短樣本 用 3 到 5 秒確認設計方向，不要直接生成整支作品檢查代表幀 至少檢查開頭、中段、轉場前後與結尾加入專用工具 依需求選 GSAP、D3、Lottie、Three.js 或 Blender加入音訊 最後才對齊旁白、音效與背景音樂輸出與複查 完整播放成品，也要檢查文字是否溢出與畫面是否閃爍
預覽完成後，可以先列出 Composition，再輸出指定作品。
npx remotion compositions
npx remotion render ProductLaunch out/video.mp4Remotion 與用 HTML 寫影片的 HyperFrames 都把畫面轉成代理可修改的程式碼。Remotion 更接近 React 生態與逐幀影片管線，HyperFrames 則適合直接以 HTML 組合動態內容。選擇重點不是哪一套比較新，而是哪一套更符合現有技術與交付格式。
一定要用 Remotion 嗎
不一定。若只是把現成網頁動畫輸出成一次性的短片，可以用 GSAP 或 D3 建立網頁，透過 Playwright 等瀏覽器工具逐幀截圖，再交給 FFmpeg 合成，這條路徑簡單直接，也能保留原本的前端互動程式。
Remotion 的優勢在於 Composition、時間軸、媒體同步、參數化、Studio 預覽與標準輸出流程，當作品包含多個分鏡、字幕、音訊、不同尺寸，或需要批次套用資料時，這些能力會明顯降低維護成本，單次實驗可以選瀏覽器截圖加 FFmpeg，長期內容管線則更適合 Remotion。
常見問題
Codex 可以取代 Claude Code 完成這套流程嗎
可以，Remotion 官方 Agent Skills 文件已把 Codex 列為適用代理，差異主要來自代理讀取到的 Skill、專案上下文、提示詞完整度與驗收流程，而不是只能使用某一個品牌的開發工具。
為什麼參考圖很多，結果還是不像
大量截圖不等於完整動態規格，需要補上每個圖層的名稱、時間區間、位移方向、遮罩關係與緩動方式，先重建一個短鏡頭，再逐幀對照，會比一次交付整段素材更有效。
什麼工具最適合動態圖表
D3.js 適合需要客製比例尺、座標、路徑與 SVG 的資料視覺化，一般長條圖或折線圖不必為了技術感增加過多特效，先確保數據正確、標籤可讀與變化有清楚的時間順序。
透明影片輸出後為什麼變成黑底
通常是編碼器、像素格式或影格格式沒有保留 Alpha，剪輯軟體可用 ProRes 4444 搭配 PNG 與 yuva444p10le，網頁則可測試 VP8 或 VP9 WebM 搭配 yuva420p。
結論
Claude Code、Codex 與 Remotion 的組合確實能做出高品質動畫，但品質不是來自一句神奇提示詞。真正有效的做法，是先讓代理掌握 Skill，再把需求寫成可驗收的分鏡與逐幀規則，最後依內容選擇 GSAP、D3、Lottie、Three.js、Canvas 或 Blender。
把第一版當成可以修改的動畫原型，而不是最終成品，先完成短樣本、檢查代表幀、修正視覺系統，再擴充完整時間軸，AI 才會從快速生成工具變成穩定的動態設計工作夥伴。
延伸資料
by Rain Chu 8 月 24, 2026 | AI , claude
Claude Code 已經能在很短時間內完成網站骨架、元件組合、響應式版面與互動原型。真正拉開品質差距的地方，卻不是「會不會叫 AI 寫前端」，而是能否先定義網站要說服誰、希望對方採取什麼行動，再選擇正確的素材與技術。
一套實用的 AI 網站工作流，可以用 Claude Code 負責程式與整合，用 shadcn/ui 建立元件基礎，再依需求加入 Lottie、Three.js 或捲動圖片序列。最後仍要回到效能、無障礙、後端、安全與維護，才能把吸睛展示變成真的可用網站。
AI 做網站的真正分水嶺
如果只輸入「幫我做一個現代感網站」，AI 很容易回到訓練資料中最常見的版型。常見結果是大標題、三張功能卡、藍紫漸層、圓角按鈕與制式頁尾。這不是程式沒有寫好，而是需求沒有提供受眾、目的、內容優先順序與視覺判斷標準。
網站發展階段 常見特徵 對 AI 設計的提醒 1995 到 2000 表格排版、Frame、閃爍圖示與訪客計數器 技術限制會直接形成視覺語言 2000 到 2005 Flash 開場與高度裝飾性動效 效果醒目不代表資訊容易理解 2005 到 2010 CSS Float 與較自由的版面 排版技術改變後仍需要內容策略 2010 到 2014 響應式設計與 Bootstrap 普及 大量相似版型成為 AI 最熟悉的答案 2015 之後 SPA、元件化與設計系統 元件提高效率，但不會自動產生品牌差異
因此，Skill、設計規則與參考資料會直接影響生成結果，像 用 Impeccable 改善 AI 網站設計 ，就是把審美與常見問題整理成可重複使用的規則。它能減少模板感，但最後仍要由人判斷設計是否符合目的。
先決定網站屬於哪一種策略
同一份公司資料，可以做成完全不同的網站，寫程式前，我會先選擇下面三種策略之一，再決定資訊架構、動效密度與追蹤指標。
策略 資訊路徑 適合情境 主要指標 說服漏斗 看見、信任、理解、行動 接案、服務與銷售頁 CTA 點擊率、聯絡表單完成率 敘事閱讀 主張、方法、工藝、系統、合作 工作室、品牌故事與高單價服務 閱讀時間、捲動深度、案例點擊 最短路徑 價值、證據、精選作品、服務、行動 行動裝置優先與需要快速決策的網站 載入速度、行動版聯絡轉換率
動畫工作室可以用高密度動效展示能力，但代價可能是載入速度和無障礙表現，法律、醫療或在地服務網站通常更需要清楚、可信任與快速聯絡。設計不是把所有效果都放進來，而是保留最能支持目標的部分。
Claude Code 與網站工具分工
Google Whisk 原本能以主體、場景與風格圖片快速探索視覺方向，Google 已在 2026 年 2 月的 Flow 更新 中宣布把 Whisk 與 ImageFX 的主要能力整合到 Flow，因此新專案可直接從 Flow 開始。想了解原本的操作概念，仍可閱讀 Google Whisk 官方介紹 。
完整工作流一：先做策略與規格
第一步不要急著叫 Claude Code 產生首頁。先把商業目標、受眾、內容和成功標準整理成一頁規格。以下提示詞可直接交給 Codex、Claude 或 Gemini。
你是一位網站策略師與資深產品設計師。
請先不要寫程式，根據下面資料建立網站策略。
品牌或產品：［填入名稱］
主要受眾：［填入使用者］
希望完成的行動：［購買、預約、聯絡或訂閱］
現有內容：［貼上文字與素材清單］
限制：［技術、時程、品牌或法規限制］
請輸出：
1. 一句清楚的價值主張
2. 建議採用說服漏斗、敘事閱讀或最短路徑，並說明原因
3. 從首頁到主要行動的資訊架構
4. 每個區塊的目的、必要內容與 CTA
5. 建議追蹤的三個指標
6. 不應加入的內容與效果
7. 桌面版與行動版的驗收條件
資訊不足時先列出問題，不要自行虛構客戶、獎項或數據。這一步完成後，再請 AI 挑戰規格中的假設，例如「為什麼一定要輪播圖」或「使用者能否在五秒內找到聯絡方式」。好的規格應該能回答為誰設計、為何這樣排，以及如何判斷有效。
完整工作流二：拆解參考網站但不複製
參考 Awwwards 等設計網站時，應拆解規則，不應下載別人的品牌素材後直接換字，可觀察版面比例、閱讀節奏、元素定位、字體層級、動效觸發條件與素材格式，再用自己的內容重建。
請分析我提供的參考網站截圖與網址，建立一份可實作的設計規格。
請拆解：
1. 頁面區塊順序與每個區塊的目的
2. 網格、最大寬度、留白與對齊方式
3. 字體層級、行高與閱讀節奏
4. 色彩角色，不只列出色碼
5. 圖片、Lottie、影片與 3D 素材的使用位置
6. 捲動、游標、進場與狀態切換的觸發方式
7. 行動版需要刪除、簡化或改排的內容
8. 可能使用的前端技術與效能風險
只提取設計原則與互動邏輯。
不要複製原站文案、Logo、商標、插圖、照片或可識別的品牌元素。
請提出三個能保留體驗但形成原創差異的方向。這種方法比要求「做得一模一樣」更能長期使用，也降低著作權與品牌混淆風險。若想進一步建立 AI 設計規則，可以參考 UIUX Pro Max 與 WordPress 外觀設計 。
完整工作流三：用 Claude Code 與 shadcn/ui 起底
Claude Code 可從終端機讀取整個專案。安裝完成後進入網站資料夾，再啟動互動工作階段。
npm install -g @anthropic-ai/claude-code
cd my-website
claude對電商、預約、點餐、聊天室或儀表板這類常見介面，shadcn/ui 能快速提供表單、按鈕、對話框、表格與導航元件。不過它只是原始碼與設計系統的起點。若沒有重新調整字體、密度、色彩、狀態和內容層級，網站仍會有明顯套版感。
請先閱讀現有專案結構與套件，不要重建整個專案。
根據已確認的網站策略，建立首頁與主要操作流程。
實作要求：
1. 優先沿用現有框架與元件模式
2. 使用 shadcn/ui 作為基礎，但重新定義色彩、字體、間距與互動狀態
3. 使用語意化 HTML，完整支援鍵盤與螢幕閱讀器
4. 桌面、平板與手機都要有明確版面
5. 不使用虛構數據、假客戶、假按鈕或沒有結果的表單
6. 不加入無助於目標的漸層、裝飾光球與過量動畫
7. 建立 loading、empty、error、success 與 disabled 狀態
8. 完成後執行測試，並列出尚未串接的後端功能
先提出實作計畫與檔案變更清單，確認後再開始修改。對常見產品而言，先讓 AI 建立可操作底稿，再逐步替換品牌內容，通常比從空白專案慢慢刻元件更有效。若專案容易在連續修改後失控，可以搭配 Superpowers 開發紀律 ，把規格、測試與驗收拆成較小步驟。
Lottie、真 3D 與假 3D 怎麼選
方案 優點 限制 適合內容 Lottie 檔案小、向量清晰、容易控制播放 不適合複雜寫實 3D 圖示、插圖、載入與狀態動效 Three.js 加 3D 模型 可旋轉、換視角、改材質與即時互動 開發與效能成本較高 產品檢視器與需要自由互動的場景 圖片序列加 ScrollTrigger 視覺穩定、容易做出高質感捲動敘事 圖片數量大，需預載與壓縮 固定鏡位的拆解、變形與成長動畫
如果訪客不需要自由旋轉物件，真正的 3D 不一定划算。固定鏡位的產品炸開、植物生長、書本展開或日夜轉換，都可以先生成影片，再拆成圖片序列，用捲動位置控制幀數。這種方法的重點是首尾畫面的構圖、光線和物件位置必須一致。
產生首尾關鍵畫面的提示詞
建立兩張 16 比 9 的產品關鍵畫面，作為首尾幀動畫素材。
主體：一個放在深色石材桌面的精緻漢堡
起始畫面：漢堡完整組裝，置於畫面中央
結束畫面：麵包、蔬菜、起司與肉排沿垂直方向均勻分離，形成清楚的爆炸分解圖
兩張圖必須維持完全相同的攝影機位置、焦段、光線、背景、陰影與物件比例。
產品邊緣清楚，材質寫實，構圖適合網站主視覺。
不要文字、Logo、手、餐具、額外食材或鏡頭移動。Flow 首尾幀轉場提示詞
固定攝影機與背景不動。
讓完整漢堡平順地分解成尾幀中的爆炸結構。
每一層食材只沿垂直方向緩慢移動，保持形狀、材質、光線與比例一致。
動作由慢到快再自然減速，沒有旋轉、彈跳、變形或新增物件。
首幀和尾幀必須精準對齊，適合拆成連續圖片序列。轉場完成後，可用 ezgif 的 Video to JPG 或 Video to WebP 拆幀，只保留足以讓動作平順的圖片，統一尺寸和命名，再交給 Claude Code。圖片越多不一定越好，行動裝置的下載量與解碼記憶體必須一起評估。
用 ScrollTrigger 控制圖片序列
GSAP ScrollTrigger 的 scrub 能讓動畫進度直接跟著捲動位置。實作時可把 Canvas 固定在視窗內，依進度換算目前幀數。這裡最容易被忽略的是預載、視窗縮放、圖片比例與減少動態效果設定。
請在現有頁面建立捲動控制的圖片序列動畫。
素材位置：public/sequence
檔名規則：frame-0001.webp 到 frame-0120.webp
需求：
1. 使用 Canvas 繪製，不要一次建立 120 個 img 元素
2. 預載第一幀並立即顯示，再於背景載入其餘圖片
3. 顯示真實載入進度，載入失敗時提供靜態首圖
4. 使用 GSAP ScrollTrigger，將動畫區塊固定並用 scrub 對應捲動進度
5. 依照裝置像素比與容器尺寸重繪，圖片維持完整比例
6. resize 後重新計算 Canvas 與 ScrollTrigger
7. 支援 prefers-reduced-motion，停用動態時顯示最有資訊的靜態幀
8. 行動裝置使用較少幀數或較小圖片
9. 元件卸載時清除 ScrollTrigger、事件與圖片參照
10. 完成後檢查首頁載入量、記憶體與捲動是否流暢
先說明檔案與元件架構，再修改程式。若畫面真的需要讓訪客旋轉、縮放或更換材質，才改用 Hyper3D 產生模型並匯出 GLB，再由 Three.js 載入。模型要先減面、壓縮貼圖並測試手機 GPU。寫實模型能帶來更自由的互動，也會增加載入、除錯與相容性成本。
漂亮原型不等於正式網站
AI 可以快速做出電商、點餐、音樂串流、旅遊規劃、預約與資料儀表板的外觀，要判斷能不能真的使用，不能只看畫面。每一個按鈕、表單、登入、付款與資料狀態都必須有完整路徑。
後端與資料：API、資料庫、搜尋、檔案上傳與交易一致性。
身分與權限：登入、角色、授權、工作階段與密碼重設。
安全：輸入驗證、輸出編碼、金鑰管理、速率限制與安全標頭。
可靠性：錯誤狀態、重試、備份、監控、日誌與復原方式。
品質：響應式、鍵盤操作、螢幕閱讀器、色彩對比與減少動態效果。
效能：圖片壓縮、程式分割、第三方腳本、Core Web Vitals 與低階手機測試。
維護：套件更新、文件、測試、部署流程與內容管理權限。
請把目前網站視為準備上線的正式產品，執行一次完整稽核。
逐項檢查：
1. 所有按鈕、表單、連結與導覽是否有真實結果
2. API、資料庫、登入、權限與錯誤處理是否完整
3. 是否暴露金鑰、個資、內部網址或敏感日誌
4. 是否存在 XSS、CSRF、未驗證輸入與越權風險
5. 鍵盤、螢幕閱讀器、對比與減少動態效果是否可用
6. 手機、平板與桌面是否出現溢位、遮擋或版面跳動
7. 首頁下載量、LCP、CLS、INP 與圖片序列記憶體是否合理
8. SEO、Open Graph、結構化資料與 404 頁面是否完成
9. 測試、部署、監控、備份與回復流程是否存在
請把結果分成阻擋上線、上線前修正、可以後續改善三個等級。
每個問題要提供檔案位置、重現方式與建議修改，不要只給原則。熟悉前端與系統的人通常更能把 AI 用好，因為他們知道哪些地方看似完成，其實只是靜態假象。AI 壓縮的是產生程式碼的時間，需求澄清、架構、除錯、安全、效能與長期維護仍需要工程判斷。
如何整合到 WordPress
Claude Code 產生的網站不會自動變成 WordPress，但有三種常見整合方式。內容型網站可以做成自訂佈景主題或 Gutenberg 區塊。需要 React 互動但仍由 WordPress 管理內容時，可以採用 Headless WordPress，只有單一活動頁時，也能把整理後的 HTML、CSS 與 JavaScript 放進專用頁面模板。
Lottie 與 GSAP 應透過佈景主題或外掛載入，不要在每篇文章重複塞入完整套件。
表單、會員、購物與預約要串接 WordPress API 或成熟外掛，不能只保留前端畫面。
Three.js 與圖片序列要測試 Divi 或其他頁面編輯器是否重複載入腳本。
內容編輯者需要可理解的欄位，不應每次修改文案都回頭改程式。
如果想用 Codex 製作可互動的 HTML 視覺內容，也可以延伸閱讀 Open Design 與 HTML 簡報實戰 ，理解設計規格如何轉成可執行的前端成果。
我會怎麼安排這套流程
先寫受眾、目標、內容與成功指標。
選擇說服漏斗、敘事閱讀或最短路徑。
拆解參考網站的規則，不複製品牌素材。
用 Claude Code 和 shadcn/ui 建立可操作骨架。
依互動需求選擇 Lottie、Three.js 或圖片序列。
先完成一段代表性動效，再決定是否擴大使用。
以真實內容、資料與操作流程完成整合。
執行安全、無障礙、效能與跨裝置驗收。
部署後追蹤轉換與使用行為，再依數據調整。
這套流程的價值不在於證明前端工程師會消失，而是把工作重心從手動堆疊元件，推向需求判斷、設計系統、技術選型與品質保證。AI 可以讓第一版非常快，真正有價值的專業則是知道第一版離可用、可信任與可維護還差多少。
工具與官方資源
FAQ
Claude Code 可以一句話完成整個網站嗎
它可以快速建立完整度很高的原型與常見介面，但正式網站還需要真實內容、資料來源、後端、權限、安全、效能與部署驗收。一句話適合起步，不適合直接當成上線規格。
用了 shadcn/ui 就能消除 AI 模板感嗎
不能。shadcn/ui 提供高品質元件原始碼與良好基礎，但網站仍需要自己的字體、色彩、密度、內容層級、互動和品牌素材。設計策略比元件名稱更重要。
Lottie、Three.js 和圖片序列該怎麼選
簡單向量動效選 Lottie。需要自由旋轉或即時互動選 Three.js。只有固定動作且希望由捲動控制時，圖片序列通常更容易穩定呈現。
Google Whisk 現在要到哪裡使用
Google 已把 Whisk 與 ImageFX 的主要能力整合到 Flow。新工作流可以直接使用 Flow 建立圖片與影片，原本的 Whisk 操作概念仍可作為提示詞與視覺探索參考。
這套方法可以用在 WordPress 嗎
可以，但要先選擇自訂佈景主題、Gutenberg 區塊、Headless WordPress 或專用頁面模板。動態資料與會員功能仍要正確串接 WordPress 後端，不能只把 React 畫面貼進文章。
by Rain Chu 7 月 6, 2026 | Agent , AI , claude
Memory 讓 agent 記得自己的工作經驗,Dreaming 則負責在背景整理、驗證與回填這些經驗。 AI Agent 真正難的地方,不是只會不會呼叫工具,而是能不能在長時間、多任務、多 agent 的環境裡越做越好。MCP 解決的是工具與資料接入,Skills 解決的是可重複使用的能力封裝,但如果 agent 每次醒來都像第一次接觸專案,它就很難成為真正可靠的工作夥伴。
這也是 memory 和 dreaming 這兩個概念重要的原因。Memory 是 agent 的可讀寫經驗庫;Dreaming 則像一個離線整理程序,會在任務之外回看多個 session 的 transcript,找出共同錯誤、成功策略、重複資訊與過期記憶,再把它們整理成更可靠的記憶狀態。
為什麼 Agent 需要 Memory?
現在的 agent 已經可以跑很久,有些任務會持續數小時甚至接近數天。問題是,時間拉長後,上下文管理就會變成瓶頸。Agent 需要知道任務成功條件、常見錯誤、哪些策略行不通、專案檔案怎麼組織、以前有哪些調查結果,也要能從其他 agent 的經驗中學到東西。
這一點和我之前整理 Claude Code Workflow 時看到的問題很像:當你同時開多個 agent 或多個工作階段,真正會拖慢效率的,往往不是模型不夠聰明,而是每個 agent 都在重複摸索同一批上下文。
Memory 的設計:把記憶當成檔案系統
這套 memory 設計最有意思的地方,是它沒有把記憶包成一個過度抽象的黑盒工具,而是把 memory model 成一組檔案。Agent 可以像管理專案檔一樣,用熟悉的 bash、grep、檔案讀寫去整理記憶。這和 Claude Code 擅長操作檔案系統的能力剛好接上。
從實務角度看,這比單純塞一段「長期記憶摘要」更適合大型專案。記憶可以拆成不同檔案、不同層級、不同權限:有些是組織層級的 runbook 和最佳實務,應該只讀;有些是某個團隊或某個任務的 working memory,需要 agent 持續更新。
多 Agent 系統裡,記憶不能只有「我記得」
單一 agent 記得自己的工作經驗已經有幫助,但真正的難題在多 agent。當企業裡同時有數百甚至上千個 agent 在跑,它們會接觸同一套程式碼、同一批告警、同一組 runbook。如果每個 agent 都各自學一次,成本會很高,錯誤也會一直重複。
這裡需要兩種能力。第一是權限範圍:有些 memory store 只允許讀取,有些允許讀寫。第二是並行控制:多個 agent 同時更新同一份記憶時,不能互相覆蓋。用 content hash 做 optimistic concurrency,可以讓 agent 在寫入前確認自己沒有覆蓋別人的更新。
如果把這件事放進更大的 AI 工作流來看,它其實和 用 AI 組一家公司 的概念很接近:當 AI 不再只是單一助手,而是多個角色一起工作,組織記憶就會變成基礎設施。
Dreaming 是什麼?
Dreaming 可以理解成「離線記憶整理」。它不是 agent 正在執行任務時的熱路徑,而是一個非同步 batch process。它會回看最近的 agent sessions、transcripts 和工作結果,找出共同模式、重複錯誤、有效策略,再產生一組更新後的 memory diff。
這個設計很重要,因為單一 agent 在任務中只看得到自己的局部視角。Dreaming 則可以站在更高一層,同時看多個 agent 的工作紀錄。它能發現某個錯誤是不是很多 agent 都遇到過,某個 retry pattern 是不是固定在 60 秒後發生,或某份記憶是不是已經過期。
Memory 與 Dreaming 的差別
項目 Memory Dreaming 運作時間 任務進行中即時讀寫 任務外的非同步整理 主要目標 讓 agent 記得當前與過去經驗 驗證、去重、回填與組織記憶 視角 單一 agent 或單一 session 為主 跨多個 sessions 與多個 agents 適合解決 避免重複調查、保留工作脈絡 找共同錯誤、萃取模式、清理 stale memory 對效能影響 在任務路徑上,要注意 token 與延遲 離線執行,不增加 hot path latency
早期案例透露了什麼?
早期案例有兩個數字值得注意。Rakuten 在內部 knowledge agents 裡導入 memory 後,first-pass mistakes 降低 90%。Harvey 在法律場景 benchmark 中導入 dreaming 後,其中一個 scenario 的 task completion rate 提升 6 倍。
圖表只是把兩個早期案例視覺化。它們不是通用保證,但足以說明 memory 與 dreaming 對長任務 agent 的潛力。 這些數字不能直接解讀成所有 agent 系統都會有同樣改善,但方向很明確:memory 先降低重複犯錯,dreaming 再把多個 agent 的經驗整理成更乾淨、更可用的知識庫。對企業來說,這會同時影響正確率、token 效率、延遲和維護成本。
SRE Agent 的例子最容易理解
假設一個 SRE agent 收到 P1 alert,它開始查 CPU utilization、流量模式、最近部署的 PR,最後把調查結果寫進 SRE memory store。幾分鐘後同樣 alert 又出現,另一個 SRE agent 啟動時,第一件事不是從零開始查,而是先讀到前一個 agent 留下的調查結果,直接避開重複工作。
這就是 memory 的即時價值:省 token、省時間、也讓後續 agent 站在前一個 agent 的肩膀上。再往下一層,dreaming 會回看過去 7 天相關 sessions,找出多個 agent 都沒有單獨注意到的模式。例如很多 alert 都剛好在上游 CPU spike 後 60 秒發生,那可能代表 retry logic 或排程邏輯有問題。
這種模式非常適合 自我進化 AI Agent 架構 。但重點不是讓 agent 無限制亂寫記憶,而是要有版本歷史、attribution metadata、審核流程和可回滾能力。
實作時最該注意的三件事
第一,記憶要可審計。誰寫了什麼、什麼時候寫、基於哪個 session 寫,這些資訊必須留下來。否則 memory 一旦被污染,後續 agent 會把錯誤經驗當成事實。
第二,記憶要分層。組織層級 best practices、團隊 runbook、專案知識、個別任務 working memory,不應該全部混在同一個檔案。這和寫 AI 開發紀律 很像:越是長期會被重複使用的規則,越要整理成穩定結構。
第三,dreaming 不應該完全無人監督。它產生 memory diff 後,可以直接套用,也可以先走檢查、PII scanning、人工 review 或外部 pipeline。對企業 production agent 來說,這種控制權比單純「模型會自動學習」更重要。
我的判斷:Memory 會成為 Agent 系統的資料庫層
如果把 MCP 看成工具層,把 Skills 看成能力層,那 memory 很可能會變成 agent 系統的資料庫層。它不只是「記住使用者喜好」這麼簡單,而是把 agent 的工作歷史、錯誤模式、成功策略與環境知識變成可管理、可審計、可演進的資產。
Dreaming 則讓這個資料庫不只是被動儲存,而是能定期整理索引、刪除過期內容、回填驗證結果、把多個 agent 的經驗濃縮成明天可以直接使用的知識。未來真正強的 agent 系統,可能不是單一模型最聰明,而是整個系統能不能把每天做過的事變成明天的能力。
FAQ
AI Agent memory 是什麼?
AI Agent memory 是讓 agent 保留工作經驗、任務策略、環境知識與常見錯誤的記憶系統。它可以幫 agent 在長任務或多 session 工作中避免每次都從零開始。
Dreaming 和一般 memory 有什麼不同?
Memory 偏向任務進行中的即時讀寫;Dreaming 則是離線整理流程,會回看多個 agent sessions,找出共同模式、去重、驗證記憶並回填更好的內容。
Memory 會不會讓 agent 學到錯誤資訊?
會有這個風險,所以 production memory 需要版本歷史、attribution metadata、權限控管、PII scanning、人工 review 或自動檢查流程。記憶不是越多越好,而是要可靠、可追溯、可清理。
什麼情境最適合導入 agent memory?
最適合長任務、多 agent、重複問題多、環境複雜的場景,例如 SRE triage、程式碼維護、企業知識問答、法務研究、客服流程與內部自動化。
by Rain Chu 5 月 25, 2026 | AI , claude , Ollama , 模型
Claude Code 最大特色之一，就是它能直接理解整個專案目錄、修改檔案、執行 CLI 指令，甚至自動修復程式碼問題。
但許多人最在意的是：
API 費用太高
原始碼不想送雲端
想完全離線使用
希望使用自己的 Local LLM
現在透過 Ollama 官方網站 與 LM Studio 官方網站 ，已經可以讓 Claude Code 直接使用本地模型。
本篇文章會完整介紹：
Claude Code 是什麼
如何讓 Claude Code 使用 Local LLM
Ollama 與 LM Studio 差異
三種實作方式
Web Search 功能啟用
常用 CLI 指令
適合的模型推薦
什麼是 Claude Code？
Claude 官方網站 的 Claude Code 是 Anthropic 推出的 AI Coding Agent。
它並不是單純聊天工具，而是：
能讀取整個專案
可修改程式碼
可執行 Terminal 指令
可自動修 Bug
可跨多檔案操作
支援 Agent Workflow
官方描述 Claude Code 是一個：
AI-powered coding assistant that helps you build features, fix bugs, and automate development tasks.
為什麼大家開始用 Local LLM？
Local LLM 的優勢非常明顯：
功能 雲端模型 Local LLM 隱私 程式碼送雲端 完全本地 費用 API Token 收費 幾乎免費 離線 不可 可 速度 看網路 本機 GPU 自訂模型 有限制 完全自由
尤其現在 Ollama 已支援 Anthropic Messages API，相容 Claude Code。
方法一：Claude + VSCode + Ollama / LM Studio
這是目前最多人使用的方法。
架構圖
Claude Code ↓VSCode Extension ↓Ollama / LM Studio ↓Local LLM 安裝流程
Step 1：安裝 Claude Code
官方下載：
Claude Download 官方下載頁面
Linux / macOS：
curl -fsSL https://claude.ai/install.sh | bash Step 2：安裝 Ollama
官方網站：
Ollama 官方網站
Linux：
curl -fsSL https://ollama.com/install.sh | sh Step 3：下載模型
推薦模型：
或：
ollama pull deepseek-coder-v2 Step 4：啟動模型
LM Studio 使用方式
如果你不喜歡 CLI，可以使用 LM Studio。
LM Studio 官方網站
LM Studio 特點：
GUI 操作
支援 OpenAI API
支援本地 Server
支援 GPU Offload
Windows 體驗很好
有些使用者甚至認為 LM Studio 在 Windows + iGPU 上比 Ollama 更方便。
Claude Code 連接 Ollama
設定環境變數：
export ANTHROPIC_BASE_URL=http://localhost:11434
export ANTHROPIC_AUTH_TOKEN=your_token
export CLAUDE_CODE_EFFORT_LEVEL=low 執行：
Claude Code 即會透過 Ollama 使用本地模型。
方法二：使用 ollama launch claude
這是 Ollama 官方提供的整合方式。
官方文件：
Ollama Claude Code Integration 文件
安裝方式
更新 Ollama：
執行：
這會：
自動設定 Claude Code
自動串接 Anthropic-compatible API
使用本地模型
官方支援模型
目前官方文件中提到可搭配：
等模型。
方法三：使用 free-claude-code Gateway
GitHub：
free-claude-code GitHub 專案
這個專案本質上是一個：
Claude Code Gateway Proxy 它能：
將 Claude Code API 轉向 Local LLM
模擬 Anthropic API
轉接 Ollama / OpenAI API
避免官方限制
適合使用情境
非常適合：
本地 AI 開發環境
多模型切換
企業內網
私有化部署
AI Coding Lab
啟動方式
通常為：
git clone https://github.com/Alishahryar1/free-claude-codecd free-claude-codenpm installnpm start 再讓 Claude Code 指向 Gateway。
啟用 Ollama Web Search 功能
Ollama 現在已支援 Web Search。
官方文件：
Ollama Web Search 文件
Web Search 功能用途
可以讓 Local LLM：
搜尋最新資訊
查 Stack Overflow
查 GitHub
查文件
即時查詢
這對 Claude Code 非常重要。
因為 Coding Agent 若沒有 Web Search：
容易使用舊知識
不知道最新版套件
不知道最新 API
啟用方式
通常：
或：
export OLLAMA_WEB_SEARCH=true 依照官方文件設定即可。
推薦 Local LLM 模型
程式開發最佳選擇
模型 推薦度 特點 Qwen3-Coder ★★★★★ Coding 能力極強 DeepSeek Coder V2 ★★★★★ 開源熱門 GLM-5 ★★★★☆ 中文能力佳 Kimi K2.5 ★★★★☆ 長上下文 Gemma 3 ★★★☆☆ 輕量快速
Claude Code 常用指令
啟動 Claude Code
指定 API
ANTHROPIC_BASE_URL=http://localhost:11434 claude 指定模型
ANTHROPIC_MODEL=qwen3-coder claude 查看 Ollama 模型
啟動 Ollama Server
Ollama vs LM Studio 比較
功能 Ollama LM Studio CLI 強 普通 GUI 基本 非常完整 Windows 普通 非常好 API 強 強 Docker 強 普通 GPU 管理 CLI GUI 新手友善 中等 高
Claude Code + Local LLM 的實際優勢
1. 幾乎零成本
不再需要：
Anthropic API
OpenAI API
Token 費用
2. 完全私有化
原始碼不離開本機。
非常適合：
3. 多模型自由切換
你可以：
今天用 Qwen
明天用 DeepSeek
後天用 Kimi
不受平台限制。
我的實際建議
如果你是：
新手
建議：
因為 GUI 最簡單。
Linux / DevOps / AI 工程師
建議：
CLI 整合能力非常強。
企業環境
建議：
free-claude-code Gateway + Ollama 可做到：
API Gateway
多模型管理
權限控管
私有化部署
結論
Claude Code 正在快速成為下一代 AI Coding Agent。
而現在最重要的變化是：
Claude Code 已經不再只能綁定官方 Claude API。
透過：
Ollama
LM Studio
free-claude-code
Anthropic-compatible API
你已經可以：
完全本地化
零 API 成本
自由切換模型
保護原始碼隱私
對於 AI 開發者與工程團隊來說，這將是非常重要的開發趨勢。
下載資源
官方網站
參考資料
by Rain Chu 5 月 25, 2026 | AI , claude , 模型
Claude Code 已經不只是「在終端機裡幫你寫程式的 AI」。根據 Anthropic 官方說明，Claude Code 是一個能理解整個程式碼庫、編輯檔案、執行命令，並協助開發者完成修 Bug、加功能、自動化開發任務的 agentic coding assistant。
而近期 AI 開發社群開始討論一個更進階的概念：Claude Code Workflow
它的核心不是「再寫一段更長的 Prompt」，而是把一整套開發流程變成可以重複執行、可以追蹤、可以驗證、可以復跑的工作流。換句話說，Workflow 讓 AI 編程從「模型臨場建議」進一步走向「工程化編排」。
這對開發者、技術主管、架構師與 AI Agent 使用者來說，是非常重要的一步。
什麼是 Claude Code Workflow？
Claude Code Workflow 可以理解成一種「把 AI Agent 工作流程寫成程式」的方式。
過去我們使用 Claude Code，通常是這樣：
請幫我分析這個 GitHub 專案，找出架構問題，並提出改善建議。
這種方式雖然方便，但有幾個問題：
第一，每次執行結果可能不完全一致。
Workflow 的價值就在這裡：它把流程變成代碼，而不是只靠 Prompt。
一個 Workflow 通常會包含三個核心部分：
export default { meta: { name: "workflow-name", description: "說明這個 workflow 要做什麼" }, async run() { const result = await agent("請執行某個任務"); return result; }} 概念上，一個 Workflow 至少會有：
meta：定義名稱與描述agent()：至少呼叫一個 Agent 執行任務return：把結構化結果傳回主流程
這代表 Workflow 不只是「提示詞模板」，而是一個可以持久化、版本化、重複執行的 AI 編排腳本。
為什麼 Workflow 很重要？
Claude Code 官方文件目前已經提供許多常見工作流程，例如探索程式碼、修 Bug、重構、測試、處理 PR、撰寫文件、平行 Session、Plan Mode，以及把 Claude 接進腳本與 CI 批次處理。
但 Workflow 的想像更進一步：它不是只告訴 Claude「請照這些步驟做」，而是把這些步驟寫成可執行邏輯。
這會帶來幾個關鍵改變：
1. 可重複使用
同一個 PR Review Workflow，可以套用到不同 GitHub Repository。
同一個 Deep Research Workflow，可以套用到不同技術主題。
同一個架構評審 Workflow，可以套用到不同系統設計案。
2. 可追蹤
Workflow 可以明確知道：
哪個 Agent 負責分析安全性？
這比單純 Prompt 更接近真正的軟體工程流程。
3. 可驗證
Workflow 可以設計成多階段驗證。
例如：
第一個 Agent 產生答案。
這種方式可以降低 AI 幻覺，特別適合程式碼審查、資安報告、技術研究與商業決策文件。
4. 可復跑
如果 Workflow 是 JS 腳本，它就能像程式碼一樣被 Git 管理。
你可以：
保存版本
這代表 AI Agent 的使用方式，正在從「聊天」變成「工程系統」。
如何開啟 Claude Code Workflow 實驗功能？
以下指令來自社群實測內容，目前不屬於 Anthropic 官方正式文件中明確宣告的穩定功能。因此建議把它視為「實驗性功能」，不要直接用在正式 Production 流程。
macOS / Linux
export CLAUDE_CODE_WORKFLOWS=1 接著啟動 Claude Code CLI：
Windows
SET CLAUDE_CODE_WORKFLOWS=1 接著啟動：
啟動多 Agent Workflow 的範例 Prompt
ultrawork 請為 GitHub 專案 XXX 啟動 multi agent workflow，分析程式碼品質、安全性、架構、測試覆蓋率與可維護性，最後輸出一份結構化 Review 報告。 查看 Workflow
產生或管理 Subagents
Workflow、Subagents、Skills、Agent Teams 有什麼不同？
這是最容易混淆的地方。
Claude Code 官方文件已經明確說明 Subagents、Skills、Agent Teams 的用途。Subagents 是專門處理特定任務的 AI 助手，每個 subagent 有自己的 context window、自訂系統提示、工具權限與獨立權限，適合把支線任務從主對話中分離出去。
Skills 則是透過 SKILL.md 擴充 Claude 的能力，適合把常用指令、檢查清單、多步驟程序變成可重複呼叫的技能。官方文件也提到 Skills 可以在需要時被載入，避免長篇指令一直佔用主要上下文。
Agent Teams 則是多個 Claude Code Session 的協作模式，由一個 lead session 協調工作，其他 teammate 各自在獨立 context window 中工作，並且可以彼此溝通。官方文件也明確指出，Agent Teams 與 Subagents 的差異在於：Subagents 主要回報給主 Agent，而 Agent Teams 的成員可以彼此直接溝通。
下面用簡單方式比較：
類型 核心概念 適合用途 本質 Prompt 臨時指令 單次任務、快速問答 自然語言 Skills 可重複使用的能力包 常用檢查清單、格式化、特定任務 SOP SKILL.md 指令與資源Subagents 專門任務助手 安全審查、測試分析、文件整理 獨立上下文的 AI 助手 Agent Teams 多個 Claude Code Session 協作 大型專案、多模組開發、跨層協作 多 Session 團隊 Workflow 用程式碼編排 Agent 流程 PR Review、研究、驗證、評審、循環改進 腳本化流程
最重要的差異是：
Skills 是讓 Claude 學會一種能力；Subagents 是讓 Claude 派出專門助手；Workflow 則是把整個流程寫成代碼。
Workflow 與 Subagents 的差異
Subagents 比較像「專業分工」。
例如：
一個 security-reviewer subagent 專門看資安問題。
但 Workflow 是「流程編排」。
它可以決定：
先讓 Agent A 分析架構。
所以可以這樣理解：
Subagents 是工作者，Workflow 是工頭加流程圖。
Workflow 與 Skills 的差異
Skills 比較像「可重複使用的操作說明」。
例如：
/code-review/debug/loop/verify
Claude Code 官方文件也提到，Skills 可以透過 SKILL.md 建立，並在相關情境自動載入或手動呼叫。
但 Workflow 更像「可執行的流程腳本」。
Skills 通常重點在「教 Claude 怎麼做」。
所以差異可以簡化成：
Skills 是能力；Workflow 是編排。
Claude Code Workflow 支援的 6 種常見型態
以下是目前最值得關注的 6 種 Workflow 型態。
Claude Code Workflow 6 types 1. Pipeline 流水線
Pipeline 是最基本的工作流型態。
它的概念是把任務拆成多個階段，前一階段的輸出會成為下一階段的輸入。
例如：
讀取需求 → 分析程式碼 → 修改程式 → 產生測試 → 執行測試 → 輸出報告 適合用在：
新功能開發
範例：
請建立一個 pipeline workflow：1. 分析目前 Repository 架構2. 找出最可能影響效能的模組3. 產生優化建議4. 修改程式碼5. 補上測試6. 回傳修改摘要 2. Parallel + Barrier 同步聚合
這種模式會同時啟動多個 Agent，等所有 Agent 都完成後，再進入下一階段。
它很適合用在需要多角度分析的任務。
例如 PR Review：
Agent A：檢查安全性Agent B：檢查效能Agent C：檢查可讀性Agent D：檢查測試覆蓋率Agent E：檢查架構風險Barrier：等待所有結果完成Aggregator：去重複、交叉驗證、輸出總結 適合用在：
PR 深度 Review
這種模式的重點是「同步聚合」。它不是誰先完成就直接輸出，而是等所有結果回來後再統整。
3. Adversarial Verify 對抗驗證
Adversarial Verify 是用來降低 AI 幻覺的重要模式。
做法是讓一個 Agent 產生答案，另一個 Agent 扮演反方、審查者或攻擊者，專門找錯。
例如：
Agent A：提出架構改善建議Agent B：找出 Agent A 的錯誤、過度假設與風險Agent C：根據 A 與 B 的結果，輸出可信版本 適合用在：
程式碼審查
這種模式的價值在於：不要只相信第一個 AI 回答，而是讓另一個 AI 專門挑戰它。
4. Judge Panel 評審制度
Judge Panel 很適合用在「沒有唯一正確答案」的任務。
例如：
產品命名
你可以設計多個評審：
Judge A：從工程可維護性評分Judge B：從使用者體驗評分Judge C：從 SEO 角度評分Judge D：從商業轉換率評分Judge E：從品牌一致性評分 最後由總評審輸出：
最佳方案
這比單一 Agent 給建議更穩定，也更適合團隊決策。
5. Loop until X 累積式收斂
Loop until X 的概念是：不斷循環改善，直到達到某個條件。
例如：
產生方案 → 評分 → 修改 → 再評分 → 達到 90 分或預算用完 → 輸出 適合用在：
文案優化
這種模式的重點是「預算控制」。
例如你可以設定：
最多跑 5 輪
這讓 AI 工作流不會無限制消耗 token 或時間。
6. Nested Workflow 分層正交
Nested Workflow 是最高階的用法。
它允許一個大 Workflow 裡面再呼叫小 Workflow。
例如：
主 Workflow：完整 SaaS 專案審查子 Workflow A：前端架構審查子 Workflow B：後端 API 審查子 Workflow C：資料庫審查子 Workflow D：資安審查子 Workflow E：DevOps 審查子 Workflow F：成本與可擴展性審查 這種方式非常適合大型專案。
因為大型任務如果全部塞進一個 Prompt，很容易失控。Nested Workflow 則可以把任務切成多個正交模組，每個模組有自己的輸入、輸出與驗證方式。
Claude Code Workflow 的常見使用場景
場景 1：GitHub PR 深度 Review
這是最典型的 Workflow 應用。
你可以讓 Workflow 自動：
分析 PR diff
範例 Prompt：
ultrawork 請針對 GitHub PR XXX 啟動 multi agent workflow，分別從安全性、效能、可維護性、測試覆蓋率與架構一致性進行審查，最後輸出一份可以貼到 PR 的 Review 報告。 場景 2：Deep Research 技術調研
Workflow 非常適合做技術研究。
例如你要研究：
LangGraph vs CrewAI vs Claude Agent SDK
Workflow 可以讓不同 Agent 分別研究：
官方文件
最後再由彙整 Agent 輸出結論。
場景 3：Harness Engineering 技術調研
如果你正在做企業級 AI Agent 平台，Workflow 可以變成一種 Harness Engineering 工具。
它可以負責：
建立研究任務
這讓技術調研不只是「問 AI 一個問題」，而是變成一套可重複執行的工程流程。
場景 4：大型重構前的風險評估
在修改大型系統前，可以先跑一個重構評估 Workflow。
例如：
請建立一個 workflow，分析目前專案是否適合把 monolith 拆成 service，請從資料庫耦合、API 邊界、部署複雜度、測試風險與團隊維護成本評估。 Workflow 可以輸出：
可重構區塊
場景 5：SEO 文章自動產製與審查
Workflow 不只適合寫程式，也可以用在內容產製。
例如：
Agent A：產生 SEO 大綱Agent B：研究搜尋意圖Agent C：撰寫文章Agent D：檢查繁體中文語氣Agent E：產生 meta descriptionAgent F：評估是否符合 E-E-A-T 最後輸出：
WordPress 文章
場景 6：AI 產品功能規格書產生
你可以把 Workflow 用在產品開發初期。
例如：
輸入一個產品想法，Workflow 自動產生：1. PRD2. User Stories3. API 規格4. Database Schema5. 前端頁面列表6. 測試案例7. 開發任務切分 這對 AI SaaS、內部系統、WordPress 外掛、企業工具都很實用。
場景 7：安全性與合規檢查
Workflow 可以設計成安全審查管線。
例如：
Agent A：檢查硬編碼密碼Agent B：檢查 SQL InjectionAgent C：檢查 XSSAgent D：檢查權限控管Agent E：檢查 Docker / CI/CD 設定Agent F：產生修補建議 適合用在：
上線前檢查
場景 8：創意應用：AI 製作人工作流
如果你正在做 AI 音樂、AI 內容或 AI 製作人系統，Workflow 也可以派上用場。
例如一首歌的產製流程可以變成：
Agent A：分析歌曲主題Agent B：產生歌詞方向Agent C：設計 Suno PromptAgent D：檢查曲風一致性Agent E：產生封面圖 PromptAgent F：產生社群貼文Judge Panel：從商業性、情緒、記憶點、品牌一致性評分 這種方式可以把創意流程產品化，不再只是單次生成。
Workflow 的核心價值：把 AI 協作變成工程資產
Claude Code Workflow 真正重要的地方，不是它多了一個指令，也不是它可以叫很多 Agent。
真正的重點是：
Workflow 讓 AI 協作流程本身變成可以保存、維護、優化與版本控制的工程資產。
這跟過去的 Prompt Engineering 很不一樣。
Prompt Engineering 重點是「如何問得更好」。
未來團隊很可能會出現這些檔案：
.github/workflows/ai-pr-review.js.claude/workflows/security-audit.js.claude/workflows/deep-research.js.claude/workflows/refactor-planner.js.claude/workflows/seo-content-pipeline.js 這些 Workflow 會像今天的 CI/CD、Lint、Test、Build Script 一樣，成為開發流程的一部分。
實務導入建議
如果你想開始使用 Claude Code Workflow，可以先從低風險場景開始。
建議順序如下：
第一階段：研究與報告
先用 Workflow 做：
技術調研
這類任務即使輸出有誤，也比較容易人工修正。
第二階段：Review 與驗證
接著導入：
PR Review
這時候建議搭配 Adversarial Verify，讓另一個 Agent 專門挑錯。
第三階段：半自動修改程式碼
最後再導入：
自動修 Bug
但這個階段一定要搭配 Git、測試、人工 Review 與權限控管。
使用 Claude Code Workflow 要注意什麼？
1. 目前仍應視為實驗功能
你提供的 CLAUDE_CODE_WORKFLOWS=1、ultrawork、/workflows 等內容，目前我沒有在 Anthropic 官方穩定文件中確認到完整正式公告。
因此建議文章中不要把它寫成「官方正式發布」，而是描述為：
「影片與社群實測發現的實驗性功能」
2. 不要讓 Workflow 直接碰 Production
Workflow 可以很強，但也代表風險更高。
建議：
只在 Git branch 執行
3. 結構化輸出很重要
Workflow 最好不要只輸出一段文章。
建議輸出：
{ "summary": "", "findings": [], "risks": [], "recommendations": [], "files_changed": [], "tests": [], "confidence": 0.87} 這樣才能被其他工具、CI/CD、Dashboard 或自動化系統接續使用。
4. 成本與 Token 要控管
多 Agent 工作流很容易消耗大量 Token。
尤其是：
Parallel + Barrier
這些模式都可能比單一 Claude Code Session 更昂貴。
所以一定要設定：
最大輪數
Claude Code 下載與官方資源
Claude 官方下載頁目前提供 macOS、Windows、Windows ARM64、iOS、Android，以及 Claude Code 的 Terminal、VS Code、JetBrains、Slack 等環境入口。官方頁面也顯示 Linux 桌面版目前不可用，但 Claude Code Terminal 可透過官方入口安裝。
Claude Code 官方文件也提供 Common workflows、Skills、Subagents、Agent Teams 等開發者文件，可作為學習 Claude Code 工作模式的基礎。
Workflow 是 Claude Code 繼 MCP、Skills、Subagents 之後的重要演進
Claude Code Workflow 的概念，代表 AI 編程正在進入下一個階段。
第一階段是聊天式 AI：你問，它答。
如果說 Prompt 是個人技巧，Workflow 就是團隊工程資產。
未來 GitHub 上很可能會出現大量開源 Claude Code Workflow，例如：
PR Review Workflow
對開發者來說，這不只是多一個 Claude Code 小技巧，而是 AI Agent 工程化的重要方向。
Claude Code Workflow 的關鍵價值可以濃縮成一句話：
把 AI 編程從「一次性的對話」升級成「可重複、可追蹤、可驗證、可復跑的工程流程」。
這也是 AI 編程真正走向團隊化、標準化與產品化的開始。
近期留言