{/* banner prompt: Retro technical poster with a schematic diagram showing a UI prototype connecting to backend systems, featuring bold typography "FROM PROTOTYPE TO PRODUCT", using a limited-print palette of off-white, orange, and dark teal with halftone textures, 16:9. */}

In my [last post](/blog/2025/05/07-jumpstarting-my-project-ui-with-v0dev-from-cli-tool-to-web-app/), 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](https://github.com/e-tang/shares-profit-loss-tax) 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](https://sprolo.tyosis.com/)):**
- 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](https://github.com/tyolab/Sprolo) 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

![](https://storage.googleapis.com/www-tyolab-com-blog-assets/images/blog/2026/05/ai-beyond-the-ui-from-v0-prototype-to-a-finished-product/2026-05-08-19-36-30.png)

It's live now at: [Sprolo](https://sprolo.tyosis.com/)

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.

bb40551b41ffad86ea5cebbf900bddbac5dfa3187d081d6be45d3e42dff8f44e

Moving beyond UI generation: using AI to debug, integrate, and ship a real trading profit/loss calculator from prototype to production

How AI helped me turn an AI-generated frontend mockup into a fully functional trading calculator

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

{/* banner prompt: Of course! Based on the blog post, here are a few creative and engaging prompts for a 16:9 banner image, each with a slightly different focus.

### Option 1: The AI Architect (Focus on Creation)

This prompt visualizes the AI as the central creator, building the solution from abstract code into a tangible product.

**Prompt:**
> A cinematic, technology-themed digital art piece. In the center, a luminous, abstract representation of an AI brain pulsates with soft blue and green light. From this core, intricate streams of glowing code flow outwards, weaving together to form a holographic interface of a Chrome extension featuring a friendly, minimalist koala logo. In the background, out-of-focus stock market charts and data tickers provide a financial context. The overall mood is one of intelligent, autonomous creation and calm efficiency. --ar 16:9

**Why it works:**
*   **Technology-Themed:** Directly mentions AI, code, and holographic interfaces.
*   **Reflects Main Idea:** Puts the AI at the center of the creation process, highlighting that it was "coded entirely by AI."
*   **Incorporates Key Elements:** Mentions the koala logo, Chrome extension, and the CommSec/stock market context.
*   **Engaging:** "Luminous," "pulsates," and "cinematic" create a visually dynamic image.

---

### Option 2: The Collaborative Swarm (Focus on Teamwork)

This prompt emphasizes the collaboration between different AI tools (Gemini, Codex, Claude) mentioned in the post.

**Prompt:**
> A dynamic and futuristic scene depicting three distinct streams of colored light—one brilliant blue (for Gemini/Codex logic), one creative magenta (for Claude's refinement), and one vibrant green (for AI Studio's assets)—swirling and converging in a sleek, dark command center. Where the lights meet, they are actively constructing a 3D, glowing icon of a koala. Lines of JavaScript code are subtly integrated into the light streams. The background is a large, panoramic screen displaying the CommSec interface with a "Session Timed Out" dialog box just beginning to fade away, replaced by a green "Session Active" status. --ar 16:9

**Why it works:**
*   **Reflects Main Idea:** Visually represents the "collaboration of AI tools" which is a key point in the article.
*   **Tells a Story:** Shows the problem (the timeout dialog) being actively solved by the AI team.
*   **Creative and Engaging:** The concept of colored light streams as different AIs is abstract yet easy to understand, making for a compelling visual.
*   **Technology-Themed:** Uses a "command center" setting, code, and glowing UI elements.

---

### Option 3: The Silent Guardian (Focus on the User Benefit)

This prompt focuses on the outcome: a seamless, uninterrupted user experience, with the AI working quietly in the background.

**Prompt:**
> A hyper-detailed, photorealistic image from the perspective of a trader. The main focus is a crisp, clean computer monitor displaying a complex CommSec stock watchlist with glowing green and red charts. To the side, a "Continue session" pop-up is visible but is being dissolved into digital particles by an ethereal, softly glowing koala-shaped energy field that emanates from the browser's toolbar. The rest of the room is dark, emphasizing the trader's focus on the screen, which remains uninterrupted. The feeling is one of powerful, silent automation and focus. --ar 16:9

**Why it works:**
*   **Reflects Main Idea:** It directly visualizes the problem (the pop-up) being solved by the AI-powered extension (the koala).
*   **User-Centric:** It frames the benefit from the user's point of view, highlighting the "uninterrupted market analysis."
*   **Engaging and Creative:** The "dissolving" pop-up and "ethereal energy field" are strong visual metaphors for the extension's function.
*   **Technology-Themed:** The glowing data, digital particles, and overall aesthetic are modern and tech-focused.

Additional instructions: make three cartoon like builders as representation of Google Gemini, OpenAI Codex, Claude Code */}

What happens when you give AI a frustrating problem and ask it to solve it completely autonomously? You get **Koala-Tinue**, a Chrome extension that was coded entirely by artificial intelligence—no human programming required.

This isn't just another AI-assisted development story. This is about AI tools working together to create a functional, polished browser extension from concept to completion, with a human developer serving only as a tester.

## The Problem: CommSec Session Management Headaches

Anyone who's tried to monitor the Australian Stock Exchange (ASX) through CommSec knows the pain. You're deep in analysis, watching market movements, when suddenly—boom—you're logged out due to inactivity. The dreaded "Continue session" prompt appears, breaking your focus and forcing you to babysit your browser tab instead of the market data that actually matters.

For retail traders without access to professional trading platforms, CommSec is often the go-to solution. But the constant session timeouts create a frustrating user experience that pulls attention away from trading decisions.

## Enter Koala-Tinue: The AI-Generated Solution

Meet Koala-Tinue, your friendly CommSec session companion. This Chrome extension automatically handles those annoying session continuation prompts, letting you focus on market analysis instead of tab management.

Here's what makes this project remarkable: **every line of code was written by AI**.

### The AI Development Team

The extension was built using a collaboration of AI tools:

- **Google Gemini & Codex**: Handled all the core JavaScript functionality and Chrome extension architecture
- **Google AI Studio**: Generated the extension icons and visual assets
- **Claude AI**: Managed image editing and icon refinement

The human developer's role? Pure testing. No coding, no debugging logic, no architectural decisions—just running the extension and reporting whether it worked.

Relax — every line of code is double-checked, security risks are mitigated, and your privacy stays safeguarded.

## How Koala-Tinue Works

The extension operates with elegant simplicity:

1. **Install and activate**: Toggle the toolbar icon between Play (paused) and Pause (active)
2. **Open your CommSec Watchlist**: The extension monitors for session continuation prompts
3. **Automatic clicking**: When the "Continue session" dialog appears, Koala-Tinue clicks it for you
4. **Smart scheduling**: The extension aligns with actual ASX trading hours

### Smart Mode: Intelligence Built-In

The most impressive feature is Smart Mode, which demonstrates sophisticated logic implemented by the AI based on detailed prompts:

```javascript
// AI-generated logic for ASX trading hours
const ASX_TRADING_HOURS = {
  start: 10, // 10:00 AM Sydney time
  end: 16,   // 4:00 PM Sydney time
  timezone: 'Australia/Sydney'
};

function isMarketHours() {
  const now = new Date();
  const sydneyTime = new Intl.DateTimeFormat('en-AU', {
    timeZone: 'Australia/Sydney',
    hour: 'numeric',
    weekday: 'short'
  }).formatToParts(now);
  
  // Smart mode logic continues...
}
```

Smart Mode automatically:
- **Activates during market hours**: 10:00 AM to 4:00 PM Sydney time on weekdays
- **Sleeps after hours**: Pauses clicking and resets counters overnight
- **Contextual behavior**: Auto-enables during market hours even if previously paused
- **Resource conservation**: Stops unnecessary processing outside trading hours

## The AI Development Process

### Code Generation Strategy

The AI tools approached the problem systematically:

1. **Architecture Planning**: Gemini analyzed Chrome extension requirements and CommSec's DOM structure
2. **Core Logic**: Gemini initially handled the session detection and automatic clicking functionality, with Codex providing assistance when challenges arose.
3. **Smart Features**: Advanced time zone handling and market hours logic were generated autonomously
4. **User Interface**: Clean, intuitive controls with play/pause toggle functionality

### Visual Asset Creation

#### Icon Generation

Google AI Studio was the creative director chief in charge of the creative work:

>A minimalist, flat design vector logo icon. A cute, stylized soft-grey koala is peeking over the top of a large, central white circle. Inside the white circle is a simple, eucalyptus-green "play" button symbol (▶). The design must have clean lines, no gradients, and be on a transparent background. It should be designed to be clear and recognizable as a small browser extension icon.

For comparison, I also consulted with ChatGPT; below is what ChatGPT generated:

<Icon src="https://storage.googleapis.com/www-tyolab-com-blog-assets/images/blog/2025/11/this-commsec-app-was-coded-entirely-by-ai/chatgpt-icon.png" alt="ChatGPT-generated koala play icon concept" />

But I really prefer Gemini's version:

<Icon src="https://storage.googleapis.com/www-tyolab-com-blog-assets/images/blog/2025/11/this-commsec-app-was-coded-entirely-by-ai/icon-play.png" alt="Google AI Studio koala play icon" />

It is cute and keeps the main focus on the `Play` button.

Okay, this is now my icon for `Koala-Tinue`.


#### Artwork refinement

Unfortunately, we still cannot ship whatever AI produces. The generated icon has a white background, and our current tooling makes it awkward to maintain separate variants for every background color. We therefore prefer icons with a transparent background so they can adapt to any context.

After a quick browser test, the icon also felt a bit invisible because it was mostly gray, so I asked Google AI Studio to add a gold background.

<Icon src="https://storage.googleapis.com/www-tyolab-com-blog-assets/images/blog/2025/11/this-commsec-app-was-coded-entirely-by-ai/icon-unavailabe.png" alt="Koala icon with added gold background attempt" />

If you ask **Google AI Studio** to remove the white background it usually tries, but the result is rarely a truly transparent background—at best you get a convincing white fill.

For example, I asked it to remove the background (which turned out to be fake) and replace it with gold. Below is the result:

<Icon src="https://storage.googleapis.com/www-tyolab-com-blog-assets/images/blog/2025/11/this-commsec-app-was-coded-entirely-by-ai/icon-unavailable-square-bright.png" alt="Gold square koala icon with white background removal attempt" />

Even when it fails to produce transparency, it can still recolor regions independently, which is genuinely useful.

Finally, it was time to ask our senior developer and artwork editor (Claude Code) to finish the job:
1. Remove the original background 
2. Add a gold background tone
3. Create a round-cornered icon
4. Adjust the image size 

The original image created by Google AI Studio:
<Icon src="https://storage.googleapis.com/www-tyolab-com-blog-assets/images/blog/2025/11/this-commsec-app-was-coded-entirely-by-ai/icon-unavailable-white-bg.png" alt="Original koala play icon with white background" />

After Claude Code removed the background and added the gold tone:

<Icon src="https://storage.googleapis.com/www-tyolab-com-blog-assets/images/blog/2025/11/this-commsec-app-was-coded-entirely-by-ai/icon-unavailable-square.png" alt="Gold square koala icon with transparent background" />

We still could not easily target only the circle via command line tooling, so we went back to **Google AI Studio**, and it delivered.

After making the circle white, we asked Claude to round the corners, giving us an icon we can confidently use in the extension.

The final result:

<Icon src="https://storage.googleapis.com/www-tyolab-com-blog-assets/images/blog/2025/11/this-commsec-app-was-coded-entirely-by-ai/icon-unavailable-rounded.png" alt="Rounded gold koala play icon" />

{/* Claude AI refined the visual elements, ensuring the koala mascot was both professional and friendly—perfectly matching the extension's helpful nature. */}

{/* ## Real-World Performance

The testing phase revealed impressive results:

### Reliability Metrics
- **Session detection accuracy**: 100% success rate on CommSec's continuation prompts
- **False positive rate**: Zero unintended clicks on other page elements
- **Resource usage**: Minimal CPU impact, efficient DOM monitoring
- **Market hours alignment**: Perfect synchronization with ASX schedule

### User Experience Improvements
- **Eliminated manual intervention**: No more babysitting browser tabs
- **Maintained focus**: Uninterrupted market analysis during trading hours  
- **Resource efficiency**: Automatic shutdown outside market hours
- **Simple controls**: One-click toggle between active and paused states

## Technical Architecture Deep Dive

### Extension Manifest (AI-Generated)

```json
{
  "manifest_version": 3,
  "name": "Koala-Tinue",
  "version": "1.0",
  "description": "Keep your CommSec session alive automatically",
  "permissions": [
    "activeTab",
    "storage",
    "alarms"
  ],
  "content_scripts": [{
    "matches": ["*://www2.commsec.com.au/*"],
    "js": ["content.js"]
  }],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon16.png"
  }
}
```

### Smart Detection Logic

The AI implemented sophisticated DOM monitoring:

```javascript
// AI-generated session detection
function detectSessionPrompt() {
  const selectors = [
    '[id*="session"]',
    '[class*="continue"]',
    'button[onclick*="session"]',
    '.modal-dialog button'
  ];
  
  return selectors.some(selector => {
    const element = document.querySelector(selector);
    return element && element.textContent.toLowerCase().includes('continue');
  });
}
```

## Lessons from AI-First Development

### What Worked Exceptionally Well

1. **Problem Understanding**: The AI accurately identified the core user pain point
2. **Feature Logic**: Smart Mode demonstrates genuine intelligence in feature design
3. **Edge Case Handling**: Time zone calculations and market hour logic were implemented correctly
4. **User Experience**: The interface is intuitive and the functionality is reliable

### The Human Role in AI Development

The developer's testing role revealed important insights:

- **Quality Assurance**: Human testing validated AI logic against real-world conditions
- **User Experience Validation**: Ensuring the solution actually solves the intended problem
- **Integration Testing**: Verifying compatibility with CommSec's actual interface
- **Performance Monitoring**: Confirming efficient resource usage and reliability

## The Future of AI-Generated Software

Koala-Tinue represents more than just a useful Chrome extension—it's a proof of concept for AI's current capabilities in software development.

### Current AI Strengths
- **Complete feature implementation**: From concept to working code
- **Complex logic handling**: Market hours, time zones, and conditional behavior
- **User interface design**: Intuitive controls and visual feedback
- **Resource optimization**: Efficient algorithms and smart scheduling

### Limitations and Considerations
- **Testing dependency**: Human validation remains crucial for real-world deployment
- **Domain knowledge**: Success depends on clear problem definition and requirements
- **Iterative improvement**: Human feedback loops enhance AI-generated solutions
 */}
## Extension Publishing

After the artwork was finalized and the code thoroughly tested, the next step was to create a distribution package and publish the extension to the Chrome Web Store, making Koala-Tinue available to all CommSec users.


## Installing and Using Koala-Tinue

Ready to try this AI-generated solution? Here's how to get started:

1. **Install the extension** from the [Chrome Web Store](https://chromewebstore.google.com/detail/koala-tinue/bcgbjabijhfedggiaefjbjbaodgflcgi?authuser=0&hl=en)
2. **Navigate to CommSec** and open your Watchlist
3. **Click the Koala icon** in your toolbar to toggle between active/paused
4. **Let Smart Mode handle the rest** during ASX trading hours

The extension works silently in the background, clicking continuation prompts so you can focus on market analysis instead of session management.

## Final Thoughts

Koala-Tinue proves that AI can move beyond code assistance to complete software creation. While human oversight remains valuable for testing and validation, the technical implementation—from architecture to advanced features—can be handled entirely by AI tools working in collaboration. It is also worth noting that a significant portion of the project time was dedicated to the artwork, a crucial step in delivering a polished and decent final product.

For developers, this suggests a future where AI handles implementation while humans focus on problem definition, testing, and user experience validation. For users, it means solutions to everyday frustrations can be developed faster and more efficiently than ever before.

The next time you're watching the ASX through CommSec without interruption, remember: you're experiencing software that was conceived, designed, and coded entirely by artificial intelligence. The future of development isn't just AI-assisted—it's AI-driven.

*Ready to experience AI-generated software firsthand? Try [Koala-Tinue](https://chromewebstore.google.com/detail/koala-tinue/bcgbjabijhfedggiaefjbjbaodgflcgi?authuser=0&hl=en) and see how seamless your CommSec monitoring can become.*


<ContactFooter />


609eba1a7c76416ac8f39482fc020ff4193341b70934095b66ac3b0d0acb68c7

Discover how Google Gemini, Codex, and Claude AI collaborated to build Koala-Tinue, a Chrome extension that keeps CommSec sessions alive automatically.

How AI tools created a Chrome extension that solves CommSec session timeouts with zero human coding.

Tag: Trading Tools

Tag: Trading Tools

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

This Chrome Extension for CommSec Was Coded Entirely by AI