Roast my idea - a hybrid visual/code based design tool with reusable components
It's somewhere between Figma and directly editing HTML/CSS. You can drag stuff around like in a visual editor and get all the nice alignment tools and stuff like that. You're also able to edit the styles and markup directly, and create reusable components.
The primary use case I have in mind is creating easy to maintain marketing/documentation assets for software products. Instead of taking new screenshots when something new gets updated, just make the change in your mockup re-export it as a PNG or whatever.
I have no idea if there's a market here. I just got annoyed with maintaining my own assets and built a janky toy example for myself to get a feel for how it'd work.
General use example
Drag and drop and edit CSS. Not shown here is the code editor, which lets you edit the structure of your document through markup.
Reusable Components
You can use the editor to create your own components, save them, and reuse them.
Integration with common CSS frameworks
Bind the classes and documentation from a common framework right into the editor
It sounds kinda of like this https://bootstrapstudio.io/.
I would do bootstrap studio but for tailwind
I didn't understand. How is this different from Figma?
So I might not be grasping Figma fully, but my understanding is that Figma is visual-only. You can't do something like copy a snippet of markup or styles and use it in Figma?
Yeah, it's visual only. But there's the concept of community plugins . Maybe someone made a code to graphic plugin? Not sure. I'd suggest you take a look once.
But coming back this idea, I mean why would I want to paste code into graphic editor to get the design, If I can just re-create the design I wanted on figma in seconds?
If you're talking about editing the UI visually, then the idea becomes -
"a visual UI editor - with a code import / export feature"
I think updrafts.app is a similar idea to yours. It runs on Tailwind CSS library
So maybe its just my personal workflow and the jobs I've worked, but I've never actually seen a strictly linear design > develop flow. Once the initial application has been built from designs, a bunch of further design gets figured out by modifying markup and styles directly.
Honestly yeah, that's probably a better way of describing it.
I like it! Sounds like you are trying to solve a similar problem to Webflow. So you are definitely targeting a problem worth solving, but also work in a crowded market.
Thanks - yeah, from my (brief) research and talking to a designer friend it sounds like there are some tools that are in the same general area. I'd be most worried about scope if I actually decided to build it up, it can easily turn into a complicated product.