Introduction

In a world filled with high-intensity progression loops, microtransactions, and infinite scroll layouts, how do we design spaces that encourage users to slow down, notice details, and learn at their own pace?

Enter Cabbits—a cozy, AI-native virtual companion experience. Rather than serving as a productivity tracker or a standard gamified app, Cabbits is an interactive study space where users help a rabbit-cat creature named Pip build curiosity by exploring logic, language, and reasoning in a handcrafted claymorphic valley.

In this article, we share how we designed the visual themes, structured the learning loops, and utilized an agentic programming workflow to build the Cabbits project.

Crafting a Handcrafted Claymorphic Aesthetic

The visual design system of Cabbits is modeled after handcrafted clay dioramas. Instead of using hard borders and clinical dark modes, we opted for a soft, warm beige and desaturated palette that feels like a physical toybox.

Key Elements of the Design System:

1. Low-Contrast Borders: We removed harsh pure-black borders (#000000) and replaced them globally with a warm, clay-brown divider color (rgba(74, 46, 27, 0.12)).
2. Tactile Shadowing: Soft, multi-layered vertical drop shadows simulate physical depth.
3. Double-Rounded Corners: Flat rectangles are rounded to 24px and 32px to give buttons, cards, and drawers a molded, soft feel.

Review

Cozy Bedroom Diorama Layout

Inside Pip's Cozy Bedroom: Warm lanterns, hand-carved shelves, and a sunny window view.

Micro-Animations

To make the interface feel alive, we replaced raw state changes with organic transitions:

• Interactive Hotspots: When you click action zones (like the Bed, Window, or Portrait), the camera pans and zooms using custom spring physics before navigating, creating the illusion of leaning closer to look.
• Tactile Press Effects: Buttons don't just flash on click; they scale and slide vertically (translateY) with soft easing, mimicking a squishy physical clay button being pushed.

🤖 The Generative AI Experience Loop

Rather than relying on static scripts, Cabbits' architecture is designed to accommodate dynamic generative content:

• Evolving Dialogue: Pip's greeting system synthesizes past quest journal entries and current weather patterns, creating highly context-aware reflections.
• Generative NPC Rewards: In a live database environment, NPCs (like the village Blacksmith) can generate custom JSON item schemas on the fly based on the child's learning highlights, awarding unique collectibles that populate the inventory instantly.
• Continuous Expansion: The Explore map dynamically draws locations from JSON metadata arrays. New landmarks and quests can be generated server-side and rendered automatically without front-end code rebuilds.

Collaborative Development: Human & AI Coding Agents

Beyond the game itself, Cabbits served as an experiment in human-agent pair programming. Instead of using AI as a simple autocomplete helper, coding agents acted as active architectural partners:

• Co-authoring Design Specs: Human and AI collaborated on specifying layout measurements and coordinate mappings for the cozy room's responsive viewports.
• Dynamic Refactoring: Agents refactored React state triggers, resolved Tailwind CSS specificity conflicts, and built an event-driven ambient audio persistence engine.
• Continuous Verification: Iterative compiler checkups ensured clean TypeScript code and static routing stability.

The project demonstrates that structured context engineering, clear guidelines, and human creative direction can produce software that is both technically sound and artistically distinctive.

Course Acknowledgement

Cabbits was developed as a submission for the 5-Day AI Agents: Intensive Vibe Coding Course With Google, exploring the cutting edge of human-agent collaboration and AI-native application design.