Art Direction Daily

Agentic Web Design Supply

Home Energy Statement

The meter starts before you type

A proxy audit found Claude Code spending about 33,000 tokens before it reads your first word. Today's issue is typeset as the utility bill for that phantom load: meter readings, an itemized tariff table, and the tools racing to make agent sessions inspectable.

This statement covers
8 sources
Meters read
7 of 7
Reading type
Actual, verified on the primary source
Current readingEST
33,000
tokens before your first word (Claude Code)
Previous supplierOpenCode · 7,000
Cutaway illustration of a house at night with standby devices glowing magenta: a router, a television, a fridge, and chargers.
Fig. 1 Phantom load: what the house draws while nobody is home.
Meter 01

The audit

Items 01

Claude Code sends 33k tokens before reading your prompt; OpenCode sends 7k

Systima put a logging proxy between two coding harnesses and the model API and measured what each one ships before the user says anything. Claude Code's baseline came in around 33,000 tokens of system prompt and tool schemas against OpenCode's 7,000, with cache writes running up to 54x higher mid-session. Output quality stayed level across both. The study's summary line is the one to remember: the harness sets the floor, your configuration sets the bill.

Itemized charges, per SystimaTokens
Claude Code baselineBefore the first user word
33,000
72KB instruction fileAdded to every request
+20,000
OpenCode baselineSame job, other harness
7,000
Five MCP serversSchemas ride along per request
+5,000 to 7,000
Two subagents on one task121,000 tokens became 513,000
513,000
× 4.2 MULTIPLIER

Figures from the Systima proxy capture, July 12. Bars share one scale; the multiplier row is a rate, so it gets a stamp instead of a bar.

Meter 02

Tooling

Items 03

Hiver pitches Chrome DevTools for agents

An open source runtime that records a session end to end, then plays it back: browser steps, file writes, outbound requests, each tool invocation and approval. Workspaces sit behind ACLs, network access is policy-gated, and adapters cover the Claude Agent SDK, OpenAI Agents SDK, and Google ADK.

Juggler, a GUI coding agent from the creator of JUCE

The developer who created JUCE, the audio application framework, shipped an AGPL coding workbench with a real GUI. Sessions are trees instead of one scrolling chat: sub-threads stay editable, tool calls open for inspection, and Miller columns carry the navigation. A different answer to the same question, which is how you see what your agent actually did.

Meter 03

Technique

Items 01

How to stop Claude from saying load-bearing

Johanna Larsson had heard Claude call one too many things load-bearing, so she built a message hook that catches the model's text and swaps its pet phrases on the way to the screen. The post walks through the wordswap script and where it lives in the settings file. This publication keeps a banned-phrase ledger in its own linter, so the technique reads less like a joke than a portable house-style enforcement layer.

Meter 04

Workflow

Items 02

Codex encrypted its subagent prompts, and users want the audit trail back

A regression report filed against OpenAI's Codex CLI in mid-June boiled over on Hacker News today: a merged change encrypts the messages Codex passes between agents, which also strips the human-readable record of what each subagent was told to do from local session history. The issue asks for a plaintext companion field so operators can still audit delegated work; OpenAI has not yet replied in the thread.

Vercel's Agent Runs now show subagent activity

The counterpoint shipped a day earlier: Vercel's Agent Runs view now surfaces what subagents did on eve projects, so delegated work appears in the run timeline instead of vanishing into the parent task. Two platforms, opposite bets on how much of the session you get to see.

Borrow this patternDesign move

The statement row

One grid row holds a label, a tabular figure, and an inline bar whose width is the value scaled against the group maximum. The table stays a table: readable, accessible, easy to maintain; the bar is a background rectangle, no chart library involved. Use it for pricing tiers, usage summaries, and plan comparisons, anywhere a client asks for a dashboard but the data is really ten numbers. Keep it honest: every bar shares one scale, the figures are real, and rates or multipliers that do not fit the scale get a labeled stamp instead of a fake bar.

Meter 05

Prompt Lab

Copy + paste

Hand this to an AI design or build tool to reproduce the day's art direction. The prompt carries the whole system, so it stands alone.

Design a single-page "home energy statement" for a modern utility brand,
as a shippable web page.

Archetype: an account statement page. A thin top nav, then a statement
header: supplier name in a wide grotesque, a document label, and a 4-column
account grid (statement number, read date, service, estimated read) set in
a tabular monospace with small uppercase labels.

Layout: hero splits 1.35fr / 0.95fr. Left, a large display headline and a
two-sentence deck. Right, a "meter readout" panel: inverted header strip,
one oversized monospace figure in the accent color, a small uppercase unit
line, and a dashed-rule comparison row. Below it, a framed illustration
captioned as Fig. 1. After the hero, sections run as "meter readings": a
2px top rule, a small accent meter number, a bold section title, and a
right-aligned item count. The centerpiece is an itemized tariff table:
each row is label + tabular figure + an inline usage bar sized to the
value against the group maximum. Rates that do not fit the scale get a
rotated stamp chip instead of a bar.

Surface: warm off-white paper with wide pale sage green-bar stripes
(repeating background bands) and dotted tractor-feed perforation rails on
both page edges, hidden on mobile.

Palette: paper #F7F5EA, stripe #E4ECDD, ink #232B24, ledger green #3E5A45,
utility magenta #C2255F reserved for readings, bars, and key figures.

Type: Bricolage Grotesque (700/800) for the brand, headline, and section
titles; Public Sans for body text; Spline Sans Mono for every number,
label, and caption. Body at least 19px with 1.65 line height, max ~70
characters per line, never justified.

Guardrails: WCAG AA contrast for small text, including labels on green or
magenta; no gradients, no glow, no neon-on-dark; radius 0 to 3px, print
style; no fake toggles or dead search fields; hover states on real links
and rows at 120-180ms; respect prefers-reduced-motion; if the
illustration contains text it must be abstract or blank, never garbled
readable text.

Works in: v0, Beaver Builder AI, Figma Make, Lovable, Claude artifacts, Subframe.

Meter 06

Field Note

Closing

Utilities discovered that people cut their phantom load once the statement made it visible. Agent tooling is at the start of the same curve, and this week the meter readers showed up.

Meter 07

Sources

Items 08