Building an RPG Character Sheet with Nano Banana Pro

Stylized

I built a playful, living RPG character sheet for Logan Kilpatrick using Nano Banana Pro, Gemini 3 Pro, and a live connection to Google Search. The goal was simple: take real, up-to-date public information about a person and turn it into a stylized video game profile complete with skills, quests, inventory, and a custom image. What started as a quick demo became a neat illustration of how toolchains that combine web search, large models, and generative imaging can produce dynamic, explanatory, and delightful interfaces.

Table of Contents

🔎 The elevator pitch

I wanted to see what happens when you let a state-of-the-art model access search results in real time and then ask it to output an artifact that’s creative, structured, and useful. The result was a character profile that reads like an RPG sheet but is anchored in real-world facts. It included career-related skills, whimsical items like "Gemini's Oracle Stone," and even an inventory slot labeled "feature requests." The whole UI was generated after just a couple of quick UI tweaks and a short, focused prompt to Gemini 3 Pro from inside AI Studio.

Kat Kampf orchestrated the demo, Logan Kilpatrick was the subject of the profile, and Amar helped with last-minute UI changes. Nana is credited with the initial idea about hooking the model up to search. I saw the strengths and the rough edges: the system can pull accurate, timely facts and remix them into a new narrative, but it also depends on careful prompt design, sensible filtering of search results, and pragmatic handling of errors when infrastructure hiccups happen.

🎮 What a "vibe-coded" character sheet looks like

Vibe coding is the idea of describing the feeling, visual style, and structural output you want and letting the model produce it. For the character sheet I asked the model to create a video game–style control panel that summarizes what’s new with Logan. The output included:

  • Skills mapped from career achievements and public roles.
  • Quests reflecting ongoing projects and goals.
  • Inventory with playful items derived from persona and public artifacts.
  • Stylized image combining Gemini accents and a video-game visual language.

Some outputs leaned into humor: one result listed "feature requests" as a top skill. Another generated "Amleth of the Soaring Eagle" as an ornate title and "vibe coding headphones" as a cosmetic item. That balance of factual grounding and imaginative embellishment is where these demos shine.

🧭 How the system pulls real-time information

At the core is a pipeline that fetches public search results, extracts salient facts, and passes a distilled summary to Gemini 3 Pro. I’ll walk through the main components:

  1. Search connector: A module queries Google Search for the subject's name and related keywords. The connector retrieves snippets, linked pages, and metadata.
  2. Filtering and extraction: Raw search results are noisy. I filter for credible sources, dedupe similar facts, and extract structured data like job titles, recent projects, and public mentions.
  3. Prompt engineering: The filtered facts get turned into an instruction prompt that asks Gemini 3 Pro to produce a character sheet. The prompt includes style guidelines (e.g., video game UI, tone, JSON/structural output), constraints (word limits, sections required), and optional creative flourishes.
  4. Model output: Gemini 3 Pro returns a structured description plus an image specification. The image spec is handed to an image generator (often the same model or a companion tool) to produce a stylized portrait.
  5. Rendering frontend: The UI layer renders the panel, populates the inventory, and applies visual accents. Small UI tweaks were implemented quickly by Amar in the demo, showing how few iterations are needed for a polished look.

All of this happens inside AI Studio, which simplifies connecting these pieces. The magic is that the model has access to live knowledge through search rather than being limited to a static training cutoff.

⚙️ The design decisions that make it feel like a game

Designing an effective character sheet isn’t just about listing facts. I turned public details into narrative artifacts. Here’s how I mapped real-world attributes into classic RPG components:

  • Titles and epithets — Distill job roles and notable achievements into short, evocative titles like "Architect of AI Studio."
  • Skills — Translate responsibilities and public accomplishments into skill names. For example, "product strategy" becomes a skill like "Mapmaker of Roadmaps" or more literal labels such as "feature requests" to retain charm.
  • Quests — Treat ongoing projects as quests, with progress indicators and rewards. If Logan is shepherding a platform, that becomes a long quest with milestones.
  • Inventory — Derive items from personal interests, artifacts, and tools. Even abstract things like "network influence" can become consumables or passive effects.
  • Flavor text — Small bits of lore that tie items and skills to a persona, making everything feel cohesive.

The model is surprisingly good at creative reinterpretation when given a few examples and clear instructions. That said, prompt framing matters: ask for "literal facts" and you get dry bios; ask for "playful RPG prose grounded in these facts" and you get a clickable, shareable character sheet.

✨ Use cases beyond novelty

This approach isn’t just for fun. There are practical applications where up-to-date, contextualized, and visualized data genuinely helps:

  • Education — I saw models explain photosynthesis and Newton’s laws visually in ways that fit different learning styles. Turning abstract concepts into interactive profiles or visual analogies helps comprehension.
  • Personalized marketing — A living profile that updates with public accomplishments can be used in bios, speaker pages, or portfolio sites.
  • Internal tools — Teams can generate an at-a-glance view of a colleague that highlights skills, current projects, and suggested collaborators.
  • Game design — Dynamically generating NPC profiles informed by real-world data can lead to richer in-game lore.
  • Accessibility — Visual learners and people who prefer concise, structured summaries benefit from distilled, image-backed profiles.

When done responsibly, the combination of search and generative models becomes a tool for discovery and teaching rather than mere spectacle.

🛠️ How I built a similar app (step-by-step)

If you want to reproduce a living character sheet, here’s a practical, non-code description of the workflow I used. It’s a sequence you can implement in most modern AI toolchains.

  1. Choose your subject and query strategy

    Decide what you’ll search for. For a person, include name variations, title keywords, recent projects, and social handles. This helps retrieve the most relevant, up-to-date content.

  2. Fetch and filter results

    Retrieve a batch of search snippets and linked pages. Filter by domain reputation, recency, and text relevance. Remove low-confidence items and duplicates.

  3. Extract facts

    From filtered results, extract structured fields: roles, affiliations, notable projects, dates, and quotations. You can do this with a small extraction model or heuristics.

  4. Map facts to game elements

    Create transformation rules. Job title -> epithet. Recent project -> active quest. Public tool mentions -> inventory items. Keep mappings flexible so the model can be creative.

  5. Prompt Gemini 3 Pro

    Feed the extracted facts and mapping instructions into Gemini 3 Pro with a concise, well-scoped prompt. Ask for both structured data (e.g., JSON or bullet list) and a short flavor paragraph for each section. Include constraints like word counts and style references.

  6. Generate an image

    Use the model’s image generation features or a companion image generator. Provide style tokens: "video game portrait, UI accents, neon Gemini color palette, semi-realistic." If you want consistent avatars, maintain a seed strategy.

  7. Render UI

    Build a lightweight frontend that reads the structured output and maps it to UI components. Keep the UI modular so you can swap in different themes or templates quickly. Amar’s quick UI tweaks showed how small changes can make a demo look polished.

  8. Rate limiting and caching

    Cache the extracted facts and the model output for a reasonable TTL to avoid repeated queries and to handle rate limits. Re-run searches on a schedule or on demand with a refresh button.

Two practical prompt tips I use:

  • Give examples for the desired output format (sample JSON or bullets).
  • Set strict constraints where needed (max characters per field, required sections) to avoid hallucinations and maintain consistent UI rendering.

⚠️ Limitations and common pitfalls

Combining search with generative models is powerful, but it has pitfalls you need to plan for:

  • Hallucination risk — If the extraction step pulls weak or ambiguous facts, the model may invent details while attempting to be helpful. Always mark derived vs. confirmed facts and present uncertainty when necessary.
  • Search noise — Search results can include outdated or irrelevant pages. Strict filtering and recency weighting are key.
  • Privacy and consent — Just because information is public does not mean it should be used without consideration. Think about consent and potential harms before generating profiles about private individuals.
  • Rate limits and availability — Live demos sometimes fail. In one run, infrastructure hiccups made the demo glitch. This is a normal part of integrating several external systems; build graceful error messages and fallbacks.
  • Licensing and copyrights — Be cautious if the output repurposes copyrighted images or text found during search. Transformative use is not a blanket exemption.

🔐 Ethical guardrails and privacy

When you let models query public data to create personalized artifacts, ethics and privacy must be considered. Here are the guardrails I follow:

  • Opt-in when possible — For profiles intended for sharing, prefer explicit consent from the subject.
  • Label uncertainty — If a fact comes from a low-confidence source, indicate that in the UI rather than presenting it as absolute truth.
  • Allow corrections — Provide an interface for the subject to update or remove items. This keeps the profile human-centered.
  • Avoid sensitive categories — Do not infer or include protected attributes, private contacts, or personal identifiers beyond what is necessary.
  • Rate-limit scraping — Respect robots.txt and API usage policies when fetching data from the web.

These are not just legal niceties. They improve trust and make the product less likely to cause harm.

🧪 What surprised me

Three things stood out while building and experimenting with the character sheet:

  • World knowledge transforms explanations — When a model can consult search and incorporate world knowledge, the explanations become more relevant and timely. I saw a Newton’s laws example that was easier to understand because the model framed it visually for a specific learner.
  • Creativity from constraints — Giving the model clear structural requirements plus examples produced consistently usable outputs. A single well-constructed prompt plus a small set of examples often beat long, vague instructions.
  • Live demos reveal integration pain points — Nothing exposes hidden dependencies faster than a live run. A failed demo due to temporary infrastructure load is embarrassing but useful: it forces robust fallbacks and better monitoring.

🚀 Ideas for extending this concept

The demo is a starting point. Here are ways I would extend the idea to make it truly useful beyond novelty:

  • Team pages that update automatically — Auto-generate team member pages that highlight current projects, strengths, and suggested cross-team collaborations.
  • Game-ready NPC generators — Use public datasets and persona templates to create consistent NPCs with lore that evolves as source material updates.
  • Teaching modules — Transform textbook topics into interactive character-like artifacts that break down concepts into skills, quests, and inventory items for learners.
  • Customizable templates — Allow users to pick a theme (cyberpunk, fantasy, minimalist) and produce profiles that match brand guidelines.
  • Audit trails for provenance — Record which sources informed each line of the profile so anyone can verify the origin of a claim.

🔧 Operational checklist for production

If you're moving this from prototype to production, here's a checklist of operational items I recommend:

  • Source vetting — Maintain a whitelist of trusted domains and a blacklist of low-quality sources.
  • Confidence scoring — Present an explicit confidence score per fact and allow users to drill down to the source snippet.
  • Rate limiting and cost monitoring — Model calls and image generation can be expensive. Implement caching and usage alerts.
  • Error handling — Show fallback UI and retry logic when model or API calls fail.
  • Data deletion — Provide a clear path to remove or update profiles, especially for living people.
  • Testing and human review — Have a review step for high-visibility profiles; automatic systems should flag ambiguous cases for human check.

📣 A few practical prompt examples

I find it helpful to include template-style prompts so you can adapt them quickly. These are not code blocks; they are plain text prompts to give you a sense of structure. Replace bracketed fields with your data.

Character sheet prompt (summary)

Take the facts below and produce a game-style character sheet with these sections: title, short summary (one sentence), skills (3 to 6 items with short descriptions), active quests (2 items with progress percentages), inventory (4 items with flavor text), and a portrait description for image generation. Keep tone playful, grounded in the facts, and suitable for a professional audience. Facts: [insert extracted facts here].

Portrait prompt for image generation

Generate a semi-realistic video game portrait for [name], styled with neon Gemini accents, cinematic lighting, and a slightly stylized color palette. Include a subtle UI frame that feels like a control panel. Avoid copyrighted trademarks. Output a short description of the composition and color palette.

These templates can be iterated with example outputs to steer style more precisely. The smaller and clearer the prompt, the easier it is to interpret results consistently across runs.

📈 Measuring success

Decide early what success means. For the character sheet, I tracked a few signals:

  • Accuracy rate — Percentage of facts that matched the source or were confirmed by the subject.
  • User engagement — Time spent on the profile and interactions with "learn more" links to sources.
  • Correction rate — How often subjects request edits; a low rate suggests better alignment.
  • Cost per profile — Total compute cost including search, model calls, and image generation.

These metrics helped guide decisions on caching, the depth of search, and whether to add a manual review step for public figures.

🧾 Real-world example highlights

I want to call out a few delightful outputs that illustrate how the system can be both informative and charming:

  • Feature requests as a skill — Transforming a professional tendency into a playful skill label made the character feel more human and relatable.
  • Amleth of the Soaring Eagle — A grandiose epithet derived from a playful synthesis of logged achievements and public persona.
  • Vibe coding headphones — A cosmetic item that ties the tech persona to something visually iconic.
  • Oracle Stone — A narrative artifact that represents access to Gemini-like world knowledge within the game metaphor.

Those small creative choices make the sheet shareable and memorable while still echoing a real person’s public footprint.

🔁 Handling failures and the human touch

During the demo, a hiccup made the initial run fail to display correctly. I filed bugs and reran the pipeline. Failures like this are inevitable in live systems that span search, generative models, and rendering. The key is to make failures informative, not silent. A good fallback UI will explain what went wrong, offer a cached snapshot, and let users try again.

Human reviewers remain essential for high-stakes or high-visibility profiles. Models are great at creativity and synthesis, but people excel at taste, nuance, and ethical judgment.

🌟 Final thoughts

Bringing together Google Search, Gemini 3 Pro, and Nano Banana Pro in AI Studio shows how modern AI toolchains can create engaging, explainable artifacts that mix factual grounding with creative storytelling. The character sheet is a compact example of a larger pattern: when models have access to fresh knowledge and a clearly defined output format, they can generate content that is both useful and delightful.

I’m excited to see people build on this pattern for education, team productivity, game design, and personalized experiences. The technical hurdles are manageable, and the hardest parts are often design and governance—making sure that outputs are accurate, respectful, and useful. With a few guardrails and thoughtful UX, these tools can help people understand complexity through playful, human-centered metaphors.

❓ FAQ

How does the system get up-to-date information about someone?

The pipeline queries Google Search for the subject’s name and related keywords, filters results for credibility and recency, and extracts structured facts. Those facts are then fed to Gemini 3 Pro, which synthesizes them into a character sheet and image specification.

What is vibe coding?

Vibe coding is an approach where you describe the desired feeling, visual style, and structure, and the model generates content that matches that vibe. It’s useful for bridging the gap between a concept and a polished design, especially for creative outputs like character profiles or stylized images.

Which components are required to build this?

You need a search connector to fetch public data, an extraction layer to structure facts, a generative model like Gemini 3 Pro to synthesize the character content, an image generator for portraits, and a frontend renderer to assemble the UI. AI Studio can help wire these components together.

How do you prevent the model from making up facts?

Use strict filtering and provenance tracking during extraction, present confidence scores in the UI, and include explicit constraints in the prompt that instruct the model to only use provided facts. Flag uncertain items for human review and allow users to correct inaccuracies.

Can this be used for private individuals?

Proceed with caution. Even if information is public, privacy and consent matter. For sensitive use cases or profiles intended to be shared, obtain consent and avoid including sensitive personal data. Provide an opt-out mechanism and correction flow.

What happens when search or model APIs are down?

Implement cached snapshots and a fallback UI that explains the outage. Retry logic and graceful degradation keep the experience stable. Log errors and alert engineers so outages can be diagnosed quickly.

How much does this cost to run?

Costs depend on search volume, model calls, and image generation frequency. Caching, rate-limiting, and batching can reduce costs. Monitor usage and set budgets or alerts to avoid surprises.

Can the style of the output be customized?

Yes. Provide style examples and explicit instructions in your prompt (for tone, color palette, and UI layout). Maintain templates for different themes and keep a small library of example outputs to guide the model consistently.

Is this approach useful for education?

Absolutely. Visual, contextual summaries of topics like photosynthesis or Newton’s laws can boost comprehension for visual learners. Turning concepts into interactive or narrative formats helps explain complex ideas more intuitively.

What are the legal considerations?

Respect copyright when using text or images discovered during search, comply with site terms of service, and consider data protection laws for personal profiles. Track provenance to make it easier to remove problematic content if required.

Share this post

AI World Vision

AI and Technology News