W × H px
🖼 Reference Background Main Game only — never included in generation
🎰 Game Theme

This becomes the game logo text in the generated artwork. It will be applied consistently to both Main Game and Bonus Game screens.

This is applied globally. The AI uses it to determine the art style, colors, materials, and atmosphere across every area of both screens.

🔑 AI Provider API Keys

Enter keys for the providers you want to use. All keys are stored in memory for this session only and never sent anywhere except the respective official API endpoints.

🤖 AI Model
Choose which AI model to use for all generation in this session. Set the matching API key in Theme & API first.
⚡ Generate All Screens — 3 Variations Each
Generates 3 variations of Main Game, Bonus Game and Extras simultaneously — compare and download your favourites.
Variations per screen:
— or generate individually per screen —
🎮 Main Game
V1
🖼Not generated
V2
🖼Not generated
V3
🖼Not generated
🌟 Bonus Game
V1
🖼Not generated
V2
🖼Not generated
V3
🖼Not generated
🏆 Extras
V1
🖼Not generated
V2
🖼Not generated
V3
🖼Not generated

📋 Generation Queue

No generation jobs yet.

📦
Production Export
Convert your layouts into files your developers and designers can use directly in the HTML5 game pipeline. Generate first, then export.
Export layout:
🌐
HTML5 Layout Scaffold
Ready-to-use HTML file for developers
Exports a complete index.html with every block as an absolutely-positioned <div> at the exact pixel coordinates from your layout. CSS classes are named after each block. The generated artwork is embedded as a reference background so developers know exactly what goes where.
  • ✅ Exact left / top / width / height per zone
  • ✅ Named CSS classes per block (e.g. .zone-playfield)
  • ✅ Generated image as reference background layer
  • ✅ Placeholder <img> tags ready to swap with real assets
  • ✅ Includes a game.css file with all positioning
🔷
SVG Zone Map
Open in Figma, Illustrator or Sketch
Exports the layout as an SVG file where every block is a named <rect> with exact dimensions and a label. Open it in Figma, Adobe Illustrator, or Sketch as a starting point — each zone is already the correct size and position.
  • ✅ Correct canvas dimensions as SVG viewport
  • ✅ Every zone as a named, coloured <rect>
  • ✅ Block labels as SVG <text> elements
  • ✅ Import into Figma via File → Import
  • ✅ Use as artboard template in Illustrator / Sketch
✂️
Slice Generated Image into Zones
Requires a generated image — crops into individual PNGs
Takes the generated artwork and crops it into individual PNG files — one per zone. Each file is named after the block label (e.g. main_playfield.png, main_logo.png). These act as the closest equivalent to Photoshop layers from a flat AI image and can be used directly as placeholder sprites in the HTML5 game.
  • ✅ One PNG per zone, named after the block
  • ✅ Pixel-exact crop from the generated image
  • ✅ Use as placeholder sprites in your HTML5 game
  • ✅ Also exports a zones.json manifest with all coordinates
  • ⚠️ Requires a generated image for this layout