Full workflow
Use the narrative brief first, then execute the step summary in order.
When to use this workflow
Use this when v0 produced the right visual direction but the generated snippet is not yet compatible with your application. Claude Code is strongest after the design intent is translated into repository-specific constraints.
Handoff brief
Give Claude Code a compact contract:
- Target route or component path.
- Existing components and tokens to reuse.
- Data shape, loading state, empty state, and error state.
- Interactions that must emit events or call mutations.
- Responsive breakpoints and accessibility requirements.
- Commands that must pass before the work is done.
Claude Code first prompt
text
We are integrating a v0-generated UI into this app.
Inspect nearby routes/components/styles first.
Then propose a minimal implementation plan that preserves existing design-system patterns.
Do not edit files until you identify reusable primitives, required data contracts, and validation commands.Shipping order
- Replace unsupported imports with local primitives.
- Convert placeholder arrays into typed props or data adapters.
- Add loading, empty, and error states before visual polish.
- Verify keyboard navigation, labels, and focus states.
- Run the agreed release gate and summarize remaining risk.
Review notes
The pull request should say which part came from v0, which parts Claude Code changed, and what was verified manually. That keeps design feedback separate from integration correctness.