Generate a brand from your agent or the web, then Variel holds your agents to it — on every component, on every commit.
Ask the agent for a screen. It looks fine. Ship it. Then the next feature is a little off, and the one after that, and six months in every screen has drifted back to the mean — the same mean your competitor's agent is drifting toward.
A brand kit can't stop this. Static guidelines don't run when the agent does. What you need is a position the agents are held to — on every output, every commit.
Nine companies. One template. This is the mean every AI-built product drifts toward — unless something holds it back.
Describe your product in plain words — in the Studio, or straight from your coding agent, pointed at your repo. Seconds later you're looking at three finished directions — different bones, not different paint. New form, new type, new color, new sense of space. Pick the one that feels like you. The others were just as real.
The three directions above are a real saved run, shown read-only. Yours are one generation away — kicked off from the Studio or from your coding agent, and you pick the direction.
A PDF of guidelines doesn't run when your agent does. So Variel stops being a document and becomes three moves the agent can't skip — before it writes, as it writes, after it writes. Connect once over MCP; the loop holds from then on.
PREVENT: before the agent writes a line, the Server pulls your brand://brief into its context. On-brand becomes the path of least resistance — drift never gets started.
GENERATE: ask for a component and generate_component builds it over MCP, already checked against your position by Variel's divergence engine before it ever reaches your editor.
CORRECT: on every commit, validate_design scores what shipped and flags what slipped — each violation with a one-step fix the agent applies on the spot.
# add to Claude Code once
claude mcp add variel \
-e BRAND_API_KEY=vrl_… \
npx @variel/mcp-server
validate_designToken, contrast, and voice conformance — deterministic. Catches raw hex, off-scale spacing, off-brand words the moment an agent writes them.
grade_visual_qualityA vision judge scores the rendered screen on hierarchy, type, spacing, color, and coherence — it catches “on-token but still looks generic.”
validate_copyBrand voice enforced on the words, not just the pixels — every heading, button, and error message.
propose_tokenWhen no token fits, the agent proposes one for review instead of inventing a raw value off-system.
drift reportA conformance score tracked over time. See exactly when, where, and how far the product slipped.
generate_componentOn-brand components generated over MCP, self-validated against Variel's own divergence gate before they return — a competitor recoloring templates can't match a gate that measures structural distance from your position.
This is the engine your agent calls — the same validate_design gate, running right here on the page. It scored the snippet below: a real number, the exact lines that broke brand, and the one-step fix for each. No mockup. This is the CORRECT step of the loop, working in front of you.
.cta {
background: #7C3AED;
font-family: Arial;
padding: 13px;
}No exact brand token maps #7C3AED; use propose_token to add a new value or choose the nearest brand color variable.
- Arial
+ var(--font-display)- 13px
+ 12pxFive brands generated by the engine from five briefs — each its own design system. No shared palette, no shared font, no shared layout — not one of them reaches for the same gradient. The distinctiveness score under each is computed on load by the gate that runs in production. Open any tile to see the full brand.
Below is the brand Variel runs on itself — a living design system of tokens, voice, components, and moodboard, composed end to end. It is the page you share at the end of the loop. Yours is one generation away.
Variel's own brand — the example reveal
Everything below is the real brand Variel runs on its own product: tokens, voice, components, and moodboard, composed end to end — not recolored. This is what a reveal looks like. Yours will be your own.
Route 3: explorer archetype with saturated color strategy. Refined: "Warmer"
Variel lives in the world of tools that think — precise instruments with a material reality, not chrome interfaces floating in void. The visual register is dense and direct: saturated fields, humanist type at working weight, compositions that carry tension. It is the anti-decoration position made concrete: brand infrastructure that looks like it was made by someone with strong opinions, not assembled from a theme marketplace.
The same system serves every agent in your stack, and the same brand is shared across your whole team. Switch tools, add teammates; the position holds.
Generation is free — the full divergence, no card. You pay when you want the position enforced: live on your agents and on every PR.
Not included: MCP generation, enforcement on every commit, or drift monitoring — those are Pro.
Generate your brand — $19Set your position once. Variel keeps every commit on it.
