IssueNo. 053DatedMon 29 Jun 2026CollectionHomeware LookbookRead≈ 5 min
Field report on agentic web design
The mockup stopped being a picture of the build
Figma's new code layers pull a GitHub repo onto the canvas to sketch on, and a run of fresh tools wants your brand to live in a file every model can read. The mockup and the build keep sliding toward the same place.
Today's Art Direction
Folk Textile
Scandinavian Folk Textile
A homeware lookbook in printed cloth: oversized folk flowers in flat poppy, cobalt, and marigold on warm off-white.
A Scandinavian folk textile is the Marimekko register: oversized flowers cut into flat unbroken color, a small fixed palette, and a half-drop repeat printed on warm cloth. Translated to the web it becomes a homeware lookbook, an ecommerce collection page where a printed-cloth banner runs the width, the catalog is zoned by color family rather than ranked in a list, and each entry sits in its own colored swatch panel. The trick is to keep the pattern in the banner and the panels, so the reading column stays a calm off-white field at 19px with full contrast. To borrow it, color-zone the structure by family and let the big flat motifs live in banners and headers, never behind running text.
In this collection
Oversized folk floralFlat color fieldsColor zoningPrinted-cloth bannerSwatch panelHalf-drop repeatHomeware lookbookCatalog entry
At Config 2026, Figma added code layers, working code that lives on the canvas beside your frames. You drop one in from the toolbar, ask the Figma agent to generate it, or bring in an existing codebase by importing a GitHub repository or a local folder.
From there it behaves like the rest of the canvas. Duplicate a layer to hold two directions side by side, run extract designs to turn a live flow back into editable Figma layers, then push the result to the repo so the source matches what you kept. It lands next to the on-canvas motion timeline from earlier this week, and rolls out in closed beta over the coming weeks.
getdesign.md is a growing shelf of DESIGN.md files, the open format from Google's Stitch team that records a brand as machine-readable tokens plus a plain-language rationale a model reads at the start of a session. Pick a look you want, drop the file in your project, and the agent stops guessing at colors and spacing.
We covered the format itself when Google opened it a couple of weeks back. The new part is the catalog and the habit forming around it: reference the file from a project's instructions and every screen checks itself against one system instead of improvising a fresh one each time.
A coding agent leans engineering out of the box. Sen Lin frames the correction as a design stack: a project brief, a DESIGN.md for the visual system, and a handful of skills and connectors for the specific jobs, all handed over before the first task rather than re-explained on each one.
Set it once and the agent shows up knowing your design language. The same instinct is reaching the open web from the other side: Chrome's new agent-ready toolkit adds a Lighthouse category and a WebMCP skill so the pages you ship are legible to the agents that will read them.
The mockup and the codebase are becoming the same file.
Prompt Lab
Print this collection
A copy-and-paste recipe that rebuilds the Scandinavian Folk Textile with an AI design tool. It describes the visual system, not the news.
The recipe
Design a single web page as a Scandinavian folk textile, a homeware lookbook or ecommerce collection page in the Marimekko register: oversized folk flowers cut into flat unbroken color, printed on warm cloth. Not a dashboard, blog, or ranked list.
Ground: warm off-white (#F6F0E4) everywhere, with near-black ink body text (#21201C) at 19px and line-height about 1.68. Build from a small set of flat folk colors: poppy red (#D33A2C), cobalt (#2D54A6), marigold (#E8A21C), leaf green (#3E7A4F). Use large unbroken color fields, never gradients or neon. Links and the one italic line are cobalt; poppy is the loud accent for marks and one panel. Every word holds WCAG AA: white text only on the darker fields (cobalt, deep poppy, deep leaf), ink text on marigold and off-white.
Type: a warm geometric sans (Quicksand, 600 to 700) for the collection headline, the art-direction name, and entry titles; a humanist sans (Work Sans) for body and the single italic line; a monospace (Spline Sans Mono) for the edition cells, catalog numbers, source credits, and this recipe. One display size for the headline; never italicize body paragraphs.
Layout: build a homeware lookbook. A row of edition cells runs across the top (issue number in poppy, date, collection, reading time, mono uppercase). A full-width printed-cloth banner shows the folk-floral repeat (flat oversized flowers, half-drop tiled, no readable text). Below it, a collection intro: an oversized headline, a short deck, and a row of color swatches. Then The Collection: each story is a catalog entry, a two-column row pairing a solid color swatch panel (family name in white, a catalog number, a small folk-flower motif) with a copy column holding the title, a mono source credit, and one or two short paragraphs at about a 62ch measure. Color-zone the families: cobalt, deep poppy, deep leaf. Alternate which side the swatch panel sits on, like a lookbook spread. Set one centered sampler pullquote on a marigold field. Close with a numbered source index.
Components: edition cell row, printed-cloth banner, color swatch row, color-zoned catalog entries with solid swatch panels, small folk-flower motifs, centered sampler on a color field, mono source credits, a poppy copy button on the recipe. Borders are heavy 3px rules, square corners, no pills and no accent left-border stripes; shadows are absent. One restrained micro-interaction: entry-title links grow a poppy underline on hover at about 150ms, behind a prefers-reduced-motion guard. No fake search fields, toggles, or filters; no dot-separator metadata chains; no emoji; no readable text inside the textile image. Keep the pattern in banners and panels so all running text stays ink on off-white at WCAG AA.
Works in: Beaver Builder AI, v0, Lovable, Cursor, Figma Make.
Field note
The thing a designer maintains is shifting from a picture of the work to a file the build and the model both read. That is more leverage and less ceremony, as long as the file stays small enough to keep honest.
