natea/demo-builder

Demo Builder Skill

Purpose

This skill automatically generates playable game prototypes from game concept documents. It:

• Parses concept documents to extract game mechanics, theme, genre
• Generates Three.js game code using the threejs-game skill
• Creates first playable level with scoring, objectives, characters
• Generates assets (textures, colors, basic models)
• Integrates music (Suno AI generation or 8-bit MIDI)
• Produces web-ready demo that runs in browser

Output: Fully functional game demo with HTML/JS/CSS that can be played immediately.

When to Use This Skill

Use this skill when you have:

• ✅ Game concept document (from brainstorming/design phases)
• ✅ Need to validate gameplay quickly with playable prototype
• ✅ Want to pitch game with interactive demo vs. static mockups
• ✅ Require rapid prototyping for playtesting
• ✅ Need proof-of-concept before full development investment

Prerequisites

Required Input

Game Concept Document (from brainstorming or design)

• Location: /docs/*-game-concepts-*.md or /docs/plans/*-design.md
• Must include: Title, description, genre, core mechanics, theme
• Example: fps-game-concepts-market-driven-2025-10-26.md

Dependencies

• threejs-game skill (for 3D game implementation)
• Three.js library (loaded via CDN in generated HTML)
• Optional: Suno API key for music generation (can use MIDI fallback)

Core Workflow

Phase 1: Concept Parsing

1. Load Game Concept

GameConcept = {
  title: string,
  description: string,
  genre: string[],  // ["FPS", "Extraction", "Co-op"]
  theme: string,    // "cyberpunk", "military", "horror", etc.
  core_mechanics: string[],
  target_persona: string,
  price_point: number | "F2P"
}

2. Extract Demo Requirements

DemoRequirements = {
  game_type: "FPS" | "third-person" | "top-down" | "side-scroller",
  camera_type: "first-person" | "third-person" | "fixed" | "isometric",
  movement_type: "WASD" | "mouse" | "touch" | "hybrid",
  primary_mechanic: "shooting" | "extraction" | "survival" | "puzzle",
  color_palette: extractColorPalette(theme),
  character_archetypes: extractCharacters(description),
  objectives: extractObjectives(description),
  music_style: extractMusicStyle(genre, theme)
}

Phase 2: Demo Architecture Design

3. Generate Demo Specifications

Based on genre/mechanics, create demo spec:

FPS Demo Template:

{
  level: {
    type: "arena" | "corridor" | "open-world-section",
    size: {x: 100, y: 50, z: 100},
    geometry: "modular" // Can be expanded
  },
  player: {
    type: "fps-controller",
    spawn: {x: 0, y: 2, z: 0},
    health: 100,
    weapons: ["basic_rifle"],
    movement_speed: 5,
    look_sensitivity: 0.002
  },
  enemies: [
    {type: "basic_enemy", count: 5, spawn_pattern: "random"},
    {type: "patrol_enemy", count: 3, patrol_routes: [[...]]}
  ],
  objectives: [
    {type: "eliminate_targets", target_count: 5, points: 100},
    {type: "survive_time", duration: 60, points: 50},
    {type: "collect_items", item_count: 3, points: 150}
  ],
  scoring: {
    enemy_kill: 20,
    item_collect: 50,
    time_bonus: 1  // per second survived
  },
  ui: {
    hud: ["health", "ammo", "score", "timer"],
    crosshair: true,
    minimap: false
  }
}

Extraction Shooter Demo Template:

{
  level: {
    type: "extraction-zone",
    zones: ["hot_zone", "neutral", "extract_point"],
    size: {x: 80, y: 30, z: 80}
  },
  player: {
    type: "tactical-controller",
    inventory_slots: 8,
    health: 100,
    stamina: 100
  },
  loot: [
    {type: "resource", count: 10, value: 10},
    {type: "rare_item", count: 3, value: 50}
  ],
  enemies: {
    type: "AI_guards",
    difficulty: "medium",
    count: 4
  },
  objectives: [
    {type: "extract_with_loot", min_value: 100, points: 200},
    {type: "extract_alive", points: 100}
  ],
  extraction_point: {x: 70, y: 1, z: 70},
  time_limit: 180  // 3 minutes
}

Phase 3: Asset Generation

4. Generate Color Palettes

function generateColorPalette(theme) {
  const palettes = {
    "cyberpunk": {
      primary: 0x00ffff,    // Cyan
      secondary: 0xff00ff,   // Magenta
      accent: 0xffff00,      // Yellow
      environment: 0x1a1a2e, // Dark blue-gray
      enemy: 0xff0080        // Pink
    },
    "military": {
      primary: 0x4a6741,     // Olive green
      secondary: 0x8b7355,   // Tan
      accent: 0xff6b35,      // Orange
      environment: 0x5a6650, // Gray-green
      enemy: 0xb71c1c        // Red
    },
    "horror": {
      primary: 0x1b1b1b,     // Almost black
      secondary: 0x8b0000,   // Dark red
      accent: 0xffffff,      // White
      environment: 0x2d2d2d, // Dark gray
      enemy: 0x4a0e0e        // Blood red
    },
    "space/sci-fi": {
      primary: 0x0a2e4a,     // Deep blue
      secondary: 0x2a9d8f,   // Teal
      accent: 0xe76f51,      // Orange-red
      environment: 0x000814, // Space black
      enemy: 0xf72585        // Bright pink
    }
  };

  return palettes[theme] || palettes["military"];
}

5. Generate Textures (Procedural)

function generateTexture(type, color, size = 512) {
  const canvas = document.createElement('canvas');
  canvas.width = size;
  canvas.height = size;
  const ctx = canvas.getContext('2d');

  if (type === "floor") {
    // Grid pattern
    ctx.fillStyle = `#${color.toString(16).padStart(6, '0')}`;
    ctx.fillRect(0, 0, size, size);
    ctx.strokeStyle = '#000000';
    ctx.lineWidth = 2;
    for (let i = 0; i < size; i += size / 8) {
      ctx.beginPath();
      ctx.moveTo(i, 0);
      ctx.lineTo(i, size);
      ctx.stroke();
      ctx.beginPath();
      ctx.moveTo(0, i);
      ctx.lineTo(size, i);
      ctx.stroke();
    }
  } else if (type === "wall") {
    // Brick/panel pattern
    ctx.fillStyle = `#${color.toString(16).padStart(6, '0')}`;
    ctx.fillRect(0, 0, size, size);
    // Add panel lines
    const lighterColor = Math.min(color + 0x202020, 0xffffff);
    ctx.strokeStyle = `#${lighterColor.toString(16).padStart(6, '0')}`;
    ctx.lineWidth = 3;
    for (let i = 0; i < size; i += size / 4) {
      ctx.strokeRect(i, 0, size / 4, size);
    }
  }

  return new THREE.CanvasTexture(canvas);
}

6. Generate Characters (Geometric)

function generateCharacter(type, color) {
  const group = new THREE.Group();

  if (type === "player") {
    // Simple capsule body
    const body = new THREE.Mesh(
      new THREE.CapsuleGeometry(0.5, 1.5, 4, 8),
      new THREE.MeshPhongMaterial({ color: color })
    );
    body.position.y = 1;
    group.add(body);

    // Weapon (for FPS)
    const weapon = new THREE.Mesh(
      new THREE.BoxGeometry(0.1, 0.1, 0.8),
      new THREE.MeshPhongMaterial({ color: 0x333333 })
    );
    weapon.position.set(0.3, 0.8, -0.5);
    group.add(weapon);

  } else if (type === "enemy") {
    // Hostile NPC
    const body = new THREE.Mesh(
      new THREE.BoxGeometry(0.8, 1.6, 0.6),
      new THREE.MeshPhongMaterial({ color: color })
    );
    body.position.y = 0.8;
    group.add(body);

    // Enemy marker (head)
    const head = new THREE.Mesh(
      new THREE.SphereGeometry(0.3, 8, 8),
      new THREE.MeshPhongMaterial({ color: 0xff0000, emissive: 0x330000 })
    );
    head.position.y = 2;
    group.add(head);
  }

  return group;
}

Phase 4: Music Generation

7. Generate Music (Suno AI or MIDI)

async function generateMusic(style, concept_name) {
  // Option 1: Suno API (if API key available)
  if (SUNO_API_KEY) {
    const prompt = generateMusicPrompt(style, concept_name);
    const musicUrl = await callSunoAPI(prompt);
    return musicUrl;
  }

  // Option 2: 8-bit MIDI fallback
  return generate8BitMIDI(style);
}

function generateMusicPrompt(style, concept_name) {
  const prompts = {
    "fps": `Epic action game music, intense electronic beats, military drums, adrenaline pumping, 140 BPM, game soundtrack, ${concept_name} theme`,
    "horror": `Dark atmospheric horror game music, eerie synths, unsettling ambience, tension building, 80 BPM, survival horror soundtrack`,
    "cyberpunk": `Synthwave cyberpunk game music, neon aesthetic, retro futuristic, energetic, 130 BPM, electronic game soundtrack`,
    "tactical": `Tactical stealth game music, suspenseful, orchestral strings, slow build tension, 90 BPM, espionage theme`,
    "roguelike": `Retro roguelike dungeon music, chiptune style, 8-bit adventure, upbeat tempo, 120 BPM, classic game feel`
  };

  return prompts[style] || prompts["fps"];
}

function generate8BitMIDI(style) {
  // Generate simple 8-bit style music pattern
  // Using Web Audio API for procedural chiptune
  const audioCtx = new (window.AudioContext || window.webkitAudioContext)();

  const patterns = {
    fps: {
      tempo: 140,
      notes: ["C4", "E4", "G4", "C5", "G4", "E4"],  // Energetic pattern
      rhythm: [0.25, 0.25, 0.5, 0.25, 0.25, 0.5]
    },
    ambient: {
      tempo: 80,
      notes: ["C3", "E3", "G3", "B3", "G3", "E3"],  // Slower, eerie
      rhythm: [1, 1, 0.5, 0.5, 1, 1]
    }
  };

  return createChiptuneLoop(audioCtx, patterns[style] || patterns.fps);
}

Phase 5: Game Code Generation

8. Generate Complete Game Files

Using threejs-game skill, generate:

index.html:

<!DOCTYPE html>
<html>
<head>
  <title>[Game Title] - Demo</title>
  <style>
    body { margin: 0; overflow: hidden; font-family: Arial, sans-serif; }
    canvas { display: block; }
    #hud {
      position: absolute;
      top: 20px;
      left: 20px;
      color: white;
      font-size: 20px;
      text-shadow: 2px 2px 4px #000;
      pointer-events: none;
      z-index: 100;
    }
    #crosshair {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 20px;
      height: 20px;
      border: 2px solid white;
      border-radius: 50%;
      pointer-events: none;
    }
    #instructions {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: rgba(0,0,0,0.8);
      color: white;
      padding: 40px;
      text-align: center;
      border-radius: 10px;
    }
    .hidden { display: none !important; }
  </style>
</head>
<body>
  <div id="hud">
    <div>Health: <span id="health">100</span></div>
    <div>Score: <span id="score">0</span></div>
    <div>Enemies: <span id="enemies">0</span></div>
    <div>Time: <span id="timer">0</span></div>
  </div>
  <div id="crosshair"></div>
  <div id="instructions">
    <h1>[Game Title]</h1>
    <p>[Objective description]</p>
    <p><strong>Controls:</strong></p>
    <p>WASD - Move | Mouse - Look | Left Click - Shoot</p>
    <p>ESC - Pause</p>
    <button onclick="startGame()" style="padding: 15px 30px; font-size: 18px; cursor: pointer;">
      START DEMO
    </button>
  </div>

  <script type="importmap">
  {
    "imports": {
      "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
      "three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/"
    }
  }
  </script>
  <script type="module" src="game.js"></script>
</body>
</html>

game.js (using threejs-game patterns):

import * as THREE from 'three';
import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js';

// Game state
const gameState = {
  running: false,
  health: 100,
  score: 0,
  enemies: [],
  startTime: 0,
  objectives: [/* parsed from concept */]
};

// Scene setup
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });

// FPS Controls
const controls = new PointerLockControls(camera, renderer.domElement);

// Input handling
const input = {
  forward: false,
  backward: false,
  left: false,
  right: false,
  shoot: false
};

// Initialize game
function init() {
  // Renderer setup
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.shadowMap.enabled = true;
  document.body.appendChild(renderer.domElement);

  // Lighting (themed)
  const ambient = new THREE.AmbientLight([color from theme], 0.4);
  scene.add(ambient);

  const directional = new THREE.DirectionalLight(0xffffff, 0.6);
  directional.position.set(10, 20, 10);
  directional.castShadow = true;
  scene.add(directional);

  // Build level
  buildLevel(scene, [demo spec]);

  // Spawn enemies
  spawnEnemies(scene, [demo spec enemies]);

  // Setup input listeners
  setupInputListeners();
}

// Main game loop
function animate(time) {
  requestAnimationFrame(animate);

  if (!gameState.running) return;

  const delta = clock.getDelta();

  // Update player movement
  updatePlayer(delta);

  // Update enemies (AI patrol, chase)
  updateEnemies(delta);

  // Check collisions
  checkCollisions();

  // Update HUD
  updateHUD();

  // Check win/lose conditions
  checkObjectives();

  renderer.render(scene, camera);
}

// [Additional game logic functions generated based on concept]

Phase 6: Demo Package Generation

9. Create Complete Demo Package

Generate folder structure:

demos/
  [game-name]-demo/
    index.html          (Main entry point)
    game.js             (Game logic using Three.js)
    assets/
      music.mp3         (Generated music)
      README.md         (Controls, objectives)
    package.json        (For npm serve if needed)

10. Add Instructions README

# [Game Name] - Playable Demo

Auto-generated demo from game concept document.

## How to Play

1. Open `index.html` in a modern web browser
2. Click "START DEMO" and allow pointer lock
3. Use WASD to move, mouse to look
4. [Game-specific controls]
5. Complete objectives to win!

## Objectives

[Parsed from concept document]

## Controls

- **W/A/S/D**: Movement
- **Mouse**: Look around
- **Left Click**: [Primary action - shoot/interact]
- **ESC**: Pause/Menu

## About

This is an auto-generated prototype demonstrating core mechanics of [Game Name].

**Concept**: [Description from doc]
**Genre**: [Genre tags]
**Target**: [Persona summary]

Generated by demo-builder skill on [date]

Implementation Protocol

Step 1: Parse Concept Document

TodoWrite([
  "Load game concept document from /docs",
  "Parse game title, description, genre, theme",
  "Extract core mechanics and objectives",
  "Identify camera type (FPS, third-person, etc.)",
  "Generate color palette from theme",
  "Extract character archetypes",
  "Determine music style",
  "Create demo specification document"
])

Step 2: Generate Demo Architecture

// Select appropriate demo template based on genre
if (genre.includes("FPS")) {
  demoTemplate = FPS_DEMO_TEMPLATE;
} else if (genre.includes("extraction")) {
  demoTemplate = EXTRACTION_DEMO_TEMPLATE;
} else if (genre.includes("roguelike")) {
  demoTemplate = ROGUELIKE_DEMO_TEMPLATE;
}

// Customize template with concept-specific details
demoSpec = customizeTemplate(demoTemplate, conceptData);

Step 3: Generate Assets (Parallel)

[Single Message - Parallel Asset Generation]:
  generateColorPalette(theme)
  generateTextures(palette)
  generateCharacterModels(archetypes, palette)
  generateMusicPrompt(genre, theme)

Step 4: Generate Code (Using threejs-game skill)

Leverage threejs-game skill to generate:

• Scene setup with themed lighting
• Player controller (FPS or third-person)
• Enemy AI (patrol, chase behaviors)
• Scoring system
• Collision detection
• Win/lose conditions
• HUD elements

Step 5: Package and Test

[Single Message - Package Creation]:
  Write("demos/[game-name]-demo/index.html", htmlContent)
  Write("demos/[game-name]-demo/game.js", gameJsContent)
  Write("demos/[game-name]-demo/assets/README.md", instructions)
  Bash("npx serve demos/[game-name]-demo -p 3000")  // Test locally

Step 6: Generate Music (Async)

If Suno API available:

// Generate music in background while demo playable
musicPrompt = generateMusicPrompt(genre, theme, concept_name);
// Call Suno API (async, doesn't block demo generation)
// Add music file to assets/ when ready

Otherwise:

// Use Web Audio API for procedural 8-bit music
generate8BitChiptune(style, tempo);
// Integrated directly in game.js

Output Structure

Minimal Demo (< 5 minutes to generate)

• 1 playable level (~100x100 units)
• Player character with basic movement
• 3-5 enemies with simple AI
• 1-2 objectives (kill targets, survive time, collect items)
• Basic scoring system
• Themed colors (no custom textures)
• Simple geometric shapes for characters/environment
• Procedural 8-bit music

Full Demo (< 15 minutes to generate)

Everything in Minimal +

• Procedural textures (floors, walls, objects)
• More varied enemies (5-10 with different behaviors)
• Multiple objectives (3-4 different types)
• Power-ups/collectibles
• Win/lose screens
• Suno-generated music (if API available)
• Particle effects (muzzle flash, explosions, impacts)

Best Practices

DO:

✅ Start with simplest playable version (iterate complexity) ✅ Use geometric primitives for speed (cubes, spheres, capsules) ✅ Generate procedural textures vs. loading image assets ✅ Implement core mechanic first (shooting, extraction, etc.) ✅ Test in browser immediately after generation ✅ Keep demo scope small (1 level, 5-10 minutes playtime) ✅ Add clear objectives and win conditions

DON'T:

❌ Try to implement every feature from concept doc ❌ Load heavy 3D models (use geometric shapes) ❌ Create open-world demos (scope to arena/corridor) ❌ Implement complex AI (use simple patrol/chase) ❌ Wait for music generation to complete (async or skip) ❌ Require build tools (pure HTML/JS/CDN)

Integration with Other Skills

Required:

• threejs-game: Core 3D game implementation

Optional:

• brainstorming: Provides concept docs as input
• market-analyst: Can prioritize which concepts to demo first
• monetization-analyzer: Demo top 3 monetizable concepts

Typical Workflow:

brainstorming → game concepts document
           ↓
market-analyst → identify top concepts
           ↓
monetization-analyzer → rank by revenue potential
           ↓
demo-builder → generate playable demos of top 3
           ↓
playtesting → validate mechanics
           ↓
product-roadmap → plan full development

Example: FPS Demo from Concept

Input: Sentinel Protocol concept (tactical 5v5 extraction shooter)

Generated Demo:

• Level: 80x80 unit tactical facility with rooms and corridors
• Player: FPS controller with rifle model
• Enemies: 5 AI guards with patrol routes
• Objective: Extract data (reach marked zone) while avoiding/eliminating guards
• Scoring: +50 per guard eliminated, +200 for successful extraction, -25 per hit taken
• Theme: Near-future corporate (cyan/gray color palette)
• Music: Synthwave tactical espionage (Suno-generated)
• Win Condition: Reach extraction zone with data
• Time Limit: 3 minutes

Generation Time: ~8 minutes Playable: Yes, immediately in browser File Size: ~100KB (HTML/JS), ~3MB (music)

Summary

The Demo Builder Skill transforms game concept documents into playable prototypes by:

1. ✅ Parsing concept docs to extract mechanics, theme, objectives
2. ✅ Generating demo architecture using genre-specific templates
3. ✅ Creating assets (procedural textures, colors, geometric models)
4. ✅ Leveraging threejs-game skill for 3D implementation
5. ✅ Integrating music (Suno AI or procedural 8-bit)
6. ✅ Packaging web-ready demo (HTML/JS, no build required)

Output enables:

• Rapid validation of game concepts
• Interactive pitches for investors/publishers
• Playtesting core mechanics pre-production
• Demo reels for marketing
• Proof-of-concept for team alignment