GitHub Copilot

Copilot reads .github/copilot-instructions.md as persistent project context. Add your design system there so Copilot's suggestions follow your token system without extra prompting.

Persistent instructions via copilot-instructions.md require Copilot Enterprise or the GitHub.com Copilot integration. Standard Copilot for Individuals uses open-file context only. See the tip below.

Setup

Step 1: Create the .github directory

If it does not already exist, create the .github directory in your project root:

bash

mkdir -p .github

Step 2: Create copilot-instructions.md

Create .github/copilot-instructions.md and paste the Quick Reference section (Section 0) from your exported layout.md into it:

markdown

# Copilot Instructions

## Design System
<!-- Paste Section 0 (Quick Reference) from layout.md here -->

Keep the content focused on your most-used tokens and component rules. Copilot will include this file as context on every suggestion in the project.

For inline completions (Copilot for Individuals), keep layout.md or tokens.css open in a separate editor tab. Copilot picks up context from all open files, and having the token definitions visible significantly improves completion quality.

What goes in the file

The Quick Reference (Section 0 of layout.md) is the right content for this file. It covers:

Core colour tokens and their intended usage
Typography scale and font stack
Spacing and sizing conventions
Key component patterns and anti-patterns to avoid

The full layout.md is also worth committing to your repo. Reference it from your instructions file for the complete token inventory.

← Cursor

Windsurf →