Build a Bento Grid in Webflow Using Claude Design and Flowboard

Build a Bento Grid in Webflow Using Claude Design and Flowboard

TL;DR: You can use Claude Design and the Flowboard extension to generate a responsive bento feature grid, import it, and paste it straight into Webflow, all while keeping Client-First naming conventions intact.

If you have been building components manually in Webflow, this workflow might change how you work. By combining Claude Design with Flowboard, you can go from a design prompt to a responsive Webflow component in minutes.

What You Need

• A design system (brand colors, typography, spacing—the video presenter used one hosted inside of "Paper")
• Claude Design
• The Flowboard browser extension

How It Works

1. Upload your design system to Claude Design

Upload your existing design system to Claude Design. This gives Claude your brand colors, fonts, and spacing rules so the output matches your existing style from the start.

2. Review and approve your design system

Claude will process your upload and surface your tokens for review. Review the brand colors, headings, and buttons. Once you confirm they match your design system, approve them so Claude can update.

3. Prompt Claude to build your component

Send a prompt to Claude to design your component (in this case, a simple bento feature grid). To keep your project organized, instruct Claude to adhere to Client-First naming conventions and to follow the Flowboard & Claude Design guide.

4. Expose the HTML and CSS in the chat

Claude does not always surface the code automatically. You must explicitly prompt Claude to "expose the HTML and CSS in the chat." If you don't expose the code in the chat, the Flowboard extension won't be able to import it.

5. Open Flowboard and import

Open the Flowboard extension. Click Import to bring in the HTML. Then, make sure you are in the Webflow site, open Claude's design files, copy the CSS, paste it into the designated CSS field at the bottom of the Flowboard extension, and click Convert to Webflow. (If you aren’t in the Webflow site, Flowboard will give you the error “Open a Webflow Designer tab to import with Flowboard”.)

6. Paste into Webflow and clean up

Paste your converted component directly into Webflow. The structure will come in with properly named classes, but you will need to do a little bit of manual cleanup:

• Swap images: Images and icons do not carry through from Claude to Webflow. You will need to add them manually using Webflow's image elements.
• Remove spacer divs: Delete any empty blocks that Claude generated as spacers.
• Adjust the structure to match your system: In the video, the presenter cleaned up the structure by unwrapping the container, applying their own container-large class, adding a new div with the class padding-section-large, and moving the grid inside of it.
• Optional CSS cleanup: The presenter deleted the pasted CSS stylesheet/embed entirely so they could style the grid natively in Webflow using their own variables, while keeping the imported HTML structure intact.

The result is a responsive grid that you can customize without building the layout structure from scratch.

FAQ

Q. Do I need to import the CSS?

No, it is completely optional. If you want to style everything yourself inside Webflow, you can delete the CSS stylesheet/embed block. The HTML structure and class names will remain, allowing you to attach your own Webflow variables and style it yourself.

Q. Will my images transfer over?

No. Even if you give Claude images to use, they do not carry through to Webflow. You will need to add your image assets manually using the image element inside Webflow.

Q. Does the output follow Client-First conventions?

Yes, as long as you include that instruction in your Claude prompt. The classes successfully come through adhering to Client-First, keeping your Webflow project clean and organized.

Q. Is the grid responsive out of the box?

Yes! In this test, after pasting the converted component into Webflow and publishing, the bento grid was fully responsive across breakpoints without any additional responsiveness adjustments.