Build First

    Build Your First Mini-App

    Vibe Coding for Operators

    March 20, 2026  |  12:00 – 2:30 PM ET  |  Bethany Crystal  |  buildfirst.ai

    Quick Links

    Today's Build

    1
    Welcome & Intros
    12:00 – 12:15 PM
    2
    Problem Framing: Shaping your idea with POP-IT
    12:15 – 12:40 PM
    3
    AI Power Hour: Build your mini-app in 3 sprints
    12:40 – 1:40 PM · Sprint 1: Shape Your Problem · Sprint 2: Build Your App · Sprint 3: Iterate & Test
    4
    Vibe Coding: Level up to a web app
    1:40 – 2:10 PM
    5
    Demos, Integration & Q&A
    2:10 – 2:30 PM

    POP-IT Framework

    POP-IT is a design framework that helps you identify and shape "AI-shaped problems" in your work.

    P
    ProblemWhat is the problem you are trying to solve?
    O
    OutputWhat do you want to see from the AI when you're done?
    P
    PromptWhat instructions does the AI need to accomplish the task?
    I
    InputWhat context or documentation can you share with the AI?
    T
    TestHow will you know it's working?

    Framework established in partnership with Decoded Futures

    BEFORE YOU START

    Build Your Context Pack

    Your context pack is the raw material you'll feed into your mini-app. The better your input, the better your output.

    1

    Gather Your Notes

    Collect the unstructured content you want your mini-app to work with. This could be:

    • A meeting transcript from Otter AI or Granola (export as text or copy/paste)
    • An outline or rough draft for a lesson plan or curriculum
    • Handwritten or typed brainstorm notes from a project or strategy session
    • Any document where the information exists but isn't organized yet

    Tip

    Don't over-clean it. The whole point is to let the AI do the organizing work. Paste your raw notes as-is.
    2

    Define Your Goals

    Before you build, get clear on what you're trying to make. Fill in this template — you'll reference it throughout the session:

    My Notes-to-Doc Goal
    
    I am sharing unstructured notes about: [describe your topic — e.g. "a team meeting", "a lesson plan I'm developing", "a project kickoff conversation"]
    
    I want these to become: [choose one — a to-do list / a lesson plan / a memo / a project brief / a meeting summary]
    
    The things I need included are:
    - [e.g. owners and due dates — for task lists]
    - [e.g. learning objectives, daily activities, materials — for lesson plans]
    - [e.g. key decisions, action items, open questions — for meeting memos]
    
    Format preference: [bullet points / numbered list / structured sections]
    
    Tone: [formal / informal / plain language]
    SPRINT 1

    Shape Your Problem with POP-IT

    Before you build anything, use POP-IT to get clear on exactly what you're asking the AI to do. This is the thinking work that makes everything else easier.

    1

    Go to buildfirst.app

    Open buildfirst.app in your browser. You'll see the POP-IT builder — a guided form that walks you through each letter of the framework.

    2

    Type In Your Problem

    In the problem field, describe what you're trying to solve in 1-2 sentences. Example:

    My team meeting notes are scattered and messy. I spend 30 minutes after every meeting trying to turn them into a usable to-do list.

    Swap out the details for your own use case. POP-IT will guide you through the rest.

    3

    Follow the Prompts to Get Your Build Brief

    buildfirst.app will walk you through Output, Prompt, Input, and Test — one step at a time. Answer each question based on your goals from the Context Pack step. At the end, you'll get a build brief you can take straight into ChatGPT or Gemini.

    Tip

    Don't skip the Test step. Knowing how you'll evaluate success before you build is what separates a useful tool from one that never gets used again.
    SPRINT 2

    Build Your Mini-App

    Now you'll turn your POP-IT build brief into a real working tool using a custom AI assistant — either a ChatGPT custom GPT or a Gemini Gem.

    1

    Go to ChatGPT or Gemini

    Choose whichever platform you're more comfortable with:

    2

    Create Your Custom GPT or Gem

    Give it a name that describes what it does — something like "Meeting Notes to To-Do List" or "Lesson Plan Builder." A clear name helps you find it later and sets the right expectation for users.

    3

    Add Your Prompt Instructions

    Paste your system prompt from the POP-IT build brief into the instructions field. Here's a starting template if you want to iterate from something:

    You are a structured note organizer. Your job is to take unstructured notes, transcripts, or outlines and convert them into clean, organized documents.
    
    When I share notes with you:
    1. Read through everything carefully
    2. Identify the key topics, decisions, tasks, or learning objectives
    3. Organize them into the format I've requested (to-do list, lesson plan, memo, etc.)
    4. Fill in what's clear, and flag anything that seems missing or ambiguous
    
    Always ask me before you begin:
    - What format do you want the output in?
    - Who is the audience?
    - Is there anything you definitely want included or excluded?
    
    Be concise. Don't add filler. If something is unclear in the notes, say so.
    4

    Upload Your Knowledge Files

    Add the sample notes or documents you gathered in the Context Pack step. This gives the AI real material to work with and helps you test it immediately after setup.

    Note

    Gemini users: You'll need a Google account to create Gems. If you're using a work or school Google account, make sure Gemini is enabled.
    SPRINT 3

    Iterate and Test

    The first version is never the final version. This sprint is about finding what's working, what's off, and making it better.

    1

    Test with Your Real Notes

    Paste in a real set of notes from your Context Pack and see what comes out. Use this prompt to get started:

    Here are my raw notes. Please turn them into [a to-do list / a lesson plan / a memo]:
    
    [Paste your Otter AI transcript, Granola notes, or outline here]
    2

    Evaluate the Output

    Ask yourself:

    • Did it capture everything important?
    • Is the format right for how I'll actually use this?
    • Are there things it added that don't belong, or things it missed?
    • Would I send this to someone else as-is, or does it need cleanup?
    3

    Refine the Prompt and Try Again

    Tell the AI what to fix. Be specific — the more concrete your feedback, the better the next version will be:

    That's a good start. Here's what I'd like to change:
    
    - [e.g. "Add a section for open questions"]
    - [e.g. "Make the due dates more specific — use this week's dates"]
    - [e.g. "Rewrite in a more casual tone"]
    - [e.g. "The task owners are wrong — here's who owns what: ..."]
    
    Please revise and show me the updated version.
    4

    Share with a Colleague

    If you have time, share your tool's link with someone next to you and have them test it with their own notes. Fresh eyes catch things you'll miss. What do they find confusing? What works immediately?

    1:40 PM — Level Up

    Vibe Coding: Build the Web App

    Your custom GPT or Gem works — now let's turn it into a shareable web app anyone can use, no AI account required.

    1

    Go Back to buildfirst.app and Select "Web App"

    Open your POP-IT build brief again. This time, select the Web App output type. The builder will generate an updated prompt optimized for vibe coding.

    2

    Go to Replit

    Open replit.com and start a new Repl. You can use the AI-assisted setup — just describe what you're building in plain English.

    3

    Paste Your Prompt and Add Your Knowledge

    Use the vibe coding prompt from your build brief, or start from this template:

    I want to build a simple web app that converts unstructured notes into a structured document.
    
    Here's what it should do:
    - User pastes raw notes into a text box
    - User selects the output format they want (to-do list, lesson plan, or memo)
    - App sends notes to an AI and returns a clean, formatted document
    - User can copy or download the result
    
    Ask me questions about my goals before we build.
    
    Keep it simple — I want something I can build in under 1 hour.
    4

    Build Your Frontend

    Replit's AI will generate the app structure for you. Review the plan, approve it, and let it build. Your app will run live in the browser — shareable by link.

    Tips for Building with AI

    • Know the problem and the audience before you build — POP-IT makes this step explicit
    • Get the AI to perform reliably in chat first, then move to a custom app or interface
    • Use real notes in your test — sanitized or fake examples won't tell you if it actually works
    • When something goes wrong, describe the failure specifically — "it missed the due dates" is more useful than "it's wrong"
    • If you hit a wall, ask the AI for help — it can debug its own output and suggest improvements

    Resources