by Rain Chu 7 月 23, 2026 | AI , 語音分離 , 語音合成 , 語音辨識
Voicebox 最吸引我的地方，是它不是只做 TTS，也不是只做 Whisper 聽寫，而是把語音輸入、語音輸出、聲音克隆、故事編輯器、REST API 和 MCP server 放在同一個本地優先的工具裡。這讓 AI Agent 不只會回文字，也能用你指定的音色說話。
如果說過去的語音工具常常分成兩邊，ElevenLabs 偏輸出，WisprFlow 偏輸入，那 Voicebox 想做的是完整 voice I/O stack。更重要的是，它預設把模型、聲音資料和錄音留在本機，這對語音克隆和工作資料來說很關鍵。
先講結論
Voicebox 是 Jamie Pine 開源的 AI voice studio，官方定位是 local-first。它可以做文字轉語音、聲音克隆、全域快捷鍵聽寫、Whisper 轉錄、故事多軌編輯，還能透過 REST API 和 MCP server 讓 Claude Code、Cursor、Cline 這類 MCP-aware agent 發聲。
我會把它放在「本地語音 AI 底座」這一類，之前整理過 audio.cpp 本地語音 AI WebUI 和 Hugging Face speech-to-speech 本地語音 Agent ，Voicebox 則更偏向桌面應用和創作者工具，並且把 Agent 整合做得很直接。
Voicebox 把聽寫、轉錄、配音和 Agent 語音輸出放在同一個本地工具裡。 Voicebox 在補語音 AI 的哪一塊
很多語音工具只有單點能力。TTS 工具能把文字變聲音，但不一定能做聽寫。STT 工具能轉錄，但不一定能配音。聲音克隆工具效果強，但常常依賴雲端 API。Voicebox 的取向比較完整：輸入端用 Whisper，輸出端有多個 TTS 引擎，中間還有本地 Qwen3 LLM 做潤飾、角色語氣和 persona。
這種整合方式很適合兩種人：
第一種是內容創作者，想做旁白、podcast、故事對話、角色音色。
第二種是 AI Agent 使用者，想讓 Claude Code、Cursor 或自己的工具在完成任務後，用指定聲音提醒你，而不是只丟一段文字。
7 個 TTS 引擎和 23 種語言
官方 README 列出 7 個 TTS 引擎：Qwen3-TTS、Qwen CustomVoice、LuxTTS、Chatterbox Multilingual、Chatterbox Turbo、HumeAI TADA 和 Kokoro。它們的定位不同，有的適合多語言克隆，有的適合 CPU 快速推理，有的適合加入情緒標籤和語氣控制。
能力 Voicebox 的做法 適合用途 高品質 TTS Qwen3-TTS、Chatterbox、HumeAI TADA 等引擎 旁白、教學、產品介紹 聲音克隆 用參考音訊做 zero-shot cloning 個人聲音、角色聲音、品牌聲線 快速預設音色 Kokoro 和 Qwen CustomVoice 提供 50+ 音色 快速試稿、多角色對話 語音輸入 全域快捷鍵加 Whisper STT 聽寫、轉錄、工作筆記
如果你對開源 TTS 的音色設計有興趣，可以搭配看 Qwen3-TTS 的音色設計整理 和 dots.tts 聲音復刻架構 。Voicebox 比較像把這些能力打包成桌面工作台，而不是單一模型 demo。
聲音克隆和預設音色的差別
聲音克隆適合你有一段參考音訊，想生成相似聲線。預設音色適合你只是要快速找一個可用聲音，不想準備樣本。Voicebox 同時支援兩種路線，這點很實用。創作者可以先用預設音色打草稿，確定文本節奏後，再換成克隆音色做正式版本。
但聲音克隆也有界線。它很適合克隆你自己擁有權利的聲音，或明確授權的角色聲音。不要拿來模仿名人、同事或客戶聲音做未授權內容。語音模型越容易使用，倫理和授權越要先想清楚。
Whisper 聽寫補上輸入端
Voicebox 的另一半是輸入。它用 OpenAI Whisper 做 speech-to-text，支援全域 dictation hotkey、push-to-talk 和 toggle mode。macOS 上可以把轉錄結果直接貼到目前焦點文字欄位，這會讓它接近一個本地版語音輸入法。
Whisper 對長音訊和技術內容一直很適合。如果你常做訪談、會議紀錄、口述筆記，Voicebox 把 captures、replay、re-transcribe、refine 放在同一個介面裡，會比單純命令列轉錄更順。這裡也可以延伸看之前整理的 Whisper 開源語音轉文字 。
MCP 讓 Agent 真的開口說話
Voicebox 最有意思的一點，是內建 MCP server，官方 README 寫到它提供 `voicebox.speak`、`voicebox.transcribe`、`voicebox.list_captures`、`voicebox.list_profiles` 四個工具，這代表 MCP-aware agent 可以呼叫 Voicebox，把文字變成指定音色播放出來，也可以讀取 captures 和 voice profiles。
這不只是好玩。Agent 的語音輸出可以拿來做任務完成提醒、錯誤警告、長任務回報、pair programming 對話。你甚至可以把不同 agent 綁定不同聲音，例如 Claude Code 用一個音色，Cursor 用另一個音色，聽聲音就知道是哪個工具在回報。
{
"tool": "voicebox.speak",
"arguments": {
"text": "任務完成，測試已通過",
"profile": "Morgan"
}
} 如果你已經在玩 Playwright CLI 讓 Codex 操作瀏覽器 ，Voicebox 可以補上另一個感官通道。Agent 不只可以操作網頁，也能在完成後直接用語音提醒你。
Stories editor 適合做多角色內容
Voicebox 也有 Stories editor，可以做 conversation、podcast、narrative 這類多段落、多角色內容。這對部落格轉 podcast、教學腳本、角色對話、短劇旁白都很有用。比起一次產生一整段音訊，多軌 timeline 更適合慢慢調整角色、節奏和轉場。
如果你平常會把文章轉成短影片或語音內容，Voicebox 可以放在內容工作流後段。先由 Agent 整理稿件，再用 Voicebox 做角色分配和配音，最後再進剪輯工具。
安裝與使用入口
Voicebox 官方網站是 voicebox.sh ，GitHub repo 是 jamiepine/voicebox 。官方 README 提供 macOS Apple Silicon、macOS Intel 和 Windows 下載入口，也有開發者本地建置方式。
我會怎麼用
我不會只把 Voicebox 當成免費配音工具：
更有價值的用法，是把它接進 AI Agent 工作流，平常寫文章、整理筆記、跑 Codex、跑 Claude Code，最後都可以由 Voicebox 轉成語音摘要。長任務完成時不用一直盯螢幕，讓 Agent 開口提醒就好。
第二個用法是做內容實驗，先用預設音色快速產出版本，再用克隆音色做正式版。
第三個用法是本地聽寫，把口述想法直接丟進任何 app，再交給 Agent 整理。這會比只靠鍵盤更接近自然工作流。
我的判斷
Voicebox 不是單一模型展示，而是把語音 AI 變成桌面工作台。它的亮點不是某個 TTS 引擎本身，而是整合：本地隱私、TTS、STT、故事編輯、聲音 profile、REST API、MCP server。
如果你只需要偶爾產一段聲音，線上 TTS 服務可能更快。但如果你想要長期建立自己的聲音素材庫、做本地聽寫、讓 Agent 用聲音回報任務，Voicebox 會是值得試的工具。
延伸資源
FAQ
Voicebox 是什麼？
Voicebox 是開源的本地優先 AI 語音工作室，可以做 TTS、聲音克隆、Whisper 聽寫轉錄、故事編輯和 MCP Agent 語音輸出。
Voicebox 可以離線使用嗎？
官方定位是 local-first，模型、聲音資料和 captures 會留在本機。實際能否完全離線，取決於你是否已下載需要的模型和使用的引擎。
Voicebox 支援哪些 TTS 引擎？
官方列出 Qwen3-TTS、Qwen CustomVoice、LuxTTS、Chatterbox Multilingual、Chatterbox Turbo、HumeAI TADA 和 Kokoro。
Voicebox 可以接 Claude Code 或 Cursor 嗎？
可以。Voicebox 內建 MCP server，MCP-aware agent 可以使用 `voicebox.speak`、`voicebox.transcribe`、`voicebox.list_captures` 和 `voicebox.list_profiles`。
by Rain Chu 7 月 15, 2026 | AI , skills , Tool
Graphify 最有價值的地方，是把「讀專案」這件事從一次性的上下文塞爆，改成可以重複查詢的知識圖譜， Codex、Claude Code、OpenCode、Cursor、Gemini CLI 這類 AI coding assistant 來說，最大的浪費常常不是寫程式，而是每次都重新理解同一個 codebase。
如果 OpenWiki 解決的是 Agent wiki 和文件記憶，Graphify 更像是把整個資料夾編譯成一張可追蹤的圖，它可以處理程式碼、SQL schema、R script、shell script、文件、論文、圖片，甚至影片和音訊，最後輸出 `graph.html`、`GRAPH_REPORT.md` 和 `graph.json`。
先講結論
Graphify 不是向量資料庫，也不是單純 RAG。官方說得很直接，它不用 embeddings，也不放 vector store，而是建立一張可以 traverse 的真實 graph，你可以問一個概念是什麼，也可以追兩個概念之間的 shortest path，或要求它回答某個問題時只返回相關 subgraph。
這對 coding agent 很重要，因為大型專案裡的關係不是只有語意相似，還有 import、call、inherit、mix in、schema、設定檔、文件註解和設計決策，Graphify 把這些關係轉成節點和邊，讓 Agent 不必每次都用 grep 或全文讀取重新猜。
Graphify 是什麼
Graphify 是一個 AI coding assistant skill，安裝後可以在支援的平台裡輸入 `/graphify .`，Codex 則使用 `$graphify`。它會掃描當前資料夾，把程式碼、文件、PDF、圖片和影片整理成知識圖譜。
官方快速開始很短，重點是 PyPI 套件名稱叫 `graphifyy`，不是 `graphify`。這點要記住，因為 README 特別提醒其他 `graphify*` 套件不是官方套件。
uv tool install graphifyy # install the CLI (or: pipx install graphifyy)
graphify install # register the skill with your AI assistant 之後在 AI assistant 裡執行。
為什麼它不是一般 RAG
一般 RAG 常見做法是切 chunk、做 embedding、進 vector store，再用語意相似度找片段。這對文件問答很好用，但對程式碼架構不一定夠。因為程式碼最重要的線索常常是顯式關係，例如某個 class 被誰繼承，某個 function 被哪裡呼叫，某個 schema 影響哪個 API。
Graphify 對 code maps 採 local-first。程式碼透過 tree-sitter AST 解析， deterministic，不需要 LLM，也不會把程式碼送出本機。文件、PDF、圖片和影片這類語義 pass 才會使用 assistant model 或你設定的 API key。
EXTRACTED 和 INFERRED 是關鍵
Graphify 很值得學的一點，是它會標記每條邊的來源。`EXTRACTED` 代表關係明確存在於來源裡，`INFERRED` 代表由 Graphify 推導出來。這比單純把答案講得很肯定更重要，因為 Agent 常犯的錯不是沒有答案，而是不知道哪些是看到的，哪些是猜的。
aivi 的整理還提到第三類 `AMBIGUOUS`，代表不確定的關係要留給人工審查。這種設計很適合放進團隊工作流，因為架構理解不該只追求自動化，也要保留可審計性。
輸出檔案怎麼看
一次執行後，最核心的是三個檔案。
檔案 用途 我會怎麼用 graph.html 互動式圖譜 快速看社群、節點和跨模組關係 GRAPH_REPORT.md 摘要報告 讓 Agent 先讀專案重點和建議問題 graph.json 完整圖資料 後續 query、path、explain 不必重讀所有檔案
Graphify 的核心流程是偵測檔案、抽取關係、建立 graph、切分社群，最後讓 Agent 可以 query、path、explain。 最適合哪些場景
我會優先用在三種情境。
第一，接手陌生 codebase，需要先知道核心節點和模組邊界。
第二，專案同時有 app code、database schema、infra script 和文件，單純全文搜尋很難看出關係。第
三，研究資料夾裡有論文、截圖、筆記和實驗程式，需要把概念關係串起來。
這和我前面整理的 OpenWiki 可以搭配。OpenWiki 偏向替 Agent 建立 wiki 記憶，Graphify 偏向把來源資料拆成可查詢 graph。兩者放在一起，就是文件記憶加關係推理。
Benchmark 怎麼解讀
官方 README 摘要裡列了幾個 benchmark。LOCOMO recall@10 是 0.497，對照 mem0 的 0.048 和 supermemory 的 0.149，差距很大。LOCOMO QA accuracy 是 45.3%，低於 supermemory 的 49.7%，但高於 mem0 的 27.3%。LongMemEval-S QA accuracy 則是 76%，官方標註和 dense RAG tied。
這些數字適合當成方向參考。Graphify 的價值不只是單點 QA，而是能把關係路徑保存下來讓 Agent 反覆查詢。 Codex 使用要注意什麼
Graphify 支援 20 個以上 assistant 平台。對 Codex 使用者來說，官方特別提到 Codex 用 `$graphify`，不是 `/graphify`。另外如果要做 parallel extraction，需要在 `~/.codex/config.toml` 的 `[features]` 下設定 `multi_agent = true`。
這點和 Codex 作為 AI 代理 的方向很搭。Codex 如果只靠當下上下文，很容易在大型 repo 裡反覆找檔案。Graphify 可以先把核心結構整理好，讓後續任務更像查地圖，而不是每次重新探路。
可以匯出到 Obsidian、Neo4j 和 MCP
aivi 的整理提到 Graphify 有很多可選輸出，包括 Obsidian、SVG、GraphML、Neo4j Cypher、直接推送 Neo4j、MCP server 和 wiki 風格 Markdown。這代表它不是只服務某一個 assistant，而是可以把 graph 變成團隊知識資產。
如果你已經有 GraphRAG 使用本地 Ollama 的經驗，可以把 Graphify 看成更偏工程專案的知識圖譜入口。它不是取代 GraphRAG，而是把 repo、文件與工程關係先整理成一個可操作的圖。
我會怎麼導入
第一步只跑 code。因為 code map 是 local-first，不需要 LLM token，風險最低。
第二步打開 `graph.html` 看社群是否合理，再讀 `GRAPH_REPORT.md`，確認 god nodes 和 surprising connections 是否真的有幫助。
第三步才把 docs、PDF、圖片或影片加進來，並明確估算語義 pass 會用到哪個模型和多少成本。
如果是私有專案，我會先禁用媒體語義分析，只讓 tree-sitter 解析程式碼。等到確定 graph 有價值，再逐步開文件和圖片。這樣比較符合安全直覺，也不會一開始就把整個公司資料夾丟進模型。
我的判斷
Graphify 的核心價值不是炫酷的圖，而是讓 Agent 對大型專案有可追溯的結構記憶。它把「讀懂專案」變成一個可重複、可更新、可查詢的輸出，而不是每次都靠模型臨場發揮。
我會把它放進 AI coding 工作流的前置步驟。陌生 repo 先 Graphify，需求進來前先看 graph report，修改前查 path，修改後用 hook 或 watch 更新圖譜。這樣 Agent 比較不會只看局部檔案就亂改。
延伸資源
FAQ
Graphify 和 RAG 有什麼不同？
RAG 常用向量相似度找片段，Graphify 建立可 traversal 的知識圖譜。它更重視 import、call、inherit、文件引用和設計決策這類關係。
Graphify 會把程式碼送到雲端嗎？
程式碼 map 是 local-first，透過 tree-sitter AST 解析，不需要 LLM。文件、PDF、圖片和影片的語義分析才會使用 assistant model 或你設定的 backend。
Codex 可以用 Graphify 嗎？
可以。官方支援 Codex，並提醒 Codex 使用 `$graphify`。若要 parallel extraction，需要在 Codex config 啟用 `multi_agent = true`。
Graphify 適合私有專案嗎？
適合先從程式碼圖譜開始，因為 code parsing 可以本地完成。若要分析文件、圖片或影片，建議先確認使用的模型和資料外送邊界。
by Rain Chu 6 月 18, 2026 | AI , skills
要用在 WordPress 的細節是這樣：
UIUX Pro Max 不是在 WordPress 後台裡用，也不是在 Elementor 裡直接用語音說話。
官方 README 也寫得很清楚：CLI 安裝方式是先 npm install -g uipro-cli，再 cd /path/to/your/project，然後執行 uipro init --ai claude、uipro init --ai cursor、uipro init --ai codex 等指令。使用時則是「自然聊天」提出 UI/UX 任務，或用 /ui-ux-pro-max slash command 觸發。
1. 要放在 WordPress 根目錄下嗎？
如果你是要它幫你「改 WordPress 主題、外掛、樣式檔、PHP template」，那建議放在 WordPress 專案根目錄。
例如你的 WordPress 專案是：
/var/www/html/my-wordpress-site 或 Windows 本機：
C:\Users\Rain\Projects\my-wordpress-site 那你就進到這個資料夾：
cd /var/www/html/my-wordpress-site 或：
cd C:\Users\Rain\Projects\my-wordpress-site 然後執行：
或：
這樣 AI 工具比較容易讀到你的 WordPress 結構，例如：
wp-content/themes/plugins/uploads/ 2. 如果只是用 Elementor？
如果你只是想讓它幫你規劃 Elementor 頁面，例如：
首頁區塊怎麼排
Hero 文案怎麼寫
CTA 怎麼放
色彩與字體怎麼設定
手機版怎麼調
WooCommerce 商品頁怎麼規劃
可以在任何 AI 工具裡直接問：
請使用 UIUX Pro Max 的思維，幫我規劃一個 WordPress + Elementor 首頁。網站類型：顧問公司目標客戶：中小企業老闆風格：專業、可信任、不要太花請輸出：1. Elementor 區塊架構2. 每個 Section 的標題與文案3. Container / Column 建議4. Global Colors5. Global Fonts6. 手機版設定 然後你再手動把結果做到 Elementor 裡。
這種方式不需要碰 WordPress 根目錄，因為它只是給你「設計規劃」。
3. 什麼情況一定建議在 WordPress 根目錄下？
當你要 AI 直接幫你看檔案、改檔案、產生程式碼時，就建議在 WordPress 根目錄。
例如你要它做這些事：
請幫我檢查目前 WordPress 主題的首頁 template，並重新設計 Hero 區塊。 請幫我修改 wp-content/themes/my-theme/front-page.php，讓首頁更像專業 SaaS Landing Page。 請幫我建立一個 WordPress 外掛設定頁，風格要乾淨、專業、適合老師使用。 請幫我新增一個 Elementor 可以貼上的 HTML 區塊，並附 CSS。 這種情況 AI 需要讀你的專案檔案，所以最好在 WordPress 專案根目錄執行。
4. 在哪裡「用說的」？
不是在 WordPress 後台說。
是在這些地方用文字說：
A. Claude Code
如果你用 Claude Code，可以在專案目錄下開啟 Claude Code，然後直接輸入：
請使用 UIUX Pro Max，幫我優化這個 WordPress 網站首頁的 UI/UX。請先讀取目前主題結構，不要直接改檔案，先提出規劃。 如果是 slash command 模式，則可以用：
/ui-ux-pro-max 請幫我設計 WordPress + Elementor 首頁架構 官方文件也提到，Skill Mode 可以自然語言觸發，Workflow Mode 則可以使用 /ui-ux-pro-max 指令。
B. Cursor
如果你用 Cursor：
用 Cursor 開啟 WordPress 專案資料夾
安裝 UIUX Pro Max：
npm install -g uipro-cliuipro init --ai cursor
在 Cursor Chat 裡輸入：
請使用 UIUX Pro Max 的 UI/UX 規則，幫我分析這個 WordPress 網站。目標是把首頁改成專業的 B2B SaaS Landing Page。請先不要修改檔案，先列出設計系統、區塊架構與需要改的檔案。 C. Codex CLI / Gemini CLI / Windsurf
邏輯一樣，先在專案資料夾安裝：
或：
然後在該工具的聊天或 CLI 裡下指令。
5. WordPress + Elementor 最實際流程
如果你是一般 WordPress 使用者，我會建議你不要一開始就讓 AI 改檔案，而是先用這個流程：
UIUX Pro Max 產生設計規劃↓你在 Elementor 設定 Global Colors / Fonts↓依照 Section 一段一段建立頁面↓再請 AI 幫你檢查手機版、轉換率、可讀性 實際操作如下。
第一步：先問它設計系統
請使用 UIUX Pro Max，幫我建立 WordPress + Elementor 網站的設計系統。網站類型：AI 批改工具目標使用者：國中小老師品牌感覺：乾淨、專業、低壓力、不要像兒童玩具主色：白色、深灰，主要 CTA 使用 Shane Red請輸出：1. Global Colors2. Global Fonts3. H1/H2/H3/Body 字級4. Button 樣式5. Card 樣式6. Section 上下間距7. 手機版斷點建議 第二步：請它產生 Elementor 區塊
請依照剛剛的設計系統，幫我規劃 Elementor 首頁。請輸出：1. Section 名稱2. 每個 Section 的目的3. Container / Column 結構4. 標題文案5. 按鈕文案6. 圖片或 Icon 建議7. 手機版排列方式 第三步：手動做到 Elementor
到 WordPress 後台：
WordPress 後台→ 頁面→ 新增頁面 / 編輯首頁→ 使用 Elementor 編輯 然後照 AI 給你的 Section 一段一段做。
第四步：請它檢查 Elementor 設計
你可以截圖，或把頁面區塊描述貼回去問：
請用 UIUX Pro Max 的角度，檢查這個 Elementor 首頁。請特別看：1. 首屏是否清楚2. CTA 是否明顯3. 文字是否太多4. 手機版是否容易讀5. 有沒有不一致的間距或字級6. 如何提高轉換率 6. 如果要改 WordPress 主題，流程是另一種
假設你有一個自製主題：
wp-content/themes/my-theme/ 你可以在 WordPress 根目錄下開 AI 工具，然後問：
請使用 UIUX Pro Max 分析這個 WordPress 主題。目標：把首頁 front-page.php 改成專業 Landing Page。限制：1. 不要改後台功能2. 不要破壞現有 header.php 和 footer.php3. 優先修改 front-page.php 和 style.css4. 請先列出修改計畫，不要直接改檔案 等它列出計畫後，再說：
可以，請開始修改 front-page.php 和 style.css。 這種才是「在 WordPress 根目錄下用」。
7. Elementor 使用者的重點結論
你可以這樣理解：
只做 Elementor 頁面規劃：不用一定在 WordPress 根目錄。在 Claude / Cursor / ChatGPT 裡問都可以。要 AI 讀取或修改 WordPress 檔案：建議在 WordPress 根目錄。要做外掛、主題、template、CSS：一定建議在 WordPress 專案根目錄。要做文章、頁面文案、區塊設計：不需要根目錄，直接用文字問即可。 8. 最推薦的用法
要寫 WordPress 文章、又想說明 Elementor 使用場景，我建議寫成這樣：
UIUX Pro Max 並不是直接在 WordPress 後台安裝後就會自動產生頁面的外掛，而是搭配 Claude Code、Cursor、Codex CLI、Windsurf 等 AI 工具使用的 UI/UX Skill。
最簡單一句話：Elementor 規劃不用放根目錄；要改 WordPress 程式碼，就放在 WordPress 根目錄。
by Rain Chu 6 月 18, 2026 | AI , skills
在網站製作的世界裡，最痛苦的往往不是「會不會架 WordPress」，而是「怎麼把網站做得像專業品牌」。
很多人可以安裝主題、套版、放圖片、改文字，但真正卡住的地方通常是：
版面不夠高級、配色不協調、按鈕不知道放哪裡、手機版跑版、Landing Page 沒有轉換力、Dashboard 看起來不像專業產品。
這時候，UIUX Pro Max Skill 就像是一位專門站在你旁邊的前端與 UI/UX 顧問。你不需要一開始就懂設計系統、字體比例、色彩心理學、Tailwind、React、Next.js 或 shadcn/ui，只要用自然語言描述你想要的網站，它就能協助 AI Coding Assistant 產生更像專業前端設計師規劃出來的介面。
官方網站：https://ui-ux-pro-max-skill.nextlevelbuilder.io/
GitHub 專案：https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
下載與安裝：https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/releases
UIUX Pro Max 是什麼？
UIUX Pro Max，全名通常會看到 ui-ux-pro-max-skill ，是一個提供 AI 助手使用的 UI/UX 設計技能包。它的核心概念很簡單：
讓 AI 不只是「會寫前端程式」，而是更懂「什麼樣的前端才像專業產品」。
一般 AI 寫前端時，很容易產生一種常見問題：功能有了，但畫面普通；元件有了，但缺乏層次；版面能跑，但沒有品牌感。
UIUX Pro Max 則補上這塊空白。它把 UI 風格、色票、字體搭配、圖表類型、UX 規則、設計系統與不同技術框架的實作建議整理成一套可被 AI 助手調用的知識庫。
你可以把它想像成：
給 Claude Code、Cursor、Codex CLI、Windsurf 等工具使用的 UI/UX 專家包
給前端開發者使用的設計系統產生器
給不懂設計的創業者、站長、行銷人員使用的網站美感加速器
給 WordPress 專案使用的外觀與互動規劃參考工具
它不是單純的 WordPress 外掛，而是可以協助你在製作 WordPress 網站、Landing Page、SaaS 後台、會員系統、形象網站或行銷頁時，快速產生更專業的前端設計方向。
特色
1. 用自然語言產生 UI/UX 設計方向
你不需要一開始就寫完整規格，只要描述你的需求，例如：
「幫我設計一個牙醫診所形象網站，要乾淨、可信任、有預約按鈕。」
「我要一個 WordPress 課程銷售頁，風格要像高級教育平台。」
「幫我做一個 SaaS 後台 Dashboard，要有現代感、卡片式資料區塊、RWD。」
AI 搭配 UIUX Pro Max 後，就能更有方向地產生版面、色彩、字體、元件與視覺層次。
2. 自動生成設計系統
UIUX Pro Max 的重點之一，是能依據專案需求產生設計系統。
這對 WordPress 網站很重要，因為很多網站最後看起來不專業，不是因為圖片不夠漂亮，而是缺乏一致性。
設計系統可以包含：
主色與輔色
字體搭配
標題大小
內文行距
按鈕樣式
卡片樣式
表單樣式
間距規則
RWD 斷點
常用元件規範
如果你是用 WordPress + Elementor、Bricks、Block Editor、GeneratePress、Astra 或自製主題，這些設計系統都可以成為你調整網站外觀時的重要依據。
3. 適合 WordPress 外掛與主題開發
雖然 UIUX Pro Max 不是傳統意義上的 WordPress 外掛，但它非常適合拿來輔助 WordPress 開發。
例如你正在開發：
WordPress 企業形象網站
WooCommerce 商品頁
線上課程銷售頁
會員中心
後台管理介面
預約系統
AI 工具網站
部落格首頁
Landing Page
WordPress 外掛設定頁
你可以請 AI 搭配 UIUX Pro Max 先產生 UI 規劃，再把設計轉換成 HTML、Tailwind、React、Next.js、PHP Blade、甚至 WordPress 區塊設計邏輯。
4. 支援多種前端技術棧
UIUX Pro Max 不只適合單一框架，它的 GitHub README 中列出多種支援方向，包括 HTML + Tailwind、React、Next.js、shadcn/ui、Vue、Nuxt、Angular、Svelte、Astro、SwiftUI、Jetpack Compose、React Native、Flutter 等。
對 WordPress 使用者來說，最實用的組合通常會是：
HTML + Tailwind
React
Next.js
shadcn/ui
PHP / Laravel Blade 概念
WordPress 區塊與前端樣式規劃
如果你的 WordPress 網站有自製外掛、客製後台、Headless WordPress 或 Next.js 前台，UIUX Pro Max 會更有幫助。
5. 做出不「凡」的網站
多數人不是專業設計師，也不是全職前端工程師。
你可能是創業者、老師、站長、接案者、行銷人、公司內部資訊人員，甚至只是想把自己的 WordPress 網站改得更好看。
UIUX Pro Max 的價值在於：它把許多專業設計師腦中的判斷，變成 AI 可以引用的規則與資料庫。你不必從零開始學完 UI/UX，也能讓 AI 提供更接近專業前端顧問的建議。
關鍵指令
以下是常用指令，可以依照你的 AI 工具環境選擇。
Claude Code Marketplace 安裝方式
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill CLI 安裝方式
npm install -g uipro-cli
cd /path/to/your/project
uipro init --ai claude 安裝到其他 AI 助手
uipro init --ai cursor
uipro init --ai windsurf
uipro init --ai copilot
uipro init --ai codex
uipro init --ai gemini
uipro init --ai opencode
uipro init --ai all 全域安裝
uipro init --ai claude --global
uipro init --ai cursor --global 更新與移除
uipro versions
uipro update
uipro uninstall 使用範例
Build a landing page for my SaaS product Create a dashboard for healthcare analytics Design a portfolio website with dark mode Make a mobile app UI for e-commerce Build a fintech banking app with dark theme 直接呼叫 Skill
/ui-ux-pro-max Build a landing page for my SaaS product 使用流程圖
WordPress 使用情境範例
情境一：幫企業形象網站重新設計首頁
你可以這樣下指令：
請幫我重新設計一個 WordPress 企業形象網站首頁。
產業是 B2B 軟體服務，目標客戶是中小企業老闆。
風格要專業、可信任、不要太科技黑。
請提供首頁區塊架構、主色、字體、CTA 按鈕、RWD 注意事項。 AI 搭配 UIUX Pro Max 後，會比較容易產生完整的首頁架構，例如 Hero、痛點、服務特色、案例、流程、FAQ、CTA 等，而不是只給你一個普通的套版。
情境二：幫 WooCommerce 商品頁提高轉換率
請幫我優化 WooCommerce 商品頁 UI/UX。
商品是高單價健康設備。
目標是增加詢問與預約體驗。
請設計商品頁資訊層級、信任元素、CTA 區塊與手機版版面。 這類任務不只是美化，而是結合轉換率、資訊層級與使用者行為。UIUX Pro Max 很適合用在這種「不只要好看，也要有效」的頁面。
情境三：設計 WordPress 外掛設定頁
請幫我設計一個 WordPress 外掛設定頁。
外掛功能是 AI 自動批改作業。
需要包含 API Key 設定、模型選擇、批改規則、通知設定與儲存按鈕。
請提供乾淨、專業、適合老師使用的 UI。 如果你正在開發 WordPress 外掛，後台設定頁常常會被忽略，但它其實非常影響使用體驗。UIUX Pro Max 可以協助你把設定頁做得更清楚、有層次，也更接近 SaaS 產品的質感。
為什麼推薦 UIUX Pro Max？
1. 降低設計門檻
不是每個人都請得起專業 UI 設計師，也不是每個專案都有時間走完整設計流程。UIUX Pro Max 可以讓 AI 幫你補上第一版設計判斷。
2. 節省溝通成本
過去做網站常常要反覆跟設計師或前端工程師溝通：「再高級一點」、「不要那麼像模板」、「手機版怪怪的」。現在你可以直接把品牌、情境、目標客戶、色調偏好告訴 AI，讓它先產出一版更接近方向的方案。
3. 適合快速做 MVP
如果你正在做新產品、SaaS、AI 工具、課程平台、會員網站或接案展示頁，UIUX Pro Max 很適合用來快速產生第一版專業視覺。
4. 可延伸到實際程式碼
它不是只能給概念，也能配合 AI Coding Assistant 產生前端程式碼、元件設計與樣式規則。對工程師來說，這比單純看設計靈感網站更直接。
使用時要注意什麼？
1. 它不是魔法，仍然需要你提供明確需求
你給的需求越清楚，產出的設計越準。
建議至少提供：
產業類型
目標客戶
網站目的
喜歡或不喜歡的風格
是否要深色模式
是否需要手機優先
使用的技術棧
是否要套用到 WordPress
是否偏向銷售、品牌、教學或後台管理
2. 不要只說「幫我做漂亮一點」
比較好的說法是：
請幫我把這個 WordPress 首頁改成更像 B2B SaaS 的專業風格。
目標客戶是企業主管。
請避免卡通感與過度漸層。
主色希望是深藍與白色，CTA 使用亮色。
請提供 Hero、功能、案例、價格與 FAQ 區塊。 這樣 AI 才會知道「漂亮」的方向是什麼。
3. 最後仍要人工檢查
AI 產出的設計很適合當第一版，但正式上線前仍然建議檢查：
手機版是否正常
文字是否符合品牌語氣
色彩對比是否足夠
按鈕是否明顯
表單是否容易填寫
SEO 標題是否正確
WordPress 主題是否相容
外掛是否造成樣式衝突
by Rain Chu 6 月 14, 2026 | Agent , AI , Hermes , OpenClaw , Prompt
當我們開始用 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 很擅長快速完成版型，但如果沒有足夠清楚的設計方向，它很容易產生幾種常見問題：
每個區塊都用卡片包起來，看起來很模板化
喜歡使用過度常見的紫色漸層、玻璃擬態、發光陰影
字體大小與層級不夠精準，主標、副標、內文沒有明確節奏
留白太平均，缺乏視覺重點
按鈕、表單、導覽列看起來功能正確，但沒有品牌感
Landing Page 和後台 Dashboard 使用同一種設計邏輯
作品看起來像 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
/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 工具中執行：
如果之後要更新，可以執行：
npx impeccable skills update
官方網站也提供更多說明與範例：
Impeccable 官方網站
使用 Impeccable 的工作流程建議
如果你正在做一個網站或前端產品，可以用以下流程開始：
第一步，先用 AI 產生基本頁面結構。
第二步，執行 /impeccable init。
第三步，用 /impeccable shape 先整理畫面架構。
第四步，用 /impeccable critique 檢查設計問題。
第五步，用 /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
近期留言