Web Design

Générateur de code HTML/CSS/JS pour site web responsive

Name: Générateur de code HTML/CSS/JS pour site web responsive
Author: Claude Directory

Claude Directory December 6, 2025

0 copies 0 likes

Generates complete, responsive HTML/CSS/JS code for modern websites without frameworks. Ideal for quick prototypes, one-pagers with built-in features like dark mode, forms, and SEO optimization (148 c

Prompt

Tu es un expert développeur web fullstack avec 20 ans d'expérience.

Génère du code HTML, CSS et JavaScript complet et fonctionnel pour créer un site web responsive moderne et professionnel basé sur la description fournie.

**RÈGLES OBLIGATOIRES :**
- HTML5 valide, CSS3, Vanilla JavaScript (AUCUN framework : pas Bootstrap, Tailwind, React etc.)
- 100% Responsive (Mobile First) avec media queries @media (max-width: 768px, 1024px)
- Accessible WCAG 2.1 (ARIA labels, contrastes >4.5:1, focus visible, alt texts)
- Performant : lazy loading images, code minifiable, < 100kb si possible
- SEO optimisé : balises sémantiques (header, nav, main, section, article, aside, footer), meta OpenGraph, schema.org JSON-LD
- Code parfaitement commenté, indenté, structuré
- Structure complète : <!DOCTYPE html><html lang="fr"><head> avec viewport, charset, title dynamique, CSS interne ou <style>, <script> à la fin body
- Polices : Google Fonts (1-2 max) + Font Awesome CDN gratuit

**FONCTIONNALITÉS INTÉGRÉES PAR DÉFAUT :**
- Menu hamburger responsive qui se transforme en menu horizontal desktop
- Scroll suave vers sections (smooth-scroll polyfill si besoin)
- Toggle Dark/Light mode (localStorage persistant)
- Formulaire contact avec validation JS (email, champs requis) + envoi simulé
- Animations CSS au scroll (intersection observer)
- Boutons CTA sticky sur mobile
- Lazy loading pour images
- PWA ready (manifest basique)

**DESCRIPTION DU PROJET :**
[INSÉRER LA DESCRIPTION COMPLÈTE ICI]

Exemple : "Landing page pour restaurant italien : Hero avec image parallax et réservation CTA, menu avec grid cartes, galerie photos slider, équipe 4 photos, contact avec map Google embed, footer liens"

**INSTRUCTIONS FINALES :**
- Génère UNIQUEMENT le code HTML complet prêt à copier-coller
- Pas d'explications, pas de markdown, pas de texte supplémentaire
- Le code doit être autonome (tous CDN inclus)
- Teste mentalement la responsivité et l'accessibilité

How to Use

1. Copy the full prompt content exactly as provided. 2. Open Claude, ChatGPT, or your preferred AI chat interface. 3. Paste the prompt into the chat. 4. Replace '[INSÉRER LA DESCRIPTION COMPLÈTE ICI]' with a detailed description of your website, e.g., 'Landing page for a fitness coach: hero section with CTA, services grid, testimonials, pricing, contact form.' 5. Optionally, specify colors, branding, or extra features in the description. 6. Submit the prompt and wait for the generated HTML code. 7. Copy the output code into a new file named index.html. 8. Open the file in a web browser to test responsiveness and features.

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