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
• 1d
Built Trust Leak Explorer with Wonder, from rough concept to live site integration.
For my company, Crossfire CX, I needed a way for potential clients to quickly understand what we diagnose before building AI into their customer experience. I started in Wonder exploring a standard readiness-review format, but through Wonder Chat the idea turned into something more useful: an interactive diagnostic where you pick a customer experience scenario and see how trust is gained or lost downstream. From there I used Wonder's shader generation for the hero treatment, planned the integration into the existing site, then used Wonder MCP with Codex to translate the final frames into code on GitHub and deploy the site live via Cloudflare Pages.
Full walkthrough and links below 👇
Video walkthrough >>
Wonder file >>
Live site >>
Built for the @Contra x @Wonder Challenge.
#wonderchallenge #contra #customerexperience #mcp #github #cloudflare #codex
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
• Jul 6
One thing I've wanted for years is a personal bookshelf app that makes it easy to digitize my physical book collection.
For the Contra × Wonder Challenge, I finally decided to design it.
The idea is simple. Add books by scanning the barcode, taking a photo of the cover, or entering the ISBN manually. Once added, every book lives in a clean digital library where I can organize what I'm reading, what I've finished, and what I want to read next.
What surprised me most was Wonder itself. I expected it to speed up the process, but I didn't expect it to understand the direction I had in mind so accurately. It helped me iterate much faster while still giving me the precision to shape the experience the way I wanted.
This challenge gave me the perfect excuse to finally design a product that's been sitting in my head for a long time. Hopefully, it's also the first step toward turning it into a real app.
Public link: https://app.wonder.so/rudy-p-agnel/files/019f2f48-08b9-7ce4-b9d8-b01e1629a62d
This is a great design, I also need this app. Very beautiful.
I created a social post generator made in Wonder and the Claude MCP!
I know that Wonder is great for app or web design, but I wanted to use it in a different way.
Why? Because Wonder can create assets, templates, can follow guidelines, and be way more creative than a simple AI environment.
Here are the steps by step of what I did:
1- I created a template using Wonder. I used my brand assets, chose the font style, and general look.
2- I connected Claude MCP and created a small web platform to generate a good prompt.
3- I used the prompt on Claude, connected to Wonder, to generate the post. Wonder/Claude can choose the text, post length, which design of specific slides to take from the template, and also decide which image fits best!
4- I directly worked in Wonder to fix some small stuff and export!
Here you can find the link to my Wonder file where you can find some other tests (I would love to do more tests, but I finish the credits!!)
Youtube video (for 4K quality):
https://youtu.be/cLZiffEFq5A
Have a Wonder-ful challenge 🚀
• Jul 5
Looks great 🔥🔥
Building with Wonder 🚀
I've had the idea for HirePilot sitting in my idea bank for quite some time. When I saw the Wonder Challenge, I thought it was the perfect opportunity to finally bring it to life.
With only 3–5 hours, learning a completely new tool while balancing my day job, I knew I wouldn't be able to build everything I had envisioned. My goal shifted from creating a perfect product to exploring how Wonder could fit into my design workflow.
Instead of treating Wonder as just another UI generation tool, I used it as a collaborative design partner—iterating on product ideas, refining layouts, experimenting with shaders for motion and depth, and exploring MCP to make the experience feel more connected. While I wasn't able to fully complete the interactive experience I had planned, it gave me a glimpse of what's possible when design and AI work together.
About HirePilot
HirePilot is an AI career co-pilot that helps candidates prepare for the exact interview they're about to take. By combining a resume, job description, target company, role, and experience level, it creates personalized interview preparation with resume optimization, company-specific mock interviews, actionable feedback, and career insights—all in one place.
This isn't the final version I imagined, but it's a meaningful first step. I'm looking forward to taking HirePilot further, making it fully interactive, and pushing Wonder even more in the next iteration.
#BuildWithWonder #Wonder #AI #DesignChallenge
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?