The design workflow your AI coder is missing

DP adds a complete design process to Claude Code. From vague requirements to polished, accessible, verified components.

Claude CodeReactTailwind CSSshadcn/uiNext.jsVite

How DP works

A complete design workflow, from interrogation to verification.

Discovery
Heavy challenge mode stress-tests your assumptions
UX
User flows, states, accessibility — before pixels
Execute
Working React prototype with minimal styling
UI
Aesthetic archetypes, tokens, component specs
Execute
Production-ready React + Tailwind + shadcn/ui
Review
Accessibility, code quality, spec alignment scoring
Verify
Truths, artifacts, wiring — nothing slips through

10 skills, one workflow

The pipeline is the spine. These are everything you can reach for.

Core flow

The spine of every project

  • /dp:discoveryInterrogate

    Stress-test requirements before design

  • /dp:uxDesign

    Flows, states, accessibility

  • /dp:uiPolish

    Tokens, archetypes, component specs

  • /dp:eng_reviewAudit

    A11y, code quality, spec alignment

Optional add-ons

Pull in when the project needs it

  • /dp:prdSpec it

    Interview-driven product requirements

  • /dp:journeyMap it

    Customer journeys & service blueprints

  • /dp:roadmapSequence it

    Theme-based Now / Next / Future

  • /dp:colorToken it

    OKLCH palettes & contrast checks

Cross-phase

Invoke at any point in the flow

  • /dp:researchPlan studies

    Interviews, usability tests, synthesis

  • /dp:storytellPresent it

    Audience-tuned presentation outlines

Interrogation, not conversation

DP doesn't take your requirements at face value. It interrogates them. Heavy challenge mode stress-tests every assumption before a single pixel gets designed.

“You said users need real-time updates — but how do we actually know that's true?”
“What's the smallest version that would still be valuable?” 
# DISCOVERY.md

## Problem Statement
> Developers using AI coding tools need a way to
> get consistent, polished UI because AI-generated
> interfaces look generic and inaccessible.

## Key Challenges Surfaced
- "You said users need real-time updates —
   but how do we actually know that's true?"
- "What's the smallest version that would
   still be valuable?"
- "Is this solving a real user problem or
   a stakeholder preference?"

Pick a vibe, not a brand

Five aesthetic archetypes distilled from 55+ real-world products. They guide your design system without copying any brand. Principles, not tokens — the final system is always custom.

Dark & Dense
Linear, Raycast
Light & Luxurious
Stripe, Clerk
Minimal & Stark
Vercel, Supabase
Warm & Approachable
Airbnb, Notion
Bold & Expressive
Spotify, Discord

Goal-backward, not checklist-forward

Verification doesn't just check boxes. It traces backward from the original problem to ensure every decision, artifact, and connection actually solves what you set out to solve.

●Truths— Did we solve the right problem?
●Artifacts— Is every deliverable complete?
●Wiring— Is everything connected end-to-end?
# VERIFICATION REPORT

## Truths (Problem → Solution alignment)
✓ Problem statement addressed by implementation
✓ Primary user goals mapped to components
✓ Success metrics have measurement paths

## Artifacts (Deliverables complete)
✓ DISCOVERY.md — Requirements documented
✓ UX-DECISIONS.md — Flows & states defined
✓ UI-SPEC.md — Tokens & components specified
✓ Components — 12 files generated

## Wiring (Everything connected)
✓ Design tokens → Tailwind theme → Components
✓ Accessibility: WCAG AA verified
✓ Responsive: 375px, 768px, 1280px tested
✓ Score: 96/100

Get started in 30 seconds

Step 1
Install

Install DP into Claude Code (all projects).

Step 2
Start designing

Begin your first design workflow.

Step 3
Check progress

See where you are in the workflow at any time.

That's it. Restart Claude Code and you're ready.