framesmith 2.0.0 is out. It’s a major version, with breaking changes, and it’s built around one bet: the part of design an AI agent is worst at, you shouldn’t ask the model to do at all.
Think about where agent-generated UI actually goes wrong. It’s rarely the layout. It’s the taste-level decisions: a color system where nothing quite contrasts, a random font pairing, a purple gradient because purple is the default, six chart series you can’t tell apart. The model reaches for these because it’s pattern-matching what a UI looks like, not reasoning about whether text passes contrast on a dark background. So it produces something that resembles a design and fails the moment a person with taste looks at it.
The framesmith arc so far has been about catching that after the fact: render it, score it, gate on it. 2.0 goes upstream. Instead of asking the model to invent a good design language and then grading the guess, it generates the design language deterministically, and lets the model spend its effort on the part it’s actually good at: arranging real components to solve the screen.
One call, a whole design language, no API key #
The headline is a single tool: generate_design_system
. You give it a seed color and a personality (technical
, editorial
, soft
, or data-dense
), and it returns a complete, coherent system:
- An
OKLCH color system with semantic roles and a real dark theme,AA-contrast by construction. - A curated
Google Fonts pairing, and typography roles (
$display
,$heading
,$body
,$label
,$caption
,$figures
). - Radius, density, elevation shadows, and motion defaults.
- A categorical
chart palette(
$chart-1
through$chart-6
) that’s actually distinguishable.
Two things about that are worth slowing down on.
First, no API key, no model call. This is a deterministic engine, math over a color space, not a prompt. Same seed and personality in, same system out, every time. That means it’s free, instant, reproducible, and it can run in CI. An agent that starts here inherits a coherent language for free instead of hallucinating one token at a time.
Second, and this is the part I care about most: “AA by construction.” The contrast compliance isn’t checked after generation and fixed up. The generation is built so that a failing pair cannot be produced. It’s the difference between a spellchecker and a keyboard that has no misspelled keys. When correctness is guaranteed by how the thing is built, you delete an entire category of “oops, the label was unreadable on the card” from ever happening.
If you want the pieces on their own, generate_scale
and generate_color_system
are exposed as standalone engines too.
The evaluator grew a usability conscience #
A design language is only half the quality story. 2.0 also sharpens what “good” means when it grades a screen.
The big addition is a usability category, and it has teeth:
Hit targets under 24px are errors, not suggestions. A button nobody can reliably tap is a defect, and it’s now scored like one.** Unlabeled controls warn.**An icon button with no accessible label doesn’t get a pass.- Dual-theme color checks, APCA contrast advisories, and typography discipline round it out.
And the sharpest change of all: an empty canvas now scores 0, not 100. That sounds like a joke fix, but it’s a real philosophical correction. A blank screen used to score perfectly because it had no detectable problems. Which is exactly backwards. “No problems found” is not the same as “good,” and a quality gate that rewards emptiness is measuring the wrong thing. Zero is the honest score for nothing.
The rest of the release, briefly #
2.0 is big. The supporting cast, without belaboring it:
clones a screen into its linked empty, , and error states, so you design the states you usually forget.canvas_add_variant
stress-tests content per node: long strings, i18n, empty scenarios. It’s how you find the layout that breaks on a 40-character name.canvas_stress
validates consistency acrossproject_evaluate
multiplescreens, not just one at a time.does a final polish pass with vision critique, andcanvas_revise
persists the genre so evaluation stays calibrated (thecanvas_set_genre
1.9 genre work, made durable).- New micro-patterns and components:
kpi-card
,status-chip
,segmented-control
,breadcrumb
,initials-avatar
,skeleton-stat-card
. - Chart nodes gained donut charts with center value slots, bar emphasis modes, and sparklines for KPI cards.
Breaking changes (it’s a major version for a reason) #
Read these before you upgrade a pinned workflow:
Empty canvases score 0(previously 100). If anything keyed off that old behavior, it changes.Scores will move, and some screens that passed before won’t, by design.usability
andcoverage
are now default evaluation categories.Archetype contents changed under the same stable names, so a re-render may look different.stat-card
is now an alias forkpi-card
.
None of these are gratuitous. They’re the cost of the gate meaning more than it did in 1.x.
Where this doesn’t save you #
The honest edges, same as every release.
The deterministic system is a strong, coherent default, not a brand identity. It’ll give you a professional, accessible language from a seed color in one call, but it doesn’t know your company’s typeface or that one off-book accent your marketing team loves. It’s the floor rising, not a replacement for a designer with a point of view. And the four personalities cover a lot of ground, but they are four buckets, not infinite range, if your product needs something genuinely idiosyncratic, you’ll be overriding tokens.
The deeper point holds regardless: the move in 2.0 is to stop asking the model for the thing it’s worst at. Generate the parts that have a correct answer (contrast math, type scales, spacing rhythm) deterministically, guarantee them by construction, and let the model spend its judgment on the part that actually needs judgment. That principle outlives any one tool.
Get it #
npm i -g [email protected] # or just: npx framesmith
It’s a major version, so skim the breaking changes above before upgrading a pinned setup. Restart a running MCP server to pick up the new tools.
framesmith is open source (MIT), renders to plain HTML/CSS, stores designs as open JSON you own in your repo, and works with any MCP-compatible client.