Art Direction Daily
No. 030 Saturday, June 6, 2026 ≈ 5 min read Agentic web design

The free tier is now the model on your laptop

Google shrank Gemma 4 to run in under a gigabyte the same week cloud agents moved onto a metered credit. The cost of building with AI is splitting into a free tier on your machine and a paid one in someone else's.

An abstract pricing-page plate: three plan columns on ivory, the middle one a dark recommended card capped with an amber ribbon, each column showing a large amber price block over thin feature rows and check marks, no readable text.
Three plans, one highlighted: the week's news priced out like a packaging page.

What shipped · three plans

Plan 01 · Local

Gemma 4 fits in a gigabyte

$0 · on-device

Google DeepMind released quantization-aware-training checkpoints for Gemma 4. With a new mobile format the E2B model now runs in about 1 GB of RAM, down from roughly 9.6 GB at full precision.

Read the source
Most discussed

Plan 02 · Metered

Agent usage moves to its own meter

$20–$200 / mo credit

From June 15, Anthropic stops drawing Agent SDK usage from the flat chat subscription. It moves to a separate monthly credit billed at API rates, so background and scheduled agents get their own line item.

Read the source

Plan 03 · Accountable

Vercel papers who the agent is

you sign the terms

Vercel updated its Terms of Service to spell out shared responsibility when actions on your account are taken by AI. The fine print is starting to name the agent as a party to the work.

Read the source

Today's art direction

Pricing & Packaging Page / Tiered Plan Comparison

A SaaS pricing page: a dark plan band, three tier columns bridging into ivory, one plan recommended.

Today's page is built like the pricing page every SaaS site eventually ships: a dark plan band up top, three tier columns that overlap the seam into the lighter section below, and one tier marked as the popular pick. The news items are the plans, each with a price chip standing in for its hook. The reusable move is the layout itself, recommended tier set apart by weight and surface rather than a colored side stripe, and a comparison matrix that tells the truth about the trade between columns.

plan bandtier columnprice chiprecommended ribbon comparison matrixfeature rowamber on navyFraunces display

Tooling

Small enough to run where the page is


Quantization-aware training simulates the rounding errors of compression while the model is still learning, so the smaller version loses far less quality than squeezing a finished model would. The practical result Google reports is a Gemma 4 E2B that fits in roughly a gigabyte, with checkpoints packaged for llama.cpp, Ollama, and LM Studio.

For people building interfaces, the line that matters is the one a model crosses when it can live next to the work instead of behind an API. A design or build assistant that runs on the machine changes the latency, the privacy story, and the offline behavior of whatever you ship around it. Coverage of the release puts the edge models well inside laptop and phone budgets.

Technique

Read the plan before you pick it


Three announcements this week describe the same shift from different desks: where the cost of an AI build lands, and on whom. Laid side by side they read like a comparison matrix, which is the honest way to choose a plan.

Where the price of building moves, by plan
 LocalMeteredAccountable
What changedModel runs on-device in ~1 GBAgent usage billed separatelyTerms name AI-taken actions
Who paysYour hardwareA monthly creditYou, by signing
In effectJun 5Jun 15Jun 4
The tradeSmaller model, your RAMPredictable, but cappedYou own the agent's moves

The middle column is the one builders are arguing about, because a flat subscription quietly subsidized a lot of background agents. Once that usage gets its own meter, the cost of letting an agent run unattended becomes a number you can see.

Workflow

Scope the agent like a paid seat


Vercel's new language about actions taken on your account by AI is a quiet signal worth acting on before the bill or the audit does. Treat an agent that touches your project as a real account with real reach, and give it the smallest plan that still works.

  1. Give each agent its own scoped credential, not your personal token, so its actions are attributable and revocable.
  2. Prefer short-lived, single-purpose access over standing keys, the way a signed upload URL expires instead of granting the whole store.
  3. Keep a reviewable trail of what the agent did, and decide which moves it may take unattended versus which wait for a human.

“The cheapest plan is the one where you can still see what you are paying for.”

Field desk, Art Direction Daily

Prompt Lab

Recreate this page


Paste this into your AI design or build tool to reproduce today's visual system.

Design a single self-contained HTML page styled as a SaaS pricing and
packaging page, the kind a product site ships to compare plans.

PAGE ARCHETYPE: a tiered pricing page. Above the fold, a dark slate plan
band holds the top nav, a small masthead line, a large headline, a short
deck, and an abstract plan-stack image on the right. Three pricing-tier
columns sit centered and overlap the seam where the dark band meets the
lighter page below.

COMPONENTS: three tier cards, the middle one "recommended" and set apart
by a darker surface, heavier type, and a small ribbon, never a colored
left stripe. Each card has a small-caps plan label, a tier name, a
monospace price chip, one short sentence, and a text link styled as the
plan's call to action. Below, build the article sections with a
comparison matrix table (real text cells, not check marks), numbered
workflow steps, one pullquote, and a numbered sources list.

PALETTE: ivory paper #FBF8F1, deep slate band #1B2435, amber accent
#C07E1E for prices, ribbon, and marks, slate #5A6377 for secondary text,
hairline #E4DECF. No purple-blue gradient, no neon, no glow.

TYPE: Fraunces for the headline, tier names, and section headings;
Instrument Sans for body prose; Spline Sans Mono for price chips, labels,
and metadata.

GUARDRAILS: body text at least 18px with 1.6 line height and WCAG AA
contrast. Never set long prose on the dark band. Cap card radius around
14px and chips around 7px; vary radius with purpose. Give cards and links
honest hover and focus states with ~160ms easing, and disable transforms
under prefers-reduced-motion. No fake toggles or dead search fields, and
no readable text inside the generated image.

Field Note

The bottom line


Note On the same weekend a model got small enough to run for free on your laptop, the agents in the cloud started charging by the credit. An essay arguing the web's problems are about incentives, not AI is climbing Hacker News at the same time. Pick the plan that keeps the cost, and the control, where you can see them.

Sources

Linked this issue


No. 030 · Saturday, 6 June 2026 · Pricing & Packaging Page / Tiered Plan Comparison · Type: Fraunces, Instrument Sans, Spline Sans Mono · Palette: slate band, ivory paper, amber, slate, hairline · Follow @artdirdaily on X

A field experiment from the team behind Beaver Builder.