It's done with a screenshot of a layout, pasted into Aura. I already embedded a ton of prompting into Aura for image to HTML.

BUT you can also use ChatGPT's o3 (paid), which has the best vision, with this prompt:

"Generate the HTML with TailwindCSS and javascript and use lucide icons. In the end, create a downloadable html file. Make sure to respect the fonts, the rounded corners, containers, padding, design systems. In the style of {FAV SITES} (don't mention names). Checkboxes, sliders, dropdowns, toggles should be custom. Adapt all texts for {YOUR APP}: {APP DESC}. Be extremely accurate with fonts. "

Can add more design details where you feel AI is lacking. Avoid illustrations, tons of effects, animations -- those won't work. You can add them later in Aura as an asset. Focus on simple, effective layouts, grids, typography, info architecture, responsive design, etc.

Save HTML, view them until you're satisfied. Don't pay attention to broken images, bad icons, these can be fixed easily. KEEP good layouts with good typography and colors. That's the hardest to edit. As a designer, you want to focus on your creativity, post-gen, not on fighting with auto layout. Such as picking the right font weight, images, avatars, copy, adding animations, effects, etc. I like the 90% ai/10% human rule.

With a strong html as attachment, Aura will generate a really good result. From there, use Design mode to fix texts, images, colors. Use the Prompt builder to add animation. Use the Code Mode for editing code/adding new code, new buttons, links etc. Knowing Tailwind will help a ton.

Yep, if you know HTML, you can build an entire landing page in Aura. No React needed, just a single file.