Hapi AI · Tencent
Hapi is an AI mini-game community inside WeChat, where people play games and write new ones. I designed AI-assisted creation, game interactions and visual assets, helping players become authors without giving the authorship away.
- Role
- UI/UX Design Intern
Tencent PCG - Timeline
- May–Aug 2025
- My work
- Creation flows · Game UI
Visual assets & workflows - Collaboration
- Design mentor · PM
Frontend engineers
Hapi was already live. I extended its existing interaction and visual rules; the main interface, Turtle Soup gameplay, multiplayer story mode and marketing were teammates’ work.
Lower the floor without lowering the ceiling.
A first-time creator needs help getting started. An experienced writer needs room to shape the result. I kept AI generation and manual editing in one working view, so both could use the same flow.
- You
Your idea
Start with a story seed.
- AI
A first draft
Generate the truth and puzzle.
- You + AI
Make it yours
Edit fields and individual clues.
- You
Ready to play
Name it, then create.
Turn a story idea into a playable mystery.
Turtle Soup is a mystery game solved through yes-or-no questions. I broke writing into the hidden truth, what players see, and the clues, then gave creators control over each part.
Start with the story, not a blank form.
The creator supplies an idea. AI drafts the hidden truth and the puzzle prompt together, making the relationship between them visible.
View complete creation form
Original interface designs · Select a step to inspect the design decision.
Keep an unfinished draft recoverable.
I designed progress, cancellation, draft-saving and failure states before handoff, so the flow covered more than a successful generation.
Make the next move clear inside the game.
For RPG combat, I designed the action controls, turn feedback and character details. The main action stays visible; battle logs and attributes expand when a player needs more context.
Original RPG UI designs · Actions, feedback and optional detail remain part of the game world.
Show what the image generator is doing.
I designed the prompt-to-image flow with visible generation progress, a failed-result state and image selection. Creators can understand the current state before choosing what to use next.
Extend Hapi’s identity through a shared visual system.
I carried the product’s dark surfaces, translucent layers and luminous accents into game controls, badges and feedback. Each asset needed its own character while still belonging to the same product.
Keep the world visible
Dark and translucent surfaces hold the controls without losing the game environment.
Give actions a clear signal
Luminous accents distinguish an available action from a disabled control.
Repeat the visual grammar
Shared geometry, highlights and materials connect badges, icons and feedback.
Redesign the leaderboard to match Hapi’s design system.
I reworked the earlier frame around Hapi’s translucent surfaces, shared controls and icon treatments. A larger game cover establishes the game’s identity; the ranking list uses a consistent visual hierarchy.
- Match the materials
- Replace the solid white tab and lime row highlights with frosted controls and subtle gradients.
- Separate rank from identity
- Use compact badges for the top three without framing the avatars. Repeat one flame icon for popularity.
- Clarify the list
- Start with first place and move the current player’s position into a separate bottom row.
Give each quiz a distinct visual voice.
I designed illustrated options for a nine-grid quiz, using different shapes, colors and textures to express each topic. The repeated question-and-choice structure keeps the experience familiar across the sets.
- Explore with AI
Styles, effects, moodboards
- Refine by hand
Shape, detail, consistency
- Prepare for build
Reusable production assets
Make the next map easier to produce.
The initial task called for cloud overlays drawn for individual map regions. I proposed simple scripting with Figma masks and cloud textures, making the process reusable across map shapes. Design and development adopted the workflow.
- 01
Define the region
Use the map shape as the boundary.
- 02
Apply texture through a mask
Reuse the cloud treatment across regions.
- 03
Refine and hand off
Adjust the edge and preserve the reusable setup.
From design to internal testing.
The creation flow reached internal testing before my internship ended. I also delivered icons, illustrations, game backgrounds and motion assets, and contributed a reusable map-overlay workflow.
Can someone who didn’t write the mystery understand and solve it?
A generated draft is a starting point. The next test is whether creators can revise it and whether it works for other players.