用 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 服务器路由。