Bringing a design system into your build

Where components give you finished sections, design systems give your AI the taste to make anything it builds look right — the colors, type, spacing, and rules pulled from a premium template. Applying one early means every component and every layout after it shares the same polished foundation. The flow mirrors components: search, then fetch in the format you need.

‍

1. Search for the right style

Describe the feel you're after and let your AI run [class]search_byq_styles[/class]:

• "a minimal dark SaaS design system"
• "something warm and editorial for a landing page"
• "a clean light system for a dashboard"

The search returns each match with a name, tagline, and theme mode (light or dark), so you can match the mood before committing. It covers curated marketplace systems extracted from premium templates, plus any systems you've extracted yourself.

‍

2. Fetch it in the format you need

Once you've picked one, your AI calls [class]get_byq_style[/class] and chooses the format that fits the job:

• DESIGN.md — the full instruction file. Best when you want your AI to absorb the entire visual language: voice, do's and don'ts, layout guidance, and example prompts. This is the format that makes the AI design like the template.
• tokens.json — raw design tokens for design tools and pipelines.
• theme.css — a drop-in theme block for Tailwind v4 projects.
• variables.css — plain CSS custom properties that work anywhere CSS works.

For an AI-driven build, DESIGN.md usually does the most work; the CSS formats are there for when you want to wire tokens straight into the code.

‍

3. Apply it before you generate

The sequence matters. Pull the design system in first, then ask for components and layouts. With the system in context, your AI styles everything it generates to match — instead of producing generic output you have to re-skin afterward. If you've already built something, you can still apply a system after the fact, but you'll get the cleanest results by leading with it.

‍

How this connects to the Design Systems track

The systems the MCP searches are the same ones documented in the Design Systems track, and the four file formats behave exactly as described there. The difference is reach: instead of downloading files from a template page and attaching them by hand, your AI pulls the right system in the right format on its own. Everything you learn about using DESIGN.md and the token files applies directly.