
Design and build a complete, single-file landing page for a ...
Prompt
Design and build a complete, single-file landing page for a fictional premium product of your choice โ something you invent right now. The product category is entirely up to you (tech, fashion, food, finance, wellness, hardware โ anything). Name it. Brand it. Sell it. Requirements: DESIGN DIRECTION - Commit to a strong, specific aesthetic. Not "modern" or "clean" โ something with a point of view. Brutalist editorial? Dark luxury? Retro-futuristic? Organic minimalism? Pick one and go all in. - Choose a distinctive font pairing (NO Inter, Roboto, Arial, or system fonts). - Use a deliberate color palette: max 3 colors + 1 sharp accent. No purple gradients on white. - Every spacing and layout decision must feel intentional. LAYOUT & COMPOSITION - Break the grid at least once (overlapping elements, diagonal flow, or asymmetric layout). - Include: Hero section, Features/Benefits section, one Testimonial or Social Proof section, a Pricing or CTA section, and a Footer. - Mobile responsive. No horizontal scroll. MOTION & INTERACTION - Scroll-triggered entrance animations (staggered reveals). - At least one hover micro-interaction that feels surprising, not generic. - A smooth page load sequence (elements animate in with delay). - No animation libraries allowed โ CSS only. CODE QUALITY - Single HTML file with embedded CSS and JS. - CSS custom properties (variables) for the entire design system. - Semantic HTML5. - No external dependencies except Google Fonts. BONUS CHALLENGE (separates good from great) - Add one design detail that has no functional purpose โ purely aesthetic. (A decorative element, a texture, a cursor effect, a background pattern โ something that shows craft, not just competence.) Output: The complete HTML file. Nothing else โ no explanation before it, no commentary after. Just the code. Make it feel like a real studio built it.
A system prompt was added to support web rendering