How to use v0 and Concept Sandbox together

Concept Sandbox and Vercel's v0 are a powerful combination. Concept Sandbox helps you structure your ideas into clear requirements, and v0 turns those requirements into working code. This tutorial walks you through the complete workflow, from initial idea to deployed prototype.

Prerequisites

Before you start, you'll need:

• A Concept Sandbox account (free tier works for this tutorial)
• A Vercel account with access to v0 (v0.dev)
• An idea you want to prototype

Step 1: Capture Your Idea

Log into Concept Sandbox and click the "New Concept" button in the sidebar. You'll see the Quick Capture dialog with a brain dump field. Don't overthink this — write your idea as you'd explain it to a friend.

For this tutorial, let's use an example idea:

"A recipe sharing app where home cooks can post recipes with step-by-step photos, and other users can 'cook along' with a timer-based mode that shows one step at a time. Should have a clean, minimal design like Are.na meets Instagram."

Paste that into the brain dump field and click "Auto-fill." Concept Sandbox's AI will extract a title, description, category, and tags from your freeform text. Review the extracted fields, adjust anything that looks off, and save the concept.

Step 2: Generate a PRD

Open your new concept and click "Generate PRD." This is where Concept Sandbox earns its keep. The AI will analyze your idea and produce a structured Product Requirements Document that includes:

• Overview: A concise summary of what you're building
• Core features: The essential functionality, broken into clear sections
• User flows: Step-by-step descriptions of how users interact with the app
• Technical considerations: Suggested tech stack, data models, and API structure
• Out of scope: What you're explicitly not building in this prototype

The PRD generation takes about 15-30 seconds depending on your selected model. We recommend Claude Opus for PRDs if you're on the Max tier, as it produces the most thorough output. Sonnet works well too and is faster.

Once the PRD is generated, read through it carefully. This is your chance to refine the requirements before building. You can edit the PRD directly — add features you want, remove ones you don't, clarify any sections that feel vague. You can also run an "AI Critique" to get feedback on your PRD's completeness and clarity.

Step 3: Build with v0

This is where the hub-and-spoke architecture comes in. With your PRD finalized, click the "Build with v0" button in the external links section. Concept Sandbox will construct a prompt from your concept's title, description, and PRD content, then open v0 in a new tab with that context pre-loaded.

In v0, you'll see your requirements already in the prompt field. v0 will generate a React component (or full Next.js app, depending on the prompt) based on your PRD. The first generation usually gets you 70-80% of the way there. From here, you can iterate with v0 directly:

• "Make the recipe card layout more compact"
• "Add a dark mode toggle"
• "Replace the timer with a circular progress indicator"

Each iteration in v0 takes seconds. Because your PRD gave v0 clear context about what you're building, the generated code is much more targeted than if you'd started from scratch with a vague prompt.

Step 4: Deploy and Link Back

When you're happy with your prototype in v0, click "Deploy" in v0's interface. Vercel will give you a deployment URL (something like your-project.vercel.app). Copy this URL.

Back in Concept Sandbox, open your concept and add the deployment URL as an external link. Select "v0" as the link type. Concept Sandbox will now show a live preview of your deployed prototype directly in the concept detail view. You can see your running prototype alongside the PRD that defined it — the full journey from idea to working app, documented in one place.

Step 5: Advance to Prototype Stage

If your concept was in the PRD stage, Concept Sandbox will prompt you to advance it to the Prototype stage. This is a one-click action that updates the concept's status and records the transition. Your concept card on the dashboard will now show the green "Prototype" badge, and the live preview will be visible in the card's expanded view.

Tips for Better Results

Be specific in your brain dump. The more detail you provide in the initial capture, the better your PRD will be, and the better v0's output will be. Mention specific design references, technical preferences, and user experience details.

Edit the PRD before building. Don't just accept the AI-generated PRD as-is. Add your domain knowledge. Remove features that aren't essential for a prototype. The PRD is the primary input to v0, so time spent refining it pays dividends in code quality.

Iterate in v0, not in Concept Sandbox. Once you're in v0, stay there until you're satisfied. v0's iterative prompting is designed for rapid refinement. Don't bounce back and forth between the two tools during the build phase.

Use the critique feature. Before clicking "Build with v0," run an AI critique on your PRD. The critique will flag vague requirements, missing edge cases, and potential technical issues. Fixing these before you start building is always faster than fixing them after.

The Complete Timeline

For most concepts, the full flow looks like this:

Under an hour from idea to deployed prototype. That's the power of combining a structured planning tool with a best-in-class code generator. Neither tool alone gets you there this fast — Concept Sandbox gives v0 the context it needs, and v0 gives Concept Sandbox the tangible output that validates the idea.