You Don’t Need to Code! Vibe Coding in Action: Full Prompt Examples to Launch Your Program Online | Louis Yang

In the previous article, we introduced the concept and process of Vibe Coding. But in practice, many problems still arise.

This time, I’ll walk you through a complete example — my wife is a Chinese teacher, and she made a simple game for her students to practice “matching Chinese characters with their pinyin.” It also features text-to-speech and score tracking for added interactivity.

In this article, I’ll break down the entire development journey using three common scenarios: "starting out", "debugging", and "understanding". You’ll see how she asked ChatGPT, what it responded with, and how we gradually improved it through prompt adjustments.

Live project: https://afangchinese.github.io/wordmatch/

＊ For more on what Vibe Coding is and its pros and cons, see the previous article:
Vibe Coding: What Is It, Who’s It For, and What Can You Do With It?

Scenario 1: Starting — “I want to make a game, but where do I begin?”

This is where most beginners get stuck — not knowing what to ask or how to start.

Her first prompt was:

I want to make a pinyin matching game. Please use HTML + JS to help me build a simple web page. Users can input multiple lines of “Chinese character Pinyin”, and after clicking Start, matching cards will be displayed.

ChatGPT responded with a working demo that included:

User input of multiple Chinese + pinyin pairs
Displaying cards on Start
Text-to-speech when clicking Chinese characters (via SpeechSynthesis API)
Cards disappearing after successful matches

Tips:

Add info about your “skill level,” “tech preferences,” or “intended use environment” to get more tailored responses
It’s okay if the first version isn’t perfect — just iterate
If you don’t understand terms like HTML, JS, server, local storage, or ReactJS, don’t worry. This uses the simplest stack for beginners as explained in Part 1. You can directly use this add-on to your prompt:

Just to clarify, I have no coding experience. I want something that runs in the browser with no server or frameworks like React. Please use plain HTML and JS. If data needs to be saved, use local storage in the browser.

Here’s a refined version I helped her write:

I want to make a Chinese pinyin matching game. There should be a text input where I can enter multiple Chinese + pinyin pairs. The input should persist even after refreshing. When I click Start, the game will use my input to display cards for students to match. The game ends when all pairs are correctly matched. If they get it wrong, that pair should appear again until answered correctly. At the end, show the number of correct and incorrect answers. I have no coding experience. I want something that runs directly in a browser, no server or React, and use local storage if needed.

Scenario 2: Debugging — “Something broke, what do I do?”

Everyone runs into this at some point. Here are a few common issues and how we fixed them:

1. Cards don’t refill after matches

After a correct match, please refill from unmatched words so there are always 4 pairs on screen.

2. No red flash on incorrect answers

When players get it wrong, show a red highlight on both cards briefly before resetting.

3. Pinyin cards also trigger audio

Please make sure only Chinese character cards trigger audio.

Tips:

If your screen goes blank or something inexplicably breaks, try this:

I pasted your code, but the screen is blank. Please walk me through how to open browser developer tools and send you the error message.

Scenario 3: Understanding — “What does this part mean?”

Sometimes, ChatGPT gives code that works, but you don’t fully understand it — or your edits aren’t producing the effect you want. Try asking for line-by-line explanations:

What is speechSynthesis doing? Why is it needed?

You gave me this code: element.classList.add("error"). I don’t understand what it does, and it’s not working as expected. Can you explain line-by-line?

ChatGPT will usually help with:

What the code does
The purpose of each line
Whether parts are optional or modifiable

Tools for Going Further: Making It Cleaner, Safer, and Online

(A) ChatGPT + Browser is Enough to Start

Just paste your code in an .html file and open it in a browser
No need for development tools

Limitations:

Can only run on your own machine
→ Use GitHub Pages (see D) to go public
As code gets longer, ChatGPT may break or overwrite working sections
→ Use (B) Cursor to make smaller, controlled edits
→ Use (C) GitHub for version control and rollback

(B) Cursor (AI Coding Editor)

Combines code editing with AI chat
Highlights exactly what AI changes
Allows managing multiple files as the project grows

Limitations:

Paid (but free trial available)
Still recommended to pair with (C) GitHub for backups

(C) GitHub (for version control) — Advanced, optional

GitHub is a professional tool for saving code and managing versions. It’s powerful but takes effort to learn. Skip for now unless you're interested.

If you want to try it, I’ve simplified the steps:

Create a GitHub account
Make a new repository
Set up authentication
Link your local folder to GitHub (make sure your code is in a dedicated folder)

Use this prompt with ChatGPT to guide you through:

I want to upload my code to GitHub for versioning. Please walk me through (1) creating an account, (2) setting up a repository, (3) configuring auth, (4) uploading my folder.

Once that’s done, open the Terminal and run:

cd [your-folder-path]
git add .
git commit -m "Update"
git push -u origin main:main

Replace [your-folder-path] with your actual path. Paste and press Enter. You’ve now updated your code to the cloud! Repeat this every time you want to save a stable version.

(D) Publishing It Online — Use GitHub Pages or Other Free Hosts

Publish your project for free online
If GitHub is set up (from C), use this prompt:

I’ve uploaded my project to GitHub. How can I publish it using GitHub Pages?

If not using GitHub, you can also ask ChatGPT to recommend other free hosting options.

Summary: From Idea to Live App—You Can Do It

In this process, I realized that the biggest blockers weren’t writing code, but not knowing what to ask — or how the tools work.

We finished this project in just two evenings. Most of the time went into writing prompts and learning how to go online — the actual “coding” part was minimal.

It reinforced my belief:

AI coding is mature. What we still need is support for turning prototypes into real, usable tools.

Hope this article helps you create your own first project — and experience that amazing feeling of turning ideas into reality.