Xiao Zi and Coda: Giving ZiCode Two Recurring Cartoon Characters
· 42 min read · Views --

Xiao Zi and Coda: Giving ZiCode Two Recurring Cartoon Characters

Author: Alex Xiang


:::post-site-intro The little programmer in the cover images has become increasingly useful.

He has slightly messy black hair, round glasses, and a teal hoodie. He looks like someone who has just finished writing a small tool and is about to turn the process into a blog post. He used to be only a cover character. Now I want to give him a formal name: Xiao Zi.

Since the site is called ZiCode, having only Xiao Zi appear felt a little thin. So I used the same method to add a female character: Coda, who can also be called Xiao Ma in Chinese. She is not a female version of Xiao Zi, but another creative partner with a very different temperament. Xiao Zi leans toward engineering; Coda leans toward visuals and product judgment. One feels like he is debugging code, the other like she is setting direction. :::

Xiao Zi and Coda as the two ZiCode characters

This article is not about writing one magical prompt. The more I use AI image generation, the more I feel its real value is not occasionally drawing one impressive image, but whether it can stabilize a style, a character, and a series.

Blog covers especially need this. A good single image solves only one article. A recurring character can slowly become part of the site itself.

Why a Fixed Character Matters

Many AI covers are not ugly. They are simply too disposable.

Today the style is cyberpunk. Tomorrow it is watercolor. The day after that it becomes realistic photography. Each image may look fine in isolation, but when placed in the same blog list, the site feels scattered. At a glance, readers cannot easily tell whether these posts belong to the same author, the same column, or even the same website.

A fixed character helps with this:

Design GoalWhat the Character Solves
RecognitionReaders can feel that an article belongs to ZiCode without reading the title
ContinuityDifferent topics can share the same visual tone
ExtensibilityLater covers, illustrations, stickers, and tutorial images can reuse the same system
Lower costEach image no longer needs a new visual world from scratch

But a fixed character also has a cost. The prompt cannot merely say “a cute programmer.” That is too broad. The model will improvise every time: the face changes, the clothes change, the age changes, and sometimes even the art style changes.

So the prompt for Xiao Zi has to lock several things: hair, glasses, clothing, materials, scene atmosphere, and what must not appear.

Xiao Zi: Pin the Character Down First

Xiao Zi’s character setup is simple. He is not a superhero or an anime protagonist. He is more like someone who usually tinkers with Linux, writes scripts, builds tools, and writes blog posts.

I kept several fixed anchors:

  • Black fluffy short hair
  • Round black glasses
  • Teal hoodie with white drawstrings
  • Gentle, focused, and slightly curious
  • Semi-realistic 3D cartoon material
  • Warm off-white studio background with teal accents

These anchors are not complicated, but they must appear every time. Character consistency does not come from model memory. It comes from repeatedly reminding the model through the prompt.

Xiao Zi comparing cover directions at a prompt lab

Below is the prompt used for this solo Xiao Zi image. It is not short, but every section has a job.

Use case: stylized-concept
Asset type: high-resolution PNG inline blog image, 2:1 horizontal, polished semi-realistic 3D editorial cartoon.

Primary request: Show Xiao Zi alone testing prompt variants for blog cover generation.

Subject: recurring ZiCode male programmer mascot: young male programmer, black voluminous short hair, round black glasses, teal hoodie with white drawstrings, friendly expression. He sits at a clean desk with a pen tablet, several floating blank image thumbnails, small color chips, and a neat prompt notebook. He looks thoughtful, comparing two visual directions.

Scene/backdrop: warm off-white studio with teal accents, soft plant blur, same material quality as existing ZiCode covers.

Composition: Xiao Zi on left third, floating image-generation workflow cards on right, all cards blank or abstract with no readable text. Make it feel useful for an article explaining prompt iteration.

Quality: crisp high-resolution PNG, tactile 3D cartoon, natural hands, no readable text, no logos, no watermark, no distorted UI walls.

The most important parts are not generic quality words such as high-resolution, but several kinds of constraints.

The first is identity. recurring ZiCode male programmer mascot tells the model this is not a random programmer, but a character that will be reused.

The second is concrete features. Black hair, round glasses, and a teal hoodie matter more than abstract words such as “young,” “cute,” or “programmer.” Abstract words drift. Specific objects drift less.

The third is the scene. Warm off-white studio, teal accents, and soft plant blur prevent the image from suddenly becoming a dark server room, futuristic city, or game poster.

The fourth is negative constraints. no readable text is important. Once AI-generated images contain text, it easily becomes broken glyphs. Blog images can have cards, screens, and whiteboards, but it is usually better to keep them abstract rather than asking the model to write real words.

The New Character Cannot Be Just a Female Xiao Zi

Once Xiao Zi existed, the laziest way to create a second character would be to turn Xiao Zi into a woman, change the hairstyle, and keep the same clothing color.

I do not like that approach. When two characters stand together, if their silhouettes, clothes, and personalities are too similar, the image becomes flat. Worse, the characters have no division of labor, so readers cannot remember them.

So Coda was designed in the opposite direction from the start.

Xiao Zi has a soft hoodie, round glasses, and an engineer temperament. Coda is more like a sharper visual director. She does not wear glasses. She wears a cropped light technical jacket over a coral top, with a hairpin, earrings, and a stylus as identifying details. She looks like someone who would stand in front of a board and say, “This image is not accurate enough. Let’s do another version.”

The name also connects to the site. ZiCode can be split into Zi and Code. Coda sounds close to Code and also means an ending passage in music. The Chinese nickname Xiao Ma also feels natural. Xiao Zi plus Xiao Ma becomes ZiCode.

Coda character portrait

Coda’s character prompt:

Use case: stylized-concept
Asset type: high-resolution PNG character portrait / inline blog image, vertical 3:4 composition, polished semi-realistic 3D editorial cartoon.

Primary request: Create the new ZiCode female character Coda, also called Xiao Ma, as a clean character design portrait.

Subject: Coda is a young female creative engineer, attractive, confident, professional; shoulder-length warm chestnut hair with a sleek side part; bright expressive eyes, no glasses; ivory cropped technical jacket with subtle pockets and zipper details over a deep coral top; dark tailored utility pants; small teal hairpin, metallic bracelet shaped like code braces, small geometric earrings. She holds a stylus in one hand and a small transparent prompt card in the other, with no readable text.

Backdrop: warm off-white studio background with subtle teal accent shadows, a simple standing desk edge and soft plant blur, same ZiCode 3D cartoon world as Xiao Zi.

Mood: complementary contrast to Xiao Zi's teal hoodie: sharper, more design-forward, warmer accent color, elegant and energetic.

Quality: crisp, high resolution, tactile materials, balanced proportions, natural hands, no text, no logos, no watermark, no cropped head, no extra fingers.

I deliberately added complementary contrast here. That is more accurate than simply writing “same style.”

The two characters need to live in the same world, but they cannot look as if they came from the same template. Xiao Zi’s keywords are teal hoodie, round glasses, and friendly; Coda’s are ivory technical jacket, deep coral top, stylus, and design-forward. Their colors, props, and professional posture are different, which gives the pair tension.

A Character System Only Works When They Stand Together

A character looking good alone is not enough. The harder part is a two-person image.

Two-person images often have problems: inconsistent body proportions, colors leaking between outfits, distorted hands, the image looking like a couple portrait, too many props, or text filling the frame.

So the prompt for a two-person image needs to make three things explicit:

  1. Who each person is.
  2. What their relationship is.
  3. What workflow the image should express.

I did not want Xiao Zi and Coda to look like they were merely posing. A better image shows them pushing an idea from sketch, to prompt, to generated image, to blog page.

Use case: stylized-concept
Asset type: high-resolution PNG hero cover for www.zicode.com blog, 2:1 horizontal, polished semi-realistic 3D editorial cartoon.

Primary request: Create a ZiCode character-system hero image featuring two original recurring blog characters: Xiao Zi and Coda.

Reference context: Xiao Zi is the recurring ZiCode male programmer mascot: young male programmer, black voluminous short hair, round black glasses, teal hoodie with white drawstrings, friendly expression, warm skin, semi-realistic 3D cartoon rendering.

New female character: Coda, also called Xiao Ma. Young female creative engineer, attractive but professional, shoulder-length warm chestnut hair with a sleek side part, confident bright eyes, no glasses, cropped ivory technical jacket over a deep coral top, dark high-waisted utility skirt or tailored pants, small metallic code-bracelet and teal hairpin; elegant, energetic, contrasting Xiao Zi's soft hoodie look.

Scene/backdrop: warm off-white editorial studio with subtle teal depth, soft shadows, a clean desk-like platform holding a camera, stylus tablet, terminal blocks, color swatches, and image-generation thumbnails as blank cards.

Composition: Xiao Zi on left-middle, Coda on right-middle, both looking like a coherent duo for a tech blog brand; central object is a small glowing 3D creative pipeline sculpture connecting sketch, prompt card, rendered image, and blog page. Leave enough whitespace for blog crop, strong focal point, not crowded.

Style: same ZiCode semi-realistic 3D cartoon style, tactile materials, crisp high clarity, friendly but mature. No readable text, no logos, no watermark, no speech bubbles, no distorted hands, no cropped faces.

The thing I care about most in this image is the “creative pipeline” in the middle.

It is not an object that would really sit on a desk. It is a visual metaphor: from sketch, to prompt, to generated image, to article page. For a blog, this carries more information than simply drawing two people standing there.

Coda arranging prompts into a character style board

A Reusable Character Prompt Template

Summarizing this process, I would split character-image prompts into five layers.

LayerWhat to SpecifyXiao Zi / Coda Example
IdentityWho the character is and where they will recurZiCode recurring mascot
FeaturesHair, glasses, clothes, props, colorBlack hair, round glasses, teal hoodie; chestnut shoulder-length hair, ivory jacket, coral top
WorldLight, background, material, visual styleWarm off-white studio, semi-realistic 3D, tactile materials
TaskWhat this image does in the articleCover, character portrait, process illustration, scene image
ConstraintsWhat should not appearNo text, no logo, no watermark, no distorted hands, no cropped face

For future ZiCode images, I do not need to start from scratch. I can keep the identity, feature, and world layers, then replace the task layer.

For an article about command-line tools, Xiao Zi can debug in front of a terminal. For an article about design tools, Coda can arrange a style board. For a full project retrospective, both of them can break down a process in front of a whiteboard.

Xiao Zi and Coda in a night creative studio

Character Settings Should Be Maintained Like Code

I used to judge covers mostly by one question: does this image look good?

Now I ask another question: can this image become part of a long-term system?

If the answer is no, it may still be a nice picture, but it does not accumulate value for the blog’s brand. Next time, everything starts over.

So I will maintain a simple character sheet for Xiao Zi and Coda:

ItemXiao ZiCoda / Xiao Ma
Core temperamentEngineering, curiosity, gentlenessDesign, judgment, sharpness
Fixed hairstyleBlack fluffy short hairChestnut shoulder-length side part
Fixed clothingTeal hoodieLight technical jacket, coral inner top
Identifying propsRound glasses, notebook, terminal cardsHairpin, stylus, style board
Common scenesCoding desk, script experiments, tool breakdownsVisual boards, product sketches, creative workflows
Not recommendedDo not turn him into a suit, armor, or robotDo not make her a gender-swapped Xiao Zi

This is a little like interface constraints in code. It is not meant to limit creativity, but to keep each variation within a controllable range.

Characters can change scenes, actions, and topics. But their face, temperament, and clothing anchors should not jump randomly every time. Only then will readers eventually feel: yes, these are the two characters of ZiCode.

What Comes Next

Xiao Zi and Coda are only the first step. The interesting part is putting them into more specific scenes.

For example:

  • Xiao Zi debugging an image tool in WSL while Coda checks the output ratio.
  • Xiao Zi writing command-line scripts while Coda turns the result into a tutorial cover.
  • The two of them breaking down the structure of a long article in front of a whiteboard.
  • Coda appearing alone in articles about design, writing, and content production.
  • Xiao Zi appearing alone in articles about programming, Linux, automation, and toolchains.

In this way, ZiCode is not only a text site. It can slowly develop its own visual world.

I am not sure what these two characters will become later. Perhaps they will look more and more like recurring actors in the blog. Perhaps they will gain more props and scenes. But at least now, Xiao Zi is no longer an unnamed programmer in a cover image, and Coda is not a temporary side character.

Together, they form a character system ZiCode can keep using.