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
I sit in front of my laptop for hours and forget I have to move. So I built Echo: a small creature that lives on your screen while you work, and when you've been still for too long, it takes over your screen and makes you move, real movements, counted by your camera using Google's MediaPipe. It doesn't just remind you to move. It checks that you did.
The whole thing started in Wonder. I was lost on the idea until Wonder generated the character and the first real screens, and suddenly it all lined up. From there I built the entire design system inside Wonder : brand, logo, typography, buttons, inputs, the device, the landing page: iterating in Wonder Chat and using shader generation for the auras and glow that carry the creature's health.
Then I connected Wonder's MCP to Claude. It read the designs straight from the Wonder file and wired up the logic. I designed every product screen in Wonder and went back and forth with Claude Code until it was built.
Brand guidelines, a full product design system, and a working product, in about two days.
The wonder file: https://app.wonder.so/noor-mtir/files/019f3367-6454-791d-aaf0-813b4a07b2ff
The design system is live : https://echo-seven-kappa.vercel.app/
the app is in dev. Walkthrough below.
Love this ! The characters are really well made
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
Built AUREN, a fully responsive e-commerce experience for a modular furniture brand, designed in Wonder and brought to life through Wonder MCP + Codex.
As someone who regularly designs e-commerce templates, I wanted to see how far I could take an idea inside one connected workflow. Wonder helped me move incredibly fast from visual direction and product imagery to responsive layouts, a complete design system, material assets, and then straight into a functional coded experience.
The final build includes product variants, modular configurations, cart interactions, responsive states, and a full mobile experience. What would normally require jumping between multiple tools became a much faster, more fluid process.
The video starts with the final showcase, followed by short clips showing how Wonder supported the project from first concept to live implementation.
Built with @usewonder
Design is rarely about making things prettier. It's about making better decisions.
For this surf brand concept, I explored two hero directions.
A → Product-first. Puts the board and experience at the center.
B → Lifestyle-first. Creates a stronger emotional connection before introducing the product.
Which hero creates a stronger first impression?
A or B — and why?
Your feedback helps shape better design decisions.
#UIDesign #LandingPage #WebDesign #Figma #UXDesign #ProductDesign #CreativeDirection #BrandDesign #JuiceLab #DesignProcess
11 voted
32%
23 voted
68%
34 votes
Closed
Both work well, but B feels more premium to me.
My entry for the #WonderChallenge: Aurora Breaker 🎮
A game where every level is played on top of a living Wonder shader. Break bricks, chain combos, and watch the sky react. The shaders pulse with every hit.
It all started with Wonder's Northern Lights shader. I love that one. It felt alive, like something you'd want to touch, so I built a game where you literally play inside it. The playfield is translucent glass, so the shaders shine through everything, and 14 hand-picked scenes rotate as you climb levels, each one tuned to react subtly to gameplay.
My workflow: I designed everything in Wonder first using the AI Chat, from the layout and HUD to the components and objects. I got lucky that Claude Fable got unlocked during this challenge, because it helped a ton in bringing my vision for the game to life. From there I used "Copy as Code" a lot to paste scenes straight into Claude Code and build out the gameplay mechanics, powerups, and the live leaderboard on top.
🕹️ Play it: aurorabreaker.fun
🎨 Wonder file: https://app.wonder.so/jerold-llauderes/files/019f275f-4fbd-7503-98f4-428ca35952b9
Walkthrough video in the comments 👇
Thanks Wonder for an amazing tool. This was genuinely the most fun I've had building something.
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.
fifaworldcup2026
The World Cup is here and the whole world's watching. How are you designing for the world stage?
creativeaiflow
Creative AI workflows are evolving. What tools do you use, and what are their strengths and weaknesses?
freelancerlife
Freelancer life is wins, pivots, and everything in between. What’s yours right now?