Hapi AI

People who love playing rarely trust themselves to write. I designed AI-assisted creation flows that help them start while keeping the authorship theirs.

ROLE
UI/UX Design Intern · Tencent PCG
TIMELINE
May–Aug 2025
SCOPE
Four AI flows · Visual assets · Design-to-dev handoff
Hapi product context from the original portfolio
Hapi’s existing community and gameplay surfaces, shown for context. My anchor project was the creation flow.
the setup

Join the system. Then add to it.

Hapi was a live WeChat AI mini-game community when I joined. I examined what had shipped, asked the designers why decisions had been made, and learned the existing rules before extending the product.

what I owned

Four flows, with creation at the center.

My work covered Turtle Soup co-creation, RPG combat and dice, AIGC image generation, and a nine-grid quiz, with supporting 2D and 3D assets. I worked with a design mentor, PM and frontend engineers from wireframes through handoff.

Where my contribution sits

Hapi connects play, creation and return visits. The main interface, Turtle Soup gameplay, multiplayer story mode and marketing were other teammates’ work. Community screens in this case show that shared context.

the problem

Playing is familiar. Writing is a leap.

A Turtle Soup puzzle needs a true story, the incomplete version players see, and clues that guide without spoiling it. Fans know those rules through play; a blank creation form still asks them to become a writer all at once.

Three people to design for
Genre experts
Need speed and room for their craft.
Casual fans
Know the game but need help making a first draft.
The downstream player
Meets the finished story later and needs a puzzle that holds together.
the anchor

Lower the floor. Keep the ceiling.

I split co-creation into four sections and gave AI a different role in each. The creator owns the inspiration. AI can draft the solution and puzzle face. Clues stay adjustable one line at a time.

  1. 01

    Inspiration

    The seed stays entirely the creator’s.

  2. 02

    Solution

    AI drafts the true story; the creator edits.

  3. 03

    Puzzle face

    AI drafts what players see; the creator edits.

  4. 04

    Clues

    The creator sets the count; AI can rewrite each line.

decisions 1–3

Help at the scale the writer needs.

Four sections
The genre’s structure lives in the flow, with a different level of AI authority in each part.
Two ways to begin
Full generation and per-field rewriting share one screen. New writers and experienced authors can start where they are.
Title last
The hook emerges from the puzzle. Asking for its name at the end gives the writer something to name.
Six original Hapi Turtle Soup creation screens showing empty fields, generation, editable drafts and clues
Original creation screens: the same structure supports an empty start, generation, editing and completion.
decision 4

Protect the work when the flow breaks.

A player can try another puzzle. A creator who loses a draft may stop entirely. I covered draft saving, visible generation, generation failure, duplicate removal and the transition to done before handoff.

The six moments in the flow
Empty
Show the four-part structure and a single full-generation action.
Writing
Keep the seed idea in the creator’s hands.
Generating
Keep progress visible and cancellation reachable.
Clues
Let the creator set the count and rewrite individual lines.
Done
Ask for the title after the story takes shape.
Cancel
Offer to save the draft instead of losing the work.
the other three

The artifact gets the focus.

AIGC image generation
The image sits above the prompt; editing stays within thumb reach.
RPG combat and dice
Vertical, turn-based combat uses dice rolls for NPC decisions, supported by maps, icons and effects.
Mind Match
A nine-grid quiz uses distinct illustrated cells across four challenge sets.
Original Hapi RPG combat, badges, quiz illustrations and community-context boards
Original beta boards. RPG, badges and quiz work sit alongside shared community surfaces. Chinese product text is retained in these historical captures.
the asset pipeline

Fast concepts. Deliberate refinement.

I used AI to explore styles, effects and moodboards, then refined the output by hand. That process supported icons, game backgrounds, motion graphics and character illustrations, and gave development a more consistent handoff.

  1. 01

    AI concepts

    Explore direction and range.

  2. 02

    Human refinement

    Resolve the visual details.

  3. 03

    Production assets

    Prepare consistent files for development.

craft in practice

Make repetition easier to produce.

For RPG maps, I proposed a script-and-mask workflow for cloud effects instead of drawing every cloud manually. Design and development adopted it. For rankings, I compared three mockups and used frosted icons to clarify the top three while keeping the existing glass treatment.

Original Chinese-language Hapi RPG map exploration
Original RPG map exploration.
4AI-driven flows
5Recovery and completion states
50+Visual and motion assets

The asset set included 10+ 2D and 3D icons. The creation flow reached internal testing during my term.

Delivery and measurement context

Hapi was already live; my creation-flow work reached internal testing before I left. The 40% handoff-efficiency estimate in my materials refers to the broader design-to-development workflow across internship projects, rather than a measured result of this creation flow.

looking back

The story has a second user.

Design for the person who receives the output.
The eventual player never sees the creation tool, but depends on its result making sense.
Recovery belongs in the core flow.
Losing work can end a creator’s session. Edge states deserve the same attention as generation.
Test the story before publication.
I would add a read-through with unfamiliar players between generation and publishing. I had not observed that downstream experience before my internship ended.
NEXT PROJECTEazo AI