Netspaces · 2024–25
The AI generating your interface has never seen your design system.
I built one it can read.
The gap
Anyone can generate a screen now. Claude, Cursor, Lovable. The output looks plausible, and it drifts, because the model has no idea a design system exists.
AI raised the floor of interface creation. It did not replace the ceiling. Consistency was the cost nobody priced in: every screen starts from zero, and the drift compounds. The gap is structural. No prompt closes it.
The move
Put the design system where the model can read it.
An MCP server now sits over the live design system. Any MCP client that generates interfaces queries the components as they ship and the tokens with their real values, instead of guessing.
▸ get_design_tokens { "brand": "bloco" }
{
"--foreground": "#1e2333"
"--primary": "#6078b9"
"--primary-hover": "#4f66a6"
"--primary-pressed": "#3f5593"
"--highlight": "#6078b9"
"--ring": "#6078b9"
"--display-font": "Instrument Sans"
"--book-font": "Instrument Sans"
}The system underneath
Built to be read. By people and by machines.
It works because of how the system ships. The registry at ds.netspaces.org serves source: run npx shadcn add and the component's actual implementation is copied into your project. What makes that pleasant for a developer is exactly what makes it legible to a model. Nothing hides in a compiled bundle.
Underneath sit two token layers: primitives shared by every brand, and semantics resolved per brand by one data-brand attribute. 56 components and 12 ADRs record how and why. The Figma library stays in sync with the code through the Figma MCP.
Same component.
Every color on this card comes from the brand's tokens.
<section data-brand="netspaces">
- --primary
- #558eff
- --highlight
- #ff3e7d
- --foreground
- #071d49
- --display-font
- Manrope
Rendered live on this page from the system's token values. Netspaces and Propriedade Digital share a primary; the highlight sets them apart.
Proof in production
Seven landing pages went to production through this pipeline.
This one is live: Formação em Tokenização Imobiliária, on the Propriedade Digital brand, one of the four brands the token system resolves. The proof runs on the system you just watched switch.
Proof in depth
The same pipeline, across an entire product.
The same pipeline generated the 26 screens of an entire product, Go Index, inside its own brand theme. Go Index is internal and has not launched. The landing pages prove breadth across published pages; this is the system holding when the surface is a whole product.
- Go Index · internal screen
- Go Index · internal screen
- Go Index · internal screen
Not shown: Go Index is internal and has not launched.
Where it stands
Where it stands
The skill and the MCP server already work, in production use. A fully consolidated pipeline does not exist yet. That is the current work: consolidating what already works into one.
The point of a higher floor is what it buys back: less time catching drift, more time on the judgment calls only a designer with repertoire can make. The system does not replace that judgment. It holds one designer's standards across every surface an AI touches.