Case Study

Design skills for AI

I built a set of open-source design agents that encode my entire approach to product design, from strategy through engineering handoff. The case study outlines why I did this, how I did it, and what I learned.

TL;DR?

Grab the design agents and skills and drop into Claude or Cursor. If you're curious about how I built these and how they changed my workflow, keep reading.

Get the skills on GitHub
Context

AI is not going away, and designers who ignore it will get left behind

I've been a designer for 20 years. In that time, the tools have changed constantly, but the underlying craft has stayed the same: understand the problem, map the system, design the experience, hand it off cleanly. The tools are just how you express the work.

AI is the newest tool. And like every tool shift before it, there's a wave of dismissal from designers who tried it once, got mediocre results, and concluded it wasn't for them. I know because I was one of them.


The Problem

I was judging AI based on the quality of my input, not its capability

My early experiments with AI tools followed a pattern: I'd give it a vague prompt, get a generic output, and feel vindicated in my skepticism. "See? It doesn't understand design." But the problem wasn't the tool. It was me.

AI works like any other system. The output will not exceed the quality of the input. If you give it shallow context, you get shallow work. If you give it the same depth of context you'd give a senior colleague joining your team, you get something genuinely useful.

I was treating it like a magic box instead of what it actually is: a system that needs rich, structured input to produce rich, structured output.


The Breakthrough

Giving Claude my entire body of work

The shift happened when I stopped prompting from scratch and started giving Claude real context. I told it to go through my entire body of work from the past ten years: strategy documents, UI designs, workflow diagrams, research syntheses, engineering specs, everything. Then I asked it to analyze my approach to design end to end.

What came back was surprisingly coherent. Claude identified patterns in how I frame problems, how I structure flows, how I think about handoffs. Patterns I hadn't fully articulated to myself. From there, we worked together to abstract out generalizable skills and create a set of specialized agents based on them.

The result is five agents, each focused on a distinct phase of the design process: a strategist for problem framing, a systems architect for mapping underlying structures, a creative director for visual identity, a flow designer for user experiences, and a handoff specialist for engineering specs.


What I Built

An open-source repo of design agents and skills

The repo is structured in two parts. Agents are role-based prompts that define how each agent thinks, what it prioritizes, and how it communicates. Skills are detailed implementation guides that give each agent deep knowledge of methodology, output templates, and quality standards.

design-skills/
├── agents/
│   ├── strategist.md
│   ├── systems-architect.md
│   ├── creative-director.md
│   ├── flow-designer.md
│   ├── handoff-specialist.md
│   └── HOW-TO-USE.md
├── skills/
│   ├── strategist/
│   ├── systems-architect/
│   ├── creative-director/
│   ├── flow-designer/
│   ├── handoff-specialist/
│   └── for-upload-to-claude/
├── README.md
└── LICENSE (CC0 — public domain)

You can use them in Claude Projects by uploading the agent prompt as a project instruction and the matching skill as project knowledge. You can also drop them into Claude Code or Cowork. The agents work individually for focused tasks or in sequence for larger projects: strategist first, then systems architect, then creative director and flow designer in parallel, then handoff specialist to package everything.

The repo is on GitHub under a CC0 license. Take it, fork it, make one of your own.


How It Works

Context in, quality out

The whole system is built on one principle: give the AI enough context and it will do meaningful work. Each agent prompt encodes not just what to do, but how to think about the work, what to prioritize, when to push back, and what good looks like. The skills go deeper, providing frameworks, templates, and quality criteria drawn from real projects.

In practice, this means I can hand off a strategy brief to the strategist agent and get back a document structured the way I would structure it, asking the questions I would ask, with the same emphasis on reframing business problems as customer problems. The work still needs my judgment. But the scaffolding is there, and it's my scaffolding.

Results

Accelerated output without sacrificing quality

~1 week → hours
Strategy documents that used to take a full week to write now take a few hours of focused work with the strategist agent
hours → minutes
Moodboards that required hours of manual research and curation now come together in minutes with the creative director agent

The quality hasn't dropped. If anything, it's improved, because the agents force a level of structure and completeness that's easy to skip when you're doing everything manually under time pressure. The boring parts get automated. The judgment and taste stay mine.

The Bigger Idea

AI is bringing back the open web we lost

Here's the part I keep thinking about.

In the early days of the web, designers and engineers worked together fluidly. They shared a baseline understanding of the building blocks: HTML and CSS. Designers could prototype in the browser. The gap between intent and implementation was small.

Then frontend got complex. Frameworks proliferated. Designers got pushed out of code and into specialized tools. We went from prototyping in the medium to drawing pictures of software in Figma and tediously connecting those pictures together with increasingly complex prototyping features that never truly matched the fidelity of what basic HTML and CSS could achieve.

Our workflow became about perfecting pixels. And because that workflow was so time-consuming, the things that actually matter — collaborating fluidly with engineers, rapidly prototyping, testing with real users — took a backseat to making things look right in a design tool.

effort value fidelity ceiling
Figma prototype
effort value fidelity ceiling
HTML / CSS prototype
effort value full fidelity
AI-assisted prototype

Value vs. effort for three prototyping approaches. Figma prototypes hit diminishing returns quickly and never reach full implementation fidelity. HTML/CSS prototypes achieve full fidelity but require significant effort. AI-assisted prototypes reach full fidelity with dramatically less effort.

I used to build prototypes for only the most complex scenarios where I needed to test intricate interactions. Everything else wasn't worth the effort because the returns diminished so quickly. The investment in connecting screens and mimicking real behavior in a design tool rarely justified itself unless the interaction was genuinely complicated.

AI changes that equation. With AI tools, I can go from concept to a working HTML/CSS prototype in the time it used to take me to set up a Figma prototype. The fidelity ceiling is higher and the effort floor is lower. That means more time for the work that actually matters: understanding users, testing ideas, collaborating with engineering.

This is what the early web promised. Designers and engineers sharing a common language, building together, iterating fast. AI didn't invent that dream, but it might be what finally makes it practical again.


Reflection

What I took away from this work

Building these agents taught me something about my own practice that I wouldn't have learned any other way. When you have to make your design approach explicit enough for another intelligence to follow it, you discover which parts of your process are principled and which parts are just habit. That exercise alone was worth the effort.

But the thing I want other designers to take from this is simpler: your design judgment is the input, not the thing being replaced. These agents are powerful because they encode a specific point of view about how design should work. Without that point of view, they'd produce the same generic output everyone complains about.

The repo is open source under CC0. Take the agents and use them as-is if they fit your workflow. Fork them and rewrite them to match your own approach. Or start from scratch and build your own. The point isn't to use my methodology. The point is that encoding your methodology into AI tools is possible, practical, and probably the most important investment you can make in your practice right now.

Download the repo

Five design agents and skills ready to drop into Claude or Cursor.

Get the skills on GitHub