Thursday, 18 June 2026Reading time ≈ 4 minAgentic web design
Build the idea, skip the scaffolding underneath it
Vercel open-sourced a framework that turns an agent into a folder you can read, the same week Figma let outside agents act on real design files. The interface and the permissions around the agent are becoming the design work.
Composition no. 042. A directory, read as a poster.
At Ship 2026 Vercel released eve, an open-source framework whose whole premise is that an agent is a directory. An instructions file says who it is, a tools folder says what it can do, a skills folder holds what it knows, and subfolders carry the subagents it delegates to and the channels it lives in. The shape is legible at a glance, the way a small web app is.
The pieces every team kept rebuilding by hand now ship inside the framework: durable execution, sandboxed compute, human-in-the-loop approvals, and evals. Vercel frames it as the moment a pile of plumbing becomes a platform.
Figma extended its design agent connection the same week, so the tools reaching into a file get more than flat exports. External agents can now assemble Slides from a team's own templates, render type with uploaded fonts instead of web-safe stand-ins, and pull JPG, SVG, and PDF assets through a new download tool, with a clean handoff into Xcode for mobile work.
The sharpest design problem in agentic products, a new Smashing Magazine piece argues, is a probabilistic system wrapped in a deterministic interface: the model offers a likelihood and the screen presents it as truth. The proposed fix is to design for likelihood instead, showing confidence, labeling machine-made content, and keeping a visible path back to a human.
The cautionary case is Air Canada, whose chatbot confidently described a bereavement refund policy that did not exist until a tribunal decided the airline had to honor it. A guess shown without its uncertainty becomes a promise.
Agents today are where the web was before frameworks.
Stack Overflow, fresh from rebuilding itself around coding agents, has a blunt warning for anyone wiring an agent into a real product. Earlier this month attackers took over more than twenty thousand Instagram accounts by asking Meta's support assistant to attach an email they controlled and then trigger a password reset, with no exploit and no stolen password.
The assistant behaved exactly as designed while the check that should have confirmed the email belonged to the account never ran. An LLM agent is a confused deputy by construction, holding real privileges behind a natural-language door, so the authorization has to live in the tools, not in the prompt.
Prompt LabRecreate today's art direction
Bauhaus Primary Poster
Design a single web page as a Bauhaus exhibition poster presenting a short briefing of four linked stories. Ground: warm bone (#F2EBDB). Use three primary colors as structural zones rather than decoration: Bauhaus red (#D1321F), cobalt (#1C46A6), and a warm yellow (#F2B705), with near-black ink (#16130F) for text.
Build an asymmetric modular grid: a large bone hero cell carries the headline; a cobalt metadata tile holds the issue number, date, and reading time as small mono rows; hard-edged primitives float in the grid, a yellow circle, a red triangle, a cobalt square. Cut one black diagonal rule across the upper grid for tension.
Code the sections by shape, not icons: a filled circle marks Tooling, a triangle marks Technique, a square marks Workflow, each drawn in its zone color, with a small real legend mapping shape to section. Each item is a grid cell with a mono source line, a linked headline, and one or two short paragraphs.
Type: display in a geometric sans (Jost, or a Futura-like face), body in a clean grotesque (Archivo), tiny labels in a mono (DM Mono). Keep body at 19px, line-height 1.7, measure near 68 characters, ink on bone, never colored body text. Reserve white text for the cobalt and red blocks and verify WCAG AA on every block. Square corners everywhere except the genuine circle. No gradients, no glow, no neon, and no fake screenshots or garbled text inside any generated image.
Works in: Beaver Builder AI, v0, Lovable, Cursor, Figma Make.
Field note
The through line across today's items is small but real. The agent is becoming a unit of software with a shape of its own, and the interface above it and the permissions beneath it are where the design now happens.
