Overall this is impressive for MVP.. I also like the manual click-to-select-objects for more refinement.
I was unable to find the CSS styling code however ( sorry not a React/Tailwind user ) it just showed me index.css like so:
{@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';}
If it's helpful, the styling will be in the "jsx" file vs the css file! So when you use that "manual click-to-select-objects" feature in the chat bar, you can click on "Highlight Code" and then that will take you to the React component. In that component, you'll see a className field which will have Tailwind classes in it. That's technically what is applying the styling and boiling down to raw CSS.
Ah! Need to clean up what's happening there when using the Chrome extension to import an existing design - pushing up a fix. There's a great discussion on the extension here (https://news.ycombinator.com/item?id=42043552) btw if you're curious how it works.
When it comes to adding images, it works best if you give it an existing image URL or upload an image, which we then host for you. In this case, Sonnet 3.5 appears to have hallucinated an invalid image link. Also need to make this more robust!
hmm having an "Edit Style" for any object, in 1-click ( instead of traversing into component's guts, etc ) will be a more frictionless UX.
in fact just show the same Figma Style UI controllers would be even better since that is a proven UX mental model;-)
1 - after selecting the Body of this page to capture as Design: https://app.visualsitemaps.com/pricing the "Render" tab > result showed be a blank box: https://share.cleanshot.com/jVGlwYND yet there was code in the "Code" tab.
after that it attempted to recreate the design, with some new additions:
- add a row of logos ( failed ) - add testimonials - add case studies - remove a row
Results >> it was 92% there: https://project-tailwind-conversion-with-lucide-icons-756.ma... had some missing images from the OG design.
Overall this is impressive for MVP.. I also like the manual click-to-select-objects for more refinement.
I was unable to find the CSS styling code however ( sorry not a React/Tailwind user ) it just showed me index.css like so: {@import 'tailwindcss/base'; @import 'tailwindcss/components'; @import 'tailwindcss/utilities';}