Select Page

用 Impeccable 改善 AI 網站設計:告別模板感與 AI 味

當我們開始用 AI 寫網站、做 Landing Page、產生前端介面時,常常會遇到一個問題

畫面看起來很快就完成了,但總覺得「哪裡怪怪的」。

按鈕很像、卡片很多、漸層很浮誇、字級沒有層次、留白不夠精準,甚至每個 AI 產生的網站都像是同一套模板改出來的。這種「可以用,但不高級」的設計感,就是許多 AI 前端作品容易落入的平庸陷阱。

Impeccable 官方網站 想解決的,正是這個問題。

什麼是 Impeccable?

Impeccable 是一套專為 AI Coding Agent 設計的前端設計輔助工具,它不是單純幫你產生漂亮畫面的 AI 設計工具,而是提供一套「設計語彙」與「設計指令」,讓你可以更精準地指揮 AI 改善網站畫面。

簡單說,Impeccable 讓 AI 不只是會寫程式,也更懂設計。

它可以協助 AI 理解網站中的層級、對比、留白、色彩、字體、動畫、產品脈絡與品牌調性,讓 AI 產生的前端畫面不再只是堆滿卡片、套上漸層、加一點陰影,而是更接近真正設計師會思考的介面。

你可以把 Impeccable 想像成:

一套給 AI 前端工程師使用的設計總監指令集。

為什麼 AI 做出來的網站常常很平庸?

現在很多人會用 AI 幫忙做網站,例如請 Claude Code、Cursor、Codex CLI 或 Gemini CLI 產生頁面。AI 很擅長快速完成版型,但如果沒有足夠清楚的設計方向,它很容易產生幾種常見問題:

  1. 每個區塊都用卡片包起來,看起來很模板化
  2. 喜歡使用過度常見的紫色漸層、玻璃擬態、發光陰影
  3. 字體大小與層級不夠精準,主標、副標、內文沒有明確節奏
  4. 留白太平均,缺乏視覺重點
  5. 按鈕、表單、導覽列看起來功能正確,但沒有品牌感
  6. Landing Page 和後台 Dashboard 使用同一種設計邏輯
  7. 作品看起來像 AI 產物,而不是成熟產品

Impeccable 的價值就在於,它不是只叫 AI「設計得漂亮一點」,而是提供更具體的設計方向,例如讓畫面更有層次、更安靜、更大膽、更精煉、更符合產品情境。

Impeccable 的核心特色

1. 提供 AI 可理解的設計語言

Impeccable 的官方介紹中提到,它補上了 AI Agent 缺少的設計語彙,這代表你可以用更接近設計師的方式指揮 AI,例如改善排版、調整顏色、強化視覺層次、降低過度設計、整理產品脈絡。

這對不熟設計術語的人很有幫助,因為你不需要長篇大論解釋「我要更高級、更有質感、更像品牌網站」,而是可以透過 Impeccable 的指令,把設計意圖轉成 AI 比較能執行的動作。

2. 支援多種 AI Coding 工具

Impeccable 可以搭配多種主流 AI Coding 工具使用,例如 Cursor、Claude Code、GitHub Copilot、Gemini CLI、Codex CLI 等。

這代表它不是只服務單一平台,而是比較像一套可以帶進不同開發流程的設計輔助層。對於已經習慣用 AI 寫前端的開發者來說,Impeccable 可以直接加入現有工作流程,不需要重新學一套完整設計軟體。

3. 透過指令改善網站設計

Impeccable 提供多個設計指令,讓你可以針對不同設計任務下達命令。例如:

/impeccable init
用來初始化專案,建立產品脈絡與設計方向。

/impeccable shape
在寫程式前先規劃 UX / UI,避免一開始就產生雜亂版型。

/impeccable critique
針對畫面的層級、清楚度、情緒感與設計品質做評論。

/impeccable audit
檢查技術品質,例如可及性、效能與響應式設計。

/impeccable polish
進行最後修飾,讓畫面更接近可上線品質。

/impeccable bolder
讓太保守、太無聊的畫面更有張力。

/impeccable quieter
讓太吵、太過度設計的畫面更穩重。

/impeccable distill
把畫面精煉到最核心的內容與視覺重點。

這些指令的好處是,你可以更像在跟設計師溝通,而不是一直對 AI 說:「再漂亮一點」、「再高級一點」、「不要這麼普通」。

4. 幫你減少 AI 生成網站的套路感

很多 AI 產生的網站會有明顯套路,例如紫色漸層、大量圓角卡片、發光邊框、過度一致的版面節奏。Impeccable 內建反套路的設計檢查,可以幫助你找出這些容易讓網站看起來廉價、模板化或過度 AI 感的元素。

這對品牌網站、形象頁、SaaS Landing Page、產品頁、作品集網站尤其重要。因為這些頁面的重點不只是功能完成,而是要讓使用者在第一眼感覺到專業、信任與差異化。

5. 保留你的設計系統,不是硬套新風格

Impeccable 的另一個優點是,它不是粗暴地把你的網站改成另一種風格,而是會盡量尊重既有的設計系統,例如顏色、字體、元件、間距、按鈕樣式與品牌規則。

這對已經有產品雛形或既有網站的人很重要。你不一定想要整個重做,而是希望 AI 幫你把現有介面整理得更成熟、更一致、更像一個真正的產品。

Impeccable 適合誰使用?

Impeccable 特別適合以下幾種人:

1. 用 AI 寫前端的開發者

如果你常用 Cursor、Claude Code、Codex CLI、GitHub Copilot 來產生 React、Next.js、Astro、Tailwind CSS 或其他前端頁面,Impeccable 可以幫你補上 AI 在設計判斷上的不足。

2. 想快速做出高質感 Landing Page 的創業者

很多創業者會用 AI 快速做 MVP,但 Landing Page 如果太普通,會影響使用者信任感,Impeccable 可以幫助你把「能用的頁面」推進到「比較有品牌感的頁面」。

3. 會寫程式但不擅長設計的人

你可能知道功能怎麼做,但不知道為什麼畫面不夠好看。Impeccable 可以用指令化的方式協助你檢查排版、層級、色彩與互動細節。

4. 想降低 AI 生成感的網站製作者

如果你的網站看起來太像 AI 產物,Impeccable 可以幫你找出常見的 AI 設計套路,讓畫面更有辨識度。

如何安裝 Impeccable?

你可以到 GitHub 下載與查看 Impeccable 專案:

Impeccable GitHub 下載頁

官方建議可以在專案根目錄執行:

npx impeccable skills install

接著在你的 AI Coding 工具中執行:

/impeccable init

如果之後要更新,可以執行:

npx impeccable skills update

官方網站也提供更多說明與範例:

Impeccable 官方網站

使用 Impeccable 的工作流程建議

如果你正在做一個網站或前端產品,可以用以下流程開始:

第一步,先用 AI 產生基本頁面結構。
例如首頁、產品介紹、價格表、登入頁、後台儀表板。

第二步,執行 /impeccable init
讓 Impeccable 了解你的產品定位、使用者、品牌語氣與設計方向。

第三步,用 /impeccable shape 先整理畫面架構。
這一步可以避免一開始就把版面做得太滿、太亂。

第四步,用 /impeccable critique 檢查設計問題。
讓 AI 幫你指出畫面層級、訊息清楚度與互動細節的問題。

第五步,用 /impeccable polish 做上線前修飾。
這一步可以讓網站更一致、更乾淨,也更接近可交付品質。

第六步,必要時使用 /impeccable audit
檢查響應式、可及性、效能與技術層面的品質。

對 WordPress 網站製作者有什麼幫助?

雖然 Impeccable 本身比較偏向 AI Coding Agent 與前端開發流程,但對 WordPress 網站製作者也很有參考價值。

如果你使用 WordPress 搭配自訂佈景主題、區塊編輯器、Elementor、Bricks、Breakdance 或自製前端元件,你可以先在本機或開發環境中,用 AI 建立前端區塊,再透過 Impeccable 改善設計品質。

例如:

  • 首頁 Hero 區塊不夠有記憶點
  • 服務介紹區塊太像模板
  • 價格表太普通
  • Call to Action 不夠明確
  • 部落格列表頁缺乏層次
  • 後台管理介面太陽春
  • 品牌網站缺乏高級感

這些都可以透過 Impeccable 的設計指令進行調整,再整合回 WordPress 佈景主題或頁面模板中。

結論:Impeccable 讓 AI 網站設計從「能用」走向「有質感」

AI 讓網站製作變快,但速度不代表品質。真正影響使用者感受的,往往是那些細節:字體層級、留白、對比、色彩、互動節奏、品牌一致性,以及畫面是否有明確的設計意圖。

Impeccable 的重點不是取代設計師,而是讓 AI 更容易理解設計師的語言,也讓開發者可以用更精準的方式指揮 AI 做出不平庸的網站。

如果你正在用 AI 製作網站,卻覺得畫面總是差一點質感,那麼 Impeccable 很值得加入你的前端工作流程。

官方網站:
https://impeccable.style/

GitHub 下載:
https://github.com/pbakaus/impeccable

HeyGen HyperFrames 介紹:用 HTML 寫影片,讓 AI Agent 自動剪輯

HyperFrames 是 HeyGen 推出的開源影片製作框架,核心概念是把影片當成網頁來寫,再渲染成 MP4 影片

HyperFrames 改成用 HTML、CSS、JavaScript 來描述畫面與動畫。也就是說,標題、圖片、影片片段、字幕、轉場、背景音樂,都可以像寫網頁一樣被組合起來,再由系統渲染成正式影片。

它最大的特色,是專門為 AI coding agent 設計。使用者可以搭配 Claude Code、Cursor、Gemini CLI、Codex 等工具,只要用自然語言描述想要的影片,例如:「做一支 10 秒產品介紹影片,加入淡入標題、背景影片和音樂」,AI 就可以產生對應的 HyperFrames 專案、HTML 結構、動畫設定,並協助預覽與輸出。

HyperFrames 適合的應用包括產品介紹影片、社群短影音、簡報轉影片、PDF 轉說明影片、CSV 資料動畫、圖表競賽影片、字幕動畫、網站展示影片,以及自動化內容生產流程,對於想要建立大量短影音模板、AI 行銷內容流程,或把影片製作變成可重複執行 pipeline 的團隊來說,這是一個很值得關注的工具。

簡單來說,HyperFrames 不是一般的無程式碼剪輯工具,而是「影片即程式碼」的製作方式。它讓影片可以被版本控制、被 AI 修改、被自動化產生,也更容易整合到內容生產系統中。

安裝

安裝方式也很直接,要搭配 AI agent,可以使用:

npx skills add heygen-com/hyperframes

如果要手動建立影片專案,可以使用:

npx hyperframes init my-video
cd my-video
npx hyperframes preview
npx hyperframes render

參考資訊

Ollama 遠端連線教學:Windows PowerShell 連接 AI Server 完整指南

想把 Ollama Client 安裝在 Windows 筆電上,但模型實際運行在另一台 AI 伺服器(例如 NVIDIA Spark、Linux GPU 主機)嗎?

本文教你如何透過 PowerShell 指定遠端 Ollama Server,讓本機直接使用遠端模型資源。


Ollama 遠端架構說明

一般情況下,Ollama 預設會連接本機:

localhost:11434

但如果你的 AI 模型部署在另一台主機,例如:

192.168.0.1

則可以透過環境變數指定遠端伺服器。

Step 1:設定遠端 Ollama Host

開啟 PowerShell:

$Env:OLLAMA_HOST = "192.168.0.1:11434"

若使用 HTTP 格式也可以:

$Env:OLLAMA_HOST = "http://192.168.0.1:11434"

建議使用第二種寫法較完整。


Step 2:確認連線是否成功

執行:

ollama list

若成功,將會看到遠端伺服器上的模型清單:

NAME                 ID              SIZEclaude               xxxxxx          45 GBkimi-k2.5:cloud      xxxxxx          22 GBqwen3:32b            xxxxxx          20 GBdeepseek-r1:70b      xxxxxx          42 GB

若出現:

Error: connection refused

請確認:

  • 遠端 Ollama 是否啟動
  • 防火牆是否開放 11434 Port
  • Ollama 是否監聽 0.0.0.0

Linux 可檢查:

sudo ss -tlnp | grep 11434

正常應看到:

0.0.0.0:11434

Step 3:啟動 Claude

確認模型存在後:

ollama launch claude

系統將直接透過遠端 Ollama 執行 Claude。


Step 4:指定模型版本

例如使用 Kimi K2.5 Cloud 版本:

ollama launch claude --model kimi-k2.5:cloud

也可以切換成其他模型:

ollama launch claude --model qwen3:32b
ollama launch claude --model deepseek-r1:70b
ollama launch claude --model gemma3:27b

每次開機自動設定 OLLAMA_HOST

如果不想每次都輸入:

$Env:OLLAMA_HOST = "192.168.0.240:11434"

可永久寫入 Windows 使用者環境變數:

[System.Environment]::SetEnvironmentVariable(    "OLLAMA_HOST",    "http://192.168.0.240:11434",    "User")

重新開啟 PowerShell 後生效。

驗證:

echo $Env:OLLAMA_HOST

輸出:

http://192.168.0.240:11434

常見問題排除

無法連線

測試:

curl http://192.168.0.240:11434/api/tags

若有回傳 JSON 表示正常。


Linux Server 未開放外部連線

編輯 Ollama Service:

sudo systemctl edit ollama

加入:

[Service]Environment="OLLAMA_HOST=0.0.0.0:11434"

重新載入:

sudo systemctl daemon-reloadsudo systemctl restart ollama

查看目前設定

Windows:

echo $Env:OLLAMA_HOST

Linux:

echo $OLLAMA_HOST

透過設定 OLLAMA_HOST,即可讓 Windows 電腦上的 Ollama Client 直接連接遠端 AI 伺服器,將模型運算交由高效能 GPU 主機處理,而本機僅作為操作介面。

這種架構特別適合:

  • NVIDIA Spark AI 工作站
  • 家用 GPU 伺服器
  • 多人共用 Ollama Server
  • 企業內部 AI 平台
  • AI 開發與測試環境

只需一行指令:

$Env:OLLAMA_HOST = "192.168.0.240:11434"

即可讓你的 Windows PC 立即接管遠端 Ollama 的所有模型能力。

使用 Claude Code 搭配 LM Studio 與 Ollama:打造零 API 成本 AI 開發環境

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 qwen3-coder

或:

ollama pull deepseek-coder-v2

Step 4:啟動模型

ollama run qwen3-coder

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

Claude Code 即會透過 Ollama 使用本地模型。


方法二:使用 ollama launch claude

這是 Ollama 官方提供的整合方式。

官方文件:

Ollama Claude Code Integration 文件


安裝方式

更新 Ollama:

ollama update

執行:

ollama launch claude

這會:

  • 自動設定 Claude Code
  • 自動串接 Anthropic-compatible API
  • 使用本地模型

官方支援模型

目前官方文件中提到可搭配:

  • qwen3.5
  • glm-5
  • kimi-k2.5

等模型。


方法三:使用 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

啟用方式

通常:

OLLAMA_WEB_SEARCH=true

或:

export OLLAMA_WEB_SEARCH=true

依照官方文件設定即可。


推薦 Local LLM 模型

程式開發最佳選擇

模型推薦度特點
Qwen3-Coder★★★★★Coding 能力極強
DeepSeek Coder V2★★★★★開源熱門
GLM-5★★★★☆中文能力佳
Kimi K2.5★★★★☆長上下文
Gemma 3★★★☆☆輕量快速

Claude Code 常用指令

啟動 Claude Code

claude

指定 API

ANTHROPIC_BASE_URL=http://localhost:11434 claude

指定模型

ANTHROPIC_MODEL=qwen3-coder claude

查看 Ollama 模型

ollama list

啟動 Ollama Server

ollama serve

Ollama vs LM Studio 比較

功能OllamaLM Studio
CLI普通
GUI基本非常完整
Windows普通非常好
API
Docker普通
GPU 管理CLIGUI
新手友善中等

Claude Code + Local LLM 的實際優勢

1. 幾乎零成本

不再需要:

  • Anthropic API
  • OpenAI API
  • Token 費用

2. 完全私有化

原始碼不離開本機。

非常適合:

  • 企業
  • 資安環境
  • NDA 專案
  • 內網系統

3. 多模型自由切換

你可以:

  • 今天用 Qwen
  • 明天用 DeepSeek
  • 後天用 Kimi

不受平台限制。


我的實際建議

如果你是:

新手

建議:

LM Studio + Claude Code

因為 GUI 最簡單。


Linux / DevOps / AI 工程師

建議:

Ollama + Claude Code

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 開發者與工程團隊來說,這將是非常重要的開發趨勢。


下載資源

官方網站


參考資料

Claude Code Workflow 完整指南:ultrawork、多 Agent 協作與腳本化 AI 編程實戰

Claude Code Workflow 完整指南:ultrawork、多 Agent 協作與腳本化 AI 編程實戰

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 專案,找出架構問題,並提出改善建議。

這種方式雖然方便,但有幾個問題:

第一,每次執行結果可能不完全一致。
第二,很難知道每個 Agent 到底做了哪些步驟。
第三,不容易重複使用在下一個專案。
第四,流程本身大多存在 Prompt 裡,而不是程式碼裡。
第五,無法像 CI/CD 或測試腳本一樣被版本控制、審查與維護。

Workflow 的價值就在這裡:它把流程變成代碼,而不是只靠 Prompt。

一個 Workflow 通常會包含三個核心部分:

export default {  meta: {    name: "workflow-name",    description: "說明這個 workflow 要做什麼"  },  async run() {    const result = await agent("請執行某個任務");    return result;  }}

概念上,一個 Workflow 至少會有:

  1. meta:定義名稱與描述
  2. agent():至少呼叫一個 Agent 執行任務
  3. 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 負責分析安全性?
哪個 Agent 負責效能?
哪個 Agent 負責測試覆蓋率?
哪個 Agent 負責最終彙整?

這比單純 Prompt 更接近真正的軟體工程流程。


3. 可驗證

Workflow 可以設計成多階段驗證。

例如:

第一個 Agent 產生答案。
第二個 Agent 檢查是否有錯誤。
第三個 Agent 用反方角度挑戰結論。
最後由 Judge Agent 統整可信結果。

這種方式可以降低 AI 幻覺,特別適合程式碼審查、資安報告、技術研究與商業決策文件。


4. 可復跑

如果 Workflow 是 JS 腳本,它就能像程式碼一樣被 Git 管理。

你可以:

保存版本
比較差異
建立標準流程
在不同專案重跑
放進團隊內部工具鏈
整合 Codex CLI、Claude Code、CI/CD 或內部自動化平台

這代表 AI Agent 的使用方式,正在從「聊天」變成「工程系統」。


如何開啟 Claude Code Workflow 實驗功能?

以下指令來自社群實測內容,目前不屬於 Anthropic 官方正式文件中明確宣告的穩定功能。因此建議把它視為「實驗性功能」,不要直接用在正式 Production 流程。

macOS / Linux

export CLAUDE_CODE_WORKFLOWS=1

接著啟動 Claude Code CLI:

claude

Windows

SET CLAUDE_CODE_WORKFLOWS=1

接著啟動:

claude

啟動多 Agent Workflow 的範例 Prompt

ultrawork 請為 GitHub 專案 XXX 啟動 multi agent workflow,分析程式碼品質、安全性、架構、測試覆蓋率與可維護性,最後輸出一份結構化 Review 報告。

查看 Workflow

/workflows

產生或管理 Subagents

/agents

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可重複使用的能力包常用檢查清單、格式化、特定任務 SOPSKILL.md 指令與資源
Subagents專門任務助手安全審查、測試分析、文件整理獨立上下文的 AI 助手
Agent Teams多個 Claude Code Session 協作大型專案、多模組開發、跨層協作多 Session 團隊
Workflow用程式碼編排 Agent 流程PR Review、研究、驗證、評審、循環改進腳本化流程

最重要的差異是:

Skills 是讓 Claude 學會一種能力;Subagents 是讓 Claude 派出專門助手;Workflow 則是把整個流程寫成代碼。


Workflow 與 Subagents 的差異

Subagents 比較像「專業分工」。

例如:

一個 security-reviewer subagent 專門看資安問題。
一個 test-writer subagent 專門補測試。
一個 docs-writer subagent 專門寫文件。

但 Workflow 是「流程編排」。

它可以決定:

先讓 Agent A 分析架構。
同時讓 Agent B 分析安全性。
等 A、B、C 都完成後,由 Agent D 彙整。
再讓 Agent E 反向驗證。
最後輸出 JSON 結果。

所以可以這樣理解:

Subagents 是工作者,Workflow 是工頭加流程圖。


Workflow 與 Skills 的差異

Skills 比較像「可重複使用的操作說明」。

例如:

/code-review
/debug
/loop
/verify

Claude Code 官方文件也提到,Skills 可以透過 SKILL.md 建立,並在相關情境自動載入或手動呼叫。

但 Workflow 更像「可執行的流程腳本」。

Skills 通常重點在「教 Claude 怎麼做」。
Workflow 則重點在「用程式控制 Claude 何時做、誰來做、如何彙整、如何驗證、如何回傳結果」。

所以差異可以簡化成:

Skills 是能力;Workflow 是編排。
Skills 偏向 Prompt 與知識包;Workflow 偏向 JS 腳本與結構化輸出。
Skills 告訴 Claude 怎麼做;Workflow 規定整個流程怎麼跑。


Claude Code Workflow 支援的 6 種常見型態

以下是目前最值得關注的 6 種 Workflow 型態。

Claude Code Workflow 6 types

1. Pipeline 流水線

Pipeline 是最基本的工作流型態。

它的概念是把任務拆成多個階段,前一階段的輸出會成為下一階段的輸入。

例如:

讀取需求 → 分析程式碼 → 修改程式 → 產生測試 → 執行測試 → 輸出報告

適合用在:

新功能開發
Bug 修復
重構流程
文件產生
部署前檢查

範例:

請建立一個 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 很適合用在「沒有唯一正確答案」的任務。

例如:

產品命名
品牌文案
UI 設計
技術架構
資料庫 Schema
API 命名
Landing Page 文案

你可以設計多個評審:

Judge A:從工程可維護性評分Judge B:從使用者體驗評分Judge C:從 SEO 角度評分Judge D:從商業轉換率評分Judge E:從品牌一致性評分

最後由總評審輸出:

最佳方案
各方案優缺點
分數
風險
建議採用版本

這比單一 Agent 給建議更穩定,也更適合團隊決策。


5. Loop until X 累積式收斂

Loop until X 的概念是:不斷循環改善,直到達到某個條件。

例如:

產生方案 → 評分 → 修改 → 再評分 → 達到 90 分或預算用完 → 輸出

適合用在:

文案優化
測試覆蓋率提升
程式效能調校
SEO 文章改寫
Prompt 優化
UI 設計迭代

這種模式的重點是「預算控制」。

例如你可以設定:

最多跑 5 輪
最多花 20 分鐘
分數達 90 分就停止
測試全部通過就停止
沒有新增有效改善就停止

這讓 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
檢查安全漏洞
檢查效能問題
檢查命名與可讀性
檢查測試是否足夠
檢查是否破壞既有架構
輸出 Review Comment

範例 Prompt:

ultrawork 請針對 GitHub PR XXX 啟動 multi agent workflow,分別從安全性、效能、可維護性、測試覆蓋率與架構一致性進行審查,最後輸出一份可以貼到 PR 的 Review 報告。

場景 2:Deep Research 技術調研

Workflow 非常適合做技術研究。

例如你要研究:

LangGraph vs CrewAI vs Claude Agent SDK
GCP Cloud Run vs Kubernetes
PostgreSQL vs MySQL
Redis Queue vs Cloud Tasks
Claude Code vs Codex CLI

Workflow 可以讓不同 Agent 分別研究:

官方文件
GitHub Repo
社群案例
限制與成本
導入風險
實作難度

最後再由彙整 Agent 輸出結論。


場景 3:Harness Engineering 技術調研

如果你正在做企業級 AI Agent 平台,Workflow 可以變成一種 Harness Engineering 工具。

它可以負責:

建立研究任務
拆分技術問題
派出多個 Agent
收集結果
交叉驗證
產生決策文件
輸出 JSON 或 Markdown 報告

這讓技術調研不只是「問 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 文章
SEO 標題
Meta Description
標籤
FAQ
內部連結建議


場景 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:產生修補建議

適合用在:

上線前檢查
客戶交付前審查
政府標案資安文件
內部稽核
DevSecOps 流程


場景 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 重點是「如何問得更好」。
Workflow Engineering 重點是「如何把 AI 工作流程工程化」。

未來團隊很可能會出現這些檔案:

.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 做:

技術調研
文件整理
架構比較
PR 摘要
SEO 文章初稿

這類任務即使輸出有誤,也比較容易人工修正。


第二階段:Review 與驗證

接著導入:

PR Review
資安檢查
測試覆蓋率分析
架構風險評估
文件一致性檢查

這時候建議搭配 Adversarial Verify,讓另一個 Agent 專門挑錯。


第三階段:半自動修改程式碼

最後再導入:

自動修 Bug
自動補測試
自動重構
自動產生 API
自動修改文件

但這個階段一定要搭配 Git、測試、人工 Review 與權限控管。


使用 Claude Code Workflow 要注意什麼?

1. 目前仍應視為實驗功能

你提供的 CLAUDE_CODE_WORKFLOWS=1ultrawork/workflows 等內容,目前我沒有在 Anthropic 官方穩定文件中確認到完整正式公告。

因此建議文章中不要把它寫成「官方正式發布」,而是描述為:

「影片與社群實測發現的實驗性功能」
「可能尚未正式開放或仍在測試」
「實際可用性可能依 Claude Code 版本而異」


2. 不要讓 Workflow 直接碰 Production

Workflow 可以很強,但也代表風險更高。

建議:

只在 Git branch 執行
先跑 dry-run
要求輸出 diff
要求測試通過
不要自動部署
敏感操作需要人工確認


3. 結構化輸出很重要

Workflow 最好不要只輸出一段文章。

建議輸出:

{  "summary": "",  "findings": [],  "risks": [],  "recommendations": [],  "files_changed": [],  "tests": [],  "confidence": 0.87}

這樣才能被其他工具、CI/CD、Dashboard 或自動化系統接續使用。


4. 成本與 Token 要控管

多 Agent 工作流很容易消耗大量 Token。

尤其是:

Parallel + Barrier
Judge Panel
Loop until X
Nested Workflow

這些模式都可能比單一 Claude Code Session 更昂貴。

所以一定要設定:

最大輪數
最大 Agent 數量
最大輸出長度
停止條件
預算限制


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:你問,它答。
第二階段是 Agentic Coding:AI 可以讀檔、改檔、跑命令。
第三階段是 Skills 與 Subagents:AI 可以載入能力,並派出專門助手。
第四階段就是 Workflow:AI 工作流程本身可以被程式化、版本化、驗證與重複執行。

如果說 Prompt 是個人技巧,Workflow 就是團隊工程資產。

未來 GitHub 上很可能會出現大量開源 Claude Code Workflow,例如:

PR Review Workflow
Security Audit Workflow
Deep Research Workflow
Refactor Workflow
SEO Content Workflow
DevOps Check Workflow
AI Product Planning Workflow

對開發者來說,這不只是多一個 Claude Code 小技巧,而是 AI Agent 工程化的重要方向。

Claude Code Workflow 的關鍵價值可以濃縮成一句話:

把 AI 編程從「一次性的對話」升級成「可重複、可追蹤、可驗證、可復跑的工程流程」。

這也是 AI 編程真正走向團隊化、標準化與產品化的開始。