Paper Tots on three devices: the landing page headlined “Stories for the kid you know best,” the phone step where a story's beginning and middle are mapped out, and the edit panel for a two-page classroom spread with per-character and background controls.

Paper Tots

Visit website

AI-generated children's books that turn a kid's imagination into an illustrated storybook.

When
May 2026 – Present
Who
  • Design
  • Engineering
  • Marketing
What
  1. 01

    Designed end-to-end story creation e-commerce experience as sole and founding designer

  2. 02

    Curated personalized and self-evaluating AI image generation as an internal workflow

  3. 03

    Created token-based design system for faster iteration and engineering handoff

Problem definition
Business problem

Paper Tots is a bet that story creation is headed toward something more personal and hands-on.

User problem

Mainstream children's books today only somewhat relate to a family's characters, stories, or circumstances.

Getting to the problem statements

Subject matter experts
Product marketingSEOParentsChild therapistsStartup founders
Process
Project brief (.md)
Claude + Gemini
Interview script
On the record
The ManyTales User Interview Guide: a two-part shadowing session (Part 1, creation; Part 2, view and edit), with facilitator role, recording, and key research goals laid out in a table.
Internal interview guides
A recorded interview, “Product Marketing around AI Children's Stories,” with an AI-generated summary panel alongside the video.
Video learnings and AI documentation

The user journey

Story-making is intentionally simplified. Characters are created first as a quick, visual hook made within minutes. The story prompt welcomes anything from a simple phrase or a full paragraph, and all inputs are translated it into a coherent story flow. Editing is included so the family can make publish-ready edits, in anticipation of AI's variability.

Step 1 · 2 min — Add your characters. A generated child character over faint story text: “Kelly is a young Black girl with big dreams. She is always wearing colorful star-shaped hair clips.”Step 2 · 5 min — Write your story idea. Faint italic story text: “Little girl meets astronaut guest speaker, Erin, at a space museum. Inspired by Erin and a room full of stars, the girl promises herself she'd work hard to make her dream come true.”Step 3 · after 15 min — Admire your custom story. A finished illustrated spread: a girl reaching toward a room full of glowing stars, beside the page text.Step 4 · optional — Fine tune the images and text. A “Regenerate full pages” prompt (“Add a purple backpack on Erin”) beside the character and the backpack it generated.

The home page

The home page serves as a hook to delight and educate families about the AI storybook product.

Design system

I set a design system alongside Google Stitch to visualize a concept then Claude Code to tokenized. Styles were migrated to Figma for manual evolutions of designs.

A Google Stitch-generated type scale spec: Display Hero, Display H1, Display H2, Body Large, Body Medium, Body Small, a Par Header style, and an uppercase Body Label, each shown at size with its own sample line.
Type scale
A Google Stitch-generated color ramp: Ink from 900 to 200, Cream from 300 to 50, Marigold from 700 to 200, Coral from 500 to 100, a single Sage 700, and a white Base.
Color palette
The Figma Design panel with the same type scale and color ramp rebuilt as named styles: Display and Body text styles listed from Hero down to Body Small Label, and color styles running from Ink 900 through Marigold.
Styles migrated to Figma

A design system a coding agent keeps honest

Smoother handoffs

Color, typography, and all other components are tokenized. This makes for quicker deliveries and iterations.

Dynamic state management

All different variants of components are viewable. Design decisions affecting one state cascade to all related modules.

Scaled across devices

One layout flexes fluidly across web, tablet, and mobile.

Content Guidelines

I provided my own writing examples to a custom AI skill to build a content brand guide based on the specialized family audience.

Image stabilization

Stories are generated in stages. Characters appear first, separate from the story text. Precise prompts are used to get the generation just right according to story inputs like age, illustration style, or genre. All inputs are self-evaluated until they meet a quality threshold weighed against cost.

Each page is designed and self-validated against character, setting, and prompt references

Image styling

Same prompt

The scene is of a monkey playing with a little Mexican boy. They are playing with a deck of cards on a picnic blanket. The background is a cozy forest on a warm summer day.

Different inputs and outputs
Prompt spec — input
Primary medium
Modern Digital
Linework style
Clean, solid ink outlines
Color strategy
Bright, distinct families
Texture density
Low (Smooth fills)
Visual medium
  • Clean digital 2D illustration.
  • Clearly drawn and illustrated, never photographic or 3D.
…
Linework
  • Use clean, solid, confident ink outlines with a uniform weight.
  • Use medium-weight lines that remain clear without becoming heavy, sketchy, or harsh.
…
Rendered output
The Cartoon example render: a boy and a monkey sitting on a patterned picnic blanket in a sunlit forest, playing cards, in a clean bright 2D cartoon style.

Refine prompts: from Claude to Claude Code

When a 3D page flip animation returned clunky after several reprompts, I researched the topic more deeply through AI.

Built directly on the CSS from Sebastien Castiel's 3D book generator (https://scastiel.dev/3dbook/), adapted for Paper Tots.
It already constructs the actual book geometry, front cover, back cover for thickness, a page-edge side face, in plain CSS 3D transforms. …
V1: jarring animation that crops off the page
V2: smoother, more realistic animation style

Precise AI editing

Editing tooling is needed since AI inevtably makes mistakes. This feature needed to be very simple to use plus capture most use cases for image and copy changes.This was also an exercise to balance the cost of edits.

The “What would you like to change” panel: a prompt field with example requests, Mei/Dad/Background tags, a Select area tool, and Regenerate full pages with a changes-remaining counter.The spread being edited: a girl and her father at a lantern-lit street festival, drums sounding behind them, mid-conversation about her uncle in the parade.

Scaling brand and marketing

The design system and brand was scaled across: physical and digital, static and animated, in-product and marketing.

The Paper Tots logo: a golden potato character wearing an open navy book as a hat.
Brand logo
Loading animation
The order confirmation email: “Order confirmed.”, an order summary block, the line “Your book is being made right now. You'll get an email the moment it's ready to read, usually within 30 minutes,” and a View your order button.
Email
A Paper Tots poster: the wordmark over “family-friendly imagination on the page”, a first-100-customers offer of half off the first book with the code MYBOOK, a QR code, and the mascot above PaperTots.com and @PaperTots_Books.
Promotional poster
The Paper Tots business card: the wordmark and “from your kid's imagination to the page” on navy, with the mascot, PaperTots.com, @PaperTots_Books and a QR code on cream.
Business card
What I learned
Empathize with new audience

Lead research to understand the nuanced and diverse relationships the kid audience have with their parents and emerging technology

Understand metrics deeply

Startup margins are incredibly thin, which warrants a deep understanding of balancing AI generation tokens, marketing costs, and conversion rates

Build integrated AI workflow

AI is incorporated in every phase of the workflow to make ideation, validation, design, and handoff more efficient