Build with AI in the style of any BYQ template

DESIGN.md is a single instruction file written for AI tools to read. It contains the full visual language of a template — colors, typography, spacing, surfaces, voice, do’s and don’ts, and example prompts. When you give it to an AI, the AI uses it as context for everything it generates afterward.

The exact way you feed it in depends on the tool, but the principle is the same everywhere: load DESIGN.md as context, then prompt as normal.

‍

Using it with Claude

Claude is our favorite tool for this workflow because it handles long context well and supports several ways to load a Design System.

The simplest way — drop it into a chat:

1. Download the DESIGN.md file from any Design System on BYQ.
2. Open a new chat in Claude.
3. Attach the file (or paste its contents into the message).
4. Tell Claude what to build, referencing the template’s style. For example: “Using the design system in this file, design a pricing section with three plans.”

Claude will use the colors, typography, spacing, and voice from the file in everything it generates after that point.

For repeated use — turn it into a Claude Skill:

If you’ll be working with the same Design System across many sessions, it’s worth turning it into a Skill so Claude can load it automatically.

1. In a new Claude chat, paste the DESIGN.md content and ask: “Please adjust this file so it works as a Claude Skill.”
2. Claude will reformat it with the correct frontmatter and structure.
3. Save the result as a new Skill in Claude.

From that point on, Claude will pull in the Design System whenever the Skill is triggered, without you having to attach the file every time.

‍

A real example

Here’s a flow that works well: open a Claude chat, attach a Design System’s DESIGN.md, then attach a screenshot of any section from another website you like the layout of. Ask Claude something like: “Build a section with the same layout as the screenshot, but in the style of this design system.”

What you get back is a section that combines the layout you wanted with the colors, typography, spacing, and voice of the BYQ template. From there you can iterate, refine, and once you’re happy, take the HTML output into the Converter to bring it into Webflow.

We’ve used this exact flow with templates like Bobolobo and Harbor and the results match the template’s character closely on the first try.

‍

Using it with ChatGPT

ChatGPT works the same way as Claude for the basic flow. The most reliable approach is to use a Project:

1. Create a new Project in ChatGPT.
2. Add the DESIGN.md file to the Project’s files.
3. Optionally add the same instructions to the Project’s custom instructions: “Always design in the style of the attached Design System.”
4. Start a new chat inside the Project and prompt as normal.

If you don’t want a Project, you can also just attach DESIGN.md to a single chat — same effect, but only for that conversation.

‍

Using it with Lovable, v0, Cursor, and others

The same principle applies to most AI builders and coding assistants:

• Lovable — paste DESIGN.md into the project context or starting prompt before you describe what you want to build.
• v0 — attach DESIGN.md when starting a new generation, or paste it into the prompt. Pairing it with theme.css works particularly well in v0 since the output is Tailwind v4.
• Cursor — save DESIGN.md as a project rule ([class].cursorrules[/class] or in [class].cursor/rules/[/class]) so it’s loaded into every prompt automatically.

Anywhere you can give an AI tool persistent context — a system prompt, a project file, a rules file, a custom instruction — DESIGN.md will work. The format is intentionally generic so it doesn’t depend on any one tool.

‍

Tips for better results

A few things that consistently improve output:

• Reference the system explicitly in your prompt — “following the design system above” or “using the colors and spacing from the attached file” nudges the AI to actually apply it instead of just acknowledging it.
• Start with one section at a time. AI tools handle a single, well-scoped section better than a full page. Build up piece by piece.
• If the output starts drifting — wrong colors, wrong spacing, generic feel — re-attach the file or remind the AI of the system in your next prompt. Long conversations can dilute context.
• Use Extended for the first session, Compact if you hit context limits. Both contain the same tokens; Compact just trims the prose.

‍

What to do with the output

Once you have HTML you like, you have a few options:

• Take it into the Converter to bring it into Webflow or Figma.
• Use it directly in a code project — the file already references the same tokens in [class]theme.css[/class] or [class]variables.css[/class], so the styling will line up.
• Iterate further with the AI, using the same Design System as ongoing context.

The Design System makes the AI fluent in the template’s style. What you do with that fluency is up to you.