Home / Art & Sprites / Visual Novel UI Kit Builder

Visual Novel UI Kit Builder

Download plain, exactly sized templates for every part of a visual novel UI, with a prompt for each. Decorate them in your favorite AI image tool, drop the results back, and get a cleaned, resized and 9-sliced kit you can preview on a mock game screen and drop into Ren'Py.

Border width
Roundness
Panel opacity

No AI or drawing needed: a theme gives you a complete kit right away. Any piece you add an image for below replaces the theme for that piece.

Each template is the exact size the game needs. Give it to an AI image tool such as ChatGPT or Gemini with its prompt, ask it to decorate the template, and save what it makes.

Drop the decorated images here
Files named like the templates (textbox, namebox, choice_idle…) find their place by themselves

Draw or generate the base picture on the silhouette, then ask the AI to change only the face for each expression. Name the files by expression: neutral, happy, sad, angry, surprised, shy, thinking.

Drop this character's pictures here
the first or the one named neutral becomes the base
Face left/right
Face up/down
Face size

Unzip into your Ren'Py project's game folder and let it replace the gui images. Add gameshipkit_gui.rpy next to them: it sets the sizes, text positions and 9-slice borders to match.

Pro · the same kit for Godot 4 (StyleBoxTexture resources with 9-slice margins) and Unity (sprites plus border values for the Sprite Editor), and a full 2560×1440 kit for sharp 1440p and 4K screens. See plans

AI draws the art, this tool does the fitting

AI image tools are great at making ornate frames and menus, but what they give back is never the size a game needs. They change the canvas, paint a white or fake checkerboard background, and draw borders that stretch badly. This tool handles the dull part. It gives you plain templates at the exact sizes a visual novel uses, with a prompt for each one. When the decorated images come back, it removes the background, trims and resizes each piece to its slot, sets 9-slice borders so boxes stretch without warping, and shows the whole UI on a mock game screen before you export.

What is in the kit

PartRen'Py file
Dialogue box and name plategui/textbox.png, gui/namebox.png
Choice buttons, normal and hovergui/button/choice_idle_background.png, choice_hover_background.png
Menu buttons, normal and hovergui/button/idle_background.png, hover_background.png
Save slots, normal and hovergui/button/slot_idle_background.png, slot_hover_background.png
Confirm window and notificationgui/frame.png, gui/notify.png
Title and menu backgrounds, side panelgui/main_menu.png, gui/game_menu.png, gui/overlay/main_menu.png, gui/overlay/game_menu.png
Slider bar and handlegui/slider/horizontal_idle_bar.png, horizontal_idle_thumb.png

Characters and expressions

Add a character and pick a framing: full body, knee up or bust, and a height. The tool gives you a canvas the right size for your screen with a gray silhouette and guide lines for the head, eyes, shoulders and feet, plus prompts. Draw or generate the character on the silhouette, then ask the AI to change only the face for each expression. Drop all the pictures back. The tool removes the backgrounds, fits the base to the silhouette and lines every expression up with the base, because AI tends to move or resize the character a little each time. When only the face changed, it cuts the face out and exports a body image plus face images as a Ren'Py layeredimage, which is smaller and keeps the body identical between expressions.

Emotion effects add a blush, a sweat drop, tears, an anger mark, shock lines or a gloomy shadow on top of any expression, drawn by the tool, so even one picture can show many moods. Side images crop the face for the corner of the dialogue box. The export adds the images with Ren'Py names, a characters.rpy file with the Character and layeredimage definitions and a short demo scene. Free covers one character, Pro covers a whole cast.

Tips for good AI results

Ask the AI to keep the same size and shape, keep the middle plain and dark so text stays readable, and leave the outside transparent or plain white. Give every piece the same style sentence so the kit matches. If a frame comes back with a busy middle, lower Inner opacity for that piece. If you skip the hover images, the tool makes a brighter hover version from the normal one.

Is anything uploaded?

No. Templates are drawn and AI images are processed in your browser. Nothing is sent anywhere.