The fastest way to prototype and experiment with web design directly on live pages. Select any element, describe what you want in plain language, and watch AI instantly apply CSS changes. No code required. No dev tools needed. Just pure creative flow.
I'm Mr Violets. I love building developer tools that solve the specific frustrations that I face daily. Today I’m excited to share my latest project: VibeCSS.
We’ve all spent way too much time trying to prototype inside Chrome's "Inspect Element," manually toggling CSS checkboxes and guessing pixel values just to see if an idea works. I built VibeCSS to replace that friction with an intelligent assistant that actually understands the page. VibeCSS is perfect for designers and developers who want to rapidly prototype ideas or new UI on live sites instantly.
Instead of static mockups, Vibes lets you iterate on the actual DOM. Want to test a new design style, swap a color, or generate new copy? You can do it in seconds, directly in the browser.
Under the hood, it runs on a custom Atomic State Engine that handles specificity and conflicts automatically. Meaning you can prototype freely without accidentally breaking the rest of the layout.
Features:
Pure Vibes: Select any element, describe what you want in plain language, and watch AI instantly apply CSS changes. No code required. No dev tools needed. Just pure creative flow.
Context-Aware: It knows your site's purpose, color palette, typography, and more so new elements look like they belong there.
Smart Refactoring: It can rewrite copy, swap icons, and restructure HTML.
I’d be over the moon to hear your feedback, bug reports, or wild feature ideas.
Congrats on the launch! Turning Inspect Element–style tinkering into an AI-powered prototyping tool feels like a dream for anyone who iterates directly in the browser. What’s the most surprising change you’ve seen VibeCSS handle well?
Hi! Can I save new page state? For example: I use some extention to change my jira board 😁 (or other websites) permanently. I write custom css for some pages and saving. Would be cool if I could save changes for page.
Hi Product Hunt,
I'm Mr Violets. I love building developer tools that solve the specific frustrations that I face daily. Today I’m excited to share my latest project: VibeCSS.
We’ve all spent way too much time trying to prototype inside Chrome's "Inspect Element," manually toggling CSS checkboxes and guessing pixel values just to see if an idea works. I built VibeCSS to replace that friction with an intelligent assistant that actually understands the page. VibeCSS is perfect for designers and developers who want to rapidly prototype ideas or new UI on live sites instantly.
Instead of static mockups, Vibes lets you iterate on the actual DOM. Want to test a new design style, swap a color, or generate new copy? You can do it in seconds, directly in the browser.
Under the hood, it runs on a custom Atomic State Engine that handles specificity and conflicts automatically. Meaning you can prototype freely without accidentally breaking the rest of the layout.
Features:
Pure Vibes: Select any element, describe what you want in plain language, and watch AI instantly apply CSS changes. No code required. No dev tools needed. Just pure creative flow.
Context-Aware: It knows your site's purpose, color palette, typography, and more so new elements look like they belong there.
Smart Refactoring: It can rewrite copy, swap icons, and restructure HTML.
I’d be over the moon to hear your feedback, bug reports, or wild feature ideas.