Try it live at grid.alxbrk.com →
Somewhere in the rush of designing with generative AI, we forgot something essential. And I have to admit, I got caught up in the excitement too.
The basics. Grid, typography, spacing, and the simplest rules of visual design.
I was inspired by a post on X that really struck me because it took me back to my early days as a designer. Back to learning the fundamentals and understanding why they matter. As my former manager used to say 13 years ago: “Everything needs a rhythm.”
Grid Machine is my attempt to bring that rhythm back, with agents. They take every Boiler Room component apart, rebuild it on the grid, and score how well everything fits together.
Which grid, and when?
Not everything needs the same grid. Each one has its own job.
4 Point Grid
For details that need more precision. Used for icons, typography and smaller UI elements where an 8 point grid can be too restrictive.
8 Point Grid
For the core of the interface. Used for component sizes, internal spacing and most of the relationships between UI elements.
24 Point Grid
For the bigger picture. Used to define page structure, sections and larger spatial relationships across the layout.
Does it always have to be an 8 point grid?
I don’t think so. Sometimes, something else simply works better.
Rules are there for a reason, but I believe it’s okay to break them, as long as you understand why you’re breaking them.
In the end, it’s not about blindly following a system. It’s about creating something that looks right, feels consistent, and fits naturally into the bigger picture for the user.
Mara Quinn
Design · Glasshouse team
2h
The same WOLF list item in its legacy version, then rebuilt on a 4 and an 8 point grid. Everything is driven by tokens.
How it works
The loop is simple. Three Grid Agents each own one grid: 4 point for details, 8 point for components and 24 point for layout. A Control Agent then checks how well everything works together, while Evaluation Agents assess spacing, alignment, rhythm and visual hierarchy.
Those checks combine into a harmony score. The system keeps iterating until the composition reaches 90%. Only then is it ready to be handed over.
My playground
I didn’t just want to show what’s possible. I wanted to make sure I could get the whole thing up and running quickly, not just design something that looks nice.
Pull the Boiler Room repo. Set it up. Spin up a fresh Storybook. Connect the MCP server so the agents can read the components. Pull in the prototypes.
But all of this needed a place to come together. A space where I could experiment, test the system, break things, and see how everything behaves in context.
The next step
I’m happy with where this is going. Now it needs to move to where people actually work: Figma, Token Studio and Storybook.
The goal is to bring the system to designers without adding another complicated workflow.
1 · Plugin
Start simple. The grid logic runs inside the tools designers already use.
2 · Watch, then automate
Learn where it helps and where it gets in the way, then let checks, suggestions and fixes run on their own.
The goal isn’t full automation. The system does the repetitive work, and designers stay in control and make the judgment calls.