FURTHER READING
Further Reading for Copilot
Tutorials, documentation and walkthroughs for design work with Copilot, as listed in the published guide.
Copilot 
OpenDesign Design With
Copilot in
OpenDesign.
How to design interfaces with GitHub Copilot CLI in OpenDesign: a screenshot as the input, your repository’s components reused, one launch-page task from brief to reviewed file, and the limits to know before you start.
From brief to interface01 / Copilot
YOU BRING THE IDEA↗
“A launch page built from
the screenshot, with our components.”
THREE STARTING POINTS FOR COPILOT DESIGN
Choose a Starting Point for Copilot
THIS GUIDE · UI DESIGN
Build a Product Interface With Copilot
In this guide: a brief, reference images, design rules and an HTML artifact you review.
Read this guide SETUPSet Up Copilot From Zero
The complete path from a clean machine to Copilot CLI building and verifying UI.
Go to setup COMPARISONCompare Copilot With Other Agents
Where Copilot diverges from Codex, Claude Code and Cursor on design work—and when another workflow fits better.
See the comparisonOn This Page Example
One Complete Copilot Design Task
One Copilot Design Task: Brief Through Interface
One task traced across its full arc: the brief and constraints you give Copilot, the artifact it returns, and the checks you still run before it is done. The interface below is an illustrative example made for this page—not a recorded Copilot run.
1Design Brief and Constraints
BriefUsing the attached competitor screenshot, design the launch landing page for a CLI product: hero with install command, three feature blocks and proof points. Reuse the repository’s components. Desktop and phone.
- Design systemRepository components and tokens; Albert Sans, one green accent
- Breakpoints1440px desktop and 390px mobile, no horizontal scroll
- InteractionsInstall command copy, primary and secondary CTA, anchor navigation
- OutputOne self-contained HTML file with stable
data-od-idhooks
2Who Does What: You, Copilot and OpenDesign
- You
Write the brief, pick the design system and set the acceptance criteria.
- Copilot
Copilot plans the layout, writes HTML, CSS and JavaScript, and revises on request.
- OpenDesign
OpenDesign provides the design system and skill, renders the preview and stores every version as a file in the project.
- Review
Before handoff, check visual hierarchy, spacing on the 8px grid, both breakpoints and every interaction.
3Copilot Artifact: Launch Page at 1440px and 390px
4Review Before Handoff
Layout
Grid and Spacing
Hero, features and proof share the 8px grid; the art column never pushes copy below the fold.
Hierarchy
Visual Hierarchy
Headline, install command, then features; the accent marks the install button only.
Responsive
Mobile Layout
Copy first, art second, features stacked; the install command stays copyable.
Interaction
Interaction Checks
Copy the command, follow both CTAs, jump to a feature anchor.
Fit
When Copilot Fits—and When It Does Not
Copilot Fits When
- Screenshot → UI. Choose a strong multimodal model, turn a reference image into responsive markup, then compare the result against that image.
- Multi-model choice. Use /model to switch among frontier models from Anthropic, OpenAI, and Google per task, all on your Copilot subscription.
- Instructions + MCP. Custom instructions such as .github/copilot-instructions.md and AGENTS.md carry your conventions; the Figma MCP server brings real design context into code.
- Deep GitHub integration. Built-in GitHub MCP server and access to your repos, issues, and PRs, authenticated with your existing GitHub account.
Choose Another Workflow When
- You need editable vector files. The artifact is HTML, not an editable design document. Check a separate vector workflow for your required asset format.
- You have no reference and no constraints. Without a design system or examples the output tends toward a generic look; write the brief first.
- You do not have the credential this agent needs. Required: GitHub Copilot subscription. OpenDesign does not provide or proxy credentials.
- Your team works in Codex or Claude Code. Those agents have their own pages; the workspace does not change, but setup does. See related agents.
Compatibility
Copilot Requirements Before You Start
This page covers Copilot as connected through the OpenDesign desktop app. Published references checked on 6 September 2026.
Tool ScopeCopilot, by GitHub
GitHub Copilot CLI is GitHub's terminal-native coding agent, powered by the same agentic harness as the Copilot coding agent. It reads your codebase, edits files, runs commands, and works with your GitHub issues, PRs, and repositories. This page is about designing interfaces with Copilot through OpenDesign, not about Copilot’s own interface. OpenDesign’s setup notes list the available agents.
Accounts and AuthenticationGitHub Copilot subscription
GitHub Copilot subscription. Authenticate with your GitHub Copilot subscription — credentials stay on your machine. This page does not promise a quota or price.
System and VersionsDesktop app or source
Check the download page for desktop builds. The Node.js and pnpm requirements in the source quickstart apply to running from source, not to installing a desktop package. Minimum compatible Copilot version: not verified here.
Connection CheckThe success signal
Follow the connection instructions shown by your installed version, then run a small task. Confirm that Copilot handled it and that the artifact opens. A download alone does not establish a working connection.
Start with the desktop app
Copilot Setup in Three Steps
Download first, complete the Copilot setup for your installed version, then check a small result. You do not need to build OpenDesign from source to follow this path.
- 1
Download the OpenDesign Desktop App
Choose the package for your computer, install it and open the app.
Download OpenDesignCHECKPOINTThe desktop app opens. Already installed? Move to the next step; there is no need to download again. - 2
Prepare Your Copilot Connection
Follow the Copilot instructions in your installed version. Authenticate with your GitHub Copilot subscription — credentials stay on your machine.
Using 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 inFrom the Copilot setup notes in the published guide; check the vendor documentation for the current command.
CHECKPOINTConfirm the intended agent and account. If it is unavailable, check compatibility before trying a larger task. - 3
Run One Small Copilot Task
Start with a brief small enough to judge the whole loop, including one revision.
Starter briefBuild a settings screen with a profile form and a save confirmation. Use my design rules. Check it at desktop and mobile widths.
CHECKPOINTOpen the result, test the save state and request one specific change. A generated file opens review; it does not close it.
To run OpenDesign from source, follow the technical quickstart instead.
The Copilot design workflow
Five Steps Through a Copilot CLI Design Task
One launch page, traced from the first brief to a file you have reviewed. Every step sets out your input, Copilot CLI’s work, OpenDesign’s part and the check you still owe.
- 1
Design Brief
Write the brief in plain language, three to six lines. Say who it is for, what the screen must do and which platforms matter.
- YouYou write the brief and attach a reference screenshot when one exists.
- CopilotCopilot CLI reads the brief and the repository’s instruction files — custom instructions and AGENTS.md — and asks when something is ambiguous.
- OpenDesignOpenDesign supplies the project, the prompt surface and the skill for the artifact type.
- CheckYou confirm the brief names the acceptance criteria. Settling them before generation costs less than adding them afterward.
- 2
Design Constraints
A design system and firm rules are what keep Copilot CLI from falling back to a default look.
- YouYou choose a design system, name the breakpoints and flag any component that must appear.
- CopilotCopilot CLI pulls the DESIGN.md tokens and posture rules into context before it writes a line.
- OpenDesignOpenDesign ships the design-system library and binds the chosen system into the skill template.
- CheckCheck that tokens match your brand: one accent, the intended fonts, the intended radius.
- 3
Generate the Interface
Copilot CLI writes a self-contained HTML artifact: layout, styles, interactions and stable hooks.
- YouYou wait, or answer a clarifying question. There is nothing to configure here.
- CopilotCopilot CLI plans the sections, writes the HTML, CSS and JavaScript, runs the file and repairs what fails.
- OpenDesignOpenDesign stores the artifact in the project folder and indexes it for preview.
- CheckNothing yet. Judge the file once it renders, not from the source.
- 4
Preview
The file renders in OpenDesign at the widths you requested. This is where the design gets judged.
- YouYou switch widths, exercise the interactions and leave comments on elements.
- CopilotCopilot CLI reads your comments on the preview and prepares the next revision.
- OpenDesignOpenDesign renders the preview and exposes
data-od-idtargets for comments and edits. - CheckYou check hierarchy, contrast, overflow at 390px, focus states and whether the accent is used sparingly.
- 5
Revise and Verify
Ask for changes by pointing at elements in the preview. Each revision arrives as a new file; nothing is overwritten without notice.
- YouYou turn comments into requests and decide when the task is done.
- CopilotCopilot CLI applies the changes in place and re-runs the file.
- OpenDesignOpenDesign keeps versions side by side and exports an image or the HTML when you are done.
- CheckYou re-check only the changed area, then the whole page once at each breakpoint.
Resources
Copilot Design Resources
Skills Browse skills Design systems Browse systems Templates Browse templates
Design Skills
The artifact types Copilot produces in OpenDesign, with one skill for each type.
Design Systems
Brand tokens and components to bind before Copilot generates a file.
Templates
Templates to start decks, landing pages and product screens.
Limitations
Copilot Limits, the Checks You Run and Fallbacks
- ScopeCopilot CLI reads custom instruction files and AGENTS.md automatically, and you can switch among frontier models from Anthropic, OpenAI, and Google per task. This page is about Copilot as an agent connected to OpenDesign, not every Copilot feature.
- Usage LimitsUsage limits and cost follow the credential you use — a GitHub Copilot subscription. This page makes no claim about free quotas.
- NetworkLocal project files do not mean offline inference. Check your agent’s provider settings and data policies before you share sensitive inputs.
- Output Is HTMLArtifacts arrive as HTML files, not vector design files.
- Manual ReviewYou review accessibility, real content, brand fit and interaction correctness in the preview. Treat an agent self-check as a first pass only.
- FallbackIf the agent is unavailable or a task fails, check the connection instructions and authentication for the installed version. Preserve the error and the last working artifact before you change configuration.
FAQ
Common Questions About Copilot and OpenDesign
Can GitHub Copilot CLI Really Do Design Work?
Yes — with an aesthetic skill, a design system, and real reference images in context, Copilot CLI produces production-quality, responsive UI, and you can pick the model that verifies output best against references. Without that context it tends to default to a generic look, which is the gap OpenDesign fills.
Do I Need a Subscription to Design With Copilot CLI?
Yes — Copilot CLI runs on an active GitHub Copilot subscription (Pro, Pro+, Business, or Enterprise); it is not bring-your-own-key. You authenticate with your GitHub account. OpenDesign never proxies your credentials — your subscription is used directly by your agent.
What Makes Copilot CLI Well Suited to Design?
Two things: it reads repository instructions and AGENTS.md automatically, so your design conventions travel with the repo; and it lets you switch among frontier models from Anthropic, OpenAI, and Google per task. Both help — but taste still comes from the design system, skill, and references you supply.
For Frontend Design: Copilot CLI or Claude Code?
Both are strong. Claude Code is known for specific, codebase-aware design decisions; Copilot CLI's edge is model choice across providers and deep GitHub integration on a subscription you may already have. Many teams use both — OpenDesign lets you switch agents without changing your design workflow.
Connecting Copilot CLI to Figma
Add the Figma MCP server with the /mcp add command; settings are stored in mcp-config.json under ~/.copilot. Copilot can then pull real design context — components, variables, layout data — so the generated code matches the source instead of approximating it.
What GitHub Copilot CLI actually is
GitHub Copilot CLI is GitHub's terminal-native coding agent. It reads your repository, edits files, runs shell commands, and works directly with your GitHub context — issues, pull requests, and repositories — authenticated with your existing GitHub account. It is powered by the same agentic harness as GitHub's Copilot coding agent, so it plans complex tasks and iterates rather than just completing lines. It reached general availability in February 2026 after a public preview that opened in September 2025.
For design work, two properties stand out. It reads custom instruction files — repository-wide rules in .github/copilot-instructions.md plus AGENTS.md — so your design conventions are included automatically on every run. And it supports multiple foundation-model providers, so you can switch the model per task with the /model command to whichever reasons best about a given UI.
Instruction files: Copilot CLI reads repository instructions in .github/copilot-instructions.md, path-specific files under .github/instructions, and AGENTS.md — the natural place to encode your design conventions, tokens, and review checklists.
Built-in tools + MCP: It ships with GitHub's MCP server built in and runs file and shell tools, and you can add custom MCP servers with /mcp add (stored in mcp-config.json under ~/.copilot) for external context like a live Figma file.
Model choice: Use the /model command to pick among frontier models from Anthropic, OpenAI, and Google — switching per task, all on your existing Copilot subscription.
Credential: an active GitHub Copilot subscription (Pro, Pro+, Business, or Enterprise)
Install: npm install -g @github/copilot, then run copilot
Vendor: GitHub
For design work, two properties stand out. It reads custom instruction files — repository-wide rules in .github/copilot-instructions.md plus AGENTS.md — so your design conventions are included automatically on every run. And it supports multiple foundation-model providers, so you can switch the model per task with the /model command to whichever reasons best about a given UI.
Instruction files: Copilot CLI reads repository instructions in .github/copilot-instructions.md, path-specific files under .github/instructions, and AGENTS.md — the natural place to encode your design conventions, tokens, and review checklists.
Built-in tools + MCP: It ships with GitHub's MCP server built in and runs file and shell tools, and you can add custom MCP servers with /mcp add (stored in mcp-config.json under ~/.copilot) for external context like a live Figma file.
Model choice: Use the /model command to pick among frontier models from Anthropic, OpenAI, and Google — switching per task, all on your existing Copilot subscription.
Credential: an active GitHub Copilot subscription (Pro, Pro+, Business, or Enterprise)
Install: npm install -g @github/copilot, then run copilot
Vendor: GitHub
Why repository instructions and model choice fit design
Copilot CLI's design edge comes from two properties — but, as with every agent, taste still has to be supplied.
Conventions that travel with the repo: Because Copilot CLI reads .github/copilot-instructions.md and AGENTS.md automatically, your tokens, primitives, and review rules are in context on every run — the agent works against a brand instead of a default look.
Pick the right model per task: Model choice across Anthropic, OpenAI, and Google means you can reach for the model that reasons best about a given layout, then switch for the next task — without changing your workflow.
Real specs via MCP: The built-in GitHub MCP server plus a Figma MCP server point the agent at your tokens, components, and real specs, so it builds from source instead of approximating.
Taste comes from three inputs you provide: a design system, a skill, and real reference images.
The lesson is the same one every agent teaches: Copilot CLI does not have taste by default. It produces good design when you give it constraints — a design system, an aesthetic skill, and concrete references. OpenDesign packages exactly those inputs, which is why the two fit together (more below).
Conventions that travel with the repo: Because Copilot CLI reads .github/copilot-instructions.md and AGENTS.md automatically, your tokens, primitives, and review rules are in context on every run — the agent works against a brand instead of a default look.
Pick the right model per task: Model choice across Anthropic, OpenAI, and Google means you can reach for the model that reasons best about a given layout, then switch for the next task — without changing your workflow.
Real specs via MCP: The built-in GitHub MCP server plus a Figma MCP server point the agent at your tokens, components, and real specs, so it builds from source instead of approximating.
Taste comes from three inputs you provide: a design system, a skill, and real reference images.
The lesson is the same one every agent teaches: Copilot CLI does not have taste by default. It produces good design when you give it constraints — a design system, an aesthetic skill, and concrete references. OpenDesign packages exactly those inputs, which is why the two fit together (more below).
Setting Up Copilot CLI for Design Work From Scratch
The setup sequence: install → authenticate → choose a model → write instructions → enable browser verification.
Encode your design rules: Put your tokens, primitives, and conventions in .github/copilot-instructions.md or AGENTS.md, so output matches a brand instead of defaulting to a generic look.
Add browser verification: Wire a Playwright or browser MCP so Copilot renders in a real browser and checks its output across breakpoints instead of only confirming the build passes.
Use the current setup section for commands and version-specific details, which may change.
Historical command example from the previous guide; verify current syntax in the linked vendor documentation.
Encode your design rules: Put your tokens, primitives, and conventions in .github/copilot-instructions.md or AGENTS.md, so output matches a brand instead of defaulting to a generic look.
Add browser verification: Wire a Playwright or browser MCP so Copilot renders in a real browser and checks its output across breakpoints instead of only confirming the build passes.
Use the current setup section for commands and version-specific details, which may change.
# 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 handoffHistorical command example from the previous guide; verify current syntax in the linked vendor documentation.
The screenshot-to-UI workflow
The highest-leverage design loop with Copilot CLI is turning a reference image into working, responsive UI and iterating until it matches — leaning on a strong multimodal model to compare output back to the reference.
Start from the clearest visual references you have — and include multiple states (desktop and mobile, hover, empty, loading), not just one hero shot.
Be specific in the prompt; vague prompts produce generic UI even with a strong model.
Keep your design system and conventions in .github/copilot-instructions.md or AGENTS.md, and tell Copilot where the tokens and canonical primitives live.
Run a dev server and have Copilot render in a real browser, resizing to breakpoints to check the result.
Iterate by having Copilot compare its implementation back to the screenshots — not merely confirm it builds.
Point Copilot at your reference images and give concrete constraints; it previews each file edit or command for your approval before it runs:
Keep prompts small and focused, commit good iterations and revert bad ones (telling Copilot when you revert), so each pass builds on a clean base.
Historical command example from the previous guide; verify current syntax in the linked vendor documentation.
Start from the clearest visual references you have — and include multiple states (desktop and mobile, hover, empty, loading), not just one hero shot.
Be specific in the prompt; vague prompts produce generic UI even with a strong model.
Keep your design system and conventions in .github/copilot-instructions.md or AGENTS.md, and tell Copilot where the tokens and canonical primitives live.
Run a dev server and have Copilot render in a real browser, resizing to breakpoints to check the result.
Iterate by having Copilot compare its implementation back to the screenshots — not merely confirm it builds.
Point Copilot at your reference images and give concrete constraints; it previews each file edit or command for your approval before it runs:
Keep prompts small and focused, commit good iterations and revert bad ones (telling Copilot when you revert), so each pass builds on a clean base.
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.Historical command example from the previous guide; verify current syntax in the linked vendor documentation.
Custom instructions, MCP, and extensions
Three extension points make Copilot CLI practical for sustained design work, and all three map cleanly onto an open design workflow.
Custom instructions: Repository rules live in .github/copilot-instructions.md (with path-specific files under .github/instructions and AGENTS.md). They are the durable home for your design conventions, included automatically on every run.
MCP servers: Copilot CLI ships with GitHub's MCP server built in and lets you add custom servers via /mcp add (stored in mcp-config.json under ~/.copilot) — the portable way to bring in design context, most relevantly the Figma MCP server, that works across agents, not just Copilot.
Specialized agents and built-in tools: Copilot CLI's specialized modes — for codebase exploration, running builds and tests, change review, and planning — plus its file and shell tools let it gather references and run the verification loop without leaving the terminal.
These are portable, multi-agent capabilities — exactly the kind of thing OpenDesign is built to orchestrate, rather than re-create per project.
Custom instructions: Repository rules live in .github/copilot-instructions.md (with path-specific files under .github/instructions and AGENTS.md). They are the durable home for your design conventions, included automatically on every run.
MCP servers: Copilot CLI ships with GitHub's MCP server built in and lets you add custom servers via /mcp add (stored in mcp-config.json under ~/.copilot) — the portable way to bring in design context, most relevantly the Figma MCP server, that works across agents, not just Copilot.
Specialized agents and built-in tools: Copilot CLI's specialized modes — for codebase exploration, running builds and tests, change review, and planning — plus its file and shell tools let it gather references and run the verification loop without leaving the terminal.
These are portable, multi-agent capabilities — exactly the kind of thing OpenDesign is built to orchestrate, rather than re-create per project.
Copilot CLI vs Codex vs Claude Code vs Cursor vs Gemini CLI for design
There is no single winner for design work — each agent has a different strength, and experienced teams stack them. A fair summary:
Copilot CLI — Multi-model choice (Anthropic, OpenAI, Google) and deep GitHub integration on your Copilot subscription — Picking the best model per task and instruction-driven work tied to your GitHub repo
Codex — Strong visual polish with a frontend skill; sandboxed async builds — Delegated async builds and portable AGENTS.md rules
Claude Code — Specific design decisions (hex, spacing, type) and codebase-aware UX — Frontend reasoning and large-context refactors
Cursor — Visual build-and-see loop with live preview and inline edits — Tight iterate-and-watch UI work inside an IDE
Gemini CLI — Strong multimodal image understanding and a 1M-token context; open-source with a free tier — Screenshot-heavy work and holding a whole design system in context
The recurring community verdict is that taste comes from humans: all of them default to a generic aesthetic without skills, references, and constraints. That is the real problem to solve — and it is design-tool-shaped, not model-shaped.
Agent — Design strength — Best for
Copilot CLI — Multi-model choice (Anthropic, OpenAI, Google) and deep GitHub integration on your Copilot subscription — Picking the best model per task and instruction-driven work tied to your GitHub repo
Codex — Strong visual polish with a frontend skill; sandboxed async builds — Delegated async builds and portable AGENTS.md rules
Claude Code — Specific design decisions (hex, spacing, type) and codebase-aware UX — Frontend reasoning and large-context refactors
Cursor — Visual build-and-see loop with live preview and inline edits — Tight iterate-and-watch UI work inside an IDE
Gemini CLI — Strong multimodal image understanding and a 1M-token context; open-source with a free tier — Screenshot-heavy work and holding a whole design system in context
The recurring community verdict is that taste comes from humans: all of them default to a generic aesthetic without skills, references, and constraints. That is the real problem to solve — and it is design-tool-shaped, not model-shaped.
Agent — Design strength — Best for
Pitfalls, and how to avoid the “AI slop” look
The most common complaint about AI-generated design is that it looks generic — soft gradients, floating panels, oversized rounded corners, dramatic shadows, an Inter-and-purple vibe that “screams an AI made this.” Other reported issues include broken mobile layouts and instructions leaking into UI copy. None of these are unique to Copilot CLI; they are what happens when any agent runs without a curated design context.
Add an aesthetic skill: A curated design skill forces the agent to commit to a real direction instead of the default look.
Verify in a real browser: Render and self-check across breakpoints with a browser MCP so layouts do not silently break on mobile.
Supply tokens and references: Real design tokens and reference screenshots are the single biggest lever on output quality.
Encode rules in custom instructions: Put “no hero cards, max two typefaces, brand-first hierarchy” style rules in .github/copilot-instructions.md or AGENTS.md, where the agent reads them every run.
Notice that every mitigation is about giving the agent a curated design context. Maintaining that context by hand, per project, is the toil OpenDesign removes.
Add an aesthetic skill: A curated design skill forces the agent to commit to a real direction instead of the default look.
Verify in a real browser: Render and self-check across breakpoints with a browser MCP so layouts do not silently break on mobile.
Supply tokens and references: Real design tokens and reference screenshots are the single biggest lever on output quality.
Encode rules in custom instructions: Put “no hero cards, max two typefaces, brand-first hierarchy” style rules in .github/copilot-instructions.md or AGENTS.md, where the agent reads them every run.
Notice that every mitigation is about giving the agent a curated design context. Maintaining that context by hand, per project, is the toil OpenDesign removes.
Designing with Copilot CLI inside OpenDesign
OpenDesign is the open-source design layer the workflow above keeps asking for. It treats GitHub Copilot CLI as a first-party adapter and wraps it in a curated skill and design-system library, a structured render pipeline, and a local desktop UI — so the design context that makes Copilot good is there from the first run, not assembled by hand each time. OpenDesign is independent, open-source (Apache-2.0), and local-first, which is why the pairing fits: the agent does the work, your files and credentials stay yours.
Install OpenDesign and select GitHub Copilot CLI as your agent.
Authenticate with your GitHub Copilot subscription — credentials stay on your machine and are never proxied through us.
Pick a design system and a skill, then generate decks, prototypes, and landing pages with consistent taste.
Every artifact and DESIGN.md file lives in your own repo, not a hosted cloud.
Same Copilot CLI agent, same subscription — plus a real, portable, open-source design workflow around it. OpenDesign is local-first and Apache-2.0, so nothing about your work or your credentials leaves your machine.
Install OpenDesign and select GitHub Copilot CLI as your agent.
Authenticate with your GitHub Copilot subscription — credentials stay on your machine and are never proxied through us.
Pick a design system and a skill, then generate decks, prototypes, and landing pages with consistent taste.
Every artifact and DESIGN.md file lives in your own repo, not a hosted cloud.
Same Copilot CLI agent, same subscription — plus a real, portable, open-source design workflow around it. OpenDesign is local-first and Apache-2.0, so nothing about your work or your credentials leaves your machine.
Is OpenDesign affiliated with GitHub or Microsoft?
No. OpenDesign is independent; GitHub Copilot is a trademark of GitHub, Inc. and Microsoft.
Start Your First Design Task With Copilot
Begin with a small task, judge the round trip, then bring the real brief. Choose the option that matches your setup; the page does not detect it.