A design system your AI can read.

The visual language of one website, extracted into files your AI and your code can read: colours with their roles, type scale, spacing, radius, shadows, motion and the do's and don'ts that keep output on brand. 300+ are in the library, extracted from BYQ templates and from well-known sites, and you can generate one from any URL.

DESIGN.md is the style reference your AI reads: tokens, rules, do's and don'ts, example prompts. tokens.json holds the same values in the W3C design-tokens format for Figma (through Tokens Studio) and Style Dictionary. theme.css is a Tailwind v4 @theme block. variables.css is plain CSS custom properties for any stack, Webflow custom code included.

Attach or paste DESIGN.md in Claude, ChatGPT, Cursor, v0 or Lovable, or install it as a Claude Skill. With the BYQ MCP connected, Claude, Claude Code, Cursor, Codex and Lovable can search the library and pull a system by name without leaving the chat.

Say "design this section following the attached design system", not just "here is a design system". Keep one system per project, build one section at a time, and re-attach the file in long sessions if output starts drifting. Pair DESIGN.md with theme.css or variables.css so the generated code uses the same tokens the AI designed against.

Two versions of the same files with the same tokens. Extended carries the full descriptions, roles and example prompts and is the one to start with. Compact strips the prose for tools with tighter context windows.

Yes. Paste any URL on the design systems page and BYQ extracts the colours, type, spacing and rules into the same four files. It costs about one AI token, every account starts with five, and what you generate is yours to keep.

Yes. Drop variables.css into Webflow custom code, or load tokens.json into Figma with Tokens Studio. The Converter turns a section your AI built with the system into a Webflow section and a Figma version; treat that as a starting point, not a one-to-one translation.

Style, not components: it tells the AI which colours, type and spacing to use, not what a navbar or pricing card looks like. For ready-made components in a template's style, use Sections. A system is a snapshot of the template or site at the time it was generated, and it carries no licence to the original template.

Browsing and previewing every system is free. Downloading the curated files is on Pro and Ultra, and the MCP tools are on both. Generating your own from a URL works on any plan for about one token each.

No. Systems named after companies such as Stripe, Linear or Vercel were extracted from the public site's CSS with the same tool you can run on any URL. They describe what the site looks like, not the company's published brand guidelines.