Using with AI

How to use Source with AI to build accessible, logical, and consistent interfaces faster.

Machine-readable files

Two plain-text files are served at standard locations for AI tools that fetch documentation automatically.

/llms.txt Brief index. Package names, install command, naming conventions, links to the full reference. Follows the llms.txt spec.
/llms-full.txt Complete inline reference. Every token value, every component prop, every convention. Use this when pasting context directly into a prompt.

Setup by tool

Cursor

Add Source to your .cursorrules file, or paste /llms.txt content as a project rule. For full token and component context, reference the raw GitHub files directly. 

# .cursorrules
# Source design system context
# Full reference: https://github.com/pierredelattre/source-design-system/blob/main/TOKENS.md
# Component index: https://github.com/pierredelattre/source-design-system/blob/main/COMPONENTS.md

Token naming: --source-<category>-<name>
CSS class prefix: source-
All interactive components accept palette: neutral | accent | success | warning | danger | info
Semantic tokens reference primitives. Never reference another semantic token.

GitHub Copilot

Copilot picks up context from open files. Keep TOKENS.md and COMPONENTS.md open in your editor when working on Source components. For chat, reference the files explicitly with #file:TOKENS.md. 

# In Copilot Chat
Using #file:TOKENS.md and #file:COMPONENTS.md, create a Chip component
that filters by status using the accent palette.

Claude Code

CLAUDE.md at the repo root instructs Claude to read TOKENS.md and COMPONENTS.md at the start of any task involving tokens or components. This is already configured in the repository. 

# In the prompt
Using Source, add a filter row with Chip components for category selection.
Read TOKENS.md and COMPONENTS.md for the full API.

Any AI with URL fetching

Point the AI at /llms-full.txt for a complete context dump, or at the raw GitHub files for TOKENS.md and COMPONENTS.md.

Figma variable export

Generate a full variables export for Figma workflows with one command. The export includes primitives, semantic light/dark values, and component-level variables. 

npm run figma:variables:export
# output: specs/figma-variables-export.json

Quick prompts

Copy-paste starting points for common tasks with Source.

Use a component

Using @pierredelattre/source-react and @pierredelattre/source-tokens,
build a status row that shows a Badge (success palette) and a Tag link.
Import styles from source-tokens. Reference COMPONENTS.md for props.

Use tokens in custom CSS

Style this component using only Source CSS custom properties.
Token names follow --source-<category>-<name>. Use semantic tokens
(--source-color-text, --source-spacing-4) rather than primitives.
Reference TOKENS.md for the full list.

Add a theme

Set the accent theme to green for this section. Apply data-source-theme="green"
on the wrapping element. Do not override any token values directly.
The accent tokens (--source-color-accent, --source-color-accent-subtle, etc.)
will resolve automatically.

Conventions summary

Rule Detail
Token prefix --source-
CSS class prefix source-
Two token levels Primitives hold raw values. Semantic tokens reference primitives by role. Semantic tokens never reference other semantic tokens.
Dark mode Override semantic tokens via @media (prefers-color-scheme: dark) and .dark class. Primitives are constant.
Palette prop neutral | accent | success | warning | danger | info on all interactive components.
Accent theme data-source-theme="blue|green|red|orange|yellow|pink|purple|teal" on any element. No JS, no props.
Component tokens Defined on the root class. Override on a parent selector to restyle in context without changing globals.
Imports order Tokens first, then component styles, then components. source-tokens must load before source-react/styles.