用 Pi 做設計。

Pi 到底是什麼

Pi 是一個面向終端的開源（MIT）AI 編碼 agent，屬於 earendil-works pi 工具集的一部分。它讀取你的倉庫、編輯檔案、執行 shell 命令——從自然語言任務出發去規劃並驗證工作，而不只是補全幾行程式碼。它的核心刻意精簡：四個預設工具——read、write、edit 和 bash——外加內建的 grep、find 和 ls。

對設計工作來說，最突出的特性是 Pi 與供應商無關。它在一個統一 API 背後把 Anthropic、OpenAI、Google 及眾多其他供應商規範成一致形態，所以你自帶金鑰、按任務挑模型——比如挑一個擅長讀參考截圖的多模態強模型——並在會話中途用 /model 或 Ctrl+L 切換，工作流照舊不變。

• 任意模型，你的金鑰: Pi 可路由到 20 多家供應商，包括 Anthropic 和 OpenAI。你用自己的 API 金鑰（BYOK）做認證，或用 /login 登入 Claude Pro/Max、ChatGPT Plus/Pro 或 GitHub Copilot 訂閱。
• Skills + Extensions: Pi 載入 Skills（遵循 Agent Skills 標準的 Markdown 能力包）和 TypeScript Extensions——這正是編碼你的設計規範、新增自定義工具的天然位置。
• 可分支的會話: 會話以 JSONL 樹形式儲存，所以你可以為一次探索拉出分支、在單個檔案裡瀏覽歷史，而不會丟掉之前的嘗試。

• 供應商：earendil-works（開源社群專案）
• 憑證：你自己的供應商 API 金鑰（BYOK——Anthropic、OpenAI、Google 等）或通過 /login 的訂閱登入；本地儲存在 ~/.pi/agent/auth.json（0600）
• 許可證：MIT，開源

為什麼多供應商、BYOK 的 agent 適合設計

Pi 的設計優勢在於靈活，而不在某個內建模型——但和每一個 agent 一樣，品味仍然得由你提供。

• 按任務挑對模型: 因為 Pi 能路由到任意供應商，你可以拿一個強多模態模型去讀參考截圖，再切到另一個去做重構——全程不離開 agent。
• 你的金鑰，無鎖定: BYOK 意味著你不被某一家供應商的定價或上下文限制綁死；按眼前的設計任務挑選其優勢最契合的模型。
• 把規範放進 Skill: 一個 Skill（再加上像 Figma 伺服器這樣的 MCP 來源）把 agent 指向你的 tokens、元件和真實規範，於是它針對一個品牌工作，而不是套用預設外觀。

這裡的教訓和每個 agent 教給我們的一樣：Pi 預設沒有品味，換什麼模型都補不上。當你給它約束時——一個設計系統、一個審美 skill 和具體參考——它才能產出好設計。Open Design 恰好把這些輸入打包好，這就是兩者契合的原因（下文詳述）。

從零搭建用於設計的 Pi

下面是從一臺乾淨的機器到一個能構建並驗證 UI 的 Pi 的完整路徑。

# 1. 安裝 Pi 編碼 agent CLI（Node）
npm install -g --ignore-scripts @earendil-works/pi-coding-agent

# 2. 用你自己的供應商金鑰做認證（BYOK）
export ANTHROPIC_API_KEY=sk-ant-...   # 或 OPENAI_API_KEY=sk-...
#    （或在 Pi 內執行 /login 使用 Claude / ChatGPT / Copilot 訂閱）

# 3. 在你的專案裡啟動它
cd your-project
pi

# 4. 隨時用 /model 或 Ctrl+L 切換模型

• 編碼你的設計規則: 把你的 tokens、基礎元素和規範放進一個 Skill 並把 Pi 指向它們，讓產出貼合一個品牌，而不是退回到千篇一律的外觀。
• 加入瀏覽器驗證: 接上 Playwright 或瀏覽器 MCP，讓 Pi 在真實瀏覽器中渲染、並跨斷點檢查產出，而不是隻確認構建通過。

截圖轉 UI 的工作流

用 Pi 做設計槓桿最高的迴路，是把一張參考圖變成可用、響應式的 UI，然後迭代到匹配為止——靠一個多模態模型把產出對照參考來比較。因為 Pi 與供應商無關，本輪就把它指向最擅長讀圖的那個模型。

1. 從你手頭最清晰的視覺參考入手——幷包含多種狀態（桌面端和移動端、懸停、空態、載入態），不要只給一張主視覺。
2. 用 /model 為本輪挑一個強多模態模型，因為影像理解才是截圖轉 UI 質量的關鍵驅動力。
3. 提示詞要具體；含糊的提示詞即便配強模型也會產出千篇一律的 UI。
4. 把你的設計系統和規範放進一個 Skill，並告訴 Pi tokens 和規範基礎元素在哪裡。
5. 跑一個開發伺服器，讓 Pi 在真實瀏覽器中渲染、縮放到各斷點，然後把它的實現對照截圖來迭代——而不是僅僅確認它能構建。

一開始就把參考和具體約束交給 agent：

pi
# 在提示詞裡：
> 用 React + Vite + Tailwind + TypeScript 實現
  reference-desktop.png 和 reference-mobile.png。
  複用我現有的設計系統元件和 tokens（見 Skill）。
  匹配間距、佈局和層級；做成響應式。
  在瀏覽器裡渲染並迭代，直到它跨斷點都與參考匹配。

保持提示詞小而聚焦，把好的迭代提交、把壞的回退掉（回退時告訴 Pi），這樣每一輪都在乾淨的基底上推進。Pi 可分支的 JSONL 會話也讓你在不丟失原始線索的情況下探索另一種方案。

Skills、Extensions 與主題

Pi 在執行時通過幾個層自我擴充套件，而它們乾淨地對映到一套開放的設計工作流上。

• Skills: 遵循 Agent Skills 標準的 Markdown 能力包——是你的設計規範、tokens 和評審清單耐用、可移植的歸宿。同一個 Skill 在相容的 agent 間通用，不止 Pi。
• Extensions 與提示詞模板: TypeScript Extensions 新增自定義工具、命令和 UI；可複用的提示詞模板通過 /name 執行。兩者都讓你在不離開終端的前提下指令碼化驗證迴路。
• MCP 與主題: Pi 連線 MCP 伺服器以引入外部設計上下文（最相關的是一個 Figma MCP 伺服器），主題支援熱過載，讓終端 UI 在你工作時始終清晰可讀。

這些都是可移植的能力——尤其是 Skills 和 MCP——正是 Open Design 被設計來編排、而非每個專案都重造一遍的那類東西。

做設計時 Pi 對比 Codex、Claude Code、Cursor、Gemini CLI

設計工作沒有唯一贏家——每個 agent 各有所長，老練的團隊會把它們疊著用。一個公允的總結：

Pi 的切入角度與其他幾家正交：它是那個讓你用自己的金鑰去呼叫上述任意底層模型的 agent。社群反覆得出的結論依然成立——品味來自人：它們在沒有 skill、參考和約束時都會退回到千篇一律的審美。那才是真正要解決的問題，而它是設計工具形態的，不是模型形態的。

坑，以及如何避免“AI 流水線感”的樣子

對 AI 生成設計最常見的抱怨是它看起來千篇一律——柔和漸變、漂浮面板、過大的圓角、誇張的陰影，一種“一看就是 AI 做的”的 Inter 加紫色氣味。其他被反映的問題還包括移動端佈局崩壞、以及指令洩漏進 UI 文案。這些都不是 Pi 或某一個模型獨有的；它們是任何 agent 在缺少精選設計上下文時都會發生的結果。

• 加一個審美 skill: 一個精選的設計 skill 迫使 agent 承諾一個真實的方向，而不是預設外觀——而且因為它是可移植的 Skill，會跟著你跨模型走。
• 在真實瀏覽器裡驗證: 挑一個多模態模型，讓 Pi 跨斷點渲染並自檢，這樣佈局不會在移動端悄悄崩掉。
• 提供 tokens 和參考: 真實的設計 tokens 和參考截圖是對產出質量影響最大的那個槓桿。
• 把規則編碼到 Pi 讀得到的地方: 把“不要主視覺卡片、最多兩種字型、品牌優先的層級”這類風格規則放進一個 agent 每次執行都載入的 Skill 裡。

注意，每一條緩解措施都是在給 agent 一個精選的設計上下文——與你路由到哪家供應商無關。手工、逐專案地維護那份上下文，正是 Open Design 幫你免去的苦差。

在 Open Design 中用 Pi 做設計

Open Design 就是上面那套工作流一直在呼喚的那個開源設計層。它把 Pi 當作一級介面卡，並圍繞它包上一套精選的 skill 與設計系統庫、一條結構化的渲染流水線，以及一個本地桌面 UI——於是讓 Pi 變好的那份設計上下文從第一次執行起就在那裡，而不是每次都手工拼裝。兩者都是開源、都本地優先，這讓這對組合天然契合。

1. 安裝 Open Design 並選擇 Pi 作為你的 agent。
2. 用你自己的供應商 API 金鑰（BYOK）或一個訂閱登入做認證——憑證留在你機器上的 ~/.pi/agent/auth.json，絕不經我們代理。
3. 挑一個設計系統和一個 skill，然後以一致的品味生成演示稿、原型和落地頁。
4. 每一份產物和 DESIGN.md 檔案都存在你自己的倉庫裡，而不是某個託管雲端。

同一個 Pi agent、同樣的金鑰、同樣可以自由切換模型——再加上圍繞它的一套真實、可移植的開源設計工作流。它本地優先、採用 MIT，所以關於你的工作或憑證的任何東西都不會離開你的機器。

常見問題

1. 01 Pi 真的能做設計工作嗎？ +

   能——只要上下文裡有一個審美 skill、一個設計系統和真實的參考圖，Pi 就能產出生產級的響應式 UI，而且你可以把它路由到一個強多模態模型，去把產出對照參考做驗證。缺了那份上下文，它往往會退回到千篇一律的外觀，而這正是 Open Design 要補上的缺口。

2. 02 用 Pi 做設計需要付費嗎？ +

   Pi 本身免費且開源（MIT）。你只為底層模型付費——自帶供應商 API 金鑰（BYOK），或通過 /login 使用 Claude Pro/Max、ChatGPT Plus/Pro 或 GitHub Copilot 訂閱。無論哪種方式，Open Design 都絕不代理你的憑證。

3. 03 Pi 具體好在哪裡、為何適合設計？ +

   它與供應商無關：你自帶金鑰、可路由到 20 多家供應商中的任意一家，挑選其優勢契合任務的模型並在會話中途切換。但品味仍然來自你提供的設計系統、skill 和參考，而非模型本身。

4. 04 做前端設計時我該用哪個模型搭配 Pi？ +

   Pi 可路由到多家供應商，所以按任務來選——一個強多模態模型很會讀參考截圖，而別的模型可能更適合重構。Pi 的優勢在於你可以切換而不改變工作流。Open Design 讓你在所選的任意模型之間保持同一份設計上下文。

5. 05 我如何把 Pi 連到 Figma？ +

   Pi 支援 MCP 伺服器，所以你可以加一個 Figma MCP 伺服器，拉取真實的設計上下文——元件、變數、佈局資料——讓生成的程式碼貼合源頭，而不是近似還原。

6. 06 Open Design 和 Pi 有從屬關係嗎？ +

   沒有。Pi 是 earendil-works 出品的獨立開源專案；Open Design 是一個單獨的獨立開源專案，以一級介面卡的形式支援 Pi。

7. 07 我的檔案和憑證安全嗎？ +

   安全——Open Design 本地優先且開源。你的檔案、產物和 DESIGN.md 都留在你自己的倉庫裡，你的供應商金鑰由 Pi 直接使用（本地儲存在 ~/.pi/agent/auth.json），絕不經過 Open Design 伺服器路由。