You can build software now without writing a single line of code yourself. You describe what you want in plain language, and an AI writes the code for you. This way of working — describing what you want and refining the result, instead of typing the code by hand — is what people call vibe coding.
The “Today’s Random Knowledge” wheel on the right side of this blog was built exactly that way. Press the button, the wheel spins, a random post is picked, and you jump straight to it. In this article I use that little game as an example to show how, even without coding skills, a beginner can tell an AI what to do — and in what order — to finish a working game from start to end. Seven steps.
Before we start, remember one thing. In vibe coding, your job is not to memorize code. It is to describe what you want clearly, check the result, and ask for fixes. Do those three things well and you are most of the way there.
Step 1. Plan — decide what you are building in one sentence
The first job is to be able to say, in a single sentence, what the thing does. Ours comes out like this: “A game where you press a button, a wheel spins to a random post, and you go straight to that post.”
It helps to add two more things. Why you are building it (so visitors stumble onto a post they didn’t expect and enjoy looking around), and how you will know it is done (every spin lands on a different post, and clicking takes you there). That one sentence and those criteria become the compass for every step that follows.
Step 2. Design — sketch the screen and the flow first
Now turn the idea in your head into something you can see. A rough sketch on paper is fine, or you can describe it to the AI. Decide three things: where it goes (below the sidebar), what shows up (a title, the wheel, a spin button, the result link), and the order things happen in (press button, wheel spins, wheel stops, the chosen post’s link appears).
One more thing: list what the game needs to run. Here that is a list of posts. As long as you have each post’s title and address, you can fill the wheel. Sketching the screen, the flow, and the ingredients up front lets you tell the AI exactly what you want.
Step 3. Write the spec — describe it clearly to the AI
This step is the heart of vibe coding. If your description is vague, the AI builds the wrong thing. So you write a short brief that spells out what you want: size, colors, number of slices, how long the animation runs, and what to show once it stops. The more you pin down, the better the result.
Example instruction: “Build a round spin-wheel for the site’s sidebar. Split a list of posts into slices, and when the ‘Spin’ button is pressed, spin for about three or four seconds and stop on a random slice. Below the wheel, show the chosen post’s title and a link to it. Use a clean blue-and-teal color scheme.”
Don’t try to write the perfect brief in one go. Ask for the big shape first, then look at the result and refine in small steps — “make the button a bit larger,” “shorten the spin time.” That is far faster than aiming for perfect on the first try.
Step 4. Frontend — build what you can see first
Now build the part people actually see. Ask the AI to create the wheel, the spinning motion, and the result display. Here is a useful trick: before you connect the real list of posts, ask it to build with fake data first. Use placeholder items like “Post 1” and “Post 2” so you can watch the wheel spin with your own eyes.
Check two things. Does the wheel spin smoothly and come to a stop when you press the button? And does the slice the top pointer lands on match the result shown below? Once those line up, half the game is done.
Step 5. Backend — connect the real data
Once the wheel spins nicely, swap the fake data for a real list of posts. In this game, the site (WordPress) automatically supplies the titles and addresses of the latest posts to fill the wheel. This behind-the-scenes part — preparing data and handing it to the screen — is what people call the backend.
Example instruction: “Now, instead of the fake data, automatically pull the site’s eight most recent posts and put them into the wheel slices. If more posts are added later, add more slices automatically.”
Backend sounds intimidating, but as a beginner you only need the idea: “take this data and put it there.” The AI writes the actual code. Your job is just to say clearly what data you want and how many items to show, in what order.
Step 6. Verify — make sure it really works
Even when it looks finished, don’t stop there — check it in different situations. Spin it several times to be sure a different post comes up each time. Click the link to confirm it really goes to that post. Look at it on a phone screen. And for people who find motion uncomfortable, it is good to include a setting that reduces the animation.
When you find a problem, the key is to describe it to the AI in concrete terms. Instead of “it doesn’t work,” say something like “when I press the button twice quickly, the wheel never stops.” Telling it when and how the problem happens helps the AI fix it far more reliably.
Step 7. Ship — put it on the live site
The last step is putting your finished game on the real site. There is one rule to keep here: working on your own computer is not the finish line. After you upload it, check it once more at the real address, because a different environment can surprise you with problems you didn’t expect.
One more thing: having a way to undo (a backup) before you upload puts your mind at ease. If something breaks, you can return to the earlier state — so you can try things freely without fear.
At a glance
| Step | What you do | What to tell the AI |
|---|---|---|
| 1. Plan | Say what it is in one sentence | “I want to build this game” |
| 2. Design | Sketch the screen, flow, ingredients | “Lay it out and move in this order” |
| 3. Spec | Spell out the details | “Size, color, timing, result — like this” |
| 4. Frontend | Build the visible part with fake data | “Show it with placeholder data first” |
| 5. Backend | Connect the real data | “Pull the real latest posts in” |
| 6. Verify | Test in different situations, fix | “This breaks when X — please fix” |
| 7. Ship | Upload, then recheck the live URL | “Confirm it on the real site too” |
Wrapping up
The most important thing in vibe coding is not coding skill. It is the ability to describe what you want clearly and to check the result. Plan, design, spec, frontend, backend, verify, ship. Remember that order and, even without knowing how to code, you can build a small game from start to finish.
If that is hard to believe, give the “Today’s Random Knowledge” wheel on the right of this page a spin. What you just read about is exactly what built it.