Posted by SirHound 8 hours ago
Technically, the way this works is you view your site in dev mode and start editing it. In your agent, you can run /studio which then polls (or uses Claude Channels) an MCP server. Changes are streamed as JSON via the MCP, along with some viewport and URL information, and the skill has some instructions on how best to implement them.
It contains a lot of the tools you'd expect from a visual editing tool, like text editing, styles and an animation timeline editor.
Now put a giant, 30 second video of the product being used, directly below "Design by hand.Code by agent."
No one is clicking Get Started or Buy Now until they know what the product is, and a 30 second video is 100x better than any amount of text.
I never considered that people want to watch a video in this day and age when they can try the real thing.
Perhaps I've fallen into that trap with the product [1] I'm building. I have a "Live Demo" button on the landing page and thought that would be enough? I'm going to reconsider...
As for me, I’d like to watch a short clip (or at least see screenshots) before I try to demo anything.
Anyway - question on the software itself, how would CSS changes feed through to the code? Inline CSS, utility classes if you're using a framework? Does it support using something like Vite for compiling?
Too bad because once I saw it and tried it out, that's when I thought the experience feels slick and polished.
I think you shoud consider either having an onboarding that highlights it or put a giant arrow on your landing page background, between the video and the bar, with a "Try it on this page"
When I debug CSS or toy with styling, I will often edit the element styles directly but naturally I would like them to be applied within classes the element has, or maybe add a new utility. Never would I put styles on the element.
I suppose that in the same fashion, if your project uses tailwind or something, you will edit styles manually but when you get it right you want them to be added as “whatever the code uses”
The key to a good demo is not listing or even showing the features, it’s showing them what they can accomplish with it. You need to inspire your prospects.
I wanted to buy this. I tried the demo, but then I hit a wall of no agent connected and gave up and came here looking for reviews on whether this is good or shit.
For a design product, I’d expect it to have more personality.
I’d recommend reving the landing by hand. The sense I get is that this tool can make a site that looks like everyone else’s. It would be neat to see something unique.
Given the whole idea is selling a design tool that’s looks very gives user a sense of they can control details, this page doesn’t deliver that at all. I’d focus on the design, because that’s the biggest demo of your product maybe even bigger than the demo.
Imagine a unique website that users looks and feel like I wish this was my website. A rare instance visual design actually matters for a startup :)
- I LOVE the concept, no clunky SaaS, you add the package and start it on your dev server and it just works. It seamlessly did with my vite based build.
- Needs a diff view which tells me what the agent is going to change when I publish my changes, right now it's a bit scary to use without it (not sure if it does once you try to publish changes, I didn't get that far in the process)
- I don't see the point of the "draw" feature. Maybe it's because I envision this kind of tool being used so that non-technical members of the team can make small design changes without dev support, and not as a way to design from scratch, but maybe you have a use-case for it.
- Integration with tailwindcss would be a killer feature, this particular project uses tailwind so all the styles in the style view show as the default ones but of course they're being applied via classes. You could detect tailwind classes and either show them separately or resolve them and show what they do in the styles view, then on publish you'd tell the agent to edit using tailwind classes
I agree with what others have said, a video or even better a live demo would be great. A demo would be extra work but would be super cool, as a stopgap you could have a stackblitz demo maybe.
The client-side injected js -> mcp flow is brilliant though. I might have to steal that idea for some projects I'm working in, I can imagine a lot of scenarios where it would make a great interface
I just pushed a video to the homepage, there was already a live demo though, it was actually quite simple to implement (mostly gate a few things). There was a bit of a fear that agent somewhere out there would still be listening though...
I think a diff is an excellent idea. Perhaps with the ability to remove specific changes and switch before/after.
In terms of Tailwind, I'm thinking about a token/strict mode which would detect Tailwind classes and CSS variables. It wouldn't expose these in the sense you had to apply each one manually, but if you were for instance changing padding, it would snap between all your pre-defined tokens.
For the draw feature I think I'm just heavily Framer-pilled and it lets you pre-determine a rough width and height within a stack. But perhaps there's space for a click-to-add also with minimum dimensions.
Maybe could have a "Try live" button that sort of nudges you to it (could open the sidebar with the page structure or something to make it obvious you're in "edit mode") if other people struggle to find it
Re. diff view, yes, I think it's the kind of thing that would give reassurance to users that they can play around with it without breaking anything, otherwise I feel I'd be a bit scared of accidentally touching something that shouldn't be changed (especially as you might experiment a bit before you land on the right style to change)
I get that this tool is aimed at designers, but depending on how the features evolve I think it could pull in a lot more indie devs and similar folks too.
congrats on launch, nice product. Hope this would be a thing.
If I understand correctly, is this not as useful for frameworkless html/css/js development? Since when you make edits using browser-built-in-devtools it can and does modify the actual css files (in-memory, of course) which you can use to copy-replace with entirely (assuming no build/bundling step aswell).
If so and this allows you to use any framework and still have that kind of workflow, that's fantastic. Half the reason I don't like using frameworks is because I lose the built-in WYSIWYG editor functionality. Guess I'd still lose the usefulness of the built-in js debugger, tho :(