AI-native design workflow: full derivation

Part 1 · Starting Point

AI is changing design from production to decisions.

The traditional pipeline — Research → Wireframe → UI → Spec → Dev — has too many translation layers, each losing fidelity. The hypothesis: compress it into Intent → Prototype → Blueprint → Ship by using AI to eliminate middle abstractions.

Industry research across 50+ sources from 2024–2026 confirmed several key findings. Pipeline compression is real: Affirm reported six-week cycles dropping to hours. But the productivity paradox is equally real: a METR randomised controlled trial found developers were 19% slower with AI tools despite believing they were 20% faster. Design systems are shifting from human-readable documentation to machine-consumable JSON schemas. And the 60/40 rule holds — AI reaches 60% quickly, but the remaining 40% in nuance and polish still belongs to human judgment.

Part 2 · Challenging the Tool Stack

The first recommendation contradicted its own principle.

Version one proposed a mainstream three-tool pipeline: Figma Make → v0 → Cursor. One question broke it: "Your core principle is removing translation layers. So why are you introducing three new tools as new translation layers?"

This contradiction forced a systematic investigation: can a Claude-only stack — conversation for decisions, Claude Code for prototypes, Artifacts for visual previews — cover 100% of the pre-production design workflow? Five branches of inquiry were opened.

Part 3 · Artifacts vs Claude Code

~90% of design intent transfers between them.

Artifact code can serve as a blueprint for Claude Code rebuild, preserving approximately 90% of design intent. The remaining 10% is engineering adaptation — routing, state management, component splitting. This is significantly better than the typical 30–50% loss in Figma-to-code translation. Practical implication: use Artifacts for direction validation, switch to Claude Code for production-intent work early.

Part 4 · The Natural Language Efficiency Problem

Five techniques that cut refinement friction by ~60%.

Front-load design constraints in a CLAUDE.md file — this alone eliminates approximately 60% of later adjustments. Switch to CSS property names for pixel work: "padding 16px" not "less space". Use screenshot annotations instead of verbal descriptions. Batch all modifications into single messages rather than iterating one-at-a-time. Build a project-level constraint file that Claude reads automatically on every interaction. These five techniques address the structural limitation directly rather than trying to improve natural language as a precision medium.

Part 5 · The Spatial Comparison Problem

Claude generates the comparison view itself.

Claude is a linear conversation, not a canvas. When exploring three to five design directions, you can't see them side by side. This was flagged as a reason to keep Figma. The solution isn't introducing a canvas tool — it's having Claude generate the comparison view itself: "Put these three approaches into a side-by-side comparison board with simplified static UI and pros/cons for each." This is actually better than Figma's approach: Claude simultaneously abstracts each option's visual essence AND generates the analytical comparison in one artifact.

Part 6 · The Design Review Problem

Flow walkthrough artifacts replace the deck.

Prototypes are experienced step by step. Reviews need a global view — the reviewer must see the complete flow at a glance plus the design rationale at each step. The solution: Claude generates a flow walkthrough artifact — a step bar showing the full path at the top, with each step showing a simplified screen preview alongside its design rationale, success metric, and risk flags. Reviewers get global flow visibility and per-step decision context in a single artifact — always in sync with the actual prototype, unlike a separately maintained Figma review deck.

Part 7 · Figma Irreplaceability Audit

Zero capabilities are truly irreplaceable.

With the comparison and review challenges resolved, every traditional Figma role was audited for replaceability. The conclusion: zero Figma capabilities are truly irreplaceable in the pre-production design workflow. Five core functions are fully covered by Claude. Two are narrow edge cases — early spatial brainstorming and custom vector illustration — that neither sit on the critical path.

Part 8 · Honest Gaps

Two known gaps, quantified without optimism.

Gap one: Artifact to Claude Code transfer. Approximately 90% structural intent preserved, 10–15% rebuild cost. Still better than the 30–50% Figma-to-code loss. Gap two: pixel refinement via natural language. The five techniques in Part 4 mitigate this structurally. Net assessment: the Claude-only workflow self-sufficiently handles approximately 95% of design-to-prototype work — 80% strategic and structural via natural language, plus 15% pixel refinement via precise CSS values. The remaining 5% (visual balance and micro-interaction feel) needs a see-and-tweak loop — that loop is Artifacts' instant preview, not Figma.

Part 9 · The Derived Workflow

Intent → Prototype → Blueprint → Ship via Claude only.

Based on all analysis above: load the correct CLAUDE.md constraint file for the project type. Frame intent in Phase 0 with full business context. Generate and iterate on Claude Artifacts for direction validation. Use Claude Code for production-intent prototyping. Have Claude generate the review artifact — step bar with annotated rationale. Convert the approved prototype to production via Claude Code blueprint. The CLAUDE.md file is the compound interest mechanism — every project correction improves it. After three to four projects, first-attempt output quality should be high enough that Phase 2 takes hours, not days.

Companion

The operational playbook applies this reasoning.

This document is the why. The step-by-step execution guide — prompt structures, phase gates, and the complete kickoff-to-ship checklist — lives in the companion playbook. Read the operational playbook →