Lesson 5 — Vibe Coding in ChatGPT

What is vibe coding?

Vibe coding means building working apps and tools by explaining what you want in normal language and letting AI generate the code. You do not need to know programming first. You need clarity about the outcome you want.

No coding required to begin

You can start from a practical need: a tracker, calculator, reading tool, workflow system, form, dashboard, or browser-based app.

ChatGPT understands context

It does not only output code. It can think about the user, the workflow, and the interface that best suits the task.

Useful outputs

Web apps, Python scripts, spreadsheet formulas, and simple HTML tools that run directly in a browser.

Explainable results

It can also explain what it built, how it works, and how to change it, making iteration much easier.

How to brief ChatGPT

Great vibe coding starts with a strong brief. Use the Act–Explain–Please structure to give ChatGPT a clear role, a specific problem, and a direct request for the type of output you want.

Step 1

Act

Tell ChatGPT who it should be and who the tool is for.

Act as a senior web developer building a tool for a TV producer.

Step 2

Explain

Describe the app, its inputs, outputs, and the real-world need behind it.

I need an app that lets me enter episode names and track their edit, grade and delivery deadlines.

Step 3

Please

Ask directly for the build format and the quality you want.

Please build this as a clean, single-page HTML app I can run in my browser.

Three example projects

These examples show how plain-language prompting can turn into useful, practical apps. Switch between them to see the problem, the prompt, the result, and a miniature visual demo.

Example 1 — TV Production Scheduling App

A TV producer needs to track several episodes across a series, each with filming dates, edit deadlines, grade dates, and delivery dates. A spreadsheet is possible, but awkward to update and not visually clear for the team.

The prompt

Act as a senior web developer. I'm a TV producer managing a 6-episode documentary series. I need a single-page HTML app (no external libraries) where I can: • Add episodes with a name, filming date, edit deadline, grade date and delivery date • See all episodes in a table • Have rows turn red if a deadline is overdue, amber if it's within 3 days, and green if it's on track Please build this as clean, functional HTML I can save and open locally.

The result

A complete HTML file generated in under 30 seconds
A form to add episodes and deadlines
Automatic colour-coding based on today’s date
A clear visual status view at a glance

Mini demo

This mock interface shows the kind of clarity the generated app can provide immediately in a browser.

Episode

Filming

Edit

Grade

Delivery

Episode 1

12 Mar

15 Mar

17 Mar

18 Mar

Episode 2

16 Mar

20 Mar

22 Mar

24 Mar

Episode 3

20 Mar

25 Mar

27 Mar

29 Mar

Episode 4

24 Mar

29 Mar

31 Mar

2 Apr

Example 2 — Educational App for Children with Dyslexia

A teacher wants a reading app that is simple, accessible, and inexpensive. Off-the-shelf options are often either too complex or too costly. The app needs readable typography, a gentle background, read-aloud support, and word highlighting.

The prompt

Act as a web developer specialising in accessibility tools for children. Please build a single-page HTML reading app for children with dyslexia. Requirements: • Use the OpenDyslexic font (load from a CDN) • Cream (#FDF6E3) background, large font size (22px minimum) • A text area where a teacher can paste in reading material • A 'Read Aloud' button using the browser's built-in speech synthesis • Each word should highlight in yellow as it is spoken • A Pause and a Restart button Keep the interface friendly and uncluttered.

The result

A complete single-page app in one response
Text pasted in by the teacher and read aloud in-browser
Yellow highlighting following each spoken word
No installation cost and usable in a classroom

Mini demo

This simplified reading panel illustrates the accessible tone and visual emphasis described in the lesson.

Example 3 — Photo Editing Workflow Tool

A photographer needs to track image status across a job: kept, culled, edited, delivered, and invoiced. Existing apps do not quite match the workflow, but a tailored tool can be generated quickly.

The prompt

Act as a web developer. Build me a single-page HTML photo workflow tracker. Features: • An input field to add image filenames (one at a time or pasted in bulk) • For each image, show four buttons: Keep, Cull, Edit, Delivered • The active status should be highlighted • A summary bar at the top showing counts for each status • Auto-save to localStorage so progress is not lost on refresh • A button to export the list as a CSV Dark mode design. Clean and minimal.

The result

Bulk filename entry from Finder or Explorer
Status tagging at image level
Live progress summary at the top
Auto-save and CSV export for handoff or invoicing

Mini demo

A dark-mode snapshot showing how status, tracking, and summary can be made instantly clear.

2

Keep

1

Cull

2

Edit

1

Delivered

Tips for getting better results

Small wording choices can massively improve the quality of the app you get back. These are the habits that help vibe coding work smoothly.

Ask for a single-page HTML file

When you say “single-page HTML, no external libraries”, you get something you can save and open locally with almost no setup.

Describe the user, not just the tool

Explain who will use it and why. Context helps ChatGPT make better interface and workflow decisions.

Iterate in the same chat

Keep refining in one conversation. ChatGPT remembers the app and can adjust it instead of rebuilding from scratch.

Add one feature at a time

Smaller steps usually lead to fewer mistakes and more stable results than asking for ten big changes at once.

When things go wrong

Broken apps and odd layouts are normal. The key is to feed the problem back clearly. You do not need to diagnose everything yourself.

Use the browser console

Copy the error message from Inspect → Console and paste it back into ChatGPT with: “This is the error I’m seeing. Please fix it.”

Describe visual problems in plain English

Something like “The buttons are too small and the table overflows on mobile” is often enough for ChatGPT to make the right changes.

Do not panic if the first version is imperfect

The first version is often a draft. The speed of iteration is the real strength of vibe coding.

Keep the conversation going

Stay in the same thread so the full history of the app remains available while you refine functionality and design.

See it in action — then build your own

The lesson points to real tools built with these techniques for TV production, photography, and education. The core idea is simple: you do not need to learn to code first. You need to learn how to explain what you want.

Starter prompt

Use this as a reusable base for your next vibe-coded tool. Replace the placeholders with your real use case, then iterate in the same conversation.

Act as a senior web developer. I need a single-page HTML app for [describe the person or team using it]. The app should: • [feature 1] • [feature 2] • [feature 3] • [feature 4] Design requirements: • Clean, simple and professional • Mobile-friendly • No external libraries unless necessary Please build the full working HTML, CSS and JavaScript in one file so I can save it and open it locally in my browser.