Building an agentic design pipeline

How I moved from doing every part of a product alone to running a pipeline of agents that does it with me.

I did not set out to build a pipeline. I set out to keep up.

For a stretch I was the only designer on a product, responsible for research, UI design, front-end implementation, and marketing. Four disciplines, one person. The work moved in phases rather than all at once, but the phases overlapped: user interviews and testing in one, screen design and front-end implementation in another, campaign assets alongside. At no point was I doing only one job.

I was skeptical of what AI gave me, so for a long time I treated it as a fast draft I would throw away, not an answer I would trust. I kept it on a short leash and only expanded its role where it earned it.

Six months later the leash is a system. Here is how it is built, tool by tool, and the one principle underneath it.

Research and synthesis

The first place AI earned trust was research, because research is where I could check its work against my own transcripts.

I use Claude for synthesis, theme generation, and first-pass data analysis, always as a second reader rather than a first one. I run the interviews, then have it cluster and surface patterns◇, then I argue with the result. Notion holds the raw material and the agreed themes.

The structure that made this reliable was skills. I did not write them, but I built the logic of when each one gets called.

# Research cluster
npx skills add mattpocock/skills        # research, to-prd, to-spec
npx skills add obra/superpowers         # brainstorming, writing-plans, executing-plans

Execution

Execution is where the pipeline does the most visible work.

Claude Code runs UI implementation, design-system code, iteration, and motion. The rules live in a set of markdown files that go beyond a classic design system.

A component library tells an agent how a component is built. It does not tell it when or why to use one, and that gap is where AI-generated screens drift: same component, different spacing, layouts that wander across sessions. The markdown files close the gap by writing down the reasoning a team usually keeps in its head. I structure the core design-system.md in three layers:

• Tokens. Every value, referenced by variable name rather than raw number, so the agent reaches for space-card-padding, not 16px.
• Intent. When to use each token and style, when not to, what tradeoff shaped it, and which cases are exceptions. This is the layer a component library cannot hold.
• Guardrails. The standing do's and don'ts every generation has to respect.

Around that core sit the files a Figma library has no place for:

/design
  design-system.md      # tokens, intent, guardrails
  claude.md             # standing rules, voice, priorities
  motion.md             # curves, durations, reduce-motion
  interactions.md       # micro-interaction patterns

The payoff is consistency across sessions. A new session reads the same intent and guardrails the last one did, so the tenth screen matches the first instead of drifting away from it.

For motion and prototyping I use Rive, anime.js, and GSAP, driven from the same rules◇.

npm install animejs gsap
# Rive: https://rive.app  (runtime: npm install @rive-app/canvas)

# Execution and design cluster
npx skills add anthropics/skills        # frontend-design, webapp-testing
npx skills add obra/superpowers         # writing-plans, executing-plans, subagent-driven-development
npx skills add vercel-labs/agent-skills # vercel-react-best-practices
npx skills add leonxlnx/taste-skill     # design taste, image-to-code

Graphics and illustration

Visual work runs off a single graphic-design.md that defines the themes, palette, and style rules. The same file drives two tools◇ depending on depth. For interface-level illustration the instruction goes to Figma. For detailed, high-depth illustration it goes to Midjourney, carrying the same style rules so the output stays on-brand.

Audio and video

For motion-heavy content and video I use Remotion, with motion skills, the ElevenLabs API for voice, and Midjourney for visual ideation.

Remotion is the piece that changed most about how I make video, because it makes video the same kind of artifact as everything else in this pipeline: code. Instead of a timeline in an editor, each frame is a React component, and the video is rendered by playing those components across a frame count. Text, motion, and data are all just props. That means an agent can generate and edit a video the same way it edits a screen, and a change to the script is a change to a variable rather than a re-cut. I can go from an idea to a finished video in a day without touching a traditional editor, because the whole thing is written, not dragged.

npx create-video@latest        # Remotion
# ElevenLabs: https://elevenlabs.io/docs/api-reference

# Media cluster
npx skills add remotion-dev/skills      # remotion-best-practices
npx skills add obra/superpowers         # executing-plans, dispatching-parallel-agents

Version control

Because I was working across research, interviews, graphic design, and .md files on Antigravity, everything had been living in Google Drive by default. It was the one place that could hold every kind of file, but it held them as folders with no version history worth the name.

Every design version now lives in GitHub, the same place the code does. It was new for the team, but calling any version, on any surface, became a single reference instead of a folder hunt◇.

Figma did not disappear. It moved. It is now a visual version-control layer and the source of truth for the design system, not the place where design happens. Its one real advantage over GitHub for this is that it is natively visual and fast to change by hand.

design/
├─ design-system.md
├─ claude.md
├─ motion.md
└─ interactions.md

The bridge

The hardest problem was not any single tool. It was getting two of them to talk.

Claude and Claude Code are the same company, reached from the same place, and they cannot share state with each other. An agent that researched a decision could not hand it to the agent that would build it.

So I gave them shared memory◇. Both connect to Notion. Each writes its decisions to a Notion page, and reads the other's decisions from it. Notion became the bridge the two tools do not have on their own, which is also why documentation is not an afterthought in this pipeline. It is the integration layer.

What actually holds it together

Here is the thing I did not expect. Every tool above is replaceable. Claude could be another model. Claude Code could be Cursor or Codex. Figma could be something else. Midjourney could be any image model.

What does not change is the shape. Something researches. Something executes. Something holds versions. Something documents and carries decisions between the others. The tools are instances. The structure is the actual design.

I am not at a fully tool-agnostic pipeline yet. I am still iterating on it, still finding where the seams are. But the direction is clear, and it is the opposite of where I started. I began by asking which tool to use. Now I ask what role is missing, and then find any tool that fills it.

I have not tracked this methodically, but the effect is not subtle. My iteration speed is roughly ten times what it was. I can take a video from idea to finished in a day without knowing how to edit video, because the pipeline writes it. Screens, motion, research synthesis, and campaign assets all move at a pace I could not hit alone, because I am no longer doing each job by hand. I am directing the roles that do.