3 ms·

congrats on the launch! I gave it a spin.. found these issues: 1 - after selecting the Body of this page to capture as Design: https://app.visualsitemaps.com/p

congrats on the launch! I gave it a spin.. found these issues: 1 - after selecting the Body of this page to capture as Design: https://app.visualsitemaps.com/pricing https://app.visualsitemaps.com/pricing the "Render" tab > result showed be a blank box: https://share.cleanshot.com/jVGlwYND 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.magicpatterns.app 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';}

alexdanilowicz 1y ago
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 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!
- arturmakly 1y ago
  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;-)
  - alexdanilowicz 1y ago
    that's great feedback, thanks!

alexdanilowicz 1y ago

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 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!

arturmakly 1y ago
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;-)
- alexdanilowicz 1y ago
  that's great feedback, thanks!