Skip to main content
Code & Tokens

Give GitHub Copilot brand context

Developer

Overview

Put the brand tokens where Copilot already reads: .github/copilot-instructions.md. Generate DESIGN.md, paste it in. Completions and Copilot Chat then have the real colors, type scale, and spacing as context. Without it Copilot fills styling with invented hex values.

GitHub Copilot reads repository custom instructions from .github/copilot-instructions.md and applies them to completions and Copilot Chat across the project. Without brand context it fills in wrong colors, arbitrary spacing, and system fonts. Generate DESIGN.md from the live site with Dembrandt and paste it into the instructions file. Suggestions then draw on the real token system: the primary, the type scale steps, the spacing rhythm, the border radii. Scaffolds come out closer to on-token, and Copilot Chat can cite brand values rather than guess. Less time correcting invented values after the fact.

Generate DESIGN.md

Terminal
dembrandt example.com --design-md
Add to .github/copilot-instructions.md
# Paste DESIGN.md content into .github/copilot-instructions.md,
# under a clear heading, then commit it.
## Design tokens (source of truth)
<paste DESIGN.md here>
## Rule
When generating UI, use only these tokens. No hardcoded
hex values, no system fonts, no arbitrary spacing.
Output

Repo-wide Copilot context. Completions and Copilot Chat stay on the brand token system.

More in Code & Tokens

Design-system-aware Cursor projectRefactor hardcoded colors to token variablesTailwind defaults to brand themeLegacy CSS to design tokensGenerate a shadcn/ui theme from any websiteExport design tokens to StorybookExtract design tokens for a Next.js application

Browse all

All recipes →

57 workflows

Continue reading

Getting started

Install Dembrandt and turn any public website into a complete set of design tokens in under 2 minutes. All you need is Node.js and a terminal.

Read more

MCP

Use Dembrandt as a tool inside Claude Code, Cursor, Windsurf, or any MCP-compatible editor. Your agent extracts live design tokens automatically when you ask.

Read more

Skills

30 UX and design system skills for AI agents. Install once, your agent designs with hierarchy, WCAG standards, and brand accuracy. The UX knowledge that normally costs senior consultant days.

Read more