# G — Stitch UI Workflow for Game Development > **Category:** Guide · **Engine:** Engine-Agnostic · **Related:** [G5 UI Framework (MonoGame)](../../monogame-arch/guides/G5_ui_framework.md) · [P5 Art Pipeline](../project-management/P5_art_pipeline.md) · [C1 Genre Reference](C1_genre_reference.md) > How to use Google Stitch — a free AI-native design canvas — to prototype game UI before implementation. Covers prompt engineering for game interfaces, export pipelines, and translation to MonoGame and Godot UI systems. --- ## Table of Contents 1. [What Is Google Stitch?](#1-what-is-google-stitch) 2. [March 2026 Update — The AI-Native Canvas](#2-march-2026-update--the-ai-native-canvas) 3. [Why Use Stitch for Game UI?](#3-why-use-stitch-for-game-ui) 4. [Game UI Prompt Engineering](#4-game-ui-prompt-engineering) 5. [Prototyping Core Game Screens](#5-prototyping-core-game-screens) 6. [Prototyping Game Flows](#6-prototyping-game-flows) 7. [Voice Canvas for Rapid Iteration](#7-voice-canvas-for-rapid-iteration) 8. [Vibe Design for Game Aesthetics](#8-vibe-design-for-game-aesthetics) 9. [DESIGN.md for Game Style Systems](#9-designmd-for-game-style-systems) 10. [Export Pipeline — Stitch to Game Engine](#10-export-pipeline--stitch-to-game-engine) 11. [Integration with MonoGame](#11-integration-with-monogame) 12. [Integration with Godot](#12-integration-with-godot) 13. [Advanced Workflows](#13-advanced-workflows) 14. [Limitations & What Stitch Is Not](#14-limitations--what-stitch-is-not) 15. [Best Practices](#15-best-practices) 16. [Quick Reference — Prompt Templates](#16-quick-reference--prompt-templates) --- ## 1. What Is Google Stitch? [Google Stitch](https://stitch.withgoogle.com/) is an AI-powered UI design tool built by Google Labs. You describe an interface in natural language — via text prompt, voice, image upload, or sketch — and Stitch generates high-fidelity user interface designs complete with clean HTML and CSS code. **Key facts:** - **Free** — No subscription, no credits, no waitlist. Sign in with a Google account. - **Browser-based** — Runs entirely at [stitch.withgoogle.com](https://stitch.withgoogle.com/). No downloads. - **Powered by Gemini** — Choose between Gemini 2.5 Flash (fast), Gemini 2.5 Pro (high fidelity), or Gemini 3 (best contextual understanding). - **Outputs real code** — Every generated design includes exportable HTML/CSS. - **Interactive prototypes** — Connect screens into clickable flows and preview them. - **Export integrations** — Send designs to Figma, AI Studio, Antigravity, or export raw code. - **MCP server & SDK** — Stitch has its own [MCP server](https://stitch.withgoogle.com/docs/mcp/setup/) and [SDK](https://github.com/google-labs-code/stitch-sdk) for tool integration. ### Why Game Developers Should Care Game UI is one of the most time-consuming parts of development that isn't core gameplay. You need: - Main menus, settings screens, pause menus - HUDs (health, mana, score, minimap, hotbar) - Inventory systems, shops, crafting interfaces - Dialogue boxes, quest logs, journals - Game over screens, leaderboards, achievement popups Traditionally you either wireframe by hand, mock up in Figma, or just code blindly and iterate. Stitch collapses the mockup step to seconds: describe what you want, get a visual design, extract the layout information, and implement it in your engine. --- ## 2. March 2026 Update — The AI-Native Canvas The March 19, 2026 update transformed Stitch from a text-to-UI generator into a full AI-native design platform. Key additions: ### Infinite Canvas The workspace is now an infinite canvas where ideas can grow from sketches to working prototypes without switching tools. You can place multiple screen designs, reference images, text notes, and code snippets all on the same canvas. This is perfect for game UI work where you're designing 8-12 connected screens simultaneously. ### Voice Canvas Speak directly to your canvas using voice interaction powered by Gemini Live. The AI agent: - Listens to design descriptions and generates UI in real-time - Asks clarifying questions ("Should the inventory grid be scrollable?") - Gives real-time design critiques ("The health bar might be hard to read against dark backgrounds") - Makes live updates as you talk ("Now make it wider... add a tooltip... change the font to something more medieval") ### Vibe Design Instead of specifying exact components, describe the *feeling* you want: - "A dark, gritty RPG inventory that feels like Diablo" - "A cozy, warm shop interface for a farming sim" - "A retro arcade scoreboard with CRT scan lines" Stitch generates multiple design directions matching that vibe, letting you explore broadly before committing to a specific look. ### Direct Edits Manually tweak text, swap images, and adjust details right inside Stitch — no more regenerating the entire design for a typo fix. ### Design Agent & Agent Manager A Design Agent tracks your entire project history and reasons through different versions. The Agent Manager lets you explore multiple design directions simultaneously without losing any branch — perfect for A/B testing different HUD layouts. ### DESIGN.md An agent-friendly markdown file for exporting/importing design rules. Extract a design system from any URL, or define your own and apply it across projects. This is game-changing for maintaining visual consistency across all your game screens. --- ## 3. Why Use Stitch for Game UI? ### The Problem Game UI iteration is slow. The traditional cycle: 1. Sketch layout on paper or whiteboard 2. Mock up in Figma/Photoshop (hours) 3. Implement in engine (hours) 4. Playtest → realize the layout doesn't work 5. Go back to step 1 ### The Stitch Shortcut With Stitch, steps 1-2 collapse into seconds: 1. Describe your UI in a prompt (30 seconds) 2. Get multiple design variants instantly 3. Iterate with voice or text refinements (minutes) 4. Extract layout metrics from the generated HTML/CSS 5. Implement in engine with exact specifications 6. Playtest → refine in Stitch → re-implement ### What Stitch Does Well for Games | Strength | Game UI Application | |---|---| | **Layout composition** | Grid-based inventories, panel arrangements, HUD element positioning | | **Color palette generation** | Consistent UI color schemes per game aesthetic | | **Typography hierarchy** | Title screens, dialogue boxes, stat displays | | **Component repetition** | Item slots, skill trees, achievement grids | | **Responsive design** | Testing UI at different resolutions (mobile vs desktop) | | **Multi-screen flows** | Menu → Settings → Gameplay → Pause → Game Over | | **Visual consistency** | Applying a design system across 10+ screens | ### What Stitch Does NOT Do - Generate actual game engine UI code (no GDScript Control nodes, no MonoGame Gum layouts) - Render at pixel-art resolutions (it generates web-scale UI) - Handle real-time gameplay interactions (hover states, drag & drop, animation) - Replace your game's rendering pipeline - Generate sprite-based UI art (pixel art buttons, 9-slice panels) **Stitch is a design/prototyping tool, not a game engine UI builder.** You use it to figure out *what* your UI looks like, then you implement *how* it works in your engine. --- ## 4. Game UI Prompt Engineering The quality of Stitch output depends entirely on your prompt. Game UI prompts need specific elements that web/app prompts don't. ### Anatomy of a Good Game UI Prompt ``` [Art Style] + [Screen Type] + [Layout Details] + [Color/Theme] + [Specific Elements] ``` ### Key Prompt Elements for Game UI **1. Art style first** — This is the most impactful part: - "pixel art style" / "16-bit retro" - "dark fantasy" / "gothic" - "clean minimalist" / "flat design" - "hand-drawn sketch" / "watercolor" - "sci-fi holographic" / "neon cyberpunk" - "cozy cartoon" / "Studio Ghibli inspired" **2. Screen purpose** — Be specific about what the screen does: - "inventory management screen" not just "inventory" - "in-game HUD overlay" not "HUD" - "main menu with play, settings, credits, and quit buttons" **3. Layout specifications** — Numbers help: - "6x4 grid of item slots" - "health bar in top-left, minimap in top-right" - "three-column layout: stats | equipment | inventory" - "bottom-anchored hotbar with 8 slots" **4. UI components** — Name exact elements: - "tooltip popup showing item name, description, stats, and rarity" - "tab navigation: Weapons | Armor | Consumables | Quest Items" - "scrollable quest log with checkboxes" **5. Theme/mood** — Guide the visual treatment: - "dark background with gold accents" - "parchment texture behind text" - "glowing borders on selected items" - "semi-transparent overlay that doesn't obscure gameplay" ### Example Prompts by Screen Type #### Main Menu ``` Dark fantasy main menu screen for a 2D action RPG. Centered logo placeholder at top. Four menu buttons stacked vertically: "New Game", "Continue", "Settings", "Quit". Subtle particle effects suggested. Background is a moody castle silhouette. Buttons have ornate gold borders with hover glow effect. Font style: medieval serif. ``` #### In-Game HUD ``` Minimal in-game HUD overlay for a 2D platformer. Top-left: heart-based health (5 hearts). Top-right: coin counter with icon. Bottom-center: hotbar with 4 ability slots (1-2-3-4 keybinds shown). Top-center: level name in small text. All elements semi-transparent. Clean pixel art style, light on dark. ``` #### Inventory Screen ``` Pixel art RPG inventory screen with a 6x4 grid of item slots. Left panel: character paper doll with equipment slots (head, chest, legs, weapon, shield, accessory). Right panel: item grid with scroll. Bottom: item tooltip showing name, icon, description, stats comparison (green for better, red for worse), and "Equip" / "Drop" buttons. Color scheme: dark brown parchment background, gold text, warm amber accents. ``` #### Settings Screen ``` Game settings menu with tabbed navigation: Video | Audio | Controls | Gameplay. Video tab shown: resolution dropdown, fullscreen toggle, VSync toggle, brightness slider with preview bar, particle quality (Low/Medium/High). Bottom row: "Apply", "Reset to Default", "Back" buttons. Clean UI, dark theme with blue accent color. ``` #### Dialogue Box ``` RPG dialogue box at bottom of screen, taking up bottom 30% of viewport. Left side: character portrait (square, 128x128 placeholder). Right side: character name in header, dialogue text area below. Three response options shown as selectable buttons. Style: semi-transparent dark panel with rounded corners, white text, name in golden color. Include a "continue" indicator (animated triangle) in bottom-right corner. ``` #### Shop Interface ``` Fantasy shop interface for a 2D RPG. Two-panel layout: left panel shows shop inventory (scrollable grid, 5x4), right panel shows player inventory (same grid). Center column: selected item preview with name, icon, description, price, and "Buy"/"Sell" buttons. Top: shop name banner ("Ye Olde Smithy") with shopkeeper portrait. Bottom: player gold counter. Style: wooden panel background, medieval parchment texture, warm lighting. ``` #### Crafting Interface ``` Crafting screen for a survival game. Center: 3x3 crafting grid with drag-and-drop slots. Right of grid: result slot with arrow. Below: recipe book panel showing known recipes as a scrollable list with icons and names. Left sidebar: ingredient inventory (filterable by category). Top: search bar for recipes. Style: rustic, dark wood texture, copper/bronze accents, handwritten-style font for recipe names. ``` ### Prompt Anti-Patterns **Too vague:** ``` ❌ "Make me a game UI" ❌ "RPG menu" ❌ "HUD for my game" ``` **Too prescriptive about implementation:** ``` ❌ "Create a MonoGame Gum layout with GraphicalUiElement containers" ❌ "Build a Godot Control node tree with VBoxContainer" ``` Stitch generates web UI — describe what it looks like, not how it's coded. **Mixing concerns:** ``` ❌ "Inventory screen with drag-and-drop functionality and real-time stat calculation when hovering items with socket bonuses applied" ``` Focus on the visual layout, not the interaction logic. --- ## 5. Prototyping Core Game Screens ### Screen Categories Every game needs some subset of these screens. Use Stitch to prototype them before writing a line of engine code. ### HUD (Heads-Up Display) The HUD is the most visible UI in your game — it's on screen during gameplay. Critical design considerations: - **Minimize screen coverage** — Every pixel of HUD is a pixel not showing gameplay - **Corners and edges** — Anchor elements to screen edges so they don't float over the action - **Information hierarchy** — Health/survival info must be instantly readable; secondary info (score, ammo count) can be smaller - **Transparency** — Semi-transparent backgrounds prevent the HUD from feeling like a wall **Prompt template:** ``` [Game genre] in-game HUD overlay. [Position: element1], [Position: element2], [Position: element3]. [Style description]. All elements [transparency]. Designed for [resolution] base resolution. ``` **Example prompts by genre:** ``` # Platformer HUD Top-left: 3 red hearts for health. Top-right: gold coin icon with "x 047" counter. Top-center: "LEVEL 2-3" text. Bottom-center: timer "02:45". Pixel art style, black outlines, vibrant colors on transparent background. # Roguelike HUD Top-left: health bar (red) and mana bar (blue) stacked, with numeric values. Top-right: minimap (square, showing room layout). Bottom: hotbar with 6 ability slots showing cooldown overlays. Left edge: vertical stack of buff/debuff icons. Dark UI, green terminal aesthetic. # Tower Defense HUD Top bar: wave counter ("Wave 3/20"), enemy counter, player health/lives. Right sidebar: tower selection panel (scrollable, 3 columns). Bottom: selected tower info panel (stats, upgrade button, sell button). Top-right: gold counter with income rate. Clean, readable, bright on dark. ``` ### Inventory Systems Inventory UI is the most complex screen in most games. Key design decisions to prototype: - **Grid vs list** — Grid is visual but wastes space; list is compact but less visual - **Paper doll** — Equipment slots arranged on a character silhouette - **Tooltip design** — What info appears on hover? Stats, description, lore, comparison? - **Category filtering** — Tabs, dropdown, or sidebar filter? - **Sort controls** — By name, value, rarity, type, weight? **Prompt template:** ``` [Style] inventory screen. [Layout type] with [grid dimensions]. [Equipment section description]. [Item detail/tooltip description]. [Category system]. [Color scheme]. Include [specific UI elements]. ``` ### Menu Screens Main menu, pause menu, game over — these are the bookends of your game experience. **Main menu considerations:** - Logo/title placement and sizing - Button layout (vertical stack, horizontal, radial) - Background art or animated scene - Version number, social links, legal text placement **Pause menu considerations:** - Must overlay gameplay (semi-transparent backdrop) - Resume must be the primary/largest action - Settings access, save/quit options - Minimize the number of clicks to resume **Game over considerations:** - Score/stats display - "Try Again" vs "Return to Menu" prominence - Emotional tone (celebration vs consolation) --- ## 6. Prototyping Game Flows Stitch's prototype feature lets you connect screens into interactive flows. This is valuable for testing the *navigation* of your game UI before implementing it. ### Core Game Flow Design each screen, then connect them: ``` ┌──────────┐ ┌──────────┐ ┌──────────┐ │ Title │────▶│ Main │────▶│ Game- │ │ Screen │ │ Menu │ │ play │ └──────────┘ └────┬─────┘ └────┬─────┘ │ │ ┌────▼─────┐ ┌────▼─────┐ │ Settings │ │ Pause │ │ │ │ Menu │ └──────────┘ └────┬─────┘ │ ┌────▼─────┐ │ Game Over│ └──────────┘ ``` ### How to Prototype Flows in Stitch 1. **Design each screen individually** — Generate all screens on the infinite canvas 2. **Connect screens** — Use Stitch's "Stitch together" feature to link screens via button clicks 3. **Define transitions** — Specify what happens on each click (navigate to screen, open overlay) 4. **Play the prototype** — Click "Play" to walk through the entire flow interactively 5. **Auto-generate next screens** — Stitch can predict and generate logical next screens based on button text ### Flow Design Tips - **Design the critical path first** — Main Menu → New Game → Gameplay → Pause → Resume - **Then add branches** — Settings, Inventory, Shop, Quest Log - **Test depth** — If getting to a feature takes >3 clicks, reconsider the navigation hierarchy - **Consistent navigation** — Back buttons, escape behavior, breadcrumbs should be uniform - **Use multi-select theming** — Select all screens and apply a single design system prompt to maintain consistency ### Example Flow Prompt Sequence Start with the main menu, then iterate: ``` Prompt 1: "Dark fantasy RPG main menu. Logo at top, four buttons: New Game, Continue, Settings, Quit." Prompt 2: "Settings screen for the same game. Tabs: Video, Audio, Controls. Video tab showing resolution, fullscreen toggle, brightness slider. Back button in bottom-left." Prompt 3: "In-game HUD for the same game. Health bar top-left, mana bar below it, minimap top-right, hotbar bottom-center with 8 slots." Prompt 4: "Pause menu overlay for the same game. Semi-transparent dark backdrop. Resume, Inventory, Map, Settings, Save & Quit buttons stacked vertically." Prompt 5: "Inventory screen for the same game. Left: character paper doll with equipment slots. Right: 6x5 item grid. Bottom: item tooltip." Prompt 6: "Game over screen for the same game. Death message, stats summary (enemies killed, gold earned, time played), Retry and Main Menu buttons." ``` The key phrase is **"for the same game"** — this tells Stitch to maintain the visual style established in earlier prompts. --- ## 7. Voice Canvas for Rapid Iteration The voice canvas feature (March 2026) is particularly powerful for game UI iteration because game developers think spatially and often know *what they want to change* but not *how to prompt for it*. ### When to Use Voice vs Text | Situation | Use Voice | Use Text | |---|---|---| | Initial exploration | ✅ "I need some kind of inventory screen..." | | | Specific layout changes | ✅ "Move the health bar to the top-left" | | | Precise specifications | | ✅ "6x4 grid, 48px slots, 4px gap" | | Design critique/review | ✅ "What's wrong with this layout?" | | | Style exploration | ✅ "Make it more medieval... no, more like a tavern menu board" | | | Batch updates | | ✅ Multi-select + typed prompt | | Complex prompts | | ✅ Detailed prompt with multiple requirements | ### Voice Iteration Workflow for Game UI 1. **Start with a text prompt** — Generate the initial screen 2. **Switch to voice for refinements:** - "The health bar is too big, make it about half that width" - "Can you add a minimap in the top-right corner?" - "I don't like the font — try something more rugged and medieval" - "Show me three different color schemes for this" - "The tooltip is overlapping the inventory grid, fix the positioning" 3. **Use voice for design review:** - "Look at this HUD — what would you change to make it less cluttered?" - "Compare this inventory layout to the previous version — which is more readable?" - "Is the text hierarchy clear? Can you tell what's most important?" 4. **Switch back to text for final specifications** — Lock in exact sizes, colors, spacing ### Voice Prompt Examples for Game UI ``` "I'm designing a HUD for a space shooter. Start with a simple one — ship health on the left, shield bar below it, weapon heat on the right, and a score counter top-center." "That looks good but the bars are too thick — they're covering too much of the screen. Can you make them thinner, maybe like a slim stripe along the edge?" "Now add an ammo counter near the weapon heat bar. Show it as a circular magazine indicator." "Actually, let's try a completely different approach — what if all the HUD info was in a cockpit frame around the edges of the screen, like you're looking through a ship viewport?" ``` --- ## 8. Vibe Design for Game Aesthetics Vibe design is Stitch's most powerful feature for games. Instead of describing specific components, you describe the *feel* — and Stitch generates multiple visual directions. ### Game Aesthetic Vibes — Prompt Templates #### Dark Souls / Soulslike ``` "I want an inventory screen that feels oppressive and weighty, like Dark Souls. Muted colors, heavy stone textures, minimal ornamentation. Everything should feel like it's carved from a slab. Equipment stats are displayed plainly — no flashy animations or color coding. The UI should feel like part of the world, not a game overlay." ``` #### Cozy Farm Game ``` "Design a shop interface that feels like walking into a warm general store in a farming game like Stardew Valley. Wooden shelves, hand- written price tags, cheerful colors (warm yellows, soft greens), rounded corners on everything. The shopkeeper portrait should be friendly and inviting. Nothing should feel stressful or urgent." ``` #### Retro Arcade ``` "Scoreboard screen with a retro arcade cabinet feel. Black background, bright neon colors (electric blue, hot pink, lime green), scanline effect suggested. Scores displayed in a monospace font with blinking cursor. 'INSERT COIN' at the bottom. Dripping with 80s nostalgia." ``` #### Cyberpunk / Sci-Fi ``` "Hacking minigame interface for a cyberpunk game. Dark background with glowing circuit-board patterns. Holographic-style panels with slight transparency. Neon cyan and magenta accents. Data streams and hex codes decorating the margins. Terminal-style font for all text. The UI itself should look like it could exist in the game world." ``` #### Fantasy JRPG ``` "Party management screen for a colorful JRPG. Four character portraits in a row at top, each with HP/MP bars. Below: detailed stats for the selected character (STR, DEF, MAG, SPD, LUK) with equipment slots. Bright, clean, with a blue gradient background and golden UI frames. Feels polished and cheerful, like Final Fantasy or Dragon Quest menus." ``` #### Horror / Survival Horror ``` "Inventory screen for a survival horror game. Dark, almost black background. UI elements are barely visible until interacted with. Items shown as shadowy silhouettes until examined. Limited inventory slots (4x2) to convey scarcity. Red accent color only for health. Grimy, distressed texture on UI panels. Should feel unsafe to have the inventory open." ``` #### Minimalist / Indie ``` "In-game HUD for a minimalist indie platformer. Almost no visible UI. Health shown through screen vignette (darker edges = lower health). Collectible counter as tiny text in corner. No bars, no frames, no panels. The game world IS the interface. Only show information when it changes, then fade it out." ``` ### Using Vibe Design to Establish a Style Guide 1. **Start vague** — "I want my game UI to feel warm and adventurous, like a classic adventure game" 2. **Review the variants** — Stitch generates multiple directions 3. **Pick the closest match** — Select the variant that resonates 4. **Refine the vibe** — "More like this, but with a darker background and more ornate borders" 5. **Extract the design system** — Note the colors, fonts, border styles, spacing, and transparency values 6. **Apply across all screens** — Use DESIGN.md or multi-select theming to propagate --- ## 9. DESIGN.md for Game Style Systems Stitch's DESIGN.md feature (March 2026) lets you define and export design rules as an agent-friendly markdown file. This is extremely useful for game UI work because games need *all screens to look cohesive*. ### Creating a Game DESIGN.md After establishing your game's visual style through vibe design, extract or create a DESIGN.md: ```markdown # Game UI Design System — [Your Game Name] ## Color Palette - **Background:** #1a1a2e (near-black navy) - **Panel:** #16213e (dark blue-grey) - **Primary text:** #e8e8e8 (warm white) - **Secondary text:** #a0a0b0 (muted grey) - **Accent:** #c9a227 (gold) - **Health:** #c0392b (deep red) - **Mana:** #2980b9 (ocean blue) - **Success/Heal:** #27ae60 (forest green) - **Warning:** #e67e22 (amber) - **Rarity — Common:** #a0a0a0 - **Rarity — Uncommon:** #2ecc71 - **Rarity — Rare:** #3498db - **Rarity — Epic:** #9b59b6 - **Rarity — Legendary:** #f39c12 ## Typography - **Headings:** serif, bold, uppercase, tracking +2% - **Body text:** sans-serif, regular, 14-16px equivalent - **Numbers/stats:** monospace, tabular figures - **Tooltip titles:** serif, bold, accent color ## Spacing - **Grid unit:** 8px - **Panel padding:** 16px (2 grid units) - **Element gap:** 8px (1 grid unit) - **Section gap:** 24px (3 grid units) - **Border radius:** 4px (subtle rounding) ## UI Elements - **Panels:** solid background with 1px border in slightly lighter shade - **Buttons:** filled background, 2px border, hover: brighten 10% - **Slots (inventory/hotbar):** 48x48px, 1px inset border, empty = darker shade - **Bars (health/mana):** 4px height, rounded ends, background track visible - **Icons:** 24x24px or 32x32px, consistent line weight - **Tooltips:** appear above/below element, max-width 280px, 8px padding ## Rules - Never use pure black (#000) or pure white (#FFF) - All text must have minimum 4.5:1 contrast ratio - Interactive elements must have visible focus/hover states - Panels should never cover more than 60% of the screen - HUD elements anchor to screen edges with 16px margin ``` ### Using DESIGN.md Across Screens 1. Create your DESIGN.md from the first screen you're happy with 2. When designing subsequent screens, import the DESIGN.md to maintain consistency 3. Update the DESIGN.md if you make stylistic decisions that should propagate 4. **Export to engine** — The DESIGN.md doubles as your style specification document when implementing in MonoGame or Godot ### Extracting Design Systems from References If your game is inspired by an existing game's UI, you can: 1. Take a screenshot of the reference game's UI 2. Upload it to Stitch as an image-to-UI reference 3. Ask Stitch to extract the design system 4. Save it as a DESIGN.md 5. Apply that system to your own screens --- ## 10. Export Pipeline — Stitch to Game Engine Stitch generates web UI (HTML/CSS). Game engines use their own UI systems. The export pipeline bridges this gap. ### What to Extract from Stitch Output When you export a Stitch design, you get HTML and CSS. Extract these properties for your game engine implementation: #### Layout Information - **Element positions** — x, y coordinates (or relative positioning) - **Element sizes** — width, height in pixels - **Spacing** — margins, padding, gaps between elements - **Alignment** — left/center/right, top/middle/bottom - **Flow direction** — horizontal vs vertical stacking - **Grid structure** — rows, columns, cell sizes #### Visual Properties - **Colors** — background, text, border, accent (exact hex values) - **Font sizes** — relative hierarchy (h1 > h2 > body > caption) - **Border styles** — width, color, radius - **Opacity/transparency** — alpha values for overlays - **Shadows** — offset, blur, color (if applicable in your engine) #### Component Structure - **Hierarchy** — which elements contain which (panel > grid > slots) - **Repetition** — item slots, list items, tab buttons (count and pattern) - **States** — normal, hover, active, disabled, selected appearances ### The Extract-and-Implement Workflow ``` Step 1: Design in Stitch └─▶ Generate screen, iterate until satisfied Step 2: Export HTML/CSS └─▶ Copy the generated code Step 3: Analyze the Layout └─▶ Document positions, sizes, colors, hierarchy └─▶ Note: grid dimensions, slot sizes, spacing values └─▶ Create a specification sheet (or use DESIGN.md) Step 4: Implement in Engine └─▶ Translate HTML containers → engine layout containers └─▶ Translate CSS properties → engine styling └─▶ Add game-specific interactions (drag/drop, keyboard nav, etc.) Step 5: Compare └─▶ Screenshot your engine implementation └─▶ Upload to Stitch alongside the original design └─▶ Ask "What differences do you see between these two screens?" ``` ### What Does NOT Transfer - **Hover effects** — Web hover doesn't map to gamepad input; implement highlight/selection separately - **Animations/transitions** — CSS transitions must be reimplemented with engine tweening - **Scroll behavior** — Web scrolling is automatic; game engines need manual scroll implementation - **Font rendering** — Web fonts ≠ game engine font rendering; use the sizes and hierarchy, but actual fonts will differ - **Responsive behavior** — Web responsive design uses media queries; games use resolution scaling --- ## 11. Integration with MonoGame MonoGame has two primary UI approaches: **Gum.MonoGame** (the recommended full UI framework) and **ImGui.NET** (for debug/dev UI). Stitch designs translate to both. ### Stitch → Gum.MonoGame Gum is a layout engine with containers, anchoring, and component trees — structurally similar to how Stitch generates UI. #### Mapping HTML/CSS to Gum Concepts | Stitch (HTML/CSS) | Gum Equivalent | |---|---| | `
` container | `ContainerRuntime` | | `flex-direction: column` | `ChildrenLayout = TopToBottomStack` | | `flex-direction: row` | `ChildrenLayout = LeftToRightStack` | | `width: 200px` | `Width = 200, WidthUnits = Absolute` | | `width: 50%` | `Width = 50, WidthUnits = RelativeToContainer` | | `padding: 16px` | Direct property or margin on children | | `background-color` | `ColoredRectangleRuntime` or tinted `SpriteRuntime` | | `border` | `NineSliceRuntime` with border sprite | | `` text | `TextRuntime` | | `` | `SpriteRuntime` | | `