The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Every year, I build a design advent calendar to push my creative limits.
Creating an interactive advent calendar has been my personal creative tradition for several years. For my latest iteration, the goal was to evolve this tradition by building an interface that truly feels alive.
I designed and engineered the "Summer Font Advent"—a motion-rich Single Page Application (SPA). Moving away from standard static screens, I built an immersive experience utilizing a continuous looping video background, tactile 3D CSS card reveals, and seamless state transitions without any page reloads.
I wanted to test the limits of modern AI tools to see if they could handle the complex front-end logic of my annual project. The initial workflow started with the visual concept and asset creation in Figma.
When the direct .fig import into Google Stitch couldn't fully parse my custom layout (due to raw files lacking strict design tokens), I had to pivot my strategy. As a designer, real-world workflows require adaptability.
I shifted to a prompt-driven engineering workflow. I used Stitch’s in-place AI edits and conversational prompting to manually orchestrate the experience. By feeding the AI my assets and guiding it step-by-step, I was able to build the HTML-native motion, ensure a fully responsive layout, and map out the complex state logic state-by-state.
The Outcome
Stitch proved to be a powerhouse for prototyping complex state logic and native HTML motion. Orchestrating the interactive states and fluid transitions through conversational prompting felt like magic and completely elevated the project.
To bring the project to the finish line, I used Stitch's export integrations to push the polished, heavy-lifting code into Lovable for the final, pixel-perfect deployment. This project perfectly illustrates my approach to modern design: using AI not to replace the creative process, but to elevate it into a living, tactile interface.
Tools & Tech Stack
Figma (Visual Design & Asset Generation)
Google Stitch (State Logic, Layout & Native HTML Motion)
Lovable (Final Build & Deployment)
Link https://adventbykris.lovable.app
Stitch project https://stitch.withgoogle.com/projects/8912616702499530796
The UI feels highly usable while still maintaining a sleek visual identity.
Thank you!
What stood out to me was the pivot from the Figma import to a prompt driven workflow. That's usually where a lot of projects get stuck, but you found another path forward. Also love the idea of keeping a yearly creative tradition alive.
I explored a different direction for the...
on.contra.com
Innovative Travel App Prototype: Discover the Future of Trip Planning
Connect with next-gen talent and tools to get work underway. Hire more independents. Start more projects. Get more creative.
Take a bow — you absolutely crushed this.
🙏🙏🙏
love this! the colors are gorgeous for spring.
Yeeah. I love this color palette
Fantastic work🔥🔥👏👏
Thank you!
Next-level work! You genuinely outdid yourself here. 🚀🔥
Great job!
Wow, Kris, this is absolutely gorgeous! Continuing a yearly creative tradition is such an awesome way to push your boundaries, and the "Summer Font Advent" theme feels incredibly fresh.
Stunning execution! I also just submitted my project for the challenge, STALL, a Swipe-to-Shop...
on.contra.com
Swipe-to-Shop App Transforming Farmers Market Experience
Connect with next-gen talent and tools to get work underway. Hire more independents. Start more projects. Get more creative.
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
here's my submission for the @stitchbygoogle challenge 🌊
i built merch.so
the idea: instead of spending hours on canva or going back and forth with a designer, what if there was a site where you describe your merch, talk to an AI, get the exact print-ready file and send it straight to your designer?
that's merch.so
i spent 5+ hours building it and stitch did the heavy lifting. the UI came out clean, the animations were on point, pages actually feel alive as you move through them
color swatches that shift the whole page vibe. ai custom design studio. motion on every interaction
this is genuinely the future of building interfaces. faster than anything i've used before
https://stitch.withgoogle.com/projects/11752344657284248097
#GoogleStitch #BuiltWithStitch
Consider me a new fan of your work after seeing this.
🔗 Project Link
📝 What I Built
I built a Cold Lead Reactivation Dashboard designed to help businesses reconnect with inactive leads and bring them back into active conversations. The dashboard uses AI-powered lead scoring, lead activity tracking, and personalized outreach workflows to help sales and marketing teams focus on the opportunities most likely to convert.
📸 Screenshots / Recording
I have uploaded an overview screen recording demonstrating the complete dashboard experience, workflow navigation, and key features. The recording provides a better understanding of the user journey and overall functionality than static screenshots alone.
🛠️ How I Used Stitch
I used Stitch to design and prototype the complete dashboard experience. It helped me quickly create the layout, dashboard structure, workflow visualization, KPI cards, analytics sections, and overall user interface. This allowed me to focus more on the business workflow and user experience while rapidly iterating on different design ideas.
💡 Feedback on Stitch
My experience with Stitch was very positive. It made it easy to turn an idea into a professional dashboard prototype in a short amount of time. The interface is simple to use, and the AI-assisted design process helped generate layouts and components much faster than building everything manually.
One feature I particularly liked was the ability to preview designs across different screen sizes. Being able to switch between Mobile, Tablet, and Desktop views made it much easier to visualize the user experience and ensure the design remained responsive across devices.
Overall, Stitch is a great tool for quickly exploring ideas, creating prototypes, and validating concepts before moving into development.
Forget good, this is exceptional on every level.
We are LIVE with the Stitch Challenge!
$10k prize pool 💰 Unlimited possibilities 🚀
Everything you need to start creating is here -- we can't wait to see what you make!
Remember - all valid submissions must include:
- Link to your project or prototype
- Short written description of what you built
- Screenshots or screen recording of the experience
- Brief explanation of how you used Stitch
- Feedback on your experience using the platform
Trending
Claude
Claude has entered the design space. How are you using Claude Design?
Contra University
Learn from expert creatives how to earn more using next-gen AI tools.
creativeaiflow
Creative AI workflows are evolving. What tools do you use, and what are their strengths and weaknesses?
portfolioreview
The best portfolios tell a story, not just show a grid. Share yours for feedback.
freelancerlife
Freelancer life is wins, pivots, and everything in between. What’s yours right now?