From Idea to Prototype: How I'm Building Quibbly with Vibe Coding
This issue is dedicated to Quibbly, the AI tutor I’ve been prototyping through vibe coding. It’s an attempt to turn courses into real conversations and... a crash course in building software with AI.
Ciao,
This issue is entirely dedicated to Quibbly, the prototype I’ve been building on my own, vibe-coding it piece by piece. Quibbly is a conversational tutor that lives inside a chat, guiding learners through videos, exercises, and reflections while adapting in real time to their questions and progress.
For me, the challenge hasn’t been just technical, but methodological: could a course be reimagined around dialogue instead of menus and progress bars? Can an AI tutor revive the act of learning? My thesis is that it can.
Nicola
PS. Next week, Radical Curiosity will take a short break while I’m on vacation.
Table of Contents
Understanding AI - From Idea to Prototype: How I Built Quibbly with Vibe Coding
Off the Record - From Serena to Quibbly: Rethinking Course Design Starting with the Student Experience
Curated Curiosity
Education and AI: the Alpha School case
OpenAI’s Study Mode: tutoring instead of shortcuts
Understanding AI
From Idea to Prototype: How I’m Building Quibbly with Vibe Coding
E-learning, as it is commonly designed and delivered, tends to reduce education to a passive consumption experience—more like streaming content than actual learning. Students are asked to scroll through materials, click “next” to confirm they’ve watched a video, and take quizzes that reward memory rather than understanding. The result is often a flat, unengaging experience that lacks real cognitive depth.
Quibbly aims to overturn this perspective completely. It is a conversational assistant, similar to systems like ChatGPT or Claude, but with a particular focus: enabling a new learning experience for courses designed initially for corporate LMSs or e-learning platforms such as Udemy or Coursera.
What sets Quibbly apart from the traditional interfaces of these platforms is its mode of interaction: everything happens within a chat. Through dialogue, students are presented with videos, exercises, reflection prompts, and personalized content, all carefully selected to align with the learning objective and the learner’s profile.
At its core, Quibbly is built on a Socratic approach. Students are no longer passive recipients but are guided through a tailored path, encouraged to reflect, and supported in achieving a deep, lasting understanding of the topics.
Conversation at the Core of Learning
While maintaining the classic division into modules, Quibbly makes a radical choice: within each module, all interaction happens inside a single chat. That’s where everything takes place. What makes the experience truly transformative, however, is the learner’s ability to take an active role—asking questions, requesting clarifications, or seeking examples and deeper insights, just as they would with a real teacher.
The learning experience still follows the course as initially designed, but the journey is never identical. Quibbly adapts it in real time, responding to the learner’s answers, pace, and uncertainties. This flexibility is what makes studying a genuinely personal experience.
In traditional systems, progress depends on mechanically completing tasks: watched the video? Passed the quiz? Then you can move on. Quibbly follows a different logic. Learners advance only when the tutor determines they’ve reached the required cognitive level—whether that’s memorizing a concept or applying it in a simulation.
When Quibbly is satisfied, it congratulates the learner and generates a progress report that actively shapes the following modules, adapting their content and difficulty to the learner’s journey. The student then moves forward, with Quibbly retaining everything that has happened before.
How Quibbly Works
Quibbly is an agent-based system. The primary agent has a system prompt that defines Quibbly’s personality, its behavioral instructions, and the tools it can access. Here’s an excerpt:
You are Quibbly, a young, wise, and endlessly curious owl who serves as an eLearning tutor.
Your personality blends the wit and insight of Archimedes from The Sword in the Stone with a younger, warmer, more encouraging spirit. You are intelligent and articulate, confident in your knowledge, and take pride in guiding learners — never pedantic, never condescending.
Think of yourself as a flight companion on the learner’s journey: you guide, you listen, you occasionally hoot with delight when they succeed.
The course is described through YAML files that contain both the content and the instructions. For example:
module:
title: The AI Fluency Framework
description: >
Learn to collaborate with AI systems effectively, efficiently, ethically, and safely. This module introduces the concept of AI Fluency in depth, explores three emerging ways we collaborate with AI (Automation, Augmentation, and Agency), and presents the AI Fluency Framework and its core “4Ds”: Delegation, Description, Discernment, and Diligence.
sequence:
- step:
id: STEP-0
type: introduction
tutor_instructions: >
Let the student know this module will go deeper into the concept of AI Fluency and the framework that supports it. Highlight that they'll learn three collaboration modes with AI and four key competencies.
interaction_mode: presentationIf you already have a course, this approach enables you to preserve the original instructional design while incorporating a conversational delivery and tailoring the content to the learner. With the support of artificial intelligence, it becomes possible to create exercises and complex simulations, making the course experience especially engaging.
The Quibbly Prototype
The Quibbly prototype was built entirely with Lovable, a vibe coding platform. Vibe coding is a programming approach where, instead of manually writing code, you describe what you want in natural language and the AI translates those instructions into working software (most of the time, at least).
Quibbly wasn’t built by a team of developers, but by me, a product manager with solid experience in designing complex SaaS products, yet without the skills to write a single line of code. From my perspective, the challenge was to avoid falling into the regressions that often plague AI-powered no-code systems: unexpected behaviors, arbitrary changes to working components, bugs that appear not when you make a mistake, but when you try to add something new.
This is a surprisingly common dynamic. The AI makes structural decisions far more complex than they appear, and it does so without revealing its thought process. When something stops working, you can easily fall into an endless loop of prompts, hoping the AI will recognize the problem and propose a fix. Frustration is guaranteed. I wrote about this just last week in Vibe Coding Unpacked: Promise, Limits, and What Comes Next.
In those moments, the absence of a developer feels painfully clear. But trying to bring one in usually backfires. They’d look at the screen for a few seconds, sigh, and say: «No, no, no. This is impossible to work with. I can’t control anything. It’ll be faster if I rebuild it all from scratch.»
Lovable dictates the technology stack behind Quibbly: React, TypeScript, and Tailwind CSS for the front end; Supabase for authentication, security, and serverless functions. Supabase edge functions, in particular, are essential for orchestrating the interaction with OpenAI’s APIs.
The Development Methodology
Imagining you can build an application with a single prompt is purely an illusion, even though that’s precisely what most vibe-coding platforms promise. The best strategy is to move step by step; the metaphor that comes to mind is a Lego kit. You take one bag at a time, build a component, then move on to the next bag, finally assembling everything and adding the finishing touches. The catch is that no one gives you the bags with the bricks inside or an instruction manual: you have to create them yourself.
The goal of the Quibbly prototype was to explore the learning experience within a chat environment and see whether it truly provides an educational advantage. That meant I needed one or more courses to deliver, the AI tutor, the chat interface, plus an identity management system (IAM) and role-based access control (RBAC). In other words, an application with plenty of design and development challenges. Here’s the roadmap I followed:
Step 1. Authentication and Permissions
I started with the IAM and RBAC system. This part is pretty straightforward to develop and only requires a handful of prompts, since it’s highly standardized. All you need to do is tell Lovable what type of authentication you want (I chose email and password) and which roles are required. Once Supabase is connected to the project, Lovable handles everything automatically—and usually gets it right.
Course Authoring
Next, I built the course management functionality. Again, this is relatively simple. A course is made up of modules, and a YAML file describes each module. The modules need to be ordered, so with just a few prompts to explain this architecture, Lovable generated both the data structure and the interface.
The System Prompt
I decided to store Quibbly’s system prompt in the database so it could be easily modified and versioned. As I built out the admin side, I gradually refined my ideas about which instructions should live in the system prompt and which should be placed in the description of individual modules. I worked with two main goals in mind:
Giving the course designer maximum freedom in defining instructions for each activity, thus overcoming the rigidity of current LMS platforms that only allow for certain types of content, exercises, or learning activities;
Enabling Quibbly to make decisions autonomously, avoiding hard-coded workflows as much as possible, and instead embedding instructions directly in the system prompt.
Student Experience
Once the admin side was complete, I moved on to the student-facing experience by building the homepage, which included a list of available courses and the enrollment system. After two days of vibe coding, I was finally ready to tackle the most significant challenge: creating the chat and integrating it with the OpenAI APIs.
At this stage, I began working very cautiously, as both the back end and the front end had become complex to implement—and this is where I encountered the most regressions. I first built the skeleton of the interface and made sure the modules displayed correctly in the left-hand menu. Then I asked Lovable to implement the chat interface. Finally, I connected the OpenAI APIs.
AI Integration & Chat Intelligence
This was the stage where Quibbly really came to life. The integration with OpenAI’s GPT-5, orchestrated through Supabase edge functions, made it possible to start experimenting with the system’s prompt structure and context engineering.
I began by sending the system prompt and the YAML course description to OpenAI, then added a module unlocking function along with instructions in the system prompt to call it. Here, I had to double-check multiple times that the unlocking logic wasn’t hard-coded into the function itself, but instead managed by the prompt, ensuring that the LLM would autonomously trigger the function when needed.
Finally, I added a function that generates a report for each completed module and ensured that all reports were passed back as context, making the course adaptive.
Polishing
It was only at this stage that I worked a bit on the chat’s look and added all the UI features I wanted: a widget to embed the YouTube video player, Markdown rendering for AI-generated content, custom behaviors for the input area, and so on. Am I satisfied with the visual outcome? It could certainly be improved, but for a prototype, it’s more than enough.
Lessons Learned
RTFM! It is here.
Work in small steps, especially if you can’t read or fully understand the code being generated. Every time you develop a new feature, test the application to ensure everything still works correctly.
When approaching a complex feature, it’s better to start from the back end and keep the database interface open in a browser tab. Focus first on ensuring that data is created and saved properly, then proceed to add the UI.
Always keep the “Lovable” chat option turned on. Explain to Lovable the outcome you want, ask it to summarize what it has understood, have it ask you clarifying questions, and then let it propose a plan. Review the plan carefully, and if it seems too complicated, break it down into smaller, manageable tasks. Never let Lovable embark on implementation plans that go beyond three or four steps.
When you’ve finished a coding session, run a Codebase Structure Audit, a regression analysis recommended by the Lovable Prompting Bible. You’ll often find that Lovable uses different approaches to achieve the same goal, and that it distributes functionalities in arbitrary ways. If this happens, address the errors marked as priorities and maintain a clean codebase.
Whenever you’re unsure how to proceed, turn the “chat” option on and brainstorm with Lovable. Build context together with the AI, and use that context to generate the next development plan.
Don’t assume Lovable remembers everything. The conversation for building Quibbly is over 600 pages long in a Google Doc, far too long to stay in the context of a prompt. This is why Lovable re-analyzes the codebase at each new request.
Don’t get fooled when Lovable compliments you on how brilliantly you solved a problem. It’s precisely when you let yourself be flattered that the biggest messes tend to happen—always double-check what it says.
Personally, I still find it challenging to achieve a truly polished aesthetic, but that’s not necessary for a prototype. What Lovable produces on its own is more than respectable. Don’t waste time on the UI, focus on the UX.
Want to give it a try?
It might be tempting to say, «It works; it’s ready for production.» I’ve thought about it, and in theory, I could even integrate it with Stripe and start selling some courses, but I prefer to be cautious. I’m not in a position to guarantee that there are no security gaps—and since this is an application that collects user data, I believe that responsibility should always take precedence over speed.
In September, when I return from vacation, I’ll roll out two or three complete courses and provide access to 100 people who are willing to share their chat data with me to help improve the learning experience. Just reply to this email, and I’ll send you the URL to join one of the available courses.
Off the Record
From Serena to Quibbly: Rethinking Course Design Starting from the Student Experience
When we first started working on Serena, the idea was to build a cognitive SaaS that could help anyone create an online course from scratch. We spent months designing a coherent workflow, solving numerous practical problems: defining a clear learner profile, generating a comprehensive and non-redundant syllabus, and integrating rich yet flexible knowledge bases. You can learn more about the journey here and here.
The results were promising, but as we progressed, we realized a significant limitation: we were taking an incremental approach, simply “adding” AI to an existing process. This process, at its core, never questioned the assumptions of e-learning itself—and that was precisely what the incumbents were doing: automating course creation instead of rethinking the learning experience from the ground up.
That’s when we decided to change perspective radically. Instead of starting from the traditional design workflow, we began with the student experience.
Most online courses today follow a similar model: a list of content (often videos) is presented, and then tests or quizzes are added to assess whether learners have understood and retained the material. The outcome is mainly passive learning.
With generative AI, the picture changes: we can design active, interactive experiences that go beyond simple comprehension and move up Bloom’s Taxonomy.
Bloom’s Taxonomy is a pedagogical model that describes different levels of learning, starting from the basics—remembering and understanding—and progressing toward more complex skills, such as applying, analyzing, evaluating, and creating. Traditional e-learning usually stops at the first two levels. AI, however, enables us to go further: not just to understand a concept, but to apply it in real-world contexts, think critically, simulate real-world decisions, and even create new solutions.
This shift has profound implications for the design of courses. We are no longer constrained to multiple-choice quizzes or rote exercises. Instead, we can design interactive simulations, guided reflection activities, branching scenarios, and other experiences that were once reserved for in-person learning with a teacher present.
This is why Serena is evolving into Quibbly: not just a tool that speeds up course creation, but a platform that rethinks how courses are designed and delivered from the ground up. A shift from merely adding AI to existing processes to reimagining the learning experience around the possibilities of AI.
In September, I’ll be publishing the first three courses and welcoming the first 100 students to test this new experience. If you’d like to participate, let me know.
And if you’re reading this as a potential investor, I’d be happy to start a conversation.
If you were forwarded this email or if you come from a social media, you can sign up to receive an article like this every Sunday.Curated Cusiosity
Education and AI: the Alpha School case
Joe Liemandt, an entrepreneur who stayed out of the spotlight for 25 years, is back with a radical project: a private school with no teachers or homework, where AI apps and hands-on workshops drive learning. The results are striking — students rank among the top nationwide in standardized tests — and Liemandt now aims to scale the model globally with the Timeback platform.
OpenAI’s Study Mode: tutoring instead of shortcuts
OpenAI has launched Study Mode in ChatGPT — a new feature that shifts the focus from quick answers to active learning. The system acts like a tutor, asking questions, building on prior knowledge, and helping students discover answers step by step. In his article, Simon Willison takes it a step further by analyzing the system prompt behind Study Mode, demonstrating how carefully crafted instructions shape ChatGPT’s behavior as an approachable teacher rather than a solution machine.