Subscribe
Sign in
Vivid — An AI wingman to build your web app
Use AI to build front ends right from your browser and skip the grunt work. With Vivid, just click a component on your screen, let AI generate all your boilerplate, and make in-browser edits that automatically sync with your source code.
15
Replies
Been using this for a while—really love the product. It's especially helpful whenever I need to track down a frontend bug—being able to click on the affected components and peek under the hood immediately is such a game changer.
This is really exciting, definitely the next instantiation of interfaces. Also, really feel like reducing the gap/friction between design and code is being done seamlessly here. Excited to style my next React app
Congrats Aryaman! A Constitutional orator by day, saving developer time at all other times ;)
Excited for the future of the product, it's amazing despite being so new! The Vivid team has an insanely deep understanding of how to build beautiful, responsive front-ends while making developers' lives so much easier.
Vivid has made front-end dev for our startup x10 better over the last months! Can't recommend enough
💡 Hey Hunters!
I’m Aryaman, cofounder of Vivid, and I’m thrilled to announce the launch of our AI wingman to build your web app.
As web developers, we are all too familiar with the struggles of using CSS to style front ends — it requires repetitive code, constant context switches, and long iteration loops to get styling “just right”. AI code generation tools aren’t much help, because even if they generate front-end code that’s 80% of the way there, editing that code is a huge pain. We decided to build a tool that’s built for front end.
With Vivid, you can:
👨🏽💻 Click any component on your screen to edit the code that renders it — automatically syncing any changes to your source code
🧠 Add comments describing new components and let AI trained on your own application generate boilerplate code
🎨 Preview and apply tweaks to your code with our command palette to iterate on styling much faster
Vivid is currently ready for use on web apps built with React and Tailwind CSS and you can get Vivid going on your project by following our docs - https://docs.vivid.lol. You can also test out our code generation on our landing page - https://vivid.lol.
We’re exploring applications to bring easy UI tweaks to less technical collaborators - from A/B tests to copy edits. If you’re a frontend engineer, engineering manager, or just interested in the space, I’d love to understand your pain points! https://calendly.com/aryamankha/...
Excited to hear your thoughts on what we’ve built so far!
@aryaman_khandelwal I’m stoked to see this. I am hoping to see more of this sort of tool. Is it possible for a non-coder with design experience to build an app with this? This year will be the year that Bubble gets an AI Competitor.
@aryaman_khandelwal It's been extremely rewarding to build Vivid from the ground up.
Current code generation tools are incomplete.
As of right now, AI can't generate the exact code you're looking for, but it can get halfway — producing layouts and templates.
However, generated code on an IDE takes time to grasp. Especially frontend code. It's way harder to visualize a series of HTML elements and css rules than to understand the output of a few well-named python functions. Here's where Vivid comes in.
Vivid not only lets you generate AI code. It's wired to your app so you can immediately see what the code renders and edit its styles. All the edits are done in browser (through a code editor and command palette) and are written to your file system.
Give it a try, and let me know what excites you the most!
Chestr 🛍