# framesmith 1.7: teaching an agent when a design is done > Source: > Published: 2026-06-26 00:00:00+00:00 # framesmith 1.7: teaching an agent when a design is done There’s a quiet problem with letting an AI agent design a UI: it’ll happily hand you something that *runs* but looks like a wireframe. Generic spacing. No icons. A purple gradient, because that’s the default. Placeholder text that reads like placeholder text. So you end up doing the exact thing you were trying to avoid — catching the gaps yourself, one round of “actually, can you also…” at a time. [framesmith](https://github.com/vicmaster/framesmith) has been able to **render** an agent’s design (scene graph → HTML/CSS → screenshot) since day one, and to **judge** it (a quality score, cliché-tell detection) for a while now. 1.7 is about the third verb: helping an agent reliably *craft* a good one, and never hand you a half-finished one. The root cause is simple. An agent with no sharp notion of “done” stops at the first thing that renders. So 1.7 gives it one. Two things ship in this release. ## 1. The viewer shows what framesmith knows The browser viewer used to just show the render. Now, when you open a canvas, a read-only inspector shows you *why* it’s good or not. **A quality panel**— the heuristic score (0–100), per-category bars, and the full issue list. Each cliché tell gets a badge and a suggestion, and clicking an issue**highlights the offending node** right in the live preview. Every thumbnail in the gallery carries a colour-coded score badge, so a weak screen stands out at a glance.**A design-system panel**— the canvas’s effective tokens as colour swatches, a type scale, spacing, and radius, resolved through the full workspace → project → canvas inheritance chain, with each token tagged by the layer it actually came from. It’s the same intelligence the agent already gets over the wire, finally visible to the human reviewing the work. When you and the agent disagree about whether a screen is finished, now you’re both looking at the same scorecard. ## 2. A pattern library, and an agent that holds the bar This is the heart of the release. **The pattern library.** Slop comes from inventing a layout on a blank canvas. So instead of starting from nothing, an agent starts from one of **11 page archetypes**: dashboard, auth, pricing, settings, onboarding, marquee hero, bento grid, stat-led, editorial, split-workbench, catalogue. Every one is regression-tested to score above 95 with zero cliché tells across five themes, and every one *uses the real toolkit* — icons, input controls, components, design tokens. An agent that starts from a pattern inherits good craft (and actually-used icons) for free. It’s a starting point to adapt, not a wireframe to fill. **The operating contract.** The bigger shift is behavioural. framesmith now tells the agent, in the tool’s own output, when a design is done: `canvas_evaluate` returns a:`directive` `READY TO PRESENT` only when the score is above 95andthere are zero warningsandzero cliché tells. Otherwise:`NOT READY` , with exactly what to fix and an instruction not to show the user yet. Paired with that, the agent-facing guidance carries a hard rule: start from a pattern, use the whole toolkit by default, and run evaluate → fix → re-evaluate until READY before presenting. Polishing a design to the bar is the agent’s job, not yours. That `directive` field is the whole point. It’s a signal the agent can branch on — not a number it has to interpret, not prose a human has to read, just a clear “yes, allowed in front of a person” or “no, here’s what’s wrong.” It’s the same instinct behind `report.layout` from [the v1.5 importer](/blog/a-wrong-reconstruction-is-worse-than-an-honest-stack): when a tool can be confidently wrong, you hand the consumer a machine-readable signal it can act on instead of hoping it infers the right thing. The nice part is how it composes with your own design system. Drop a pattern into a repo that has its own tokens and the evaluator notices: if the pattern’s 8px rhythm doesn’t match your 6px scale, it returns *not ready — snap the spacing to the local scale first.* The agent adapts the pattern to your system before it ever calls the work finished. ## Where this doesn’t save you Worth being honest about the edges, because a quality gate that oversells itself is its own kind of slop. A heuristic score is not taste. A 95 means “no obvious tells and the fundamentals are sound,” not “a designer would ship this.” framesmith catches the generic-gradient, no-icons, placeholder-spacing failure modes that plague agent-generated UI — it doesn’t have an opinion about whether your information architecture is right. The patterns are starting points, not a substitute for knowing what screen you actually need. And the contract only raises the floor as high as your tokens allow: feed it a weak design system and it’ll dutifully produce a clean, on-token, well-spaced *expression of a weak design system*. The gate stops the worst outputs. It doesn’t manufacture good judgment. ## Why it matters The goal isn’t more features. It’s that you can **rely** on the loop. You ask for a screen, the agent starts from something good, leans on framesmith’s full capability set without being told, and keeps working until the tool itself signs off. What lands in front of you is a design a designer would nod at, not a first draft you have to redline. That’s the throughline across these releases: an agent is only as trustworthy as the signals you give it to check its own work. Render lets it see. Judge lets it score. The `directive` lets it know when to stop. Take away that last one and you’re back to babysitting — reviewing every draft because the agent has no idea which ones are done. ## Get it ``` npm i -g [email protected] # or just: npx framesmith ``` If you run framesmith as an MCP server, restart it so the new patterns and the operating contract load. No breaking changes — existing canvases and tool calls work unchanged. 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 AI client.