102.7K+下载
Copilot OpenDesign

用 Copilot
在 OpenDesign
做设计。

如何在 OpenDesign 中使用 GitHub Copilot CLI 设计界面：以截图作为输入，复用你仓库中的组件，从 brief 到已审阅文件完成一个发布页任务，以及开始前需要了解的限制。

下载 OpenDesign 前往设置

COPILOT 设计的三个起点

为 Copilot 选择一个起点

本指南 · UI 设计

用 Copilot 构建产品界面

本指南包含：一份需求简报、参考图、设计规则，以及一份由你审阅的 HTML 产物。

阅读本指南 设置

从零配置 Copilot

从一台干净的机器，到 Copilot CLI 构建并验证 UI 的完整路径。

前往设置 对比

将 Copilot 与其他 Agent 对比

在设计工作上，Copilot 与 Codex、Claude Code 和 Cursor 有何不同——以及何时另一种工作流更合适。

查看对比
本页内容 示例
  1. 示例
  2. 适用场景
  3. 兼容性
  4. 环境搭建
  5. 工作流
  6. 资源
  7. 局限性
  8. 常见问题

一个完整的 Copilot 设计任务

一个 Copilot 设计任务：从需求简报到界面

一个任务走完它的完整轨迹：你交给 Copilot 的需求简报与约束、它返回的产物，以及在你认定完成之前仍需执行的检查。下方界面是为本页制作的示例——并非某次真实的 Copilot 运行记录。

1设计 Brief 与约束条件

Brief

参考附上的竞品截图，为一个 CLI 产品设计发布落地页：带安装命令的 hero 区域、三个功能模块和佐证要点。复用仓库中的组件。桌面端和手机端。

  • 设计系统仓库组件与 token；Albert Sans 字体，单一绿色强调色
  • 断点1440px 桌面端与 390px 移动端，无横向滚动
  • 交互安装命令复制、主 CTA 与次 CTA、锚点导航
  • 输出一个自包含的 HTML 文件，带有稳定的 data-od-id 挂钩

2谁做什么：你、Copilot 与 OpenDesign

  • 你

    撰写需求简报、选定设计系统并设定验收标准。

  • Copilot

    Copilot 规划布局，编写 HTML、CSS 和 JavaScript，并按请求修改。

  • OpenDesign

    OpenDesign 提供设计系统与 skill，渲染预览，并把每个版本作为文件保存在项目中。

  • 审查

    交付前，检查视觉层次、8px 网格上的间距、两个断点以及每一处交互。

3Copilot 产物：1440px 与 390px 下的发布页

Copilot 产物：1440px 与 390px 下的发布页 — 桌面端
示意性示例

4交付前审查

Layout

网格与间距

hero、功能与佐证共用 8px 网格；图像列绝不会把文案推到首屏以下。

Hierarchy

视觉层级

标题、安装命令，然后是功能区；强调色仅用于标记安装按钮。

Responsive

移动端布局

文字在前，图示在后，功能区堆叠排列；安装命令保持可复制。

Interaction

交互检查

复制命令，跟随两个 CTA，跳转到功能锚点。

Fit

Copilot 何时合适——何时不合适

Copilot 适用于

  • 截图 → UI。 选择一个强大的多模态模型，把参考图转成响应式标记，再把结果与该图对比。
  • 多模型选择。 使用 /model 按任务在来自 Anthropic、OpenAI 和 Google 的前沿模型之间切换，全部包含在你的 Copilot 订阅中。
  • 指令 + MCP。 诸如 .github/copilot-instructions.md 和 AGENTS.md 的自定义指令承载你的约定；Figma MCP 服务器把真实的设计上下文带入代码。
  • 深度 GitHub 集成。内置 GitHub MCP 服务器，可访问您的仓库、issue 和 PR，并使用您现有的 GitHub 账户进行身份验证。

选择其他工作流的场景

  • 你需要可编辑的矢量文件。 产物是 HTML，而非可编辑的设计文档。请查看其他矢量工作流以获取所需的资源格式。
  • 没有参考图也没有约束条件。 缺少设计系统或示例时，输出往往趋于千篇一律；请先写好 brief。
  • 您没有此 Agent 所需的凭据。所需：GitHub Copilot 订阅。OpenDesign 不提供也不代理凭据。
  • 你的团队使用 Codex 或 Claude Code。 这些 agent 各有自己的页面；工作区不变，但设置会变。参见 相关 agent。

兼容性

开始前的 Copilot 要求

本页介绍通过 OpenDesign 桌面应用接入的 Copilot。所引用的已发布资料核对于 2026 年 9 月 6 日。

工具范围Copilot，由 GitHub 提供

GitHub Copilot CLI 是 GitHub 原生的终端编码 agent，由与 Copilot 编码 agent 相同的 agentic harness 驱动。它会读取你的代码库、编辑文件、运行命令，并与你的 GitHub issues、PR 和仓库协同工作。本页讲的是通过 OpenDesign 用 Copilot 设计界面，而不是 Copilot 自身的界面。OpenDesign 的 设置说明 列出了可用的 agent。

账户与身份验证GitHub Copilot 订阅

GitHub Copilot 订阅。使用你的 GitHub Copilot 订阅进行身份验证——凭证保留在你的本机上。本页不承诺配额或价格。

系统与版本桌面应用或源码

请查看下载页面获取桌面版本。源码快速入门中的 Node.js 和 pnpm 要求适用于从源码运行，不适用于安装桌面软件包。此处未验证最低兼容 Copilot 版本。

连接检查成功的标志

按照你安装版本显示的连接说明操作，然后运行一个小任务。确认 Copilot 已处理该任务，且产物可以打开。仅完成下载并不代表已建立可用连接。

从桌面应用开始

三步完成 Copilot 设置

先下载，为你安装的版本完成 Copilot 设置，然后检查一个小结果。按此路径操作无需从源码构建 OpenDesign。

  1. 1

    下载 OpenDesign 桌面应用

    选择适合您电脑的软件包，安装并打开该应用。

    下载 OpenDesign
    检查点
    桌面应用会打开。已经安装过？请进入下一步；无需再次下载。
  2. 2

    准备你的 Copilot 连接

    按照你安装版本中的 Copilot 说明操作。使用你的 GitHub Copilot 订阅进行身份验证——凭证保留在你的本机上。

    使用 GitHub Copilot CLI 
    # 1. Install Copilot CLI (Node.js required)
npm install -g @github/copilot

# 2. Start it in your project and authenticate on first run
cd your-project
copilot           # run /login and follow the prompts to sign in

    摘自已发布指南中的 Copilot 设置说明；请查阅供应商文档以获取当前命令。

    检查点
    确认目标 Agent 与账户。如果不可用，请在尝试更大任务之前先检查兼容性。
  3. 3

    运行一个小型 Copilot 任务

    从一个足够小的需求简报开始，以便判断整个闭环，其中包括一次修改。

    入门 brief

    构建一个设置页面，包含个人资料表单和保存确认提示。使用我的设计规则。在桌面和移动端宽度下进行检查。

    检查点
    打开结果，测试保存状态并提出一处具体修改。生成的文件只是开启评审；它并不终结评审。

若要从源代码运行 OpenDesign，请参阅技术快速入门。

Copilot 设计工作流

Copilot CLI 设计任务的五个步骤

一个发布页，从最初的需求简报一直追踪到你已审阅的文件。每一步都列出你的输入、Copilot CLI 的工作、OpenDesign 的部分，以及你仍需完成的检查。

  1. 1

    设计 Brief

    用平实的语言写需求简报，三到六行。说明它是给谁的、这个屏幕必须做什么，以及哪些平台重要。

    • 您你撰写需求简报，并在有参考截图时附上它。
    • CopilotCopilot CLI 读取需求简报和仓库的指令文件——自定义指令与 AGENTS.md——并在有歧义时提问。
    • OpenDesignOpenDesign 提供项目、提示界面以及针对该产物类型的 skill。
    • 检查你确认需求简报中写明了验收标准。在生成之前敲定它们，成本低于事后追加。
  2. 2

    设计约束

    设计系统和明确的规则，才是让 Copilot CLI 不至于退回默认外观的关键。

    • 您你选择设计系统、指明断点，并标出必须出现的任何组件。
    • CopilotCopilot CLI 在写下一行之前，先把 DESIGN.md 的 token 和姿态规则拉入上下文。
    • OpenDesignOpenDesign 提供设计系统库，并把所选系统绑定进 skill 模板。
    • 检查检查 token 是否与你的品牌一致：单一强调色、预期的字体、预期的圆角。
  3. 3

    生成界面

    Copilot CLI 写出一份自包含的 HTML 产物：布局、样式、交互和稳定的钩子。

    • 您你等待，或回答一个澄清问题。这里没有什么需要配置的。
    • CopilotCopilot CLI 规划各个区块，编写 HTML、CSS 和 JavaScript，运行该文件并修复失败之处。
    • OpenDesignOpenDesign 把产物存入项目文件夹，并为预览建立索引。
    • 检查暂时没有。要在文件渲染之后再评判，而不是看源码判断。
  4. 4

    预览

    文件会在你要求的宽度下于 OpenDesign 中渲染。设计正是在这里被评判。

    • 你你切换宽度、试用交互，并在元素上留下评论。
    • CopilotCopilot CLI 读取你在预览上的评论，并准备下一版修改。
    • OpenDesignOpenDesign 渲染预览，并暴露 data-od-id 目标，供评论和编辑使用。
    • 检查你检查层次、对比度、390px 下的溢出、聚焦状态，以及强调色是否用得克制。
  5. 5

    修订与验证

    在预览中指向元素来提出修改。每次修订都以新文件的形式出现；不会在无提示的情况下覆盖任何内容。

    • 你你把评论转化为请求，并决定任务何时完成。
    • CopilotCopilot CLI 就地应用更改，并重新运行该文件。
    • OpenDesignOpenDesign 把各版本并排保留，并在你完成时导出图片或 HTML。
    • 检查你只复查改动的区域，然后在每个断点上完整检查一次整页。

资源

Copilot 设计资源

Skills

设计 Skill

Copilot 在 OpenDesign 中产出的产物类型，每种类型对应一个 skill。

浏览 skill 设计系统

设计系统

在 Copilot 生成文件之前需要绑定的品牌 token 和组件。

浏览系统 模板

模板

用于起步演示文稿、落地页和产品界面的模板。

浏览模板

限制

Copilot 的局限、你要做的检查与回退方案

  • 范围Copilot CLI 会自动读取自定义指令文件和 AGENTS.md，你也可以按任务在来自 Anthropic、OpenAI 和 Google 的前沿模型之间切换。本页讲的是作为接入 OpenDesign 的 agent 的 Copilot，而不是 Copilot 的每一项功能。
  • 使用限额使用限制和费用取决于你所使用的凭据——GitHub Copilot 订阅。本页不对免费配额作任何声明。
  • 网络本地项目文件并不意味着离线推理。在共享敏感输入之前，请检查你的智能体的提供商设置和数据政策。
  • 输出为 HTML产物以 HTML 文件形式交付，而非矢量设计文件。
  • 人工审查你在预览中审查无障碍性、真实内容、品牌契合度以及交互正确性。把智能体自检只当作第一遍检查。
  • 后备方案如果智能体不可用或任务失败，请检查所安装版本的连接说明和身份验证。在更改配置之前，请保留错误信息和最后一个可正常工作的产物。

常见问题

关于 Copilot 与 OpenDesign 的常见问题

GitHub Copilot CLI 真的能胜任设计工作吗？
可以——在有审美 skill、设计系统以及上下文中真实参考图像的情况下，Copilot CLI 能产出生产级质量的响应式 UI，你还可以选择最能对照参考图验证输出的模型。缺少这些上下文时，它往往会默认走通用风格，而这正是 OpenDesign 要填补的空缺。
用 Copilot CLI 做设计需要订阅吗？
需要——Copilot CLI 依赖有效的 GitHub Copilot 订阅（Pro、Pro+、Business 或 Enterprise）运行；它不支持自带密钥（BYOK）。你使用 GitHub 账户进行身份验证。OpenDesign 从不代理你的凭据——你的 Agent 直接使用你的订阅。
是什么让 Copilot CLI 非常适合设计？
两点：它会自动读取仓库指令和 AGENTS.md，因此你的设计规范可以随仓库一起传递；并且它允许你按任务在 Anthropic、OpenAI 和 Google 的前沿模型之间切换。这两点都有帮助——但审美仍然来自你提供的设计系统、skill 和参考资料。
前端设计该选哪个：Copilot CLI 还是 Claude Code？
两者都很出色。Claude Code 以贴合具体代码库的设计决策著称；Copilot CLI 的优势在于跨供应商的模型选择，以及基于你可能已有的订阅所提供的深度 GitHub 集成。许多团队会同时使用两者——OpenDesign 让你在不改变设计工作流的情况下切换 Agent。
将 Copilot CLI 连接到 Figma
使用 /mcp add 命令添加 Figma MCP 服务器；设置存储在 ~/.copilot 下的 mcp-config.json 中。这样 Copilot 就能获取真实的设计上下文——组件、变量、布局数据——使生成的代码与源设计一致，而不是近似。
GitHub Copilot CLI 究竟是什么
GitHub Copilot CLI 是 GitHub 的终端原生编码智能体。它会读取你的仓库、编辑文件、运行 shell 命令，并直接基于你的 GitHub 上下文——issue、pull request 和仓库——工作，使用你现有的 GitHub 账号进行身份验证。它由与 GitHub 的 Copilot 编码智能体相同的智能体框架驱动，因此它会对复杂任务进行规划并反复迭代，而不只是补全几行代码。它在 2025 年 9 月开启公开预览后，于 2026 年 2 月正式全面可用。

就设计工作而言，有两个特性尤为突出。它会读取自定义指令文件——仓库级的规则放在 .github/copilot-instructions.md 中，再加上 AGENTS.md——因此你的设计规范会在每次运行时被自动纳入。并且它支持多个基础模型供应商，所以你可以用 /model 命令按任务切换模型，选用对某个特定 UI 推理最佳的模型。

指令文件：Copilot CLI 会读取 .github/copilot-instructions.md 中的仓库指令、.github/instructions 下的路径专属文件，以及 AGENTS.md——这是编码你的设计规范、token 和评审清单的天然位置。

内置工具 + MCP：它内置了 GitHub 的 MCP 服务器，并运行文件与 shell 工具，你还可以通过 /mcp add 添加自定义 MCP 服务器（存储在 ~/.copilot 下的 mcp-config.json 中），以接入诸如实时 Figma 文件之类的外部上下文。

模型选择：使用 /model 命令在来自 Anthropic、OpenAI 和 Google 的前沿模型中进行挑选——按任务切换，全部在你现有的 Copilot 订阅内完成。

凭证：一个有效的 GitHub Copilot 订阅（Pro、Pro+、Business 或 Enterprise）

安装：npm install -g @github/copilot，然后运行 copilot

厂商：GitHub
为什么仓库指令和模型选择契合设计
Copilot CLI 在设计上的优势来自两个特性——但和所有智能体一样，品味仍然需要由你来提供。

随仓库一同流转的规范：由于 Copilot CLI 会自动读取 .github/copilot-instructions.md 和 AGENTS.md，你的 token、基础组件和评审规则在每次运行时都处于上下文中——智能体是围绕某个品牌在工作，而不是套用默认外观。

按任务挑选合适的模型：在 Anthropic、OpenAI 和 Google 之间进行模型选择，意味着你可以取用对某种特定布局推理最佳的模型，然后为下一个任务再切换——而无需改变你的工作流。

通过 MCP 获取真实规格：内置的 GitHub MCP 服务器加上一个 Figma MCP 服务器，把智能体指向你的 token、组件和真实规格，因此它是从源头构建，而不是近似仿制。

品味来自你提供的三类输入：一套设计系统、一项技能，以及真实的参考图。

这里的道理和每个智能体所教导的一样：Copilot CLI 默认没有品味。当你给它约束时——一套设计系统、一项美学技能和具体的参考——它才能产出好的设计。OpenDesign 恰好打包了这些输入，这正是二者契合的原因（详见下文）。
从零开始为设计工作设置 Copilot CLI
配置顺序：安装 → 身份验证 → 选择模型 → 编写指令 → 启用浏览器验证。

编码你的设计规则：把你的 token、基础组件和规范放进 .github/copilot-instructions.md 或 AGENTS.md，这样输出就会匹配某个品牌，而不是默认落入千篇一律的外观。

加入浏览器验证：接入 Playwright 或浏览器 MCP，让 Copilot 在真实浏览器中渲染并在各断点检查其输出，而不只是确认构建通过。

请使用当前的配置章节获取命令和特定版本的细节，这些内容可能会变化。

# 1. Install Copilot CLI (Node.js required) npm install -g @github/copilot # 2. Start it in your project and authenticate on first run cd your-project copilot # run /login and follow the prompts to sign in # 3. Choose a model for the task # inside the session: /model # pick a frontier model from Anthropic, OpenAI, or Google # 4. Add custom instructions and the Figma MCP server (optional) # write .github/copilot-instructions.md or AGENTS.md /mcp add # add the Figma MCP server for design handoff
这是上一版指南中的历史命令示例；请在所链接的厂商文档中核实当前语法。
从截图到 UI 的工作流
使用 Copilot CLI 时，杠杆率最高的设计循环是把一张参考图变成可用的响应式 UI，并不断迭代直到它与之匹配——借助一个强大的多模态模型将输出与参考图进行比对。

从你手头最清晰的视觉参考开始——并且包含多种状态（桌面端与移动端、悬停、空状态、加载中），而不只是一张主视觉图。

在提示词中要具体；模糊的提示词即便配上强大的模型也只会产出千篇一律的 UI。

把你的设计系统和规范保留在 .github/copilot-instructions.md 或 AGENTS.md 中，并告诉 Copilot token 和规范基础组件位于何处。

运行一个开发服务器，让 Copilot 在真实浏览器中渲染，并调整到各断点大小来检查结果。

通过让 Copilot 把其实现与截图进行比对的迭代方式——而不只是确认它能构建通过。

把 Copilot 指向你的参考图并给出具体约束；它会在运行前预览每一次文件编辑或命令，等待你批准：

保持提示词小而聚焦，提交好的迭代、回退差的迭代（并在回退时告知 Copilot），这样每一轮都建立在干净的基础之上。

copilot # in the 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.
这是上一版指南中的历史命令示例；请在所链接的厂商文档中核实当前语法。
自定义指令、MCP 与扩展
有三个扩展点让 Copilot CLI 适合持续的设计工作，而这三者都能干净地映射到一套开放的设计工作流上。

自定义指令：仓库规则放在 .github/copilot-instructions.md 中（路径专属文件放在 .github/instructions 和 AGENTS.md 下）。它们是你设计规范的持久归宿，每次运行都会自动纳入。

MCP 服务器：Copilot CLI 内置了 GitHub 的 MCP 服务器，并允许你通过 /mcp add 添加自定义服务器（存储在 ~/.copilot 下的 mcp-config.json 中）——这是引入设计上下文的可移植方式，其中最有实用价值的是 Figma MCP 服务器，它可跨智能体使用，而不只是 Copilot。

专用智能体与内置工具：Copilot CLI 的专用模式——用于代码库探索、运行构建与测试、变更评审以及规划——加上它的文件与 shell 工具，让它在不离开终端的情况下就能收集参考资料并运行验证循环。

这些都是可移植、多智能体层面的能力——正是 OpenDesign 生来要去编排、而非每个项目重新造一遍的那类东西。
设计用途上 Copilot CLI 与 Codex、Claude Code、Cursor、Gemini CLI 的对比
设计工作没有唯一的赢家——每个智能体各有不同的长处，经验丰富的团队会把它们叠加使用。一个公允的总结：

Copilot CLI — 多模型选择（Anthropic、OpenAI、Google）以及在你的 Copilot 订阅内深度集成 GitHub — 按任务挑选最佳模型，以及与你 GitHub 仓库绑定的、由指令驱动的工作

Codex — 借助前端技能实现出色的视觉打磨；沙箱化的异步构建 — 委派式异步构建与可移植的 AGENTS.md 规则

Claude Code — 具体的设计决策（色值、间距、字体）以及具备代码库感知的 UX — 前端推理与大规模上下文重构

Cursor — 带实时预览与内联编辑的可视化构建—观察循环 — 在 IDE 内进行紧密的迭代—观察式 UI 工作

Gemini CLI — 强大的多模态图像理解与 100 万 token 的上下文；开源且有免费额度 — 截图密集的工作以及在上下文中容纳整套设计系统

社区反复得出的结论是：品味来自人类——如果没有技能、参考和约束，它们全都默认套用千篇一律的美学。这才是真正要解决的问题——而它是设计工具层面的问题，不是模型层面的问题。

智能体 — 设计长处 — 最适合用于
常见陷阱，以及如何避免“AI 味”的观感
关于 AI 生成设计最常见的抱怨是它看起来千篇一律——柔和的渐变、悬浮的面板、过大的圆角、夸张的阴影，一种 Inter 字体加紫色的气质，让人一眼就“看得出是 AI 做的”。其他被报告的问题还包括移动端布局错乱，以及指令泄漏到 UI 文案中。这些都不是 Copilot CLI 独有的；任何智能体在缺乏精心策划的设计上下文时运行时，都会发生这种情况。

加入一项美学技能：一项精心打磨的设计技能会迫使智能体投身于一个真正的方向，而不是默认外观。

在真实浏览器中验证：借助浏览器 MCP 在各断点渲染并自检，这样布局就不会在移动端悄悄崩掉。

提供 token 与参考：真实的设计 token 和参考截图是影响输出质量最大的单一杠杆。

把规则编码进自定义指令：把“不要主视觉卡片、最多两种字体、品牌优先的层级”这类规则放进 .github/copilot-instructions.md 或 AGENTS.md，也就是智能体每次运行都会读取的地方。

请注意，每一项缓解措施都关乎为智能体提供精心策划的设计上下文。而逐个项目手工维护这份上下文，正是 OpenDesign 要消除的苦差事。
在 OpenDesign 内用 Copilot CLI 做设计
OpenDesign 就是上文工作流一再呼唤的那层开源设计层。它把 GitHub Copilot CLI 作为一等适配器对待，并将其包裹在一套精心策划的技能与设计系统库、一条结构化的渲染流水线，以及一个本地桌面 UI 之中——因此让 Copilot 表现出色的那份设计上下文从第一次运行起就已存在，而非每次手工拼装。OpenDesign 是独立的、开源的（Apache-2.0）且本地优先的，这正是这组搭配契合的原因：智能体负责干活，而你的文件和凭证始终归你所有。

安装 OpenDesign 并选择 GitHub Copilot CLI 作为你的智能体。

使用你的 GitHub Copilot 订阅进行身份验证——凭证留在你的机器上，绝不通过我们代理。

挑选一套设计系统和一项技能，然后生成风格一致的演示文稿、原型和落地页。

每一份产出物和 DESIGN.md 文件都存放在你自己的仓库中，而不是托管在云上。

同样的 Copilot CLI 智能体、同样的订阅——外加围绕它的一套真实、可移植、开源的设计工作流。OpenDesign 是本地优先且采用 Apache-2.0 许可的，因此关于你工作的一切和你的凭证都不会离开你的机器。
OpenDesign 与 GitHub 或 Microsoft 有关联吗？
没有。OpenDesign 是独立的；GitHub Copilot 是 GitHub, Inc. 和 Microsoft 的商标。