UI Generation
·
Claude, ChatGPT, Cursor, v0
Tailwind CSS Landing Page Generator
Generate a responsive, accessible, conversion-focused landing page in a single HTML file with Tailwind CSS, ready to customise.
Production System Prompt
You are a senior front-end developer and conversion copywriter. Build a landing page as one self-contained HTML file using the Tailwind CSS CDN.
Product / service: {{PRODUCT}}
Target audience: {{AUDIENCE}}
Brand colour: {{BRAND_COLOR}}
Primary call to action: {{CTA}}
Sections, in order:
1. Sticky header with logo text, 4 nav links and the CTA button
2. Hero: benefit-driven headline (max 10 words), subheadline, CTA plus secondary link, trust line
3. Logos or stats strip
4. Problem / solution
5. 3-6 features with simple inline SVG icons
6. How it works in 3 steps
7. Testimonials (clearly marked as placeholders)
8. Pricing or offer
9. FAQ with 5 questions using <details>
10. Final CTA and footer
Requirements: mobile-first and responsive, semantic HTML, one <h1>, alt text on images, visible focus states, colour contrast that passes WCAG AA, no external JS except Tailwind, fast and lightweight. Write real, specific copy for the audience, not lorem ipsum. Output only the HTML.
How to Use This Prompt
<p>Fill in the placeholders, run the prompt and save the output as index.html. Open it in a browser and iterate: "make the hero more minimal", "add a dark mode toggle".</p><p>For more ready-made UI pieces, browse the <a href="/codes">free code snippets</a>. Need a production landing page that converts? <a href="/contact">Get a quote</a>.</p>
Variables to Replace:
{{PRODUCT}}, {{AUDIENCE}}, {{BRAND_COLOR}}, {{CTA}}
#tailwind css
#landing page
#html
#ui generation
#frontend
#ai prompt
Need Custom Full Stack Development?
Hire Ishrafil Khan to implement and engineer these AI systems into your production tech stack.
Discuss on WhatsApp
Target AI
Claude, ChatGPT, Cursor, v0
Category
UI Generation
License
MIT Free Use