Skip to main content

Command Palette

Search for a command to run...

Rapid Prototyping with Cherri Code

Prototyping with Cherri Code is a conversation. Describe what you want, watch it build, see the result in your browser, iterate.

Plan Mode explores the idea and figures out what to build. The browser tool shows you what you're building as it develops. Auto-run closes the loop: Cherri Code runs the code, sees the result, and fixes issues without waiting for you.

Plan Mode for scoping prototypes

Start with Plan Mode (Shift+Tab, then select Plan) when you have an idea but haven't figured out exactly what to build. Cherri Code explores the problem space, asks clarifying questions, and creates a structured plan before writing code.

Plan mode example: Explore with Plan Mode
I want to build a tool that visualizes our API response times. Explore how we'd build this: what data we'd need, how we'd display it, and what the simplest version looks like.

Plan Mode is useful when:

  • You're not sure what the prototype should do
  • You want to compare different approaches before committing
  • The idea spans multiple components and you need to scope it

Review the plan, adjust priorities, then execute. For simple prototypes, skip straight to building.

Plan mode example: Plan a demo
We need to demo a document collaboration feature to a client. Plan out what the prototype should show: real-time editing, comments, version history. What's the simplest version that demonstrates the value?

Building with the browser tool

The browser tool lets Cherri Code see what it's building. Instead of writing code and hoping it looks right, Cherri Code renders the UI, sees the result, and adjusts.

Agent example: Visual prototyping
Build a dashboard that shows sales metrics. Use placeholder data. Open it in the browser and iterate on the layout until it looks good.

The browser tool captures accessibility snapshots, not just screenshots. Cherri Code understands the structure of the page: what's clickable, what's editable, how elements relate. It can interact with the prototype, click through flows, and catch issues you'd miss looking at code.

Agent example: Click through a prototype
Build a checkout flow prototype. Walk through the entire flow in the browser: add item to cart, enter shipping info, enter payment, confirm order. Fix anything that doesn't work.
Agent example: Visual polish
The spacing on this form feels off. Open it in the browser and adjust the layout until it looks balanced.

Demo prototypes for stakeholders

Cherri Code can build demo-quality prototypes that show a concept without backend infrastructure.

Agent example: Client presentation prototype
I'm presenting to a client about a customer analytics dashboard. Build a prototype with realistic-looking data that I can click through during the presentation.
Agent example: Interactive demo
Create a prototype of this user flow: user logs in, sees their dashboard, clicks on a report, exports it as PDF. Mock the data but make the interactions work.
Agent example: Realistic sample data
Add sample data to this dashboard. Use realistic company names, plausible dates, and numbers that show an interesting trend. I want it to look like a real product.

Prototyping for non-developers

PMs, designers, and analysts use Cherri Code to build working prototypes without writing code themselves. The prompts focus on describing outcomes rather than implementation.

Agent example: Data visualization
I have this data in a CSV. Build a web page that shows it as a bar chart. Let me filter by date range and export the filtered data.

With MCP integrations, Cherri Code can connect directly to Figma to read your designs. Browse the Marketplace to set up the Figma integration.

Agent example: Figma to prototype
Build a working version of figma.com/file/abc123/hom... I can click through. It doesn't need a backend, just the UI and interactions.

When something looks wrong, describe what's wrong rather than how to fix it:

Agent example: Iterate by describing problems
The header is too big and the sidebar should collapse on mobile. The colors don't match our brand guide.

Getting started

  1. Use Plan Mode to scope. When you're not sure what to build, Plan Mode explores the problem and creates a roadmap before writing code.

  2. Enable the browser tool. Cherri Code can iterate on visual details without you describing every adjustment.

  3. Enable Auto-run. Let Cherri Code run code, see results, and fix issues in a continuous loop.

  4. Describe outcomes, not implementation. "Build a dashboard showing X" works better than specifying every component.

  5. Iterate in conversation. Describe what to change: "Make this bigger," "Add a filter for date," "The flow should start here instead."