AI Beyond the UI: From v0 Prototype to a Finished Producteric

In my last post, I talked about using v0.dev to jumpstart my trading calculator's UI. I went from a CLI tool to a sleek web interface in hours instead of weeks. Pretty cool, right?

But here's the thing—having a beautiful UI mockup isn't the same as having a working product.

After that initial excitement wore off, I stared at my shiny new frontend and realized I'd only solved about 20% of the problem. Sure, the buttons looked great. But they didn't do anything. The forms were gorgeous, but they couldn't process real trading data. The tables were perfectly styled, but they showed placeholder numbers instead of actual profit and loss calculations.

That's when the real work began. And surprisingly, that's where AI became even more valuable.

What I Started With vs. What I Needed

Let me paint you a picture of where I was after that first v0.dev sprint:

What I had:

• A simple but decent React frontend with modern styling
• Some forms for CSV uploads
• Elegant tables ready to display trading data
• Clean navigation and responsive design
• Zero actual functionality

What I needed:

• The frontend to talk to my existing calculation engine
• CSV parsing for different broker formats
• Real data flowing through the UI
• Portfolio saving and loading
• Proper error handling
• A deployment that actually worked

The gap between these two states? That's where most projects die.

AI as a Finisher, Not Just a Generator

Everyone talks about AI generating code from scratch. Screenshots to UI, prompts to prototypes, ideas to interfaces. That's impressive, but it's not all where AI shines brightest.

AI becomes truly powerful when it helps you finish things.

I used Claude (specifically the /frontend-design plugin) to redo the look and feel after the initial v0.dev generation. And I used Codex to write most of the code.

Here's what that looked like in practice.

The Real Problems AI Helped Me Solve

Connecting Frontend to Backend

The real breakthrough came when I needed to integrate my existing trading calculation engine. I had this solid CLI library that could crunch numbers, but connecting it to the web frontend? That's where things got messy.

Codex helped me:

• Restructure the backend API to return frontend-friendly JSON
• Fix serialization issues between browser and server
• Handle CSV parsing for different broker formats (especially CommSec uploads)
• Debug date handling across timezone boundaries

This wasn't about generating new code. This was about making existing code work together.

Making the UI Actually Useful

Using Claude's /frontend-design plugin, I iterated on the visual design while keeping the functional improvements:

• Improved color contrast for financial data
• Better button states and loading indicators
• Responsive layout adjustments
• Fixed footer and documentation pages

Building Real Product Features

Then came the features that turn a demo into a tool people actually use:

Portfolio workflows: Users needed to save their trading data and come back to it later. AI helped me design the data models and implement the persistence layer.

Append-trades functionality: Traders get new CSV exports each financial year. They don't want to re-upload everything. Codex helped me build incremental import logic.

Symbol-level reporting: The original CLI tool had basic reporting, but the web version needed sortable tables, filtering, and drill-down views.

Support infrastructure: Contact forms, file uploads for bug reports, email integration. The boring stuff that makes a product feel professional.

What Changed Between V1 and the Finished App

Let me show you the before and after:

Initial AI-generated UI shell:

• Static React components
• Hardcoded sample data
• No backend integration
• Beautiful but useless

Finished working product (Sprolo):

• CSV import for multiple broker formats
• Real profit/loss calculations
• Portfolio saving and management
• Incremental trade imports
• Tax-year-aware reporting
• Symbol and trade-level analysis
• Support workflows with file attachments
• Production deployment on Google Cloud

Check out the GitHub repo if you want to see the code evolution.

The Support Infrastructure Nobody Talks About

One thing I underestimated: how much work goes into making a product feel professional. It's not just the core functionality.

Users need:

• Help documentation that actually helps
• A way to report bugs without emailing you personally
• Privacy policies that don't sound like legal gibberish
• Contact forms that work reliably

Codex helped me build all of this. Not because it's technically challenging, but because it's time-consuming and easy to get wrong.

The support flow alone involved:

• Frontend forms with proper validation
• File upload handling for CSV samples
• Server-side email integration
• Category-based routing (bug reports vs. feature requests)
• Response templates that don't sound like robots

The Finished Product

It's live now at: Sprolo

The first post was about starting fast with v0.dev. This follow-up is about finishing properly with AI as your debugging and integration partner. Both matter, but only one ships products that people find useful.