Practical guides for designing with agents.

A practical workflow for turning a loose design request into a reviewable agent brief — with a traced run on this site's own field-notes page, real plan-mode guidance for Claude Code, Codex CLI, OpenCode, and Gemini CLI, and the templates to reuse the same day.

A prompt teardown with the receipts: the same pricing-page request run twice — once vague, once specific — with the generated code, audit output, iteration counts, the residual failure neither prompt fixed, and the rewrite patterns that made the difference.

A long-form workflow for using agents to inspect screenshots, compare implementation against intent, run accessibility checks, and produce fix-ready review notes — traced against a real review of this site's own article page.

A practical tutorial for turning design-system rules, project instructions, skills, examples, and QA checks into a reusable harness that keeps agent-generated UI from drifting into generic output — including a file-by-file walkthrough of the harness behind this site.

A practical decision guide for splitting design work across agents — with a small, real orchestration trace, the briefs and merge log it produced, sourced cost numbers, and clear examples of when a single agent is the better choice.

A practical guide to turning color, type, spacing, radius, and component decisions into token files that agents can read, use, and verify.

A practical workflow for turning agent critique from vague opinion into structured findings, evidence, severity, revision passes, and human design decisions.

A deep workflow for using screenshots as implementation evidence while preserving hierarchy, spacing, states, accessibility, and design-system intent.

A designer-friendly operating model for using agents to explore quickly without accidentally shipping rough prototypes as fragile production code.

A deep workflow for finding design-system drift across tokens, components, screenshots, copy, interaction states, and product meaning.

A practical editorial system for turning tool changes, reader questions, screenshots, examples, and experiments into durable agentic-design curriculum.

How CLAUDE.md, AGENTS.md, path-scoped rules, skills, and auto memory fit together into one instruction hierarchy, with current cross-tool behavior, a four-configuration trace of the same prompt, and copyable starting files.

When a design procedure deserves to become a SKILL.md, what goes inside one, and how to build, trigger, trust, and share it — with a real skill built for this site's own editorial pipeline, including the part that went wrong.

What changes when design decisions live as token JSON and design surfaces live as text files: a worked token-to-CSS case study with a real one-line diff, an honest look at the .pen and .op formats, and a same-day workflow for making design changes reviewable.

An honest comparison of the four mainstream CLI agents for design-to-code work — config support, skills, MCP, sandboxing, pricing, and churn risk — plus a decision framework, a traced case study, and the portability argument that makes the choice smaller and more reversible than vendors want it to be. Every volatile fact is date-stamped: last verified June 2026.

A practical guide to design canvases an agent can read and write directly — Paper's HTML/CSS canvas and Pencil's repo-resident vector files — including MCP setup for Claude Code and Codex CLI, a worked landing-section round trip from canvas to JSX and back, and an honest look at where Figma still wins.

A plain-language guide to the Model Context Protocol for designers: what it actually is, which design servers are worth connecting today, how to configure them on Claude Code, Codex CLI, OpenCode and Gemini CLI, how to chain a design server with a browser server into a real implementation review, and the permission hygiene that keeps third-party servers from becoming a liability.

A sober map of the open-source design tooling that assembled itself around agent CLIs in 2026 — what Huashu Design, Open Design, and OpenPencil actually contain, how they relate to each other and to Claude Design, a worked comparison of two of them on the same brief, and an evidence-based checklist for adopting community design tooling without getting burned by hype, churn, or unreviewed code.

Design systems decay between redesigns, not during them. This article traces a real accent-token change across CSS variables, components, and prose documentation, shows the review gate that caught a deliberately introduced error, and lays out the standing maintenance loop an agent can run — plus the deprecation, breaking-change, and taste decisions that stay human.

What actually stands between a designed section and a shipped page in mid-2026: the export step that mostly works, the gates that make it shippable, and an executed case study that records what each gate caught — including the defects no automated check noticed.

Programmatic video has become an agent output: a 30-second feature clip can be authored as code, reviewed like any other artifact, and rendered to MP4 from the terminal. This article compares Remotion and Hyperframes honestly — authoring model, render paths, agent integration, and licensing — and traces a real product feature clip from prompt to MP4, including the gate that caught the failures.

How to actually run a team of design agents once you have decided to split the work — decomposition patterns, what agent teams, subagents, worktrees, and concurrent canvases support today, a five-surface orchestration run executed for this article, and the complexity tax with the run's own numbers.

Four real agentic design workflows traced from their own repositories — an editorial site, a multi-agent book pipeline, a book-to-video pipeline, and the design system underneath the site — with the timelines git can prove, the configs that did the steering, the failures the gates caught, and the patterns that repeat across all four.

A field note and an opinion: our read on the next year of agentic design — design and code converging into one reviewed loop, design systems turning into machine-readable contracts, real-time human-plus-agent work still mostly a promise, and platform churn as the argument for portable harnesses.

Five prompts we keep reusing for design work with agents, quoted verbatim from the deep articles where they were first published and traced: what each one does, the line that does the work, and where it fails. Not a benchmark — a teardown of the prompts that earned a permanent place in our library.

A field note for designers who have never opened Claude Code: install it, log in, write one specific brief, and walk out of the session with a real hero.html you can open in a browser. The walkthrough was executed for this article — including the things the first pass got wrong — and every command carries a verify-before-running caveat because onboarding steps move fast.

A dated snapshot of what agentic design tooling costs — Claude, ChatGPT/Codex, Google's AI plans, and the bring-your-own-key route — and a usage-pattern heuristic for choosing between them. Every figure was captured on 2026-06-01 and is the most perishable content on this site: verify on the official pricing pages before deciding anything, and expect this page to change as the tool-watch loop re-verifies it.