End the design-dev handoff nightmare. Onlook is an Open Source builder that helps product teams ship faster by building production-ready apps visually. Use code as the source of truth – zero translation errors, instant collaboration across all roles
I’ve spent over a decade watching the same painful cycle: designers hand-off perfect design files, developers rebuild everything from scratch, and what ships looks just barely like what the designer had dreamed-up.
Everything was being built twice, and when you’re trying to ship fast, the entire product experience starts to slip-away into “close-enough” territory.
That's why I teamed up with @flyakiet to build Onlook.
We're giving designers code superpowers and developers design superpowers. Everyone stays in their comfort zone working with the same codebase to produce production-ready work. Here’s how it fits into your workflow:
Traditional Workflow:
Designer creates mockup in a design tool (not real)
PM uses clickable prototype for demos (not real)
Developer rebuilds everything from scratch (finally real, but not exact)
Endless back-and-forth because implementation ≠ design
Compromises and "close enough" solutions, and an “ok” product experience.
Onlook Workflow:
Designer/PM builds directly in Onlook (immediately real, and infinitely creative)
Prototype IS code, and ultra high fidelity, with all of the interactions and states you’d expect
Developer gets clean, working code (no extra translation needed)
It’s been over a year since we started building this version of Onlook, and we’re so grateful for the over 100 open-source contributors who have helped craft this new visual editor for code.
As a thank you for our launch…
🎁 Exclusive for Product Hunt: 20% off first 6 months with code 'IHATEHANDOFFS' (first 100 hunters only!)
Thank you for your support, and we can’t wait to see what designers and developers create together with Onlook!
Hot hot tool to get your imagination to reality 💪. Frontend design has never been easier and quicker
Whoa, this is exactly what I needed! I've spent countless hours dealing with design-dev handoff nightmares, and Onlook seems to be the solution I've been searching for.
Congrats!
Onlook ends the handoff headache. Build visually, ship production-ready apps, and keep code as the source of truth. Open source, zero translation errors, and instant collaboration across design, dev, and product.
Congrats on the launch!
Onlook looks like a real game-changer for design-dev handoff！
Huge congrats on the launch @d_r_farrell! 🎉 Super excited for Onlook
Looks so good now like this! gonna try it out with our product design we are working on currently.
Congrats on the official web launch @flyakiet@d_r_farrell ! The product just keeps improving and little by little it's getting to be almost as cool as your matching Onlook jackets. One day you'll get there. ✨️🧥✨️
Congrats on the launch @nintu & team! Looks like an amazing product and looking forward to testing this out.
Super excited for Onlook. There's nothing like it at the moment that I know of: Cursor doesn't have the design context to build frontend effectively, and Figma's AI doesn't have real coding capabilities. Can't wait to use this more now that's it's fully launched. Congrats to the team!
Brilliant! This is so needed because it often feels like teams are speaking different languages. Congrats on the launch, giving an upvote and queueing up to play around with and recommend for my friends!
Btw, we're offering early access to a product we're validating for technical support, and focusing on Product Hunt makers who are having successful launches and being bombarded with awesome questions and help from new user! Think Onlook might be interested?
This is pretty slick. I really like the native integration with TailwindCSS. Figma might be your biggest competitor since it also offers code conversion and has plugins for TailwindCSS styling. The challenge would be convincing companies that already has their workflow deeply embedded in Figma to switch over, but early adopters should be much easier to win.
Congrats on the launch!
P.S. Love the lightning effect on the site, couldn’t help but play around with it for a bit :)
Amazing product I'v been following the Onlook team for a while, they are doing great work!
OnLook has been a game changer for me. I have been using it for 2 months now to help me come up with a UI for a web app I've been wanting to build for a while, but have no idea how to code the UI. The team has been great and responds quickly to my issues. They welcome feedback and any errors you might encounter. Don't be afraid to let Daniel and the team know.
I started on their desktop app and then finally transitioned over to their web app this month. There were features they had on the desktop app that they didn't move over to the web app till the last update that came out last week. The web app is far superior to the desktop app now! There is no reason to go back or ask them to bring back the desktop app. The AI is smarter and can do a lot more than the desktop app had. For me, I probably only work with 5-10% of what it has to offer and it blows me away!
Here are some pointers for building with OnLook:
Be specific on what you want. If there are certain libraries you want or need in your UI, you better let it know or you won't get what you think you'll get. I got my UI on the 1st try. I had to tell it specific libraries I wanted it to use and it came out exactly as I wanted it to look like. I tried another time without those libraries I had mentioned and it came up with something not even close to what I wanted.
I don't recommend asking for a lot on a request in a message, such as a huge paragraph. It will probably fail. Be specific and to the point. But, the team is actively working on making it better so they might be able to handle huge requests soon.
Tell OnLook to refactor code and split off elements into components when you can. It will build everything into the page.tsx file and it will get overly bloated with time and you won't be able to do requests. The AI models they are using now, as opposed to a month ago, are very smart and can refactor the code a lot easier! If/when it breaks the code, it can repair and fix it. Plus, you can restore back to certain points and requests. This is extremely helpful!
If you know your way around code, they have a code editor where you can add folders and files and edit files. This has been helpful.
If you have a reoccurring error, email Daniel. He'll forward it to the team and they'll come up with a solution. I kept telling Daniel that they needed to bring the undo last request to the web app like they had on the desktop app and about 3 weeks later, they added it. Give them feedback. What they have built and are building is incredible.
Publish your demo and see how it works in the browser. This feature has allowed me to show friends and family what I have made. Here's my latest UI. Best of luck if you can figure it out!
EXTRA: Now that you got your UI setup, you can ask OnLook what database tables you need to have in order to use it in your actual build. I have tons of tables in my database, but the features I added to the UI required extra tables that I didn't know about. What I did was, I asked it to make a file and gave it a name and for it to type out what database tables I needed into that file in the directory. I could have done it in the message, but why not have it write it to a file?!
I highly recommend OnLook to anyone building a UI and that wants a legitimate working UI.
Hey Product Hunt! 👋
I’ve spent over a decade watching the same painful cycle: designers hand-off perfect design files, developers rebuild everything from scratch, and what ships looks just barely like what the designer had dreamed-up.
Everything was being built twice, and when you’re trying to ship fast, the entire product experience starts to slip-away into “close-enough” territory.
That's why I teamed up with @flyakiet to build Onlook.
We're giving designers code superpowers and developers design superpowers. Everyone stays in their comfort zone working with the same codebase to produce production-ready work. Here’s how it fits into your workflow:
Traditional Workflow:
Designer creates mockup in a design tool (not real)
PM uses clickable prototype for demos (not real)
Developer rebuilds everything from scratch (finally real, but not exact)
Endless back-and-forth because implementation ≠ design
Compromises and "close enough" solutions, and an “ok” product experience.
Onlook Workflow:
Designer/PM builds directly in Onlook (immediately real, and infinitely creative)
Prototype IS code, and ultra high fidelity, with all of the interactions and states you’d expect
Developer gets clean, working code (no extra translation needed)
It’s been over a year since we started building this version of Onlook, and we’re so grateful for the over 100 open-source contributors who have helped craft this new visual editor for code.
As a thank you for our launch…
🎁 Exclusive for Product Hunt: 20% off first 6 months with code 'IHATEHANDOFFS' (first 100 hunters only!)
Thank you for your support, and we can’t wait to see what designers and developers create together with Onlook!