<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Kissada-W</title>
    <description>The latest articles on DEV Community by Kissada-W (@kissada-waravit).</description>
    <link>https://dev.to/kissada-waravit</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2037593%2F7c8df708-cb62-4179-a194-7afefac47554.webp</url>
      <title>DEV Community: Kissada-W</title>
      <link>https://dev.to/kissada-waravit</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/kissada-waravit"/>
    <language>en</language>
    <item>
      <title>Ancient Hero Dossier | Nonanyt</title>
      <dc:creator>Kissada-W</dc:creator>
      <pubDate>Thu, 10 Jul 2025 17:37:32 +0000</pubDate>
      <link>https://dev.to/kissada-waravit/ancient-hero-dossier-nonanyt-30h7</link>
      <guid>https://dev.to/kissada-waravit/ancient-hero-dossier-nonanyt-30h7</guid>
      <description>&lt;p&gt;&lt;em&gt;This post is my submission for &lt;a href="https://dev.to/deved/build-apps-with-google-ai-studio"&gt;DEV Education Track: Build Apps with Google AI Studio&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;I built the &lt;strong&gt;Ancient Hero Dossier&lt;/strong&gt;, an RPG character generator that combines Google AI Studio's Gemini with character art generation to create unique fantasy characters. The app generates detailed character cards with Roman-themed identity documents that pop up when you click the info icon, creating an immersive ancient world experience.&lt;/p&gt;

&lt;p&gt;The key innovation was using structured prompting to make Gemini act as "Aelius," an expert world-builder who creates characters following a specific Roman identity card format (Tabula Identitatis), complete with fields like NOMEN, GENUS, ORIGO, and VIRTUTES.&lt;/p&gt;

&lt;h3&gt;
  
  
  The Master Prompt
&lt;/h3&gt;

&lt;p&gt;Click to see the detailed prompt I used&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight markdown"&gt;&lt;code&gt;[CONTEXT]
You are an expert world-builder and RPG master named "Aelius," tasked with creating character dossiers for a new fantasy game set in a world with Greco-Roman influences. Your creations must be unique, imaginative, and detailed.

[TASK]
Your main task is to generate a complete character profile based on a user's initial idea. This profile will be divided into three parts:
&lt;span class="p"&gt;1.&lt;/span&gt; A short, engaging summary for a character card.
&lt;span class="p"&gt;2.&lt;/span&gt; A detailed dossier formatted like an ancient Roman identity document (Tabula Identitatis).
&lt;span class="p"&gt;3.&lt;/span&gt; A highly descriptive prompt suitable for a text-to-image AI (like Imagen) to generate the character's portrait.

[INPUTS]
You will be given a basic character idea from the user.
&lt;span class="p"&gt;-&lt;/span&gt; character_idea: {{character_idea}}

[OUTPUT FORMAT]
You MUST provide the output in a single, valid JSON object. Do not write any text outside of the JSON structure.
The JSON structure must be as follows:
{
  "summaryCard": {
    "name": "Character's Name",
    "class": "Character's Class or Title",
    "quote": "A short, impactful quote from the character.",
    "description": "A brief (2-3 sentences) public-facing description of the character."
  },
  "romanDossier": {
    "NOMEN": "Full Name (e.g., Kaelus Vorenus)",
    "GENUS": "Race / Species (e.g., Human, Elf, Dwarf, Orc)",
    "ORIGO": "Origin / Hometown (e.g., From the Sunstone Peaks)",
    "PROFESSIO": "Profession / Role (e.g., Legionary, Senator, Mystic)",
    "VIRTUTES": {
      "Strength": "A value from 1-10",
      "Perception": "A value from 1-10",
      "Endurance": "A value from 1-10",
      "Charisma": "A value from 1-10",
      "Intellect": "A value from 1-10"
    },
    "HISTORIA": "A slightly more detailed background story or a notable achievement.",
    "SIGILLUM": "Description of their personal seal or symbol."
  },
  "imagePrompt": "A detailed, descriptive prompt for an image generator. Include keywords like character appearance, clothing, style (e.g., 'oil painting', 'fantasy art'), lighting (e.g., 'cinematic lighting'), and details (e.g., 'highly detailed', 'sharp focus')."
}

[EXAMPLE]
If the user input for character_idea is "An old, blind oracle living in a swamp", your output should be a complete JSON object following the specified structure. Be creative.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;
&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Character Card Generation
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvhcu7m4axi2f6dlwgxk1.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvhcu7m4axi2f6dlwgxk1.jpg" alt="Ancient Hero Dossier Character Card"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Roman-Themed Information Dossier
&lt;/h3&gt;

&lt;p&gt;When you click the info icon, a detailed dossier appears, styled as an authentic Roman identity card with all character information beautifully formatted:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9q4c4uegzbq134pxqibr.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9q4c4uegzbq134pxqibr.jpg" alt="Image-screenshot"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fil0w900ry0mccp0knquq.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fil0w900ry0mccp0knquq.jpg" alt="Image-screenshot"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Try it yourself:&lt;/strong&gt; &lt;a href="https://aelius-rpg-character-generator-368792602960.us-west1.run.app/" rel="noopener noreferrer"&gt;Ancient Hero Dossier Live App&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;AI Studio Google:&lt;/strong&gt; &lt;a href="(https://aistudio.google.com/u/1/apps/drive/1izUS9dO7C7TV-VZElEmLjOIcutXAzvNo?showFileTree=true&amp;amp;showPreview=true&amp;amp;resourceKey=&amp;amp;showTreeView=true&amp;amp;showCode=true)"&gt;View on Google Studio&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Source Code:&lt;/strong&gt; &lt;a href="https://github.com/Kissada-W/ancient-hero-dossier" rel="noopener noreferrer"&gt;View on GitHub&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Installation and Setup
&lt;/h2&gt;

&lt;p&gt;For detailed instructions on setting up the project, refer to the &lt;a href="//INSTALL.md"&gt;INSTALL.md&lt;/a&gt; file. It includes steps for installing Bun, configuring environment variables, and running the project locally.&lt;/p&gt;

&lt;h3&gt;
  
  
  Additional Notes
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Ensure that the &lt;code&gt;.env.local&lt;/code&gt; file is properly configured with your &lt;code&gt;GEMINI_API_KEY&lt;/code&gt;. This file contains sensitive information and should not be shared or committed to version control.&lt;/li&gt;
&lt;li&gt;Use Bun for all package management tasks, including installing dependencies, running the development server, and building the project.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Features
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Generate Roman-themed RPG character dossiers.&lt;/li&gt;
&lt;li&gt;Structured prompting for Google AI Studio's Gemini.&lt;/li&gt;
&lt;li&gt;Immersive character cards with detailed identity documents.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Prerequisites
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Node.js&lt;/li&gt;
&lt;li&gt;Bun (for package management)&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Running the Project
&lt;/h2&gt;

&lt;p&gt;For detailed instructions, refer to the &lt;a href="//INSTALL.md"&gt;INSTALL.md&lt;/a&gt; file.&lt;/p&gt;

&lt;h3&gt;
  
  
  Key Features
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;AI-Generated Character Art&lt;/strong&gt;: Each character gets unique artwork&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Roman Identity Cards&lt;/strong&gt;: Detailed dossiers formatted as ancient Roman documents&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Structured Character Stats&lt;/strong&gt;: Includes Strength, Perception, Endurance, Charisma, and Intellect&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Responsive Design&lt;/strong&gt;: Works seamlessly on desktop, tablet, and mobile&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Thematic UI&lt;/strong&gt;: Parchment textures, Roman fonts, and gold accents&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  My Experience
&lt;/h2&gt;

&lt;p&gt;Working on this project taught me the incredible power of &lt;strong&gt;structured prompting&lt;/strong&gt;. The biggest surprise was how accurately Gemini could interpret and consistently follow the Roman identity card theme when given clear, detailed instructions.&lt;/p&gt;

&lt;h3&gt;
  
  
  Key Learnings:
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Prompt Engineering is Everything&lt;/strong&gt;: My initial vague prompts produced inconsistent results. Success came from breaking down requests into specific, structured instructions. For example, explicitly defining Roman fields like 'NOMEN' (Name), 'ORIGO' (Origin), and 'VIRTUTES' (Virtues) yielded much more consistent outputs.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;JSON Structure for Consistency&lt;/strong&gt;: By requiring Gemini to output structured JSON with specific fields, I eliminated formatting inconsistencies and made the data easy to parse and display.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Iterative Refinement&lt;/strong&gt;: The app evolved through multiple prompt iterations. I started with a basic character generator and gradually added the Roman theming, responsive design, and detailed character statistics.&lt;/p&gt;

&lt;h3&gt;
  
  
  Most Surprising Discovery:
&lt;/h3&gt;

&lt;p&gt;Gemini's ability to maintain thematic consistency across different character types while following strict formatting rules was remarkable. Whether generating a "blind oracle in a swamp" or a "Roman legionary," it consistently produced authentic-feeling Roman identity documents with appropriate Latin terminology.&lt;/p&gt;

&lt;h3&gt;
  
  
  Technical Challenges Overcome:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Responsive Design&lt;/strong&gt;: Ensuring the Roman-themed UI worked across all device sizes&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Prompt Optimization&lt;/strong&gt;: Balancing creativity with structural requirements&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;UX Flow&lt;/strong&gt;: Making the info popup intuitive and engaging&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This project demonstrated how combining AI creativity with structured prompting can create genuinely engaging user experiences that feel both authentic and innovative.&lt;/p&gt;




</description>
      <category>deved</category>
      <category>learngoogleaistudio</category>
      <category>ai</category>
      <category>gemini</category>
    </item>
  </channel>
</rss>
