Loading...
Loading...
Back to Prompts
Web Design
Responsive Landing Page met HTML, Tailwind CSS en Alpine.js
Claude Directory December 9, 2025
0 copies 0 likes
Genereert een complete, responsive landing page met HTML, Tailwind CSS en Alpine.js in één klik. Perfect voor snelle prototypes, startups of marketing pages – professioneel, interactief en SEO-ready (
Prompt
Je bent een senior frontend developer met 10+ jaar ervaring in moderne webontwikkeling. Genereer een **VOLLEDIGE, kant-en-klare, responsive landing page** voor het volgende product/dienst: **Product naam:** [Vul hier de naam in] **Beschrijving:** [Vul een korte beschrijving in] **Doelgroep:** [Vul doelgroep in] **Belangrijkste features:** [Lijst 4-6 key features] **Call-to-action:** [bijv. 'Gratis trial starten' of 'Contact opnemen'] **Kleuren:** [bijv. primair: #3B82F6, secundair: #10B981] **Logo URL:** [Optioneel: link naar logo] **Technische eisen:** - **Alleen HTML5, Tailwind CSS v3 (CDN), Alpine.js v3 (CDN)** - GEEN andere frameworks/bibliotheken - **Fully responsive** (mobile-first: mobiel, tablet, desktop) - **Moderne, professionele design** (clean, minimalist, high-conversion) - **Snelle laadtijd** (geen zware assets) - **SEO geoptimaliseerd** (semantic HTML, meta tags, alt texts) - **Interactief** met Alpine.js (hero slider, feature toggles, smooth scroll, modal voor CTA) **Verplichte secties (in deze volgorde):** 1. **Hero** (headline, subheadline, CTA button, hero image/illustratie) 2. **Features** (4-6 grid cards met iconen, titel, beschrijving) 3. **Hoe het werkt** (3-4 stappen timeline) 4. **Testimonials** (3-4 customer quotes met foto/avatar) 5. **Pricing** (2-3 tiers, highlight populaire) 6. **FAQ** (4-5 accordions) 7. **Footer** (links, socials, copyright) **Output formaat:** - **ALLEEN de complete HTML code** in één enkel bestand - Gebruik Tailwind CDN: https://cdn.tailwindcss.com - Gebruik Alpine.js CDN: https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js - Voeg Google Fonts toe indien nodig (bijv. Inter) - Maak het direct kopieerbaar en werkend Zorg voor pixel-perfect design, accessibility (ARIA), en conversie-geoptimaliseerde copy. Begin direct met <!DOCTYPE html> en eindig met </html>.
How to Use
1. Kopieer de volledige prompt tekst hierboven.
2. Plak de prompt in Claude, ChatGPT of een andere AI-chat.
3. Vul de placeholders in: product naam, beschrijving, features, etc. met je eigen details.
4. Klik op verzenden en wacht op de gegenereerde HTML code.
5. Kopieer de output HTML, plak in een .html bestand en open in je browser.
6. Pas optioneel kleuren, logo of content aan in de code.
7. Deploy direct naar Netlify/Vercel voor live testing.
Comments
More Prompts
View allResearch
ChatGPT Web Browsing Research Agent
Structured web research using ChatGPT's browsing capability. Systematic source evaluation, fact-checking, and synthesis with proper citations.
C
CommunityDevelopment
ChatGPT API Integration Blueprint
Design production-ready ChatGPT API integrations. Covers authentication, streaming, function calling, structured outputs, and cost optimization with the latest OpenAI SDK.
C
CommunityData Analysis
Advanced Data Analysis with Code Interpreter
Step-by-step data analysis pipeline using ChatGPT's Code Interpreter. Upload CSV/Excel files for cleaning, visualization, statistical analysis, and insights.
C
CommunityProductivity
ChatGPT Memory & Personalization Optimizer
Optimize ChatGPT's memory feature for persistent context. Teaches how to structure memories, manage what's stored, and leverage personalization effectively.
C
CommunityCreative
DALL-E 3 Prompt Engineering Master
Generate precise, creative DALL-E 3 prompts. Handles style specifications, aspect ratios, composition rules, and iterative refinement for stunning AI-generated images.
C
CommunityProductivity
ChatGPT Canvas Collaborative Editor
Leverage ChatGPT Canvas mode for iterative document editing, code review, and collaborative writing with inline suggestions and tracked changes.
C
Community