🎮Vibe Code MatrixStart Building

LEARN — PROMPTS TO CODE

Every prompt is a web development concept in disguise.

6 modules · 10 lessons · Each one shows you the prompt, the structured action it becomes, and the real JavaScript an engineer would write to do the same thing.

Open the Builder🏰 Tower Defense lessons →← Back to overview

1. Coordinates & State

Every UI you've ever built is just objects in a list. Start here.

TRY THIS PROMPT

"Add a dragon at row 2, column 3"

THE STRUCTURED ACTION IT BECOMES

{
  "action": "add_asset",
  "asset": "dragon",
  "row": 2,
  "column": 3
}

WHAT THE ENGINE EFFECTIVELY RUNS

// The reducer that handles add_asset
function reducer(state, action) {
  if (action.action === "add_asset") {
    return {
      ...state,
      assets: [
        ...state.assets,
        {
          id: crypto.randomUUID(),
          asset: action.asset,
          row: action.row,
          column: action.column,
        },
      ],
    };
  }
  return state;
}

CHALLENGE

Place a coin at row 0, column 0 and a key at row 7, column 7. What changes in the assets array?

Try it in the Builder →

2. Keyboard Events

Every keypress is a DOM event. Here's the whole vocabulary.

3. Mouse & Pointer

Clicks, hovers, drags — same patterns whether it's a button or a game tile.

4. Rules & Conditions

If/then is the most powerful idea in programming. We make it explicit.

5. Timers & Lifecycle

setInterval, requestAnimationFrame, useEffect — different APIs, same idea.

6. Meta-Prompts

Prompts that change the editor itself. A taste of meta-programming.

You've seen the map. Now go build.

The fastest way to lock in these ideas is to combine them. Open the builder and try chaining a key event, a timer, and a rule with a cooldown.

Open the Matrix