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
The hero had to introduce Augie to an audience that has never encountered this kind of AI before without overwhelming them in the first three seconds.
The decision was to lead with typography and trust rather than features. Large type states the value clearly. Eight recognizable logistics brands below the headline signal that Augie is already proven at scale with single CTA.
As the visitor scrolls, the hero animates and Augie's capabilities reveal themselves in plain language. The scroll animation was a strategic choice. AI is still unfamiliar territory for most logistics teams and the goal was to make that first encounter feel comfortable rather than technical.
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
Zero experience in the UI design industry.
But creativity, imagination, AI, and @Wonder made it possible.
🔥 Introducing "TourMe"
🧠 The idea:
A website for people who love to travel, explore, and discover different countries.
🙌 Problem:
People often have to jump between multiple websites to find travel information about a country they want to visit.
😊 Solution:
A website with multiple features for different countries:
• Weather
• Currency
• Best places to visit
• Popular restaurants
• Traditional foods
• Hotels and places to stay
• Activities
• sim cards
• and many more
💯 WORKFLOW:
• Explained my idea in ChatGPT and generated a prompt
• Used Wonder Chat to create UI concepts and website designs
• Refined everything manually using Wonder's tools and AI features
• Used Shader, Wonder Chat, Properties, and other tools
• Used Figma templates as references
• Explored different Wonder features and workflows
• Generated images using Wonder Chat
• Used Opus and Fable for generation
🙌 Others:
• Uploaded webpage screenshots and used Wonder Chat to recreate similar layouts
• Used Pinterest for inspiration and images
🎉 Wonder MCP:
• Connected Wonder MCP with Claude
• Claude helped create parts of the website
• Used GitHub to publish the website
TourMe Website:
https://aymdaking.github.io/TourMe1122/
Wonder File (Check page 1 and Page 2):
https://app.wonder.so/angelo-pacaanas/files/019f21e1-b614-7ae0-96ce-16e3fb4f1b80
🧠 UNEXPECTED:
• I didn't expect copying designs from Figma to Wonder to be so easy
• There are many Shader modes to choose from
• Prompt-to-UI worked even without UI design experience
• Wonder MCP worked smoothly with Claude
• Wonder Chat is more than a UI generator—it also helps answer questions and guide ideas
• Multiple image generation models are available (my favorite is Nano Banana)
• Easy to move, edit, and rearrange elements
• Lots of useful tools that are simple to learn and use
My client generated over $100K with their old checkout page and a $45 product 😳
This redesigned version doesn't just look better, it introduces:
- stronger value positioning
- strategic cross-sells
- added value
This alone creates opportunities to significantly increase average order value (AOV) and even support higher pricing (2x current price).
Great design isn't just about aesthetics, it can directly impact revenue (if you study how).
Do you think Version 1 would convert and better present a higher price?
16 voted
44%
20 voted
56%
36 votes
Closed
At the end results matter.
Icons that breathe. One procedural motion language every icon inherits — designed, animated, and shipped as real React, entirely in Wonder.
Most animated-icon tools give you a menu of canned effects bolted onto flat icons. ANIMA is the opposite: a shared procedural motion language — five primitives (breath, drift, trace, shimmer, morph) driven by parameters — that every icon inherits. Change the system, and the whole set moves together. Dial an icon's "personality" (Calm, Alert, Playful) and it stays coherent with the family. That's what turns an icon pack into a design system.
How Wonder made it possible:
- Wonder Chat generated the showcase grid, the studio UI, and the spec cards from a single design foundation — every screen inherits the same grammar.
- Shaders carry the live motion: the shimmer sweep and ambient glow run natively on the canvas, not as video mockups.
- Variants generated the three personalities from one icon — visual proof the system produces coherent variety.
- MCP export closed the loop: I pulled the animated heart icon out of Wonder as a self-contained React + Tailwind component. What you see is what you ship — even the motion.
I design systems, not surfaces. Wonder is the first tool where that principle survives all the way from prompt to production code.
wonder file:
https://app.wonder.so/sergey-bertagnini/files/019f1758-2caf-784a-9a77-f2dbacb2abd4
X post:
https://x.com/sergyproject/status/2074374981056614827?s=20
Wonderful job!
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?