AI + Design Process

I don't just design
for AI — I design with it.

Over the past year I've moved from using AI as a novelty to integrating it as genuine infrastructure in how I work. Here's what that actually looks like — and what it changes.

The AI-Augmented Design Workflow — five phases from Define through Hand Off
Click to enlarge
The AI-augmented workflow I use across projects — five phases where designer judgment and Claude Code output each have a defined role.
The shift

Context is the real work now.

The insight that changed how I think about AI in design: the quality of AI output is entirely determined by the quality of context you give it. Vague briefs, vague results. Precise context, precise results.

That means the designer's job has expanded — not shrunk. I'm not just designing interfaces. I'm designing the environment the AI operates in: the CLAUDE.md files, the component specs, the token systems. That's the new leverage point.

What's actually different
Prompts → Skills
Methodology encoded as repeatable, portable files — not locked in one person's head.
Specs → Executable context
Design decisions live in markdown and config files Claude can act on directly.
Sessions → Systems
Each project compounds. What I teach Claude once, it applies across every session.
Personal output → Team infrastructure
Quality becomes structural, not dependent on who's in the room.

What Working with Claude Code Changes

Four fundamental shifts in how a designer operates with AI as infrastructure

Shift 01

Prompts become Skills

Before
  • –Rewrite the brief every session
  • –Quality varies by who's typing
  • –Starts from scratch each sprint
With Claude Code
  • —Skills encode the methodology
  • —Consistent output, any team member
  • —Compounds across sprints

Re-explanation is the signal. If you rebuild context every session, that's the skill you haven't written yet.

Shift 02

Figma specs become executable context

Before
  • –Design lives in Figma files
  • –Engineers re-interpret visuals
  • –Tokens exist only in design tools
With Claude Code
  • —Spec lives in structured markdown
  • —Claude reads and generates from spec
  • —Tokens in config → every component inherits

Claude reads text, not Figma. A design system in a markdown file is a brief Claude can act on directly.

Shift 03

Personal output becomes team infrastructure

Before
  • –One great prompter, high variance
  • –Knowledge walks when they do
  • –Can't survive deadline pressure
With Claude Code
  • —Methodology encoded as portable files
  • —Survives turnover and context-switching
  • —Quality is structural, not personal

Individual AI competence is a single point of failure. Skills make the org the expert.

Shift 04

Sessions become a compounding system

Before
  • –Each session starts cold
  • –No artifact trail between sprints
  • –Handoff requires manual documentation
With Claude Code
  • —CLAUDE.md loads full project context
  • —Decision records generated from sessions
  • —Component docs produced at build time

What Claude knows at session start is what you gave it. The context stack is the system.

Designer judgment, framing, and evaluation are irreplaceable at every phase  ·  Claude Code handles structure, generation, and consistency