Onlook

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:

1. Designer creates mockup in a design tool (not real)

2. PM uses clickable prototype for demos (not real)

3. Developer rebuilds everything from scratch (finally real, but not exact)

4. Endless back-and-forth because implementation ≠ design

5. Compromises and "close enough" solutions, and an “ok” product experience.

Onlook Workflow:

1. Designer/PM builds directly in Onlook (immediately real, and infinitely creative)

2. Prototype IS code, and ultra high fidelity, with all of the interactions and states you’d expect

3. 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!

Yay! Congrats on your launch!

One of the few tools truly bridging dev <> design. Excited to see an open source approach take the lead here.

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.

• 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.

Ngl, using code as the source of truth and ditching those endless design-dev handoff headaches is genius—realy wish we had this sooner, team!

Can’t wait to use in production pipeline 🙌

Congrats on the launch team super excited about it.

Congrats team - using Onlook to build our in-app components!