Vibe coded landing pages are terrible
Shadcn has solved the problem for dashboards but for traditional landing pages any good solution?
For SaaS landing pages there are some templates but for ecommerce, travel, grocery, etc? All videos are about gimmicky showcase of new AI product which will "revolutionize everything".
Also any tips on how to iterate on the first output? Like what to ask the AI as non-designer?
65 views
Replies
Although you didn't state what model you use, in general you need to give AI impersonation guidelines, try to experiment with impersonation phrases like:
You are world class UI/UX developer that knows how to create stunning website landing pages for [insert your app] industry. Utilize tailwindcss and focus on readability, SEO, and make it pixel perfect for the target audience users that are usually [insert your target audience age] [insert your target audience gender]
Use similar preamble before you actually give the prompts and watch the magic :)
If you already have content and a Figma PNG, the best approach is to split the page into sections, hero, features, testimonials, CTA. Have the AI generate one section at a time, using your content exactly and referencing the layout. Once each section is solid, assemble them into a full page. This avoids hallucinations and makes iteration much easier.
The best approach would be to give it a command to copy a good landing page that you think works well. AI still struggles in the creative domain, but it's really good at copying.
@iamdaniel I am giving figma design as png but not working. I believe it can't do one-shot but I don't know how to iterate, what questions to ask the AI.