The Asset Style Guide Generator

What you’re building

You have a playable combat prototype with movement, enemy AI, and juice. The mechanics prove the concept. But when you show it to someone — a potential collaborator, an artist, an investor — the colored rectangles on a black background do not sell the vision. They ask: “what is it supposed to look like?” And right now your answer is “well, imagine BloodRayne but…” followed by waving your hands.

A style guide answers that question concretely. It defines the visual identity of your game: what Rayne looks like (red hair, updated leather outfit, dual blades), what the world looks like (gothic architecture, dark moody lighting, crimson and charcoal palette), what the UI looks like (minimal HUD, blood-red accents), and what the effects look like (visceral particles, dramatic lighting). More importantly, a style guide gives AI image generators specific prompts so you can create concept art without hiring an artist yet.

In this lesson you are building a Node.js CLI that generates a complete visual style guide as a styled HTML document. You define your game’s aesthetic vision in structured data, and the tool outputs a print-ready document with written descriptions and copy-paste prompts for Midjourney, DALL-E, and Stable Diffusion.

ℹSoftware pattern: Structured data to formatted document

This is the same pattern as the RFP machine or the resident response studio — structured input transformed into a formatted professional document. In this case, the input is art direction data (character descriptions, color palettes, mood references) and the output is an HTML style guide. This pattern works for any brand guide, design system documentation, or creative brief.

The showcase

Here is what the finished CLI produces:

HTML style guide with five sections, styled with CSS for professional presentation
Character art direction — written description of Rayne (modernized design, signature red hair, combat outfit), with generation prompts for each image tool
Environment palette — color swatches (gothic dark palette), mood descriptions, reference notes, with generation prompts for key environments (cathedral, underground lab, rain-soaked rooftop)
UI style — HUD design language, font direction, menu aesthetic, with generation prompts for UI mockup screens
VFX style — particle aesthetics, color theory for effects (blood = deep crimson, energy = purple-red, dodge = spectral blue), with generation prompts for effect reference sheets
Color palette page — hex codes displayed as visual swatches with labels and usage notes
AI prompt appendix — all generation prompts collected in one section, organized by tool (Midjourney, DALL-E, Stable Diffusion), ready to copy and paste

The HTML output is self-contained — open it in a browser and it renders as a clean, professional document. Print it to PDF and it looks like something a studio art director produced.

The prompt

Open your terminal, navigate to your project folder, start your AI CLI tool, and paste this prompt:

Build a Node.js CLI tool called style-guide-gen that generates a complete visual
style guide for a BloodRayne remake called "RAYNE" (working title). The tool
reads art direction data from a structured config and outputs a self-contained
HTML document suitable for printing or sharing with collaborators.

PROJECT STRUCTURE:
style-guide-gen/
  package.json
  src/
    index.js           (CLI entry point)
    art-direction.js   (structured art direction data for the BloodRayne remake)
    prompt-builder.js  (generates AI image prompts for Midjourney/DALL-E/SD)
    html-builder.js    (assembles the HTML style guide document)
  output/              (generated files land here)

REQUIREMENTS:

1. CLI INTERFACE (src/index.js)
   - Usage: node src/index.js [options]
   - Options:
     --title <name> (game title, default: "RAYNE")
     --subtitle <text> (subtitle, default: "A BloodRayne Remake")
     --output <path> (output directory, default: ./output)
     --format <html|json> (default: html; json exports raw art direction data)
     --dark (use dark theme for the HTML, default true)
   - Generate output/style-guide.html and optionally output/art-direction.json
   - Print summary to terminal: sections generated, prompt count, file path

2. ART DIRECTION DATA (src/art-direction.js)
   Export a structured object with these sections:

   a. CHARACTER: Rayne
      - physicalDescription: "Athletic woman in her late 20s. Signature
        deep red hair, straight, reaching mid-back -- the most recognizable
        element of her design. Pale skin with a slight unnatural pallor
        (half-vampire heritage). Sharp, angular facial features. Red-amber
        eyes that catch light."
      - outfit: "Modernized tactical leather. Form-fitting dark red-black
        leather jacket with asymmetric collar, reinforced at shoulders and
        forearms for blade combat. High-waisted tactical pants, dark charcoal,
        with thigh holsters (empty -- she prefers blades). Knee-high combat
        boots with low heels. Fingerless gloves. The outfit updates the
        original's iconic look while grounding it in functional combat gear
        rather than pure fan service."
      - weapons: "Dual arm-mounted blades extending from wrist guards.
        Curved, single-edged, approximately 24 inches each. Matte dark
        steel with faint crimson etching along the spine. When retracted,
        they fold flat against the forearm guards. When extended, they
        lock with an audible click."
      - colorPalette: ["#8B0000 Dark Crimson (hair, accents)",
        "#1a1a1a Near-Black (leather base)", "#2d1f1f Dark Burgundy (jacket)",
        "#c0c0c0 Matte Silver (blade steel)", "#ff4444 Crimson Glow (eyes, rage mode)"]
      - poses: ["combat stance (blades extended, weight forward)",
        "mid-combo (blade arc visible)", "dodge roll (acrobatic, low)",
        "blood rage (crimson energy aura, eyes glowing)"]

   b. ENVIRONMENTS (3 key environments)

      Gothic Cathedral:
      - description: "Ruined gothic cathedral repurposed as a vampire
        stronghold. Broken stained glass windows cast fractured colored
        light across stone floors. Vaulted ceilings disappear into darkness.
        Candelabras with flickering flames. Blood-red banners hanging from
        pillars. The architecture is European medieval -- pointed arches,
        ribbed vaults, flying buttresses visible through collapsed walls."
      - palette: ["#0d0d0d Deep Black", "#1a0a0a Dark Blood",
        "#2a1f3d Gothic Purple", "#8B7355 Aged Stone",
        "#FFD700 Candlelight Accent"]
      - lighting: "Low-key, high contrast. Primary illumination from
        candles and broken windows. Deep shadows everywhere. Volumetric
        light shafts through gaps in the ceiling."

      Underground Laboratory:
      - description: "Nazi-era underground research facility, still
        operational decades later. Concrete walls with exposed rebar.
        Fluorescent tubes, half of them flickering or dead. Stainless
        steel operating tables with leather restraints. Glass tubes
        filled with murky green liquid. Computer terminals with CRT
        monitors showing scrolling data. The aesthetic is cold, clinical,
        and deeply wrong."
      - palette: ["#1a1a1a Concrete Gray", "#0a2a0a Sickly Green",
        "#e0e0e0 Fluorescent White", "#3a3a3a Dark Steel",
        "#ff0000 Emergency Red"]
      - lighting: "Harsh overhead fluorescents with cold color temperature.
        Green glow from specimen tanks. Red emergency lighting in damaged
        sections. High contrast between lit corridors and pitch-black rooms."

      Rain-Soaked Rooftop:
      - description: "Modern city rooftop at night during heavy rain.
        Neon signs from adjacent buildings cast colored reflections on
        wet surfaces. HVAC units and antenna arrays create cover for
        combat. The city skyline is visible as a blur of lights through
        the rain. Standing water reflects everything. The rain is
        constant and heavy."
      - palette: ["#0a0a1a Night Sky", "#ff3366 Neon Pink",
        "#00ccff Neon Cyan", "#1a1a2e Wet Concrete",
        "#ffffff Rain Streaks"]
      - lighting: "Neon-lit rain. No natural light. All illumination
        from artificial sources -- neon signs, building windows, a
        distant helicopter searchlight. Every surface is reflective.
        Volumetric rain with visible individual streaks."

   c. UI_STYLE
      - philosophy: "Minimal, diegetic where possible. The HUD should
        feel like it exists in Rayne's world, not overlaid by a game
        designer. Information appears when relevant and fades when not."
      - healthBar: "Thin horizontal bar, top-left. Dark red fill on
        darker background. No border -- bleeds at the edges. Pulses
        subtly when low. Numeric value small, to the right."
      - rageMeter: "Below health bar. Gradient from dark crimson to
        bright orange-red as it fills. When full, the bar pulses and
        emits faint particle effects along its length."
      - fonts: "Primary: sharp sans-serif (Rajdhani or similar).
        Secondary: condensed uppercase for headers (Oswald or similar).
        No serif fonts. Everything sharp, angular, modern."
      - menus: "Full-screen dark overlay with centered content. Menu
        items are large text, left-aligned, with a red accent line that
        slides in from the left on hover/selection. Minimal animation.
        No boxes, no borders, no traditional 'game menu' chrome."
      - palette: ["#ff2244 Primary Accent (selections, highlights)",
        "#ffffff Pure White (active text)", "#888888 Muted Gray (inactive text)",
        "#0a0a0a Background Overlay", "#ff8800 Warning/Rage Accent"]

   d. VFX_STYLE
      - blood: "Deep crimson (#8B0000) to bright red (#ff2222). Particles
        are angular, not round -- torn fragments, not droplets. Short-lived
        (200-400ms). Arc under gravity. Quantity scales with damage dealt.
        Never cartoonish, never gratuitous -- visceral but controlled."
      - energy: "Purple-red (#8B2252) to orange (#ff6600) for rage effects.
        Smooth, flowing particles that trail and fade. Used for blood rage
        aura, special attacks, and supernatural elements. Subtle glow."
      - dodge: "Spectral blue-white (#aaccff to #ffffff). Afterimage
        effect: semi-transparent copy of Rayne at dodge origin, fades
        over 200ms. Represents her supernatural speed."
      - impact: "White flash (#ffffff) at point of contact, 2-frame
        duration. Followed by directional particle spray in the blood
        palette. Screen shake proportional to damage. Hit-stop on heavy
        hits (30-60ms)."
      - environmental: "Floating ember-like particles in warm environments.
        Rain and mist particles in outdoor scenes. Dust motes in indoor
        light shafts. These are atmosphere, not gameplay -- subtle and
        constant."

3. PROMPT BUILDER (src/prompt-builder.js)
   For each section, generate three AI image generation prompts:

   - Midjourney format: "/imagine [description], [style keywords],
     [aspect ratio] --ar 16:9 --v 6"
   - DALL-E format: "Generate an image of [description]. Style: [details].
     Mood: [mood]. Color palette: [hex codes]."
   - Stable Diffusion format: "[description], [positive keywords] |
     Negative: [things to avoid]"

   Generate prompts for:
   - Rayne character sheet (front, side, back views)
   - Rayne action poses (combat, dodge, rage)
   - Each of the 3 environments (wide establishing shot)
   - Each environment detail (close-up atmospheric element)
   - UI mockup (HUD overlay on gameplay screenshot concept)
   - VFX reference sheet (particle effects on dark background)

   Total: approximately 15-18 individual prompts

4. HTML BUILDER (src/html-builder.js)
   Generate a self-contained HTML file with embedded CSS:

   - Dark theme (#0a0a0a background, #e0e0e0 text, accent #ff2244)
   - Cover page: game title in large sharp sans-serif, subtitle below,
     "Visual Style Guide" label, date generated
   - Table of contents with anchor links to each section
   - Section 1: Character -- description text, outfit notes, weapon
     description, color swatches (rendered as colored divs with hex
     labels), list of pose descriptions, AI generation prompts in
     code blocks
   - Section 2: Environments -- each environment gets a subsection with
     description, color swatches, lighting notes, and generation prompts
   - Section 3: UI Style -- philosophy, component descriptions, font
     direction, palette swatches, UI generation prompts
   - Section 4: VFX Style -- each effect category described with color
     swatches and generation prompts
   - Section 5: Complete Prompt Appendix -- all prompts organized by
     tool (Midjourney, DALL-E, Stable Diffusion), numbered, in copyable
     code blocks
   - Color swatches: rendered as inline 60x30px rectangles with the hex
     code and label text next to them. Use actual CSS background-color.
   - Print-friendly: @media print styles that remove dark background,
     use black text, and maintain swatches
   - Responsive: readable on both desktop and mobile

5. OUTPUT
   - Primary: output/style-guide.html (self-contained, no external deps)
   - Optional: output/art-direction.json (raw structured data, for
     programmatic use)
   - Terminal output: summary of sections generated, total prompt count

DEPENDENCIES: chalk (terminal output), no template engine needed (HTML
is built with template literals)

SAMPLE RUN:
node src/index.js --title "RAYNE" --subtitle "A BloodRayne Reimagining"

Should output a professional-quality HTML style guide document with all
five sections, color swatches rendered visually, and 15+ AI image
generation prompts ready for copy-paste into Midjourney, DALL-E, or
Stable Diffusion.

💡Copy-paste ready

That entire block is the prompt. The art direction data is dense because visual identity requires specificity. “Gothic and dark” produces generic results. “Ruined gothic cathedral with broken stained glass casting fractured colored light across stone floors, blood-red banners hanging from pillars” produces something that looks like BloodRayne. The AI image generation prompts in the output will inherit this specificity — they are only as good as the descriptions they are built from.

What you get

After the AI finishes:

style-guide-gen/
  package.json
  src/
    index.js
    art-direction.js
    prompt-builder.js
    html-builder.js
  output/

Generate and view

cd style-guide-gen
npm install
node src/index.js
open output/style-guide.html

The HTML file opens in your browser as a dark-themed professional document. Scroll through it. The cover page has your game title. The character section describes Rayne with color swatches rendered as actual colored blocks. The environment section paints three distinct locations. The prompt appendix has every AI image prompt numbered and ready to copy.

Print it to PDF (Cmd+P or Ctrl+P, Save as PDF). That PDF is something you can hand to an artist, attach to a pitch email, or pin to your wall as a reference.

If something is off

Problem	Follow-up prompt
Color swatches show as text, not colored blocks	`The color swatches are rendering as hex code text without visual blocks. In the HTML output, render each swatch as a <span> with display: inline-block, width: 60px, height: 24px, background-color set to the hex value, border-radius: 4px, vertical-align: middle, followed by the hex code and label text. Make sure the hex values from art-direction.js are being parsed correctly.`
HTML file is unstyled	`The generated HTML has no CSS styling. Add a <style> block inside the <head> that sets body background to #0a0a0a, color to #e0e0e0, font-family to system-ui or Arial, max-width 900px, margin auto, padding 2rem. Style h1 with color #ff2244, h2 with border-bottom 1px solid #333. Style code blocks with background #1a1a2e and padding 1rem.`
Prompts are identical for all three AI tools	`The Midjourney, DALL-E, and Stable Diffusion prompts should have different formats. Midjourney uses "/imagine [prompt] --ar 16:9 --v 6". DALL-E uses natural language with explicit style and mood instructions. Stable Diffusion uses comma-separated keywords with a negative prompt after a pipe character. Differentiate the prompt structure for each tool in prompt-builder.js.`

Deep dive

Why a style guide before any art exists

Art is the most expensive part of game development. An artist charges per asset, and revisions cost more than initial creation. A style guide reduces revisions by defining the visual target before anyone draws a single pixel. When you tell an artist “dark gothic with red accents” they interpret that through their own taste. When you hand them a document with specific hex codes, lighting descriptions, material notes, and reference images (generated from your AI prompts), they execute your vision on the first pass. The style guide pays for itself in the first round of avoided revisions.

AI image prompts are a workflow, not a replacement

The prompts in this style guide are not meant to produce final game art. They are meant to produce reference images — mood boards, color studies, composition ideas — that communicate your vision to human collaborators (and to yourself). When you paste the Rayne character prompt into Midjourney and get back an image that is 70% right, that 70% is more useful than a verbal description. You can annotate it: “like this but the hair is longer” or “the blade angle should be more curved.” Reference images accelerate communication. That is their job.

The three AI tools want different things

Midjourney responds best to evocative, artistic language with style modifiers (cinematic lighting, concept art, high detail). DALL-E responds best to clear, descriptive natural language with explicit mood and color instructions. Stable Diffusion responds best to comma-separated tags with weighted keywords and a negative prompt that excludes unwanted elements. The prompt builder generates all three formats from the same source data because you do not know which tool will produce the best result for a given concept. Try all three. Use what works.

🔍The style guide as a living document

This style guide is generated from a JavaScript data file. That means it is versioned, diffable, and updatable. As your vision for the BloodRayne remake evolves, you update art-direction.js and regenerate. The old style guide is replaced with the new one. If you are collaborating with others, the art direction data can live in your git repository — every team member sees the same visual target, and changes are tracked in commit history. This is better than a Figma file that someone forgets to update.

Customize it

Add a mood board grid

Add a --moodboard flag that generates a separate HTML page (output/moodboard.html)
with a responsive grid layout. Each cell contains: a section label (e.g.,
"Cathedral - Establishing Shot"), the Midjourney prompt in a copyable field,
and a large placeholder box (400x250px, colored with the primary palette color
for that section) labeled "Paste generated image here." The grid is designed
so Lora can generate images, screenshot them, and paste them into the HTML
file (or an artist can drop in concept art later). Include 12-15 cells covering
all character poses, environments, and UI concepts.

Add a competitor reference section

Add a "Visual References" section to the style guide that lists comparable
games and their visual styles. Include: BloodRayne 1 & 2 (original art style),
Devil May Cry 5 (modern action game aesthetic), Castlevania: Symphony of the
Night (gothic 2D side-scroller), Hollow Knight (2D dark atmospheric), and
Dead Cells (2D combat-focused with strong VFX). For each, include a one-sentence
description of what to borrow visually and what to avoid. This helps artists
understand the visual lineage without needing to play every reference game.

Add a sprite sheet specification page

Add a "Sprite Specifications" section that defines the technical requirements
for 2D game art assets: character sprite dimensions (64x96px base), animation
frame counts per action (idle: 4, run: 8, attack combo: 12, dodge: 6, hurt: 3,
death: 8), color depth, transparency requirements, naming conventions
(rayne_idle_01.png through rayne_idle_04.png), and export format (PNG with
alpha, 2x resolution for retina). Include a visual diagram showing the
sprite sheet layout grid. This section bridges the gap between art direction
and production-ready asset creation.

Try it yourself

Paste the prompt and generate the style guide.
Open output/style-guide.html in your browser and read through every section. Does Rayne’s description match the character in your head? If not, edit art-direction.js and regenerate.
Copy one of the Midjourney character prompts. If you have Midjourney access, paste it and see what comes back. If not, paste the DALL-E prompt into ChatGPT’s image generator. Compare the result to your mental image.
Print the HTML to PDF. Would you feel confident handing this document to a freelance character artist? If not, what is missing? Add it to the data file.
Try the --format json flag and look at the raw data output. This JSON can be imported by other tools — your future level editor or asset pipeline could read it.
Change the game title with --title "BLOOD HEIR" or whatever your working title becomes. Regenerate. The entire document updates.

A game’s visual identity is a decision you make once and live with for years. This style guide is how you make that decision concretely, communicate it clearly, and evolve it systematically. Rayne has waited long enough to look good again.

💡Your game has a visual identity

You now have a professional style guide document that defines what your BloodRayne remake looks like — from Rayne’s updated design to the gothic environments to the particle effects. You have AI image prompts ready to generate concept art. You have a printable document to share with collaborators. The colored rectangles in your Phaser prototype are temporary — the style guide defines what replaces them. Next lesson: building the HUD and inventory systems that tie the gameplay together.