Describe a page. I'll build it in Bricks.
Claude made this page on your staging site through the Bricks connection. Everything you see here uses the colors and sizes already saved in your design system.
test · Bricks builder
Live on staging
Section
Hero
Container
2 columns
Heading
heading-size-3xl
Interaction
Fade in on scroll
Text
body-size-l
Button
Primary
6 elements added
0 new classes
--brand-500
heading-size-3xl
radius-l
gap-28
167
Bricks actions I can use on this site
45
Bricks skills that guide how I use them
501
Global classes already in your design system
0
New classes or variables added for this page
Pages
Templates
Headers and footers
Popups
Forms
Query loops
Filters
Menus
Global classes
Components
Custom fonts
Breakpoints
Interactions
Revisions
WooCommerce
Pages
Templates
Headers and footers
Popups
Forms
Query loops
Filters
Menus
Global classes
Components
Custom fonts
Breakpoints
Interactions
Revisions
WooCommerce
Build and edit pages
Tell me what you want in plain words. I turn it into native Bricks elements that you can open and change in the builder like anything else.
Full pages from a short brief
Give me the goal and a rough outline. I plan the sections, build them with your existing classes, and save the page to Bricks.
Small, exact edits
Change one headline or one button link without touching the rest of the page.
HTML and Figma to Bricks
Send me HTML or a Figma frame and I'll convert it into elements you can edit.
Revisions for undo
Bricks saves a revision before most of my changes, so any edit can be rolled back.
Reusable components
Repeated sections can become components. Change the component once and every copy updates.
Built from your design system
Before adding anything, I read the colors, type scale, spacing, and classes you already have. This page reuses them and adds no new classes or variables.
Brand color scale
Eleven shades, from brand-50 to brand-950
50
100
200
300
400
500
600
700
800
900
950
Heading scale
Bricolage Grotesque, from 32px up to 64px
Ag
3xl
Ag
2xl
Ag
xl
Ag
l
Ag
m
Spacing scale
Every gap and padding on this page comes from these steps
space-8
space-16
space-24
space-32
space-48
space-64
space-96
Manage the rest of the site
I can also change the templates and settings that every page depends on.
Templates and conditions
Design headers, footers, and post layouts, then choose where each one appears.
Menus and mega menus
Create WordPress menus and build large dropdown panels for them.
Popups
Build a popup and decide what opens it, such as a click or scrolling halfway down.
Forms
Set up form fields and what happens after someone submits.
Query loops and filters
List posts or products from WordPress and let visitors filter them.
WooCommerce
Set up store pages and design the product and checkout templates.
Fonts and breakpoints
Upload custom fonts and adjust the screen widths where layouts change.
Settings and permissions
Update allowed Bricks settings and control which roles can use the builder.
Import and export
Package templates and styles so they can move to another site.
How this page was made
The same steps work for any page you ask for.
01
You asked
You described the page in one message.
02
I read the site
I checked your colors, type, spacing, and existing classes.
03
I wrote the layout
I wrote the sections as HTML and CSS, then converted them into Bricks elements.
04
I added motion
Bricks interactions start the animations as each section scrolls into view.
05
I checked it
I opened the page in a browser at desktop and mobile widths.
Ask for the next page
Open a new chat in this project and describe what you want. For example:
>
Build an about page with a team section and a contact form.
I'll ask before deleting anything, replacing a whole page, changing global settings, or running PHP.