Adding Claude Design as an option

Until the introduction of Claude Design, every project in Agent Dashboard chose between two paths for UI work.

The first was the frontend-design skill — the frontend agent designs the UI freely, working from wireframes the UX agent produced. It was fast. It produced surprisingly polished output. The cost was that two screens by the same agent on the same day could end up with subtly different button radii or spacing scales, because the agent wasn't anchored to anything beyond "this looks right."

The second was Pencil. The designer agent creates a .pen file, I review and approve, the file lands in the repo, and the execution workflow implements the UI against it. After the frontend agent ships, screenshots get diffed against the Pencil source via a heatmap to catch drift. Välkomna was built this way for exactly that reason: I wanted the pages across the site to stay visually consistent with each other, and pinning every screen to a single Pencil source plus the heatmap diff was the mechanism for it.

Both paths worked. They had different costs. Free design needed taste-policing afterward; Pencil needed a per-screen design pass before execution could start. On a fast-moving project the Pencil path was the bottleneck, and on a slow-moving project the free-design path was the cleanup.

Claude Design changed the shape of the choice. I added it as the third option in the dashboard's project-setup flow. Instead of designing each screen, the project gets a design system up front — colours, type scale, spacing units, component primitives — and both UX and frontend agents read from that system as their constraint. The agent isn't designing freely from "what looks right"; it's composing from a system that already decided.

Three projects now use it.

Sickla tunneln was converted first. The tunnel-status app had grown organically and the conversion forced every screen to be re-grounded against a single design contract. The risk-by-hour redesign (PRD-005g) was the first PRD to ship under the new system; the rest of the surfaces followed in normal-velocity work after.

DeskRhythm was the second conversion. The "Atmospheric Chronometer" system had been documented in DESIGN.md since the initial commit (3b72a25, 2026-03-29) but lived as a creative brief — aesthetic direction, not an architectural commitment. The Claude Design switch promoted it to a binding contract; the architect formalised it as ADR-004 — Design system "The Atmospheric Chronometer" on 2026-04-28.

This studio site was the third. There was nothing to convert — mynextstudio.com was designed from scratch under the system. Tokens, terminal panels, the workflow loop diagram, the dashboard tour layout, the Journal entry typography — all of them composed from primitives the system already specified. The dashboard tour images and the screenshot lightbox added in PRD-008 and PRD-009 fit without re-deciding any spacing or border radius.

The pattern that's emerged: per-screen Pencil work is the right tool when one specific surface has to be visually exact, and Claude Design is the right tool when the project needs a coherent system across many surfaces. Free design has slid into "use this for prototypes and throwaways, never for product surfaces."

Claude Design is now the default for new projects in Agent Dashboard. Pencil is reserved for the specific surfaces that warrant it — the heatmap diff still earns its keep on a hero screen the studio cares about.