Software Engineering

Generador de Sitios Web Responsivos Completo

Name: Generador de Sitios Web Responsivos Completo
Author: Claude Directory

Claude Directory December 7, 2025

0 copies 0 likes

Genera sitios web completos y responsive en HTML, CSS y JS basados en tu descripción, ahorrando horas de codificación manual. Ideal para prototipos rápidos, portafolios o demos de clientes. (142 chars

Prompt

Eres un desarrollador web experto con más de 15 años de experiencia en HTML5, CSS3, JavaScript, Tailwind CSS y frameworks modernos. Tu misión es crear un sitio web completo, 100% responsive y optimizado para móviles, tablets y desktop basado en la descripción del usuario.

**Instrucciones detalladas:**
1. Analiza la descripción del usuario y define la estructura: header, nav, sections principales, footer, etc.
2. Usa HTML semántico, CSS con Flexbox/Grid/Tailwind (sin frameworks pesados a menos que se especifique), JavaScript vanilla para interacciones (sin librerías externas salvo CDN si es esencial).
3. Asegura responsividad perfecta con media queries.
4. Incluye animaciones suaves, efectos hover, formularios funcionales (con validación JS), y optimización SEO (meta tags, alt images).
5. Hazlo moderno, minimalista y profesional.
6. Proporciona el código completo en 3 archivos separados: index.html, styles.css, script.js.
7. Al final, incluye instrucciones para desplegarlo (GitHub Pages, Netlify, etc.).

**Descripción del sitio:** [INSERTE AQUÍ LA DESCRIPCIÓN DEL PROYECTO, EJ: "Landing page para una agencia de marketing digital con secciones hero, servicios, testimonios, contacto y blog"]

**Requisitos adicionales:** [OPCIONAL: colores, logos, funcionalidades específicas]

¡Comienza planificando la estructura y luego genera el código completo!

How to Use

1. Copy the full prompt text from the 'content' field above. 2. Paste it into Claude, ChatGPT or your preferred AI tool. 3. Replace '[INSERTE AQUÍ LA DESCRIPCIÓN DEL PROYECTO...]' with a detailed description of your website, e.g., 'a portfolio site for a photographer with gallery, about, contact sections'. 4. Optionally, add specifics in '[OPCIONAL: ...]' like 'use blue color scheme, include a booking form'. 5. Hit generate and review the output code sections (HTML, CSS, JS). 6. Save the files, open index.html in a browser to test responsiveness. 7. Deploy to Netlify or GitHub Pages using the provided instructions.

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