Back/Engineering/Cursor/v0
IntermediateEngineering

How to Build and Ship a UI Feature in Under an Hour with v0 and Devin

Shape a small product improvement in v0, hand the refined specification to Devin, and use the working preview to finish the feature quickly.

How to Build and Ship a UI Feature in Under an Hour with v0 and Devin

04:00 to 29:15: Sahil Lavingia spots a weak date picker, refines the interaction in v0, sends the resulting specification to Devin, and inspects the implementation in a preview.

Before you start

What you need

  • A specific product friction visible on an existing screen
  • Access to the repository and a development environment an agent can run
  • The relevant design system or component library
  • v0 and Devin access

What you’ll make

A pull request and working preview for a focused UI improvement whose interaction was explored before implementation.

Tools used

Step by step

The workflow

Follow the sequence once, then adapt the prompts, checks, and handoffs to your own setup.

5 steps

Step01

Identify a UX Problem

Choose a concrete irritation that is small enough to ship but meaningful to the user. Sahil starts with a native date input that cannot understand phrases such as "next Monday."

Example prompt
On [route or screen], replace the current [component] because users struggle with [specific friction]. The improved version must support [core behavior], [important edge case], and [mobile or accessibility requirement]. Use our existing [design system or component library].
Step02

Prototype and Iterate with v0

Build the interaction in v0 and keep refining it beyond the first pass. Try realistic inputs, add useful controls, and settle the details that would otherwise become unanswered implementation questions.

Example prompt
Design a natural-language date picker for an HR onboarding form. Let people type phrases such as "next Monday" or "in one hour," show the parsed date before saving, include clear and delete behavior, and use shadcn/ui. Keep the interaction compact and accessible.
Step03

Hand Off the Prompt to Devin

Give Devin the refined requirements, the target repository and route, and the implementation constraints. Share the v0 result as a reference, but describe the behavior in text so the task is not dependent on an image.

Example prompt
In the [repository] repo, update [route or component]. Replace the browser-native date input with a natural-language date picker using our existing shadcn/ui components. Requirements:
- Accept dates such as "tomorrow," "next Monday," and "three Sundays from now"
- Show the parsed date before submission
- Include clear and keyboard behavior
- Preserve the existing form contract and styling

Run the app, test the interaction in the browser, and open a pull request with the result.
Step04

Monitor Devin's Autonomous Work

Let the agent set up the project, find the relevant files, and implement the feature. Use its progress and preview to catch setup errors or misunderstood requirements while the work is still in motion.

Example prompt
Before finishing, run the project and exercise the component with: "tomorrow," "next Monday," an invalid phrase, clearing the field, and keyboard-only input. Fix any failures and summarize the files and tests changed.
Step05

Review and Merge the Pull Request

Open the preview and use the feature as a customer would. Inspect the code where product naming, architecture, or edge-case behavior matters, then send any fixes back to the agent or finish them in Cursor.

Example prompt
Update the pull request for these preview findings: [list findings]. Add or update the smallest useful tests, confirm the original form still submits the same value shape, and explain any behavior you intentionally left unchanged.

What good looks like

  • The prototype handles the important interaction states, not just the visual layout
  • The agent implements the feature in the correct repository and existing design system
  • The preview demonstrates the intended user behavior and the pull request is ready for the team’s normal merge path

Build your next product with ChatPRD

Turn an idea into a PRD, user stories, and a plan.

Try ChatPRD free

After the steps

Runbook notes

How to recover when the loop fails and where human judgment helps.

Recover

If it goes sideways

The first prototype looks plausible but leaves important interactions undefined.
Spend another few prompts on empty, error, clear, delete, keyboard, and mobile behavior before handing it to the coding agent.
The coding agent cannot run the project or uses the wrong conventions.
Provide the setup command, target route, component library, and a nearby implementation to copy, then restart from a clean branch.
The preview renders but the feature does not handle real inputs correctly.
Give the agent failing examples, ask it to reproduce them in the browser, and add targeted tests before updating the pull request.

Start shipping
better products.

Join 100,000+ product managers who use ChatPRD to write better docs, align teams faster, and build products users love.

Free to start
No credit card
SOC 2 certified
Enterprise ready