For the #stitchchallenge, I wanted to explore how a custom wellness design system and simple canvas animations could make personal health tracking feel a bit more human. Link to Project / Prototype

👉 https://stitch.withgoogle.com/preview/12464568445820027715?node-id=60dad243795d426ca119b197ca27a5f4

📋 Project Description

Aura Health is a personal, mobile-first medical wallet designed to completely replace cold, sterile medical software with an approachable interface that balances ironclad data security with empathetic, mindful design. Built around the theme "interfaces that feel alive," Aura acts as a living chronological companion.

Instead of overwhelming a patient with dense tables, it dynamically surfaces upcoming care plans and extracts unstructured diagnostic documents. This transforms an inherently stressful task into a clean, reassuring, and intuitive daily habit.

🚀 How I Used Google Stitch

I leveraged Google Stitch as the structural centerpiece of my creative design process:

Design Token Initialization: I loaded a completely customized .md design system directly into Stitch. This established a premium typography hierarchy and a palette centered on calming alabaster creams, warm ochres, and coral accents, instantly mirroring the comforting aesthetics of world-class wellness products.

Layout Scaffolding via Streaming: I used the canvas streaming feature to spin up three core screens instantly: a master health dashboard, an active document ingestion scanner, and a secure provider vault.

In-Place UI Iteration & Refinement: Stitch’s in-place AI edit engine allowed me to run highly explicit prompt iterations to eliminate horizontal layout clipping, fine-tune container padding, and cleanly position floating action targets without disrupting the core design foundation.

🌊 Key Stitch Features Showcased

📄 Existing Design System Import: Allowed me to seamlessly map out a dedicated, organic mobile skin without manually setting individual element tokens.

🎥 Dynamic Motion & In-Place Tuning: I used Stitch’s HTML canvas engine to inject fluid micro-animations directly into the interface—crafting an undulating SVG health trendline, continuous breathing timeline nodes, and a live scanning laser overlay.

💭 My Experience & Feedback with Google Stitch

Google Stitch represents a massive leap forward in rapid interactive prototyping. The ability to declare a global design token structure via plain markdown and then immediately prompt elements into existence on a unified canvas speeds up product workflows exponentially.

What I Loved: The streaming generator and in-place prompting make the platform feel like a helpful design partner. Being able to refine components right where they stand saved me a lot of manual tweaking. I especially appreciated being able to add fluid motion directly into the layout.

Feature Requests for Future Releases: During generation passes, the flex engine can sometimes compress side-by-side elements unpredictably when text lengths change, so a simple layout constraint or minimum size lock would be wonderful. Additionally, having the option to occasionally click and manually drag an element to reposition it on the canvas, without needing to write a prompt, would make fine-tuning even faster.