Spark Space
Back to essays
Tall vertical graphic of a code editor screen with a glowing pink overlay on a dark background
Experiments4 min read
product developmentAI codingvibe codingexperimentstechnology

Product Development - Vibe Coding Magic

LF

Layla Foord

Product development magic happens with vibe coding, here's how I built a workshop planner in a week.

I've been working in product since you had to sketch ideas with pen and paper. From developing one of the first drag-and-drop reporting tools to introducing mobile route planners using live traffic data and I've always loved turning ideas into something useful. Watching someone use what you've made, and find it helpful, is still magic.

But something shifted over the past few weeks.

I've built three fully working applications, end to end. No ticketing systems. No roadmaps. No rituals. Just me, a browser, and a problem I wanted to solve.

These aren't MVPs or pitch decks. They're micro-tools and each is designed to do one or two things really well.

Vibe coding gets a lot of bad press, I think that's because it is threatening and so we diminish its potential. But for an imagineer, it really is product development magic and ever so slightly addictive.

This one came out of necessity. I needed a teleprompter for a video, and most of the ones on the App Store were either expensive or overcomplicated. So I made one. It took 30 minutes to get it working well enough, and I used it that same afternoon. A few days later, people at work were using it too.

That was the moment I remembered: this is what I've always wanted product to feel like.

The second tool was a little... excessive. A cooking assistant with voice-guided recipes, adaptive meal planning based on dietary needs, an OpenAI content engine, and a voice API so users could choose meals by talking. I even hooked it up to Stripe for subscriptions and built a whole recipe database.

I built some crazy stuff. But eventually, the dopamine wore off and the complexity caught up with me.

Then I had to plan a full team strategy day.

Now I've run a lot of workshops in my time. But finding the right activity, balancing break times, figuring out the right arc for a group - it can be maddening. I was back in the usual mess: digging through old Miro boards, copy-pasting from Notion, stitching together PDFs, and wondering why I still hadn't figured out a better way.

And I built Spark Planner instead.

This time, I did things differently.

I used a product-led approach and not just in theory, but in practice.

Lean loops, fast feedback, behavioural data, and just enough polish to earn attention.

Intelligent Drag-and-Drop Builder

Visual schedule creation where users drag activities from bank to timeline

Automatic time calculation with smart duration and start time updates

Activity bank filtering with context-aware activity suggestions

Dual view exports for both participant schedule and facilitator guide

Participant Schedule with clean timeline view for attendees

Facilitation Guide containing detailed instructions, materials, and step-by-step guidance

PDF generation to direct download with professional formatting

6 curated workshop types with unique activity libraries

Colour-coded organisation with custom icons

Type-specific AI suggestions - activities tailored to workshop goals

Progressive disclosure - information revealed based on selection

Built-in Fake Door Testing System

Real-time feature validation - test demand before building

4 different feature types tracked (delivery mode, custom workshops, custom activities, AI generator)

User feedback collection - love/hate feedback stored locally

Beta badges and coming soon UI - professional feature preview experience

Day 2: Build the Value Loop First

I ignored settings, accounts, and edge cases. Instead, I focused on one thing: can a facilitator build a real workshop right now and does it feel good?

Library of activities (with durations, materials, and instructions)

AI-generated intros, goals, and outcomes

Exports for participants and facilitators

It worked. Not perfectly. But enough.

Zero-friction onboarding so users can start planning workshops instantly without sign-up

Local storage persistence where workshops save automatically

URL-based sharing via unique tokens

Maximum user feedback collection with no barriers

GPT-4o integration for contextual activity suggestions

Workshop-type intelligence where AI understands retros, design sprints, etc.

Structured JSON responses with materials, instructions, timing, participant counts

One-click generation with a magic wand button creating 3 new activities instantly

Love it or Not?Pricing BeforeFeature RankingPricing After#pro-gallery-vckdz64757-not-scoped .gallery-item-container { opacity: 0 } #pro-gallery-vckdz64757-not-scoped .gallery-item-hover::before { background: transparent !important}try { window.requestAnimationFrame(function() {

  var ele = document.getElementById('pro-gallery-vckdz64757-not-scoped');
  var pgMeasures = ele.getBoundingClientRect();
  var options = (() => "gallerySizeType:px|enableInfiniteScroll:true|titlePlacement:SHOW_ON_HOVER|arrowsSize:23|slideshowInfoSize:0|galleryLayout:9|isVertical:false|gallerySizePx:300|cubeType:fill|galleryThumbnailsAlignment:none")(ele);
  var width = pgMeasures.width;
  var height = pgMeasures.height;

  var isIOS = /iPad|iPhone|iPod/.test(navigator?.userAgent);
  if(isIOS) {
    width = width;
    width = width;
    height = height;
    height = height;
  } else {
    width = width;
    width = width;
    height = height;
    height = height;
  }

  pgMeasures = { top: pgMeasures.top, width, height };

var isVertical = options.includes('layoutParams_structure_scrollDirection:"VERTICAL"'); var layoutFixerUrl = '/serverless/pro-gallery-css-v4-server/layoutCss?ver=2&id=vckdz64757-not-scoped&items=3416_1063_782|3391_2066_1362|3521_2066_1362|3501_2066_1362&container=' + pgMeasures.top + '' + pgMeasures.width + '' + pgMeasures.height + '' + window.innerHeight + '&options=' + options; document.getElementById('layout-fixer-style-vckdz64757-not-scoped').setAttribute('href', encodeURI(layoutFixerUrl)); });

    } catch (e) {
      console.warn('Cannot set layoutFixer css', e);
    }Next: I Added Real Product Signals & Fake Doors

A smarter drag-and-drop builder (it's still a bit glitchy on a wider screen)

Dual export system for participants and facilitators (still a bit ugly but it works)

Visual workshop type selection with tailored AI

Feature tracking via fake doors and feedback

Each interaction is tracked. Each click feeds a live dashboard. I can see what sparks curiosity and what gets ignored.

I set up a feedback form to capture what people are willing to pay for the current features, what they'd love to have, and what they'd pay for that. I can see this in real-time on the dashboard, helping me decide what to build next because people don't always say and do the same things.

Custom domain (not beautiful, but good enough)

Live admin dashboard tracking clicks, comments, and pricing intent

This is what I've always wanted product work to feel like, not roadmaps and presentations, just solving problems and seeing if it works.

Check out the Spark Planner beta, and if you've got thoughts, I'd love to hear them. Be kind and constructive — this is an experiment, and we're in it together.

The Pattern

New essays when there's something worth saying

Not on a schedule. Subscribe and get the next one when it's ready.

More in Experiments