Tic-Tac-Toe — From Prompt to Product

The lazy prompt. One vague sentence. It runs — two people share one mouse, X always starts. No score, no computer, no dark mode, no names. About 10% of a product.

Tic Tac Toe

X's turn

Standalone HTML file · no internet required · built as a teaching demo for AI-Dev-Intro

The prompts behind each game

Toggle Basic / Perfect above to see what each one built.

What built the Basic game Lazy

make me a tic-tac-toe game in a single HTML file

What built the Perfect game Spec-first

ROLE:  You are an expert front-end developer.

GOAL:  Build a tic-tac-toe game for two friends OR one player vs.
       the computer, as a single standalone HTML file (no libraries,
       works offline by double-clicking).

MUST-HAVE FEATURES:
  - Two modes: 2-player hotseat, and vs-computer
  - Difficulty: Easy (random), Medium, Hard (never loses)
  - Players enter their names; choose to play X or O
  - Running scoreboard (wins / draws) + a Reset button
  - Light / dark mode that follows the system setting, with a toggle

RULES / LOGIC:
  - Detect all wins and draws; highlight the winning line
  - Prevent clicking a taken square or playing after the game ends
  - Short delay before the computer moves so it feels natural
  - Alternate who goes first each round

LOOK & FEEL:
  - Clean and modern; works well on a phone (responsive)

"DONE" MEANS (I'll test these):
  - I can beat Easy, struggle on Medium, and never beat Hard
  - The score survives many rounds; Reset zeroes it
  - It looks right in both light and dark mode

BEFORE you write any code, ask me anything unclear. Then build it.

Or get there step by step Iterate

Start from the basic game, then send these one at a time:

1.  Add a scoreboard (wins and draws) with a Reset button.
2.  Add a single-player mode against the computer.
3.  Give the computer Easy, Medium, and Hard levels; make Hard unbeatable.
4.  Add a short delay before the computer moves so it feels natural.
5.  Let players type their names and pick X or O.
6.  Add light / dark mode that follows the system setting, with a toggle.
7.  Highlight the winning line and clearly announce the winner.
8.  Make it look good on a phone.
9.  Prevent illegal moves and any play after the game ends.
10. Add sound with a mute button, and an Undo button.

One change per message = easy to check, easy to fix.

What the spec added that the lazy prompt missed

Play vs. computer
Easy / Medium / Hard
Unbeatable "Hard"
Delay before AI moves
Player names
Choose X or O
Running scoreboard
Reset scores
Light / dark mode
Follows system theme
Winning-line highlight
Winner announcement
Mobile / responsive
Undo
Sound + mute
Remembers on refresh
Alternating first move
Keyboard + a11y labels