Art Direction Daily
Daily field reports on agentic web design, from the team behind Beaver Builder AI
Meta rolled Pocket out across the US this week: type a prompt, get a small touch-and-tilt game, and post it to a feed where anyone can save it, remix it, or repost it. Software small enough to fit in a post now has its own social network.
GIZMO 001 ยท SPRING JUMP
No. 104
Issue
Friday, Aug 21, 2026
Released
≈ 4 min
Reading time
Agentic web design
Category
Drag, scroll, or tab through. The rail is the page's borrowable pattern; the recipe is in the game tip below.
Today's art direction
An app-store product page dressed as a claymation toy commercial: candy clay on deep bottle teal.
App download pages have one of the most rigid skeletons on the web: icon lockup, install button, screenshot rail, information strip. This issue keeps that skeleton intact and reskins every surface in plasticine. Clay dioramas stand in for screenshots, a pixel face marks the levels, and the palette holds three candies and a cream against a single deep teal. The rigid frame is exactly what makes the toy treatment legible; when the structure is this familiar, the materials can play.
Pocket generates small touch-and-tilt games, which Meta calls gizmos, from a text prompt and publishes them to a scrollable feed where anyone can save, remix, or repost them. The app grew out of Meta's Gizmo acquisition, had been testing in Brazil since July, and is now rolling out to everyone in the US.
Vercel added connectors to v0: describe the integration you want and it walks you through the setup, registering the app for providers like Slack and GitHub and minting short-lived tokens instead of storing secrets. Connectors belong to the team and are reusable across apps.
A Show HN from this morning: one search box across the public shadcn registries, indexed per item rather than per registry, for finding the exact block you saw once and lost.
Markus Eisele's dispatch from O'Reilly argues the right amount of specification scales with the work: intent plus constraints for exploratory tasks, acceptance criteria for bounded ones, contract tests for deterministic pieces, and typed contracts once multiple agents hand off to each other. Implementation got cheap; deciding what to build did not.
On the Stack Overflow podcast, Brian Alvey argues that agents are becoming a site's fastest-growing audience and that structured content serves them better than walls. Issue 096 looked at the verification side of the same shift.
Design leaders from Atlassian, Expedia, and Accor on shipping agents: show the reasoning, ship before perfect, and decide up front which tasks an agent owns alone. Written for leaders, useful to anyone specifying agent behavior for a client build.
The rail above is one overflow-x container with scroll-snap-type set to x mandatory and scroll-snap-align center on the cards, no JavaScript. Use it whenever a product has more visuals than the fold can hold: app pages, portfolio case studies, menu photography, property listings.
What keeps it honest: cards at a true aspect ratio, the next card peeking into view so the overflow announces itself, and the container reachable by keyboard with a visible focus ring. If you hide the scrollbar, keep the peek.
Recreate today's system: an app-download landing page art directed like a claymation toy commercial.
Build a one-page app-download landing page for a mobile game app, art directed like a claymation toy commercial. Structure, top to bottom: a compact top nav; an app-store lockup masthead (rounded-square app icon, app name, one-line developer credit, one pill install link); a two-column hero with the pitch headline and one install button on the left and a CSS phone frame on the right holding a tall cropped illustration; a borderless info strip of stacked value-plus-label columns; a horizontal screenshot rail; feature sections tagged LEVEL 01, LEVEL 02, LEVEL 03 in a pixel face; a version-notes block; a footer information list. The screenshot rail is the signature: one overflow-x container with scroll-snap-type: x mandatory, cards at a fixed 3:2 aspect ratio with scroll-snap-align: center, a caption label row above each image, and the next card peeking in from the right edge. Palette: deep bottle teal ground #0E3438, warm cream text and panels #F5ECD9, bubblegum pink #F27EB2, butter yellow #F5C64F, mint #7FD6B4. Candies carry labels, buttons, and marks; long text stays cream on teal or dark ink on cream. Type: a single-weight rounded display face (Lilita One) for headlines, a plain grotesque (Rubik) at 19px with 1.7 line height for body, a pixel face (Silkscreen) only for tiny caps labels, and a mono (Space Mono) for the version notes. Imagery: plasticine clay dioramas with visible fingerprints, soft studio light, and the page palette only. No readable text inside any image. Guardrails: body text at least 18px with line height 1.6 or more, WCAG AA contrast for every label against its actual background, no neon glow, no purple-blue gradients, no dead UI controls, hover and focus states on every real link, and a prefers-reduced-motion guard on any animation.
Feed it to Figma Make, Lovable, or v0, and to Beaver Builder AI.
The smallest unit of shipped software used to be an app. As of this week it is a post with a game loop inside, and the remix button is the new fork.