Puzzle Pals Project Report
1. The Concept
Puzzle Pals is a lightweight, web-based drag-and-drop jigsaw puzzle for kids, designed to run on any phone straight from a single HTML file. I chose a kids' puzzle game for this one-day sprint because, unlike a static page, it forces real state management (dragging, snapping, locking pieces, win detection) and a game feel — making it the perfect baseline test for a multi-AI pipeline: how well one AI can plan a project and hand it off to another AI to write the actual code.
2. The Stack
The Stack: HTML5, Vanilla CSS, and JavaScript — everything in one index.html, plus the Canvas API (jigsaw pieces), Pointer Events (drag), WebAudio (sound effects), and localStorage (progress). No framework, no build step.
The AI Assist: Cursor handled the initial product planning and generated a technical handoff document — drag-drop-puzzle-plan.md (screen flow, rules, and asset list). OpenAI Codex was then used for the coding phase, taking that Puzzle Pals document and translating it into functional source code.
3. The 1 Day Sprint:
Morning (Hours 1–3): We kicked off by brainstorming simple games that require strict state management. We settled on a jigsaw puzzle. We spent the next two hours prompting Cursor to map out the screen flow (Title → Select → Play → Clear), the kid-friendly rules (no timers, no fail state, generous snapping), and the edge cases (drops on empty space, scaled-stage coordinates, win detection). Cursor produced a strict Puzzle Pals document for the developer.
Afternoon (Hours 4–6): The coding phase. We fed the handoff doc to Codex. It generated the stage scaling and layer navigation quickly, but the actual puzzle logic was messy. Testing revealed two major flaws: the jigsaw piece edges didn't interlock (neighbouring knobs didn't share the same curve), and the image assets the plan assumed simply weren't there — every button and picture rendered as a broken-image icon. We spent these hours debugging the canvas geometry and drag-snapping on the scaled stage with Codex.
The Finish Line (Hours 7–8): With time running out, we pivoted hard. Instead of waiting on missing art, we had Codex draw the top-bar icons in pure CSS and procedurally generate the level pictures on a canvas (colour landscapes), so the game looked complete without the assets. We spent the last hour adding the 25-level select map with lock/unlock progress, running QA, and pushing the repository to GitHub.
4. The Roadblocks
Roadblocks: The biggest roadblock was the "lost in translation" effect between the two AIs. Cursor planned a comprehensive, image-asset-driven UI (every button, board, and piece as a .png), but during coding those assets didn't exist — so Codex faithfully wired up paths to files that weren't there, leaving a screen full of broken images. The second roadblock was the jigsaw math: Codex's first pass drew pieces whose tabs and blanks didn't match their neighbours, so nothing fit together. Because of the strict time limit, we had to pivot away from the asset-heavy plan and instead generate the UI and pictures in code (CSS icons + canvas scenery) to keep the game playable and presentable.
5. Key Takeaways
What was the part that worked the best? The structural planning phase. Cursor created a detailed architectural outline — screen layers, the drag/snap/win loop, and an asset checklist — in minutes, which gave the coding phase a clear, unambiguous target.
What was the part that worked the worst? The multi-AI handoff around assets and visual polish. The plan assumed art that wasn't delivered, and Codex couldn't infer that gap on its own — it needed heavy manual prompting to switch strategies (CSS-drawn icons, procedurally generated pictures) before the game stopped looking broken.
My final thought: If I had one more day, I would swap in real illustrated artwork for all 25 levels, add background music and richer sound, and polish the title screen. If I could redo this project, I would lock down the assets before the coding handoff (or have the planner explicitly mark "generate this in code" vs. "needs art"), so critical requirements don't get dropped between the planning AI and the coding AI.