Three teams shipped the same realization this week. An agent can generate an interface in seconds, so the work that is left is teaching it why a decision is right, and checking the plan before any code lands. The making moved upstream.
Plate I. The week's releases, cut and arranged by hand.
Today's Art Direction
Studio caption
Matisse Cut-Paper Collage
The briefing arranged as a design studio's portfolio, built from torn and cut paper shapes the way Matisse made his late gouaches.
Cut-paper collage is an illustration idiom of flat organic shapes, bold unmixed color, and layered paper that casts a soft shadow. Translated to the web it becomes a portfolio of case studies: a studio header with a selected-work index, a featured plate of collaged shapes, and each story laid out as a numbered case opened by an organic cut-out marker in its own color. The move a builder can borrow is using a hand-cut shape as a section divider instead of a horizontal rule, and color-zoning each case by a single flat hue carried in the marker and the label rather than a stripe down the side.
Builder.io shipped two skills for Claude Code, visual-plan and visual-recap, that turn an agent's plan into something you can actually see. Instead of approving a wall of prose, you get the real wireframe, the shape of the API, and how an empty list state will render, then redline it before a single line of code exists.
The plans are MDX files committed to the repository, so they read as versioned contracts you can comment on rather than throwaway chat. Builder puts the shift plainly: code generation is largely solved, and the work that remains is constraint engineering, giving an agent a structure precise enough to steer it. The recap then lifts the finished diff back into those same components so the review is legible too.
You no longer steer an agent by prompting louder. You steer it by building the structure it answers to.
Code shows an agent what shipped, not why one component or phrase became the standard, and that reasoning usually lives in design reviews and Slack threads where the model cannot reach it. Vercel's answer is a product-design skill that sits in the repository beside the code it governs, treating accepted design decisions like code: stored, reviewed, and loaded on demand.
The skill routes by task and surface. A modal pulls destructive-action patterns and canonical verbs; a settings form pulls label, validation, and accessible-name guidance. Linters enforce the mechanical rules, and a review loop gathers evidence from Slack, Figma, and GitHub to draft guideline updates a person approves. Any team can copy the structure and fill it with its own standards.
GitKraken named the thing many builders are now living: Code Flow, how work moves between people, agents, repositories, reviews, and production once you are directing several agents at once instead of typing each line. Its new delivery tool, Kepler, puts every agent session on one surface and tracks what is in flight, what needs you, and what is ready to merge.
The detail worth keeping is where the tool draws the line. It resolves the mechanical collisions of parallel work on its own, then routes the moments that need a person, a scope violation, a standards conflict, an agent drifting off task, back with the context already gathered. Review and conflict resolution were built for one person typing; naming the flow is the first step to designing those checkpoints back in on purpose.
Prompt Lab
Recreate today's art direction
A copy-and-paste recipe that rebuilds the Matisse Cut-Paper Collage with an AI design tool. It describes the visual system, not the news.
The recipe
Design a single web page as a design studio's portfolio of case studies, built in the idiom of Matisse cut-paper collage: flat organic shapes, bold unmixed color, layered paper with a soft offset shadow. Page archetype is a portfolio or case-study page, not a dashboard, blog, or card grid.
Ground: warm cream paper (#F3E8D2) everywhere, with warm near-black ink (#211E1A) for body text at 20px and line-height about 1.66. Color lives in cut-paper shapes and labels, not behind the reading text. Three zone colors carry the three cases: coral (#E5533B), cobalt (#2E5AAB), leaf green (#4F7A3A), with marigold (#E5A52E) for the hero shadow and one pull-quote shape. Links and any colored text use darkened versions (coral #A8331A, cobalt #234887, leaf #3C5E2C) so every word holds WCAG AA on cream. No gradients, no glow, no neon.
Type: a warm characterful grotesque (Bricolage Grotesque) for the nameplate, hero, case headlines, and one pull-quote; a clean humanist sans (Instrument Sans) for body and the italic art-direction one-liner; an informal hand face (Shantell Sans) only for kickers, section labels, and small studio captions; a monospace (Spline Sans Mono) only for edition meta, source domains, and this recipe block. Keep one display size for the hero, never italicize body paragraphs.
Layout: a studio header pairs a large nameplate on one side with a selected-work index on the other, a short numbered list that links to each case, plus an edition meta row in mono cells separated by rules, not dots. The hero is two columns: a hand kicker, headline, and deck on one side, a framed cut-paper collage plate on the other (organic fronds, a layered stack of pages standing in for screens, abstract blocks and bars instead of readable text, paper scissors), the frame a cream card with a 2px ink keyline and a flat marigold offset shadow. Today's art direction is a spec card on a marigold-tinted panel with a style name, an italic one-line summary, a glossary paragraph, and bordered vocabulary chips. The three stories are numbered cases: each opens with an organic cut-paper shape in its zone color holding the case number, then a cream case card with a 2px ink keyline, a hand kicker, a linked headline, a mono maker credit and source domain, and one or two paragraphs at a 66ch measure; the first opens with a coral drop cap. One Bricolage pull-quote sits on a cut-paper marigold shape. A numbered reference list closes the issue.
Components: studio nameplate, selected-work index, framed collage plate, marigold spec card, organic shape section markers, cream case cards, drop cap, shape-backed pull-quote, mono maker credits, bordered vocabulary chips, a coral copy button on the recipe. Card and panel radii 14 to 18px, chips 7px, no pill-shaping. One restrained micro-interaction: headline links grow a 2px underline on hover at about 160ms and the hero plate shifts a few pixels, both behind a prefers-reduced-motion guard. No accent left-border stripes, no fake search fields or toggles, no dot-separator metadata chains, no emoji. Keep all body text on cream at WCAG AA.
Works in: Beaver Builder AI, v0, Lovable, Cursor, Figma Make.
Field note
Notice what all three teams spent their effort on. Not generating the interface, which is nearly free now, but the structure around it: a plan you can read, a rulebook of why, a place where the work pauses for a person. The cheaper the output gets, the more the judgment is the job.
