For this project, I picked Duolingo as my inspiration and challenged myself to go beyond recreating a landing page. I wanted to see if Stitch could help me break down an existing product, understand its visual language, and turn it into both an interactive experience and a reusable design system.
I started by studying Duolingo's branding, colors, typography, illustrations, and interaction patterns. After gathering references, I prepared assets for animations and planned out the sections I wanted to build before moving everything into Stitch.
From there, Stitch became the center of the workflow.
Using detailed prompts, I generated the initial layouts and refined them through multiple iterations. Being able to quickly regenerate sections, adjust layouts, and experiment with different directions made the process feel much more fluid than a traditional design workflow.
The final result consists of two connected projects:
>An animated Duolingo-inspired landing page with motion-rich sections and interactive elements.
>A complete design system and brand kit containing colors, typography, buttons, components, progress indicators, and reusable UI patterns.
Features I used during the project:
• Prompt-based UI generation
• Rapid design iteration and refinement
• Motion-rich interface design
• Design system creation
• Netlify export and deployment
Feedback on Stitch:
What impressed me most was how quickly Stitch helped me move from an idea to a polished interface. Instead of spending hours building layouts from scratch, I could focus on exploring ideas and improving the experience. The iteration speed made experimentation feel natural, and it was easy to test multiple directions before settling on the final design.
The Netlify export workflow was also surprisingly smooth, making it simple to turn the project into a live experience.
If there's one thing I'd love to see in future updates, it would be more granular control over interactions and animations directly inside the editor. That would make the jump from concept to production-ready experience even faster.
Overall, Stitch felt less like a tool for generating screens and more like a collaborative design workspace that accelerated the entire creative process.
Solid layout, Miguel! The contrast between the clean typography and those interactive bento-style cards is crisp. Building this layout with smooth CSS grid transitions or GSAP pin scrolling would make the UX feel incredibly interactive.
The Client: Alumo is a student impact fund that pools collective influence from influencers and partner schools to deliver a $250,000 annual grant program for student-led projects across Canada.
The Issue: The fund needed a website that could communicate trust and purpose to two very different audiences — students applying for grants and partner schools or influencers considering joining — while also showcasing past winners and guiding applicants through the process clearly.
The Solution: A multi-page website was designed with a warm, approachable visual identity using earthy tones, generous imagery, and clear information hierarchy. Each section — About, Past Winners, and How to Apply — was structured to reduce friction and build confidence, making it easy for students to understand eligibility and take action before the deadline.
Love how you're tackling trust + purpose for a $250K fund - that's a tough balance with two audiences. Communicating credibility for a student-led initiative across Canada is huge. Would love to see how you solved it!