Web Design

Générateur de site web responsive (HTML/CSS/JS)

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

Claude Directory December 6, 2025

0 copies 0 likes

Génère un site web responsive complet en HTML/CSS/JS en un seul prompt, optimisé SEO et mobile-first. Idéal pour prototypes rapides, portfolios ou landing pages sans codage manuel (économise des heure

Prompt

Tu es un développeur web senior expert en HTML5, CSS3, JavaScript vanilla, Bootstrap 5 et design responsive. Crée un site web complet et entièrement responsive pour [THÈME OU PROJET, ex: portfolio personnel, landing page produit, blog, e-commerce basique]. 

INSTRUCTIONS OBLIGATOIRES :
1. Structure HTML sémantique parfaite (header, nav, main, section, article, aside, footer).
2. Design mobile-first : responsive sur tous les écrans (mobile, tablette, desktop) avec media queries.
3. Utilise Bootstrap 5 CDN pour accélérer + CSS personnalisé pour l'unicité.
4. Animations fluides JS (scroll, hover, carousel si pertinent).
5. SEO optimisé : meta tags complets, balises H1-H3, alt images, schema.org si applicable.
6. Performant : lazy loading images, minifié, < 2s chargement.
7. Accessible (ARIA, contrastes, navigation clavier).
8. Code complet en 1 fichier HTML unique avec <style> et <script> intégrés.
9. Palette couleurs moderne, typographie Google Fonts.

Fournis :
- Code HTML complet prêt à copier-coller.
- Aperçu visuel textuel (description).
- Instructions personnalisation.

THÈME : [INSÈRE ICI TON THÈME/PROJET DÉTAILLÉ]
Exemple : 'Landing page pour coach fitness avec sections hero, services, témoignages, contact form'.

How to Use

1. Copy the full prompt text from the 'content' field above. 2. Paste it into Claude or ChatGPT, replacing [THÈME OU PROJET] with your specific idea, e.g., 'landing page for a coffee shop'. 3. Add details like colors, features, or sections in the theme description for customization. 4. Generate the output and copy the HTML code into a .html file. 5. Open in browser to test responsiveness; tweak via the provided instructions. 6. Deploy to GitHub Pages or Netlify for live preview. 7. Iterate by regenerating with refinements like 'add dark mode toggle'.

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