Show Notes
In this video, Parker uses Gemini 2.5 Pro and Google Vertex AI Studio to bootstrap and ship a Chrome Dinosaur game, walking through prompt engineering, project scaffolding, and incremental implementation in a practical, repeatable workflow.
Tools and setup
- Gemini 2.5 Pro for code-focused generation and ideation
- Google Vertex AI Studio (prompt engineering and templates)
- Prompt Management > Free Form prompts
- System vs. user prompts for clean separation
- Prompt templates with input variables (e.g.,
{productName})
- AI Studio as an initial prompt playground, then moving to Vertex for deeper prompts
- Supabase (backend stack) and a preferred tech stack you’ll use to anchor prompts
- Next.js (App Router) for scaffolding and routing
- Dino project target: a Chrome offline-dinosaur game (Dino Hop)
- Assets: sprite sheets (e.g., Dino sprite.png) and sounds placed under public/
- Local workflow notes: test prompts, iterate prompts, deploy as a web app, and debug permissions if needed
Prompt engineering workflow
- Start in Vertex AI Studio with a free-form prompt to bootstrap your idea
- Create a stack-specific prompt (e.g., iOS SwiftUI or a JS/React stack) and then refine it
- Use a two-part prompt approach:
- System prompt: defines role, constraints, and expectations
- User prompt (the actual task): includes specifics like inputs, outputs, and success criteria
- Leverage prompt templates and variables (e.g.,
{desiredProduct},{dependencies}) to turn prompts into one-click deployable apps - Example flow Parker describes:
- Build a “reverse engineering SwiftUI app” guide prompt
- Save as a named prompt (e.g., Reverse engineering SwiftUI app)
- Generate and autosave within Vertex, keeping inputs visible for users
- Atomic prompts: keep each prompt focused and composable so you can reuse or swap parts without breaking the whole chain
Code/prompt snippet (illustrative)
# System prompt (example)
You are an expert in reverse engineering technology, specializing in readable Swift code. Always use the latest features.
# User prompt (template)
Task: Reverse engineer and document a SwiftUI app named {productName}.
Output: A step-by-step guide with code samples, file structure, and rationale.
Building the Dino game (implementation details)
- Scaffold and routing
- Use Next.js App Router; create a Not Found page as a starting scaffold
- Prepare a client component for the game (e.g., a DinoGame.tsx in components)
- Core game components
- Canvas-based rendering with 2D context
- Sprites: replace simple shapes with a Dino sprite sheet (public/images/dino_sprite.png)
- Obstacles: cacti and ground layer; add clouds for parallax
- Score display and game state (playing, game over)
- Jump sound and basic audio hook (optional)
- Game loop and rendering
- Use requestAnimationFrame for the loop
- Typical loop structure: clear canvas, update game state, render
- Basic physics: gravity, jump impulse, collision detection
- Asset loading and integration
- Load the Dino sprite sheet and frame dimensions (e.g., width/height per frame)
- Hook up a simple animation timer to cycle frames
- Add sounds/assets into public/ and trigger on events (jump, score)
- Example structural approach
- Components/DinoGame.tsx (client component)
- Public/assets/dino_sprite.png, public/assets/jump.wav
- Not Found page updated to route to the Dino game scaffold
- Practical note
- Expect iterative prompts and code tweaks; you’ll likely switch between canvas logic and sprite animation as you test
Code sketch (conceptual)
"use client";
import { useEffect, useRef } from "react";
export default function DinoGame() {
const canvasRef = useRef<HTMLCanvasElement | null>(null);
useEffect(() => {
const canvas = canvasRef.current!;
const ctx = canvas.getContext("2d")!;
// load sprite, set up game objects, and start loop
let last = performance.now();
function loop(now: number) {
const dt = (now - last) / 1000;
last = now;
// update state
// draw frame
requestAnimationFrame(loop);
}
requestAnimationFrame(loop);
}, []);
return <canvas ref={canvasRef} width={800} height={200} />;
}
Architecture and design decisions
- Client vs server boundaries
- The game logic runs on the client; Server Components are not a fit for real-time canvas games
- Use a Client Component for the Dino game to leverage the DOM/canvas APIs
- Atomic, readable code prompts
- Break the task into clear, independent steps (e.g., “set up canvas,” “load sprite,” “draw ground,” “spawn obstacles”)
- Keep file names and responsibilities explicit (e.g., DinoGame.tsx, DinoSprite.ts, useGameState.ts)
- Prompt-driven scaffolding
- Start with a high-level prompt to outline required files and structure
- Then generate concrete scaffolds and iterate with targeted refinements
- Asset strategy
- Sprite sheets are recommended for precise animation control
- Use public/assets for images and sounds to keep the repo self-contained
- Iteration mindset
- Start with a minimal viable game (simple rectangle if needed), then swap to full sprites and sounds
- Expect prompts to produce multiple options; test and pick the best approach
Takeaways and next steps
- This is a repeatable framework: prompt-engineer first, scaffold second, implement third
- Next video plan: build a Whoop-like widget that shows a score in a React component and opens up possibilities to reuse with Apple Watch or other devices
- Behind-the-scenes and broader context
- Parker X daily covers AI services business-building
- Vibe with AI community is a place to learn across coding, marketing, and AI
- Audience engagement
- Parker invites comments (e.g., "duck") to share the underlying prompt used in the video
Quick-start guide (repro in a few steps)
- Open Vertex AI Studio and go to Prompt Management > Free Form
- Create a stack-aligned prompt (e.g., iOS/SwiftUI or JS/React) and separate system vs user prompts
- Generate and save the prompt as a named template (e.g., Reverse engineering SwiftUI app)
- Scaffold a Next.js App Router project for a simple web app
- Create a DinoGame client component with a canvas
- Add assets (dino_sprite.png, jump.wav) to public/ and wire them into the game
- Implement a 2D game loop with requestAnimationFrame, basic physics, and collision
- Test locally, iterate prompts/assets, and prepare for deployment
Notable tips and pitfalls
- Keep prompts atomic and modular to maximize reusability
- Always separate system and task prompts to avoid leaking instructions into user inputs
- Watch token utilization; extremely large prompt trees can explode token counts
- When using repo-wide prompts or “text” tools, verify environment aliasing and avoid breaking the workflow
- If you encounter not-found or initialization errors, double-check client/server boundaries and use client components where interactivity is needed
Links
- Vertex AI Studio (Google Cloud)
- Gemini 2.5 Pro (AI-assisted coding)
- Prompt templates and free-form prompts (Vertex AI Studio)
- Google Vertex AI (general tooling)
- AI Studio (prompt playground)
- Next.js App Router (framework/mobility for the demo)
- Supabase (backend stack)
- Chrome Dino Game (the inspiration)
- Parker Rex channels: @parkerrex (main) and Parker X Daily; Vibe with AI community
If you want the underlying prompt used in this video, drop a comment with the word “duck” and Parker will share the prompt details.