Generate D&D character images using Google Gemini or Whisk via manual browser automation (DevTools MCP).
Use this skill to generate character art using Google's AI tools. This approach uses the unified image-gen MCP server or the agent's native devtools tools to drive the browser.
scripts/workflows/gemini/core/image-gen-mcp.ts manages the browser session (launching chrome with a persistent profile).
image-gengenerate_image, download_image, verify_image_adherenceverify_image_adherence to check generated images against the "Full Body D&D Villager" guidelines. This tool re-uploads the image to Gemini and asks for a critique.The script handles launching automatically.
npx tsx scripts/workflows/gemini/core/image-gen-mcp.tsTo ensure accuracy and "mundane/slice-of-life" grounding, use a two-step approach.
Step 1: Research & Describe
"Research the visual characteristics of the [Race] race from canon D&D 5e sources. Focus on: physical appearance (skin, features, build), typical mundane habitat, and typical clothing for a COMMON VILLAGER or WORKER (not an adventurer/hero).
based on this, write a detailed visual description of a [Gender] [Race] Villager in a slice-of-life setting. The description should be vivid and suitable for image generation. DO NOT generate an image yet."
Step 2: Generate
"Generate a high-quality, detailed fantasy illustration based on the description above. D&D 5e art style. Full body view, showing the character from head to toe. Aspect ratio 1:1 (square)."
evaluate_script to insert text and click send (see Fast-Path Automation below).Use the download_image tool. It automatically handles finding the high-res URL or clicking the download button.
download_image(outputPath: "absolute/path/to/Parent_Subrace_Gender.png")public/assets/images/races/[Parent]_[Subrace]_[Gender].png (TitleCase).
Elf_Wood_Male.pngDragonborn_Red_Male.pngAarakocra_Female.png (No subrace)Use the verify_image_adherence tool to ensure quality.
verify_image_adherence(imagePath: "...")complies: false, consider regenerating the image.hasDualImages layout in the glossary, which uses small thumbnails instead of full-card width.Use the scripts/audit_and_wire_images.ts script to automatically:
Parent_Subrace_Gender.png convention.src/data/races/*.ts and glossary/*.json.Run with: npx tsx scripts/audit_and_wire_images.ts
taskkill /F /IM chrome.exe /T to fully reset the browser.take_snapshot for known static elements. Use evaluate_script with stable CSS selectors:You must wire up the images in TWO places: the Glossary (JSON) and the Character Creator (TypeScript).
public/data/glossary/entries/races/[race].json."maleImageUrl": "/assets/images/races/[race]_male.png",
"femaleImageUrl": "/assets/images/races/[race]_female.png"
src/data/races/[race].ts.visual object within the race constant:
visual: {
// ... keep existing icon/color
maleIllustrationPath: 'assets/images/races/[race]_male.png',
femaleIllustrationPath: 'assets/images/races/[race]_female.png',
},
(Note: No leading slash for the TS file paths)Completed:
Missing Subraces (To-Do):
Elves:
Dwarves:
Gnomes:
Halflings:
Dragonborn (Chromatic/Metallic/Gem):
Tieflings:
Aasimar:
Goliaths:
Shifters:
Eladrin:
Humans (Variants):
Half-Elves (Variants):