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:
- Download the DESIGN.md file from any Design System on BYQ.
- Open a new chat in Claude.
- Attach the file (or paste its contents into the message).
- 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.
- In a new Claude chat, paste the DESIGN.md content and ask: “Please adjust this file so it works as a Claude Skill.”
- Claude will reformat it with the correct frontmatter and structure.
- 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 and refine, and once you’re happy, keep building in your project.
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 Cursor, Claude Code, v0, Lovable, Bolt, 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.
- Claude Code — keep DESIGN.md in your project and point Claude Code at it before you prompt.
- Bolt — paste DESIGN.md into the starting prompt, the same way as Lovable.
- Cursor — save DESIGN.md as a project rule (.cursorrules or in .cursor/rules/) 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 output you like, you have a few options:
- Use it directly in a code project — the file already references the same tokens in theme.css or variables.css, so the styling will line up.
- Iterate further with the AI, using the same Design System as ongoing context.
- If you build in Webflow or Figma, ask your AI for plain HTML and CSS and take it into the Converter. The Converter cannot read React or JSX, so React output needs to be rendered to plain HTML first.
The Design System makes the AI fluent in the template’s style. What you do with that fluency is up to you.
