用 GitHub Copilot CLI 做設計。

GitHub Copilot CLI 究竟是什麼

GitHub Copilot CLI 是 GitHub 原生於終端的編碼 agent。它讀取你的倉庫、編輯檔案、執行 shell 命令，並直接結合你的 GitHub 上下文——issue、pull request 和倉庫——用你現有的 GitHub 賬號鑑權。它由與 GitHub Copilot 編碼 agent 同一套 agentic 框架驅動，因此能規劃複雜任務並迭代，而不只是補全程式碼行。它在 2025 年 9 月開啟公開預覽後，於 2026 年 2 月正式全面上線。

對設計工作而言，有兩點尤為突出。它會讀取自定義指令檔案——位於 .github/copilot-instructions.md 的倉庫級規則以及 AGENTS.md——因此你的設計規範每次執行都會被自動納入。它還支援多家基礎模型提供方，因此你可以用 /model 命令按任務切換到對某個 UI 推理最佳的那個模型。

• 指令檔案: Copilot CLI 會讀取 .github/copilot-instructions.md 中的倉庫指令、.github/instructions 下的路徑專屬檔案，以及 AGENTS.md——這是為你的設計規範、tokens 和評審清單編碼的天然之處。
• 內建工具 + MCP: 它內建了 GitHub 的 MCP server，並執行檔案和 shell 工具，你還可以用 /mcp add 新增自定義 MCP server（配置存於 ~/.copilot 下的 mcp-config.json），以引入諸如即時 Figma 檔案這樣的外部上下文。
• 模型選擇: 用 /model 命令在 Anthropic、OpenAI 和 Google 的前沿模型之間任選其一——按任務切換，全部跑在你現有的 Copilot 訂閱上。

• 廠商：GitHub
• 憑證：一個有效的 GitHub Copilot 訂閱（Pro、Pro+、Business 或 Enterprise）
• 安裝：npm install -g @github/copilot，然後執行 copilot

為什麼倉庫指令和模型選擇契合設計

Copilot CLI 的設計優勢來自兩點——但和每個 agent 一樣，審美仍需由你提供。

• 隨倉庫一起流轉的規範: 因為 Copilot CLI 會自動讀取 .github/copilot-instructions.md 和 AGENTS.md，你的 tokens、基礎元件和評審規則每次執行都在上下文裡——agent 是面向一個品牌而非預設觀感來工作。
• 按任務挑對模型: 在 Anthropic、OpenAI 和 Google 之間做模型選擇，意味著你可以為某個佈局選用推理最佳的模型，再為下一個任務切換——而無需改變你的工作流。
• 通過 MCP 接入真實規格: 內建的 GitHub MCP server 加上 Figma MCP server，把 agent 指向你的 tokens、元件和真實規格，於是它從源頭構建，而不是近似猜測。

這個教訓和每個 agent 給我們的一樣：Copilot CLI 預設並沒有審美。當你給它約束時——一套設計系統、一個審美 skill 和具體參考——它才能產出好設計。Open Design 正是把這些輸入打包好，這也是兩者契合的原因（下文詳述）。

從零開始為設計工作配置 Copilot CLI

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

# 1. 安裝 Copilot CLI（需要 Node.js）
npm install -g @github/copilot

# 2. 在你的專案中啟動它，並在首次執行時鑑權
cd your-project
copilot           # 執行 /login 並按提示登入

# 3. 為任務選擇一個模型
#    在會話中：
/model            # 從 Anthropic、OpenAI 或 Google 中挑一個前沿模型

# 4. 新增自定義指令和 Figma MCP server（可選）
#    編寫 .github/copilot-instructions.md 或 AGENTS.md
/mcp add          # 新增 Figma MCP server 用於設計交付

• 為你的設計規則編碼: 把你的 tokens、基礎元件和規範放進 .github/copilot-instructions.md 或 AGENTS.md，讓輸出貼合一個品牌，而非退回到千篇一律的觀感。
• 加入瀏覽器驗證: 接入 Playwright 或瀏覽器 MCP，讓 Copilot 在真實瀏覽器中渲染，並跨斷點檢查輸出，而不只是確認構建通過。

截圖轉 UI 的工作流

用 Copilot CLI 做設計、槓桿最高的閉環，是把一張參考圖變成可用的響應式 UI，並不斷迭代直到匹配——藉助一個強大的多模態模型把輸出對照參考來比較。

1. 從你手上最清晰的視覺參考出發——幷包含多種狀態（桌面與移動、懸停、空態、載入態），而不只是一張主視覺。
2. 在 prompt 裡寫具體；即便用了強模型，含糊的 prompt 也會產出千篇一律的 UI。
3. 把你的設計系統和規範放進 .github/copilot-instructions.md 或 AGENTS.md，並告訴 Copilot tokens 和標準基礎元件在哪裡。
4. 執行一個 dev server，讓 Copilot 在真實瀏覽器中渲染，調整到各斷點來檢查結果。
5. 讓 Copilot 把它的實現對照截圖來比較以進行迭代——而不只是確認能構建通過。

把 Copilot 指向你的參考圖並給出具體約束；它在執行前會預覽每一次檔案編輯或命令，等你批准：

copilot
# 在 prompt 中：
> Implement the design in reference-desktop.png and reference-mobile.png
  in React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens described in
  .github/copilot-instructions.md.
  Match spacing, layout, and hierarchy; make it responsive.
  Render it in the browser and iterate until it matches the references
  across breakpoints.

保持 prompt 小而聚焦，提交好的迭代、回退壞的迭代（回退時告訴 Copilot），這樣每一輪都建立在乾淨的基礎之上。

自定義指令、MCP 與擴充套件

有三個擴充套件點讓 Copilot CLI 適合持續的設計工作，而且這三者都能幹淨地對映到開放的設計工作流上。

• 自定義指令: 倉庫規則存於 .github/copilot-instructions.md（連同 .github/instructions 下的路徑專屬檔案和 AGENTS.md）。它們是你設計規範的長期歸宿，每次執行都會被自動納入。
• MCP server: Copilot CLI 內建了 GitHub 的 MCP server，並允許你通過 /mcp add 新增自定義 server（配置存於 ~/.copilot 下的 mcp-config.json）——這是引入設計上下文（最相關的就是 Figma MCP server）的可移植方式，可跨多個 agent 通用，而不止 Copilot。
• 專用 agent 與內建工具: Copilot CLI 的專用模式——用於程式碼庫探索、執行構建與測試、變更評審和規劃——加上它的檔案和 shell 工具，讓它無需離開終端就能收集參考並跑完驗證閉環。

這些都是可移植的、多 agent 通用的能力——正是 Open Design 旨在編排、而非在每個專案裡重複造的那類東西。

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

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

社群反覆得出的結論是：審美來自人——沒有 skill、參考和約束，它們都會預設退回到千篇一律的觀感。這才是真正要解決的問題——而且它是設計工具的形狀，不是模型的形狀。

陷阱，以及如何避免“AI 流水線感”的觀感

關於 AI 生成設計最常見的抱怨是它看起來千篇一律——柔和漸變、懸浮面板、過大的圓角、誇張的陰影，以及一種 Inter 字型配紫色、“一眼就是 AI 做的”的氣質。其他被反映的問題還包括移動端佈局錯亂、指令文字漏進 UI 文案。這些都不是 Copilot CLI 獨有的；任何 agent 在缺少精選設計上下文時執行，都會這樣。

• 加一個審美 skill: 一個精選的設計 skill 會迫使 agent 投入到一個真正的方向上，而非預設觀感。
• 在真實瀏覽器中驗證: 用瀏覽器 MCP 跨斷點渲染並自檢，這樣佈局就不會在移動端悄無聲息地崩壞。
• 提供 tokens 和參考: 真實的設計 tokens 和參考截圖，是對輸出質量影響最大的單一槓杆。
• 把規則寫進自定義指令: 把諸如“不用 hero 卡片、最多兩種字型、品牌優先的層級”這類風格規則放進 .github/copilot-instructions.md 或 AGENTS.md，agent 每次執行都會讀到。

注意，每一項緩解措施都是在給 agent 提供精選的設計上下文。手工地、逐專案地維護這份上下文，正是 Open Design 要消除的苦工。

在 Open Design 中用 Copilot CLI 做設計

Open Design 正是上面那套工作流一直在呼喚的開源設計層。它把 GitHub Copilot CLI 當作一等介面卡，並用一套精選的 skill 與設計系統庫、一條結構化的渲染流水線和一個本地桌面 UI 把它包裹起來——這樣讓 Copilot 變好的那份設計上下文，從第一次執行就已就位，而不必每次手工拼裝。Open Design 獨立、開源（Apache-2.0）且本地優先，這正是兩者契合的原因：agent 幹活，你的檔案和憑證仍歸你所有。

1. 安裝 Open Design 並選擇 GitHub Copilot CLI 作為你的 agent。
2. 用你的 GitHub Copilot 訂閱鑑權——憑證留在你的機器上，絕不經我們代理。
3. 選一套設計系統和一個 skill，然後以一致的審美生成演示稿、原型和落地頁。
4. 每一個產物和 DESIGN.md 檔案都存在你自己的倉庫裡，而非託管的雲端。

同一個 Copilot CLI agent、同一份訂閱——外加圍繞它的一套真實、可移植、開源的設計工作流。Open Design 本地優先且採用 Apache-2.0，所以關於你的工作或憑證的一切都不會離開你的機器。

常見問題

1. 01 GitHub Copilot CLI 真的能做設計工作嗎？ +

   能——只要在上下文裡有一個審美 skill、一套設計系統和真實參考圖，Copilot CLI 就能產出生產級、響應式的 UI，而且你可以挑選最能對照參考驗證輸出的那個模型。缺少這份上下文時，它往往會預設退回到千篇一律的觀感，而這正是 Open Design 要填補的差距。

2. 02 用 Copilot CLI 做設計需要訂閱嗎？ +

   需要——Copilot CLI 跑在一個有效的 GitHub Copilot 訂閱上（Pro、Pro+、Business 或 Enterprise）；它不是 BYOK。你用 GitHub 賬號鑑權。Open Design 絕不代理你的憑證——你的訂閱由你的 agent 直接使用。

3. 03 Copilot CLI 具體好在哪、為什麼適合設計？ +

   兩點：它會自動讀取倉庫指令和 AGENTS.md，於是你的設計規範隨倉庫流轉；它還讓你按任務在 Anthropic、OpenAI 和 Google 的前沿模型之間切換。兩者都有幫助——但審美仍來自你提供的設計系統、skill 和參考。

4. 04 前端設計該用 Copilot CLI 還是 Claude Code？ +

   兩者都很強。Claude Code 以具體、理解程式碼庫的設計決策著稱；Copilot CLI 的優勢在於跨提供方的模型選擇，以及在你可能已經擁有的訂閱上深度的 GitHub 整合。許多團隊兩者並用——Open Design 讓你切換 agent 而無需改變設計工作流。

5. 05 怎麼把 Copilot CLI 連線到 Figma？ +

   用 /mcp add 命令新增 Figma MCP server；設定存於 ~/.copilot 下的 mcp-config.json。之後 Copilot 就能拉取真實的設計上下文——元件、變數、佈局資料——讓生成的程式碼貼合源頭，而非近似猜測。

6. 06 Open Design 與 GitHub 或 Microsoft 有關聯嗎？ +

   沒有。GitHub Copilot CLI 是 GitHub 的產品；Open Design 是一個獨立的開源專案，以一等介面卡的方式支援它。GitHub Copilot 是 GitHub, Inc. 和 Microsoft 的商標。

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

   安全——Open Design 本地優先且採用 Apache-2.0。你的檔案、產物和 DESIGN.md 都留在你自己的倉庫裡，你的 GitHub Copilot 憑證由你的 agent 直接使用，絕不經 Open Design 伺服器路由。