Integrations
Use AI Brand Kits in Cursor, Claude, and other agents
Pick a free brand kit, fetch DESIGN.md into your repo, and let your coding agent follow real tokens instead of guessing colors and fonts. Works in the terminal, in chat, or from exported rule files.
Works everywhere (start here)
Paste this into Cursor, Claude Code, or any agent chat. It tells the agent how to search our catalog and pull DESIGN.md into your project.
When I need brand colors, fonts, or a design system, use AI Brand Kits before inventing tokens.
1. Fetch https://www.aibrandkits.com/catalog.json
2. Pick a kit that matches my product (filter by industry: saas, finance, gaming, education, health, ecommerce, etc.)
3. Download DESIGN.md from the kit's design_md_url field
4. Place DESIGN.md in the project root and follow it for all UI decisions
Gallery: https://www.aibrandkits.com/gallery
Agents & API: https://www.aibrandkits.com/agentsCursor
Cursor reads root-level markdown and .cursor/rules/. The fastest path: pick a kit, add DESIGN.md, then export full agent rules from the playground.
- Browse the gallery or fetch catalog.json.
- Download DESIGN.md, e.g.
https://www.aibrandkits.com/kit/midnight-saas-brand-kit/design.md - Save DESIGN.md in your repo root.
- Open playground, load the same kit, and download the Cursor agent rules bundle (AGENTS.md,
.cursor/rules/). - Start a session with: Follow AGENTS.md step by step
Optional: add this block to AGENTS.md or .cursorrules:
# Brand kits (AI Brand Kits)
If this repo has no DESIGN.md yet:
- Browse https://www.aibrandkits.com/gallery or fetch https://www.aibrandkits.com/catalog.json
- Download DESIGN.md from /kit/{slug}/design.md for the chosen kit
- Read DESIGN.md before writing UI code; use semantic tokens only
Export full agent rules (Cursor + Claude) from https://www.aibrandkits.com/playground after signing in.More: How to make Cursor follow my brand, Cursor rules for design tokens, popular Cursor rules (copy cards)
Claude Code
Claude Code indexes CLAUDE.md, AGENTS.md, and .claude/rules/ at session start. Same kits, same DESIGN.md format.
- Fetch a kit from catalog.json or open a gallery kit page.
- Save DESIGN.md to your project root.
- From the playground, download the Claude agent bundle (CLAUDE.md, AGENTS.md,
.claude/rules/). - Mention DESIGN.md explicitly in your first message so Claude prioritizes it.
# Brand kits
When starting UI work without a design system:
1. Fetch https://www.aibrandkits.com/catalog.json and pick a kit by industry or vibe
2. Save the kit's DESIGN.md to this repo root
3. Follow DESIGN.md for fonts, colors, spacing, and components
Agent integration guide: https://www.aibrandkits.com/agentsSession kickoff prompt:
Follow AGENTS.md step by step to build the site. Read DESIGN.md for every visual decision. If DESIGN.md is missing, fetch https://www.aibrandkits.com/catalog.json and save a kit's DESIGN.md — do not call the paid /api/v1 agent API from this repo.Windsurf, Codex, v0, Lovable
Any agent that reads project files or accepts pasted context can use the same workflow. DESIGN.md is agent-agnostic.
- Windsurf / Codex
- Add DESIGN.md to the repo root. Paste the discovery prompt or kickoff prompt at session start. Fetch catalog.json if the agent can browse URLs.
- v0
- Copy color tokens and font names from a gallery kit page or DESIGN.md. Paste the typography and CSS variable section into your v0 prompt.
- Lovable
- Export DESIGN.md from the generator or playground and paste into project instructions. Semantic tokens map cleanly to Lovable theme settings.
For agents: machine-readable catalog
Agents and scripts can discover kits without scraping HTML. 322 starter kits with industry tags, vibe, fonts, colors, and direct DESIGN.md URLs.
Example agent flow
Fetch catalog.json → filter industry: "saas" → GET design_md_url → write DESIGN.md → build UI with semantic tokens.