Turn your website into a design system

You are not limited to the design systems we ship. Point BYQ at any website, usually your own, and it builds a design system from it. It keeps AI-made pages on brand.

Design systems are for building in code with an AI coding tool, for Figma (through a token file) and for the Website Builder. If you build in Webflow or Framer, use Sections instead.

How to generate one

1. Sign in, then open Design systems in the sidebar.
2. Click Generate your own.
3. Enter your site's address, for example https://yoursite.com.
4. Click Extract.

A progress list shows BYQ reaching the site, taking captures, picking out the colors and designing the system. Slow sites take longer. Keep the window open until it finishes.

What it costs

Generating needs you to be signed in and costs about 1 BYQ AI token. If your balance is too low, you are told before it starts and can top up or upgrade.

What is extracted

Open the result to see what BYQ found: colors, type, spacing and components, plus files your tools can use, such as DESIGN.md and tokens.json. For what each file does, see The four files explained.

Where it lands

The new design system is saved to your account and appears under Made by you. The library has three sources, selectable in the Source filter:

• Made by BYQ: the systems we built, including ones from our templates.
• Popular brands: a curated gallery of well-known brand identities.
• Made by you: everything you generated.

How many you can keep

• Free: up to 5 saved design systems.
• Pro and Ultra: unlimited.

Downloading the four files needs Pro or Ultra. See the pricing page.

Tips

• Use a page with your real branding, such as your homepage, rather than a login screen.
• Sites with a clear, consistent palette give the cleanest result.

Next: restyle a Website builder site with it.