Docs / Getting started

Quickstart

Get a design system into your AI workflow in four steps.

1. Download a pack from the library

Browse the library, pick a design system that matches your product aesthetic, and download the .md file. Free packs need only a sign-in; Pro packs are included in the Pro subscription.

2. Place it at your project root

Rename the file to DESIGN.md (all caps) and drop it at the root of your repository — alongside package.json. This is the canonical location that all supported AI tools expect.

your-project/
├── DESIGN.md        ← place here
├── package.json
├── src/
└── app/

3. Reference it in your AI tool

Claude Code reads DESIGN.md automatically from the project root when you start a session. Cursor requires an explicit @DESIGN.md reference in your prompt. See Integrations for tool-specific setup.

4. Validate with the linter

Confirm your file is structurally valid before committing:

npx @google/design.md lint DESIGN.md

A passing run prints 7/7 rules passed and confirms all color pairs meet WCAG AA contrast. No install required — npx fetches the package on demand.