Loading video...
Video Failed to Load
Every time you switch between design and code, you lose something, your momentum, your fidelity, or your vision. The gap between what you designed and what ships has always been the cost of building. That’s why we built Wonder, a design tool where everything you create is backed by... show more
1,288,074 views • 6 months ago •via X (Twitter)
45 Comments

We’re very excited to be partnering with to bring amazing Shaders into Wonder! We are starting out with a few presets, and now with their MCP launch, we’ll be integrating two platforms closer to bring a full loop of creating and polishing shaders end-to-end!

Start with a prompt. Generate designs, flows, websites and images directly on the canvas.

Connect via MCP and bring in your existing tokens to and from your codebase. Because Wonder’s data maps 1:1 to code, what you design is exactly how it ships.

Skip the blank canvas paralysis. Generate variations early, explore different directions in seconds. Use action buttons to build out full flows so the hard part of the design process becomes the fun part.

Iterate from one frame to an entire styling system. Generate colors, type scales, UI screens, and styling so your designs are consistent from day one.

Finally our first launch is out! 🥲 Excited to help designers ship!

For some reason X is flagging wonder(.)design domain as unsafe (likely because it's a new domain & we're getting too many clicks). To access Wonder, you can type wonder (dot) design in your browser, or go to We're in touch with X support to fix this issue!

such a nice little touch

Huge thanks to our incredible team for making this possible 🙌

Let’s go!!! Congrats on getting this out there. Looks amazing.

Thank you @DannPetty! We are very thankful for your support 🫶

Tried it. The output is genuinely impressive for something free.

Thank you Nav! This is just the beginning!

Big milestone 🚀 Super proud of how this turned out LFG 🔥

Congrats on launching and the progress since @joinodf!

@joinodf Thank you Julian!

Let's go! 🚀

let's go!!!

Thank you for yet another amazing video!

Big congrats! I know you worked hard for it

Thank you Mike!!!

congrats guys! 🙌

🚀🚀

Idea → design in minutes is a big shift

design to code always gets messy, if this actually solves it that’s a big win. huge congrats team 👏

I tried. I loved. Its very simple to use

That's our goal!!

This finally bridges design and code. Well done team! 🔥

Yessss congrats!!!

ai slop is finally going to be gone

Amazing tool, can't wait to see how it keeps evolving!

Been burned too many times by beautiful mocks that fell apart in dev. So this could be the biggest workflow unlock for me of the year.

It seems that we’re headed towards “design is development” rather than two different spheres.

Very neat. Loved when I saw that every design is real code. “Copy React + Tailwind and ship — no handoff needed” Naaaice

Damn. This actually looks like it solves my exact frustration that wasted thousands of hours on every project I’ve ever worked on.

Honestly I didn’t expect this level of quality from a free tool. Really impressive output

LFGGGGGG

big W, congrats for the launch🥂

insane !!!!

Awesome tool! Congrats @aibek_design and team 💫

@aibek_design Thank you Joan!!!

Yo you guys are finally in Alpha! Can't wait to try this tomorrow after office hours 😮

Closing the gap between design and code can save a lot of time and frustration. If it truly keeps fidelity intact, this could change how teams build products.

Congratulations on the launch! You’ve perfectly articulated a pain point that almost every product team faces. Excited to explore the Public Alpha.

This is really impressive 🔥 Great work by the team 👏🏻👏🏻

