Developer Diaries

Developer Diary: From Idea to Prototype in 5 Days

Written by Jack Anglesea | Jul 24, 2025 9:11:29 AM

We set ourselves a challenge: Is it possible to go from an idea to a prototype in just five days, using AI-powered tools?

As a designer, I was particularly interested in how far we could push design quality without slowing down delivery, and what I learned is that speed and good design don’t have to be opposites.

The Five-Day Breakdown

 

Day 1: Discovery Workshop

We kicked things off with a structured in-person workshop using Miro. The day was split into two parts:

Morning:

  • Fynlo.AI’s product vision and context
  • Requirements gathering
  • Mapping user journeys, brand considerations, and visual goals

Afternoon:

  • Generating wireframes and flows
  • Drafting documentation (with help from ChatGPT)
  • Technical exploration and deciding on our build strategy
  • Playback to align on direction

To keep things moving, we used Whisper to transcribe the discussion live, turning rich conversations into actionable documentation.

Screenshot of a Miro board showing one of the requirements workshops we ran

Day 2: Design Phase

This was where design set the pace. Using Subframe, we rapidly transitioned from low-fidelity to polished, interactive screens. Subframe’s smart use of AI meant we could scaffold out layouts in seconds, but the real magic was in how it supported systematic design.

Subframe’s features allowed us to:

  • Use Tailwind component primitives for layout and structure
  • A custom base theme tailored to Fynlo’s brand palette
  • Design tokens to ensure consistency from typography to shadows

This approach gave us a flexible, scalable design system in hours, not weeks. It also meant our UI could evolve without constant redesign — we were building with reusable parts, not throwing pixels at the wall.

 

Subframe also allowed developers to directly export flows, components, and screens into Cursor. That meant designs weren’t just reference material — they were starting points for code. It cut out friction, reduced ambiguity, and gave our engineers the confidence to move fast without guesswork.

Subframe’s AI enabled us to quickly generate multiple high-quality iterations of the same screen. The systematic approach simplified the process of selecting elements from each iteration to build our design.

Day 3: Refine (Together)

Design and development didn’t happen in silos — we worked in tandem. Feedback loops were short. Cursor’s live-coding environment meant our design intent could be implemented (and refined) in real time.

We made decisions together — adjusting spacing, refining interactions, even adapting flows — without waiting for separate cycles. The prototype evolved through co-creation, not handoff. This kept the momentum high and made the experience stronger across the board.

 
Subframe’s combination of systematic design, partnered with AI, allowed us to quickly generate and iterate on ideas.

Day 4: Build

With designs refined and aligned, we moved into build mode. Using Cursor, we implemented the frontend and backend in parallel. It wasn’t just about wiring up screens — we built real functionality: user authentication, dashboard logic, LLM integration, and dynamic emissions data.

Cursor’s AI features and collaborative tooling let us ship fast without cutting corners. When something needed changing, design and dev resolved it together, on the spot.

Subframe allowed us to seemlessly export designs directly into Cursor + Bolt

Day 5: Playback & Feedback

We wrapped with a stakeholder playback session, showcasing the prototype, walking through the user journey, and capturing feedback. We also shared key decisions, risks, and a clear plan for next steps.

The feedback? It didn’t feel like a ‘prototype’. It felt like a product. Allowing Fynlo to articulate their product to new investors and clients easily.

Screenshot of a user’s dashboard, showing them a snapshot of their fleet’s performance

The Tools That Made It Possible

Here’s the stack that kept us moving:

  • Miro structured the discovery workshop and made alignment easy.
  • ChatGPT assisted with detailed documentation and branded visuals.
  • Whisper seamlessly transcribes discussions so nothing gets lost.
  • Subframe used AI and systematic design to create high-fidelity UI, allowing fast visual iteration. After previously testing several AI design-led tools, I felt Subframe’s offering was most suitable for this project.
  • Cursor lets us build fast with collaborative, AI-assisted coding.

What We Delivered

In just five days, we produced:

  • ✅ A fully integrated prototype — live, clickable, and connected
  • ✅ A clean, branded investor-facing PDF to communicate the vision
  • ✅ A comprehensive sprint documentation pack that covered project goals, technical risks, data models, prototype details (including technology stack) and appendices with requirements and development process.
Screenshots illustrating the user’s journey through offsetting. We demonstrated that speed and design quality can coexist.

Final Thoughts

This sprint wasn’t just fast — it was focused, energised, and creatively fulfilling. We proved that velocity and design quality can go hand-in-hand.

We didn’t cut corners, we cut friction.

If you’re wondering whether this kind of rapid innovation could work for you, try it in five days.

You might be surprised how far you can go.