Getting started with a BYQ Design System is straightforward. You don’t need to install anything. Which file you use depends on where you build; the list below shows which.
That’s it. The next chapters go deeper into each file and the workflows they unlock.
Building in Webflow, Framer or Figma blocks instead? Design systems are made for code and AI coding tools, so use Sections for finished blocks there.
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 common starting point: pick a template you like the look of, download its DESIGN.md, paste it into an AI 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 keep building in your codebase. If you build in Webflow, you can take plain HTML into it with our Converter.
