artdirectiondaily/agentic-web main NO. 041

tooling/ framer-3.0

Design just learned to branch and merge

Framer 3.0 brings agents into the canvas where production sites are designed, and pairs them with Branching, so every edit an agent makes lands on a copy instead of the live page. The same week, JetBrains shipped its coding agent to general availability and a Mercari team showed how an AI editor actually runs.

A dark branch graph: a steel main line runs left to right with round commit nodes, a coral agent branch diverges, gathers several commits, and merges back into main at a green node, with small stacked green and red bars beside the commits standing in for added and removed lines.
An agent branch diverges from main, gathers its edits, and merges back once the diff checks out.
tooling/framera41f0framer.com

Framer 3.0 puts agents on the canvas

Framer shipped Agents into the same canvas its designers already work in, where they edit pages, components, CMS entries, styles, and SEO settings as native Framer work rather than a pile of generated code. The release pairs them with Branching, so a change from an agent or a teammate happens on a copy of the project and reaches the live site only when someone merges it.

The team's engineering note frames Branching as the trust mechanism. Agents make many edits at once, so every message is reversible and the project people see stays untouched until they decide. It is the clearest answer yet to how an autonomous editor earns its way onto a site that is already live.

how a change ships·mainagent/canvas-edits
- edit the live site in place and hope nothing breaks
- one shared draft, every agent edit already final
+ each agent edit lands on its own branch
+ read the diff, roll back any message you dislike
+ merge to the live site only when it is right
tooling/junie3e7aajetbrains.com

JetBrains ships Junie out of beta

JetBrains moved Junie, its coding agent, to general availability with a plan mode that reasons before it writes, debugging that drives the real debugger instead of print statements, and code review that holds the project's context. The IDE integration now rides on ACP, the Agent Communication Protocol that its command-line version already speaks, part of a clear pattern this week: agents are converging on shared protocols so they can plug into the tools a team already runs.

technique/mercarib80c4engineering.mercari.com

An AI editor, built around a single HTML file

Mercari's engineers broke down EGP Code, the internal tool its marketers use to build landing pages with AI, and the design lesson sits in the plumbing. The whole editor revolves around one HTML file: a recursive agent loop bundles context and tools, a test runner executes entirely in the browser, and a mapping table ties each element in the live preview back to its exact place in the markup so the agent changes the right line.

The point for anyone wiring AI into a builder is that generating the code is the easy part. The waiting, the visible progress, and the sense of what you just changed are the experience, and that is where the real work goes.

workflow/upkeep5fd19framer.com

The agent's real job is upkeep, not the first draft

Framer's own State of Sites report puts more than half of website work in maintenance and edits, with most projects deprioritized because they ship too slowly. That is the reality these agents are aimed at, and it continues the shift several recent issues tracked toward the rendered page as the working file: the job moves from generating a site once to editing a living one every week.

It also explains the push to bring outside agents in. Framer's External Agents connect Claude Code, Cursor, Codex, and Gemini CLI straight to a project with no MCP server to stand up, and every change they make still lands on a branch you review. The canvas becomes where your existing agent does the work, and the diff becomes where you decide what ships.

Field note · merged

For two years the demo was a whole site appearing from one sentence. The more useful move turned out to be smaller and harder: letting an agent change a site that already exists while the live version stays put. Put the work on a branch, read the diff, merge when it is right. The real unlock is the branch you can throw away.

Prompt lab

Design a single dark web page styled as a version-control review tool, used to present a short briefing of four linked stories as commits on a branch.

Layout: a monospace top bar showing a repo path, nav, a branch pill, and an edition number. A two-column shell: a left branch-graph rail and a wider review column. The rail is a list of commits on a vertical line with small round nodes, each linking to a section, with a short hash under each label; a steel main line runs through them and a coral side branch diverges for the agent commits and merges back at a green node near the end. The review column opens with a status row of monospace cells (edition, date, section, reading time, an Open status), a short kicker, one large headline, and a one or two sentence deck. Then a lead well: a framed diff plate image on the left, and a change-request box of label-and-value rows on the right. Then an art-direction note. Then the commits, each opened by a file-path kicker (like tooling/ or technique/), a short hash, the source domain on the right, a headline that links out, and one or two body paragraphs. The lead commit also shows a real diff hunk with removed lines in red and added lines in green. Close with a field note styled as a merge, a prompt block, and a numbered sources list.

Palette: deep ink ground #15171C, panels #1B1E25, parchment text #E7E5DE, secondary #9AA0AB, a steel-blue main branch and link color #6FA0C0, a coral agent branch #D9774A, and green #74B083 with red #C75B4E reserved only for the diff and the merge. No gradients, no glow, no neon.

Type: Bricolage Grotesque for the headline and section headlines; IBM Plex Sans for body at 19px with line height 1.68; JetBrains Mono for branch names, hashes, file-path kickers, the diff, the meta cells, and the prompt block; IBM Plex Serif italic for one pullquote.

Components: branch-graph rail with nodes, status row, diff hunk with a line-number gutter, change-request box, commit cards with file-path kickers, merge node, numbered sources. Card radius 12px, code blocks 10px, nodes are the only full circles. Keep the reading measure near 67 characters.

Guardrails: every text color meets WCAG AA on its real dark surface, small mono labels included. Hover and focus states with 140ms easing and a prefers-reduced-motion guard. No fake search field, no dead toggles, no active filter pills; the branch pill and status row carry real metadata only. Any plate stays abstract, with no garbled text baked into the image.

Works in Beaver Builder AI, v0, Lovable, Cursor, and other prompt-to-page tools. Keep the palette, the branch-graph rail, and the diff hunk as a reusable house style and the console becomes a template.

Sources

changed files in this issue

  1. Building Agents for FramerFramer, 16 Jun 2026
  2. Production became the place design startsArt Direction Daily, NO. 038

This page was last edited on Wednesday, 17 June 2026. Issue NO. 041 of Art Direction Daily. Set in Bricolage Grotesque, IBM Plex Sans, IBM Plex Serif italic, and JetBrains Mono. Palette: a deep ink ground, a steel-blue main branch, a coral agent branch, and green and red reserved for the diff and the merge. Follow @artdirdaily on X.

A field experiment from the team behind Beaver Builder AI.