Purveyors of Agentic Web Design · Est. MMXXVI

Art Direction Daily

A daily field report, bottled fresh.

LOT NO. 049 Thursday, 25 June 2026 Net contents ≈ 5 min The Apothecary Issue

Lead Preparation · Tooling

Is your prototype ready to stand up a real product?

AI SDK 7 trades demo glue for production controls, Figma turns its canvas into a full-stack bench, and a builder finds the part of the work a model still cannot finish. Measured, framed, and labeled.

An engraving-style apothecary plate on bottle green: two labeled tincture bottles with blank labels, a mortar and pestle, a folded seed packet, and botanical sprigs arranged on a shelf, drawn in cream line work with rust and brass accents.
Plate I. The week's releases, decanted and shelved.

Today's Art Direction

Directions & Contents

Vintage Apothecary Label

The briefing bottled as an apothecary storefront: framed label cartouches, engraved botanicals, and a metadata block read like the back of a remedy label.

The apothecary label is a packaging idiom built on framing and hierarchy. A double-keyline cartouche holds the name, an engraving sits where the illustration goes, and a dense facts panel lists contents and directions in a condensed face. Translated to the web it becomes a product-detail page where each story is a numbered preparation on a shelf and the metadata is dressed as the back of a label. The move a builder can borrow is that facts panel: a structured, scannable spec block that reads as honest documentation instead of a row of colored chips.

Active ingredients

No. 01 Tooling Lot / Vercel

The SDK under your agents ships its grown-up release

Vercel Blog · vercel.com

Vercel released AI SDK 7, the TypeScript library that already sits under a large share of agent apps at sixteen million downloads a week. The release is built for agents that run in production rather than in a demo: it adds reasoning control that maps to each provider's own settings, tool approvals, durable runs through a WorkflowAgent, timeouts, and sandbox support.

The part that changes a workflow is the harness wrapping. One interface can now drive external agents like Codex, Claude Code, and OpenCode, and the same layer powers Vercel's open agent framework. If you have been hand-stitching model calls into a feature, this is the version that turns that glue into something you can stand a real product on.

No. 02 Technique Lot / Field report

The model got demoted from writing to having taste

Karl Tryggvason · dev.karltryggvason.com

Karl Tryggvason set out to enrich running routes with points of interest and assumed the language model would be the feature. It kept inventing things: a small-town Central Park promoted to the famous one, mountains made taller than they are. So he pulled the model off the writing and kept the Wikipedia summaries, which at least carry attribution.

What he kept the model for was judgment. A small rating model lifted the genuinely interesting sights above every hamlet with an auto-translated wiki page. His closing line is the one to keep: you cannot unit test for taste. There is no red or green for whether a list feels right, and that is precisely the part of the job an agent hands back unfinished.

No. 03 Workflow Lot / Figma

Figma turns the canvas into the bench where it all gets built

Figma Blog · figma.com

At Config this week Figma reframed its canvas as a full-stack surface. Code layers let you clone a repository in and sync changes back, a real motion timeline carries easing and keyframes you can export as code, shaders build from a prompt through WebGPU, and Weave workflows fold multi-step AI processes into single tools. The agent does the repetitive parts and turns prompts into reusable plugins.

It continues the thread from yesterday, when the same agent learned to search the live web. The direction holds: fewer handoffs, and more of the build happening where the design already lives. The caution is the one running through today's whole issue, that a tool doing more on its own leaves fewer natural places to check the result.

Prompt Lab

Recreate today's art direction

A copy-and-paste formula that rebuilds the Vintage Apothecary Label with an AI design tool. It describes the visual system, not the news.

The Formula
Design a single web page as a vintage apothecary and seed-packet label that opens into a product-detail shelf: a briefing of three linked stories. Page archetype is an apothecary product-detail page, not a dashboard, blog, or card grid.

Ground: deep botanical bottle green (#15291E) as the surrounding glass, with a warm parchment label field (#EFE5CC) for every reading surface and dark sepia ink (#241E15) for body text on it. Antique brass (#C79A3E) for keylines and ornament, deep rust (#9A3E22) for links and marks on parchment, a sage (#4E5C3C) and a darker brass as the two other zone colors. No gradients, no glow, no neon.

Type: a characterful high-contrast old-style serif (Fraunces) for the house name, hero, headlines, and one italic banner pull-quote; a readable book serif (Newsreader) for body at 20px with line-height about 1.7; a monospace (Spline Sans Mono) only for lot numbers, the facts labels, kickers, and this formula block. Keep one display size for the hero, never italicize body.

Layout: a double-keyline brass cartouche masthead on the green carries the house name and a lot line of edition, date, and net contents in mono cells separated by rules, not dots. The hero is two columns: an engraved apothecary plate on one side (bottles, mortar and pestle, seed packet, botanical sprigs, cream line work, no readable text), a kicker, headline, and deck on the other, set in cream on the green. Today's art direction is a facts panel dressed as the back of a label: a parchment card with a header row, a style name, an italic one-line summary, a glossary paragraph, and an active-ingredients list of bordered vocab chips. The three stories are numbered preparations: each opens with a filled label band carrying a botanical mark, a number, a section name, and a lot tag, then a parchment label field with a linked headline, a maker credit with the source domain, and one or two paragraphs at a 66ch measure; the first opens with a rust drop cap. One italic pull-quote sits between two brass rules as an engraved banner. A numbered provenance list closes the issue.

Components: brass cartouche, lot line, engraved plate, facts panel, filled section bands with botanical marks, parchment label fields, drop cap, banner pull-quote, mono maker credits, bordered vocab chips, a brass copy tag on the formula. Rectangular labels at 3 to 5px radius, chips at 3px, no pill-shaping. One restrained micro-interaction: headline links grow a rust underline on hover at about 160ms and the plate lifts 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 body text on the parchment fields at WCAG AA, never sepia ink on the green.

Works in: Beaver Builder AI, v0, Lovable, Cursor, Figma Make.

Field Note

Three releases, one direction: the toolkit, the canvas, and the data pipeline each pulled more of the job inside themselves this week. The judgment about whether the result is any good did not move an inch. It is still yours to apply.

Provenance

Primary links, in order of appearance

  1. AI SDK 7vercel.com/blog
  2. You can't unit test for tastedev.karltryggvason.com
  3. Introducing Figma Motion: your canvas now has a timelinefigma.com/blog
  4. Figma's design agent, now with custom tools and greater contextfigma.com/blog
  5. AI SDK 7 is now availablevercel.com/changelog