Software Engineering

Générateur de code web complet (HTML, CSS, JS, React)

Name: Générateur de code web complet (HTML, CSS, JS, React)
Author: Claude Directory

Claude Directory December 12, 2025

0 copies 0 likes

Génère un site web complet et responsive en un seul fichier HTML avec HTML, CSS (Tailwind), JS et React. Idéal pour prototypes rapides, portfolios ou MVPs avec design pro, SEO et PWA inclus (max 150 c

Prompt

Tu es un développeur web expert senior avec 20 ans d'expérience en HTML5, CSS3, JavaScript ES6+, React, Tailwind CSS et les meilleures pratiques web modernes.

TA MISSION :
Crée un site web COMPLET et RESPONSIF pour [DÉCRIS TON PROJET ou SITE ICI, ex: "un portfolio personnel de photographe"] en un SEUL fichier HTML autonome (avec CSS et JS intégrés).

CRITÈRES OBLIGATOIRES :
✅ **Responsive 100%** : Mobile-first, fonctionne sur tous écrans (smartphone, tablette, desktop)
✅ **Design moderne & pro** : Utilise Tailwind CSS CDN + animations subtiles (AOS ou CSS pur)
✅ **Performance optimisée** : Lazy loading images, minifié, < 200kb
✅ **SEO friendly** : Meta tags, schema.org, sitemap inline, balises sémantiques
✅ **Accessibilité WCAG 2.1** : ARIA, contrastes, navigation clavier
✅ **Interactions fluides** : Smooth scroll, modales, formulaire contact fonctionnel (EmailJS ou Formspree)
✅ **PWA ready** : Manifest.json inline, service worker basique

STRUCTURE REQUISE :
1. Header fixe avec menu hamburger mobile + logo
2. Hero section accrocheuse avec CTA
3. Sections : À propos, Services/Portfolio, Témoignages, Contact
4. Footer avec liens sociaux, copyright

INNOVATIONS :
- Dark mode toggle
- Scroll progress bar
- Particles.js ou confettis sur CTA
- Formulaire avec validation JS + succès animé

LIVRABLES :
1. **Code HTML complet prêt à copier-coller**
2. **Preview live** : Lien CodePen/Replit/JSFiddle
3. **Checklist qualité** : Ce qui est implémenté
4. **Améliorations suggérées** pour prod

DÉTAILLE TON PROJET : [INSÈRE ICI]
Exemple : "Site e-commerce pour boutique de vêtements vintage, 5 produits, panier basique, couleurs pastel, vibe rétro 90s"

How to Use

1. Copy the full prompt text from the 'content' field above. 2. Paste it into Claude or ChatGPT, replacing '[DÉCRIS TON PROJET ou SITE ICI]' with your specific project details (e.g., 'landing page for a coffee shop'). 3. Add any custom requirements like colors, features, or content in the description section. 4. Generate the output and copy the single HTML file provided. 5. Save as .html, open in browser to test responsiveness and interactions. 6. Customize further using the checklist and suggestions in the output. 7. Deploy to Netlify/Vercel for live preview via drag-and-drop.

Comments

More Prompts

View all

Research

ChatGPT Web Browsing Research Agent

Structured web research using ChatGPT's browsing capability. Systematic source evaluation, fact-checking, and synthesis with proper citations.

Community

Development

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.

Community

Data 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.

Community

Productivity

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.

Community

Creative

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.

Community

Productivity

ChatGPT Canvas Collaborative Editor

Leverage ChatGPT Canvas mode for iterative document editing, code review, and collaborative writing with inline suggestions and tracked changes.

Community