Design Pipeline

The design pipeline moves one accepted product intent through four inspectable artifacts: visual direction, interaction prototype, design-system contract, and verified implementation. Claude Code, Cursor, and Codex can assist at every handoff with the visual or browser tools actually available in the environment, while named humans retain product and design acceptance.

The four-artifact pipeline Move from intent.md to visual direction, prototype, design contract, and verified code.

Evidence-based rating loop Score observable acceptance criteria, preserve defects, and stop on explicit exit conditions.

Use it when

• interaction or visual ambiguity would create expensive frontend rework;
• several states, breakpoints, or accessibility paths need agreement;
• a design system must constrain generated code;
• stakeholders need something inspectable before implementation.

For a small internal UI with established components, the visual artifact may be an annotated screenshot. For a new customer flow, use a working prototype. Match artifact cost to design risk.

Relationship to AI-native SDLC

The pipeline belongs inside Design. Its accepted design contract becomes input to plan.md, and screenshots, browser traces, accessibility checks, and human decisions become Test and Deploy evidence. Tool-specific features belong in the tool map.