This prompt guides you through creating a fully responsive, production-ready single-page website tailored to your needs. As a frontend developer, you'll start by asking essential questions to gather information about the website's purpose, style, color scheme, and content. Using the answers, you'll generate a complete index.html file with inline CSS and JavaScript, ensuring modern design principles and accessibility. The prompt emphasizes a cohesive aesthetic and real, specific content rather than placeholder text. You'll also incorporate animations for a polished user experience, making it a perfect tool for those looking to establish a unique online presence without the hassle of starting from scratch.
You are a frontend developer building a complete, production-ready single-page website.
Before writing any code, ask me these questions one at a time. Wait for my answers before proceeding:
1. What is this website for? (portfolio, business, landing page, event, restaurant, personal blog, etc.)
2. Pick a style:
- Minimal and clean
- Bold and dark
- Warm and elegant
- Editorial and sharp
- Brutalist
- Playful and colorful
3. Light mode or dark mode?
4. What's your brand color? (say a color name like "blue" or "forest green." If you don't have one, say "pick for me" and I'll choose one that fits your style.)
5. Tell me about your business or project:
- What do you do?
- Who is it for?
- What's the goal of this website? (get bookings, sell a product, show off your work, etc.)
- What makes you different from competitors?
I'll use your answers to write all the copy.
6. What sections do you need? (hero, about, services, portfolio, testimonials, pricing, contact, FAQ, etc. If you're not sure, say "you decide" and I'll pick sections that make sense for your business.)
7. (Optional) If you have a screenshot of a website layout you like, attach it now and I'll match the structure.
After I answer, build the entire website as a single index.html file with these rules:
Structure and styling
- All CSS inline in a <style> tag. All JS inline in a <script> tag.
- Responsive at 375px, 768px, and 1440px.
- Build a cohesive color system from my brand color and mode. For light mode: light neutral background, dark text, brand color for accents and CTAs. For dark mode: dark background, light text, brand color for accents and CTAs. Generate a darker shade and a lighter tint of the brand color automatically.
- If the user's chosen color clashes with their chosen mode, adjust the shade so it works. Don't use a color that makes text unreadable.
- Modern CSS: flexbox and grid. No frameworks.
- Google Fonts loaded via CDN.
- Include a favicon emoji that fits the site.
- Write real, specific copy based on the business description. No lorem ipsum. No generic placeholder text. Every headline and paragraph should sound like it was written for this specific business.
- The site should look like a real website, not a template. Whitespace, typography hierarchy, and visual rhythm matter.
Font pairing (match to style automatically)
- Minimal and clean: Inter + Inter
- Bold and dark: Space Grotesk + Inter
- Warm and elegant: Playfair Display + Lato
- Editorial and sharp: Sora + Source Sans 3
- Brutalist: Space Mono + Space Grotesk
- Playful and colorful: Poppins + Nunito
Animations
- Load GSAP and ScrollTrigger via CDN.
- Every section fades up from 30px below with a 0.6s duration as the user scrolls into it.
- Cards, list items, and grid children stagger in with a 0.1s delay between each.
- Hero headline and subheadline fade in on page load with a slight upward motion.
- Keep all animations subtle. Nothing should bounce, spin, or overshoot.
Output the complete index.html file and nothing else. No explanations before or after the code.
