Start using a Design System in under a minute

Getting started with a BYQ Design System is straightforward. You don’t need to install anything, and the same flow works no matter which AI tool or design environment you’re heading into.

‍

Here’s everything you need

• an account on BYQ Supply
• a Pro or Ultra plan (required to download any of the four files)
• the AI tool, design tool, or codebase where you want to use the Design System

‍

How to use a Design System

1. Browse the library on the Design Systems page.
2. Open a template’s Design System to preview the colors, typography, spacing, surfaces, do’s and don’ts, and example prompts.
3. Pick the file you need from the right side of the page:
   • DESIGN.md for AI tools (Claude, ChatGPT, Lovable, Cursor, v0)
   • tokens.json for design tools and token pipelines (like Tokens Studio in Figma)
   • theme.css for Tailwind v4 projects
   • variables.css for any project that uses plain CSS
4. Copy or download the file using the buttons at the top of the file viewer.
5. Paste or upload it into your tool of choice.
6. Start prompting or building — the AI now follows the visual language of that template, or your project now uses its tokens.

That’s it. The next chapters go deeper into each file and the workflows they unlock.

‍

Extended vs. Compact

Every file comes with two versions: Extended and Compact. Extended includes the full descriptions, role explanations, and example prompts — best when your AI tool has plenty of context space. Compact strips the prose down to the essential tokens and rules — better when you’re working with tighter context limits.

If you’re not sure which to use, start with Extended. Switch to Compact only if your tool starts truncating or if responses get slower.

‍

A typical first session

A common starting point: pick a template you like the look of, download its DESIGN.md, paste it into a Claude or ChatGPT chat, and ask it to design a section in the style of that template. The output will already carry the right colors, type scale, spacing, and tone — and from there you can iterate, refine, or take the result into Webflow using our Converter.