HN user
Most design tools like Figma come with some sort of dev handoff tool that produces pixel-perfect HTML/CSS (though you might need some tweaks for responsiveness). Have you tried feeding that to the LLM as a starting point?
I also work on Plasmic (https://plasmic.app) a no-code editor that aims to fix this problem by eliminating the dev handoff, though it does take some organizational buy-in to work.
I'm late to reply, but check out Plasmic. We often get the complaint that we're too engineer-y instead of designer-y, so it might work for you.
One problem is that the code tool is usually a one-time code export. After the export, you'll probably want to change the code--add some business logic, event handers, etc. After a while, when the Figma design is changed, there's no way to update the presentational code only without redoing the changes.
Plasmic is working on solving this problem! The designs you make in Plasmic are architected for continuous iteration. Disclaimer: I work at Plasmic!
I think, with most WYSIWYG editors in the past, a developer runs into some limitation, forcing them out of the system into uncharted/hacky territory. But for Plasmic, developers are a first-class citizen.
For example, one huge advantage with Plasmic is that Plasmic components run within your React tree. This means you can naturally embed Plasmic components in your React components, and even the other way around!
Replied to similar comment here: https://news.ycombinator.com/item?id=38701366
MUI's Toolpad looks pretty cool! I'm going to try it out today.
One big difference is that Plasmic is a platform and can be used by non-developers to make changes that go straight to production. Think marketers, content managers, and other non-devs that are on your team who want to ship new designs and content without bugging the dev.
+1 to Chung's reply. There's also a loader API where you'll generally never need to see the code that is output. Check out the differences between loader API and codegen here: https://docs.plasmic.app/learn/loader-vs-codegen/
In case you still want to see the code from codegen, here's an example. We generate 3 files per page/component:
1. JS/TS: https://github.com/plasmicapp/plasmic/blob/master/platform/w...
2. CSS: https://github.com/plasmicapp/plasmic/blob/master/platform/w...
3. An entry point wrapper JS/TS file: https://github.com/plasmicapp/plasmic/blob/master/platform/w...
While 1 and 2 will be overwritten as you update your project in Plasmic (and therefore you should never modify it), the wrapper (3) is yours to customize as needed, like setting props or binding event handlers. In the above example, we computed how much free trial time a customer has. You can read more about the generated code here: https://docs.plasmic.app/learn/codegen-components/
For component composition and layout, Plasmic makes it easy to build responsive pages. Our primitives like stacks are all based on flexbox, though you can use absolute positioning if needed.
For some more detailed docs, check out https://docs.plasmic.app/learn/styling-and-layout/