Agentic design begins with the loop.
Agentic design is the practice of directing AI agents through real design work: setting intent, producing artifacts, critiquing with taste and evidence, then moving the strongest result toward use. This page is the beginner path — why it matters, the operating model, your first exercises, and what to read at each stage.
Why learn agentic design now
Not because the tools are exciting, but because the shape of design work is changing — and judgement only improves when it is practised against real agent output.
Agents can now produce drafts, prototypes, audits, and research packets in minutes. The scarce skill is no longer production speed — it is framing intent, judging quality, and deciding what ships. That is design judgement, and it does not transfer automatically. It has to be practised against real agent output.
An agent will happily generate ten plausible directions. None of them know your product, your users, or your brand unless you teach them. Designers who can encode taste as constraints, examples, and review criteria get dramatically better output than designers who type one-line prompts.
Agentic design is not a coding course. You work in plain language: briefs, critique notes, references, and checklists. Code shows up as an artifact you review, the same way you already review a build against a mock — except now you can ask the agent to explain and fix it.
Brief, generate, critique, revise, ship. That is the whole operating model. Every article, workflow, and course on this site is a variation of that loop applied to a different design problem. Learn the loop once and every new tool becomes a detail.
The designer-agent loop
Use this as the first operating model before choosing any specific agent, tool, or workflow. Every article and workflow on this site is this loop applied to a different design problem.
Frame intent, constraints, audience, references, and taste.
Create drafts, variants, code, diagrams, audits, or research packets.
Compare the artifact against product goals, brand taste, and user needs.
Steer the work with sharper evidence, examples, and boundaries.
Turn the artifact into a usable page, workflow, test, or team practice.
Brief“Redesign the empty state of our analytics dashboard. Audience: first-time admins. Constraint: use existing tokens and components only. Reference: the onboarding checklist pattern on our settings page. Before generating, list the criteria you will judge the result against.”
GenerateThe agent produces two empty-state variants as working markup, plus the criteria list you asked for: clarity of next action, token compliance, copy tone, and accessibility of the call to action.
CritiqueYou compare the variants against the criteria and the product goal. Variant A buries the primary action; variant B invents a new button style. You note both findings with evidence, not vibes.
Revise“Keep variant B's layout, but replace the custom button with our default primary button component, and rewrite the heading so it names the user's goal, not the feature.”
ShipThe strongest variant goes into the prototype branch with a short note on what was changed and why — and the brief gets saved as a template for the next empty state.
A four-stage learning path
Work through the stages in order. Each one names the goal, explains why it matters, gives you concrete things to do, and links the articles, workflows, and books that cover it in depth.
Understand the shift
Most early frustration with agents comes from wrong expectations: treating them as search engines, expecting mind-reading from one-line prompts, or assuming the output is finished work. One or two evenings of reading fixes this and saves weeks of trial and error.
- Read how a vague prompt and a specific prompt produce wildly different results on the same task.
- Skim the platform comparison so the tool landscape stops feeling overwhelming — the choice matters less than you think.
- Read the opening chapters of The Agentic Designer for the operating model behind everything on this site.
The same pricing-page request run twice — once vague, once specific — with the actual output, audit results, and the rewrite patterns that made the difference.
An honest comparison of the mainstream CLI agents, plus the portability argument that makes the choice smaller and more reversible than vendors want it to be.
The operating model for product designers and design leads who need to understand what changes when agents join design work.
Run your first loop
Reading about the loop is not the same as feeling where it breaks. Your first run will expose exactly which part of your briefing is weakest — usually the constraints and the review criteria. Pick something low-stakes from your actual work, not a toy exercise, so the critique step has real teeth.
- Pick one small task: a copy audit, an empty state, a research question.
- Write the brief using the template in the briefing article — context, constraints, references, and review criteria before you ask for anything.
- Run a Foundation-level workflow end to end and keep notes on where the output surprised you.
A practical workflow for turning a loose design request into a reviewable agent brief, with reusable templates and a traced run on this site's own pages.
Foundation difficulty, 20–45 minutes per question. Answer a design question with cross-checked, cited evidence — the gentlest possible first workflow.
Foundation difficulty. Sweep product copy against a style guide and get a prioritised fix list — a contained task with an obvious before and after.
Teach the agent your standards
The single biggest quality jump comes from moving your standards out of prompts and into files the agent reads automatically: project instructions, design tokens, component rules, and review checklists. This is what separates one-off lucky results from consistently usable output.
- Build a small design harness: instruction files, token references, and a QA checklist for one project.
- Learn how the instruction hierarchy works so project rules, skills, and memory stop fighting each other.
- Connect one MCP server that matters for your work and run a real review through it.
A file-by-file walkthrough of turning design-system rules, examples, and QA checks into a reusable harness — including the harness behind this site.
How project instructions, path-scoped rules, skills, and memory fit together, with copyable starting files.
Turn colour, type, spacing, and component decisions into token files that agents can read, use, and verify.
A plain-language guide to the Model Context Protocol: what it is, which design servers are worth connecting, and the permission hygiene that keeps them safe.
A practical guide for designers working directly with a coding agent — briefing, prototyping, reviewing implementation, and shaping design systems.
Make it repeatable
The compounding value of agentic design shows up when critique, QA, and audits stop being heroic individual efforts and become scheduled, repeatable sweeps with evidence attached. This is also where multiple agents, structured critique, and prototype-versus-production discipline start to matter.
- Adopt one repeatable QA workflow — visual regression or accessibility — and run it on a real release.
- Formalise critique: findings with evidence and severity, not opinions.
- Decide explicitly which artifacts are prototypes and which are heading to production, before the agent blurs the line for you.
Turn agent critique from vague opinion into structured findings, evidence, severity, revision passes, and human design decisions.
Intermediate difficulty, 30–60 minutes per sweep. Capture every key page and viewport, fan out compare agents, and drive fix passes until the product matches the approved design.
Foundation difficulty, 45–90 minutes. A codebase-wide accessibility audit that combines static checks with agent judgement and re-verifies every fix.
An operating model for exploring quickly without accidentally shipping rough prototypes as fragile production code.
Three exercises you can run today
Each takes under an hour, needs nothing more than an agent and something from your real work, and ends with an artifact you can judge. Copy the prompts as written, then adapt them.
Take a screenshot of one screen from your product and ask an agent to critique it against criteria you set. You stay in judgement mode the whole time — no code, no setup, just structured critique you can compare against your own instincts.
Starter prompt
Here is a screenshot of our account settings page. Audience: existing customers managing billing. Critique it against these criteria: visual hierarchy of the primary action, scannability of the form sections, accessibility of colour contrast, and tone of the helper copy. For each finding, give the evidence from the screenshot, a severity (high / medium / low), and one suggested fix. Do not redesign the page.
Success looks like: A ranked list of findings where at least one genuinely surprises you, and at least one you disagree with — disagreeing with evidence is the critique skill you are practising.
Take the last loose request you received — “can you make the dashboard feel more modern?” — and turn it into an agent-ready brief. This is pure writing practice and it improves how you brief humans too.
Starter prompt
I am going to give you a vague design request. Before doing any design work, ask me the five questions whose answers would most change the outcome. Then restate the request as a structured brief with: product context, audience, constraints, references, what is explicitly out of scope, and the criteria you will use to judge the result. The request: “Make the dashboard feel more modern.”
Success looks like: A brief specific enough that two different agents (or two different designers) would produce recognisably similar work from it.
Pick a real question your team has hand-waved about — “what do competitors do for plan upgrades?” — and run the Deep Design Research workflow. Research is the safest first workflow because the output is a document you evaluate, not code you have to trust.
Starter prompt
Research question: how do leading B2B SaaS products handle the upgrade prompt when a user hits a plan limit? Compare at least four products. For each, describe the trigger, the UI pattern, the copy approach, and how dismissible it is. Cite where each observation comes from, separate observed facts from your inferences, and end with three patterns worth testing in our product.
Success looks like: A cited research packet you would be comfortable pasting into a team channel — and a clear sense of which claims you would verify yourself before acting on them.
Six beginner mistakes that waste the most time
Every one of these comes from real runs, not theory. Recognising them early is the difference between a productive first month and concluding the whole thing is hype.
Instead: Treat the prompt as a brief. Context, constraints, references, and review criteria first. The vague-vs-specific article shows the gap side by side on identical tasks.
Instead: Polished-looking output is the default failure mode, not a success signal. Always run at least one critique-and-revise pass against criteria you wrote before generating.
Instead: Move standards into files the agent reads automatically — instructions, tokens, checklists. That is Stage 3, and it is the highest-leverage hour you will spend.
Instead: Start with contained, low-stakes tasks where you can judge quality confidently: copy audits, research questions, single screens. Earn trust in the loop before betting a launch on it.
Instead: Decide upfront which artifacts are throwaway explorations and which are heading to production, and hold them to different standards. Agents will not make this distinction for you.
Instead: Every platform runs the same loop. Pick one, keep your briefs and instructions in portable plain-text files, and switch later if you need to — the skills transfer, the subscriptions do not matter.
Questions every beginner asks
Short, honest answers — with pointers to the longer treatment elsewhere on the site.
No. You need to be able to read an agent's explanation of what it did and judge the result against design intent. Many of the workflows on this site — research, copy audits, critique — involve no code at all. When code does appear, the Claude Code for Designers book covers exactly how much you need to understand and no more.
It matters less than it feels like it does. The platform comparison article walks through the current options, but the honest answer is: pick whichever your team already has access to, keep your briefs and instruction files portable, and revisit the choice once you have run a few real workflows.
The first exercise on this page takes under half an hour and produces a critique you can use the same day. Stage 2 — one full loop on a real task — fits inside a normal working week. Stage 3 and 4 are where the compounding starts, and most people get there within a month of deliberate practice.
It replaces some production work and amplifies judgement. The designers who struggle are the ones whose value was mostly production speed; the ones who thrive are the ones who can frame problems, encode taste, and critique with evidence. This site exists to build exactly those skills.
The two field manuals behind this curriculum
Both books are free to read online. The Agentic Designer covers the operating model; Claude Code for Designers covers working directly with a coding agent day to day.
The operating model for product designers, design leads, and builders who need to understand what changes when agents join design work.
A practical guide for designers who want to work directly with coding agents without turning it into a programming manual.
Long-form, evidence-traced guides on briefing, harnesses, critique, visual QA, MCP, and design systems.
Repeatable operating loops with difficulty levels, time estimates, and runnable companion code.
Practical experiments and workflow notes as they are published — no announcements-only filler.