A Design System on its own is already useful — you can take the files anywhere and never come back. But the workflow gets more interesting when you pair it with our other tools. The most common pattern is a full loop: pull a Design System out of BYQ, generate with AI, then use the Converter to bring the output into Webflow.
This chapter walks through what that loop looks like end to end.
The full loop, step by step
- Pick a template’s Design System on the Design Systems page.
- Download the DESIGN.md file.
- Open your AI tool of choice — Claude, ChatGPT, Lovable, v0, Cursor.
- Attach DESIGN.md to the chat, project, or rules file.
- Prompt for what you want to build — a section, a page, a component, in the style of the template.
- Iterate until you’re happy with the HTML output.
- Open the Converter on BYQ.
- Paste the AI’s HTML, CSS, and JavaScript into the Converter.
- Get a Webflow-ready section that you can paste straight into your Webflow project, plus a Figma version if you want to design around it.
The result: a section that started as a prompt to an AI now lives as native Webflow elements you can edit, refine, and ship.
Why this matters
AI tools are good at generating layouts but bad at producing Webflow-native output. Webflow expects a specific structure — Symbols, classes, layout primitives — that raw HTML doesn’t give you. The Converter handles that translation, so you don’t lose the design work the AI did and you don’t have to rebuild it manually.
The Design System makes sure the AI is generating in the right style in the first place. Without it, you’d be converting generic AI output. With it, you’re converting output that already looks like a premium template.
Setting expectations on the Converter
The Converter is a starting point, not a perfect 1:1 translation. Here’s what’s realistic:
- It will get you most of the way there — layout, structure, basic styles, content, and elements all carry over.
- It will not perfectly preserve every animation, variable, or class system from the AI’s output. Some adjustment in your Webflow project is expected.
- It works best when the AI output is well-structured HTML — clean semantic tags, simple class names, no exotic frameworks. Tailwind or vanilla CSS converts more cleanly than complex component libraries.
Think of it as: the Converter does the heavy lifting of getting AI work into Webflow, and you do the polish to fit your specific project.
For the full Converter walkthrough — what’s supported, edge cases, troubleshooting — see the Converter documentation.
A worked example
Here’s a flow that works well in practice:
- You like the look of a template — say, Bobolobo. You download its DESIGN.md.
- You open Claude, attach DESIGN.md, and attach a screenshot of a pricing section from another website that you like the layout of.
- You prompt: “Build a pricing section with the same layout as the screenshot, but in the style of this design system.”
- Claude generates HTML with Bobolobo’s colors, typography, and spacing.
- You iterate a couple of times — maybe ask for tighter spacing, or to swap one accent color.
- Once you’re happy, you paste the HTML into the Converter.
- You get back a Webflow-ready section. You paste it into your project, adjust a few classes to fit your existing system (covered in Sections best practices), and ship it.
The whole loop, from picking a template to having a live section in Webflow, can take under an hour.
Other ways to close the loop
The Converter is the most direct path from AI back to Webflow, but it’s not the only one:
- Use the AI output directly in a code project — if you’re not building in Webflow, just take the HTML and ship it. The token files (theme.css or variables.css) make sure the styling lines up with what the AI generated.
- Take the output into Figma — the Converter also produces Figma versions, useful if you want to design around a section before committing to a build.
- Combine with real BYQ Sections — once your AI-generated section is in Webflow, you can mix in Sections from the same template for parts you’d rather not generate from scratch. Same Design System, same visual language, consistent result.
Where this fits in the bigger picture
This loop is one piece of a broader idea — using BYQ as the toolkit that makes AI building actually production-ready. Design Systems for context, the Converter for output, and Sections, Skeletons, and Templates as the components that fill in the rest.
We’ve gathered all of that under one roof in Build with AI, if you want to see how the pieces fit together.
