HomeCasa Prompts

Crear una web profesional completa

Genera la estructura, el contenido y el código HTML/CSS de una web profesional responsive para un negocio, con SEO básico y accesibilidad. Pensado para ChatGPT, Claude y Gemini. Incluye 7 variables personalizables y se copia gratis en un clic.

Intermedio · Código · Pendiente de revisión editorial

Pensado para:

Prompt

Actúa como desarrollador web senior y diseñador UX especializado en webs para pequeñas empresas.

Quiero crear la web profesional de {{negocio}}, un negocio de {{sector}} ubicado en {{ubicacion}}.
Público objetivo: {{publico}}.
Objetivo principal de la web: {{objetivo}}.

Entrega, en este orden:
1. Mapa del sitio con las páginas necesarias y el propósito de cada una.
2. Para la página de inicio: estructura de secciones (hero, propuesta de valor, servicios, prueba social, llamada a la acción, contacto) con textos reales listos para usar, en un tono {{tono}}.
3. Código HTML5 semántico y CSS moderno (Flexbox/Grid, variables CSS, mobile-first) de la página de inicio en un único bloque, sin frameworks externos.
4. Etiquetas SEO: title (máx. 60 caracteres), meta description (máx. 155) y datos estructurados JSON-LD de tipo LocalBusiness con campos de ejemplo marcados como [COMPLETAR].
5. Lista de comprobación de accesibilidad (contraste, textos alternativos, navegación por teclado) aplicada al código.

Restricciones:
- No inventes datos de contacto, precios ni reseñas: usa marcadores [COMPLETAR].
- Paleta de colores: {{colores}}.
- Explica brevemente cada decisión de diseño importante.

Cómo usarlo

  1. Rellena las variables con los datos reales de tu negocio.
  2. Pega el prompt en tu asistente de IA.
  3. Revisa el código en un editor y sustituye todos los marcadores [COMPLETAR] antes de publicar.
  4. Pide iteraciones concretas: «haz el hero más compacto en móvil» o «añade una sección de preguntas frecuentes».

Ejemplo de uso

Negocio: Fisioterapia Lumen · Sector: fisioterapia deportiva · Ubicación: Valencia · Objetivo: conseguir reservas de primera cita.

Resultado de ejemplo

1. Mapa del sitio

  • Inicio: presentar el estudio y llevar a pedir presupuesto.
  • Servicios: reforma integral, proyecto de interiorismo, asesoría por horas.
  • Proyectos: antes y después de viviendas reales.
  • Contacto: formulario de presupuesto y datos [COMPLETAR].

3. Código de la página de inicio (extracto)

<header class="hero">
  <h1>Tu primera casa, pensada para crecer contigo</h1>
  <p>En Estudio Aurora diseñamos reformas para familias jóvenes en Madrid: espacios luminosos, prácticos y a tu medida.</p>
  <a class="btn" href="#presupuesto">Pide tu presupuesto sin compromiso</a>
</header>

<style>
  :root {
    --blanco-roto: #f7f5f0;
    --salvia: #8a9a7b;
    --negro: #1c1c1c;
  }
  body { margin: 0; background: var(--blanco-roto); color: var(--negro); font-family: system-ui, sans-serif; }
  .hero { display: grid; gap: 1rem; padding: 4rem 1.25rem; max-width: 60rem; margin: auto; }
  .btn { justify-self: start; background: var(--negro); color: var(--blanco-roto); padding: .9rem 1.4rem; border-radius: .5rem; }
  .btn:focus-visible { outline: 3px solid var(--salvia); outline-offset: 3px; }
  @media (min-width: 48rem) { .hero { padding: 6rem 2rem; } }
</style>

El botón usa negro sobre blanco roto (contraste muy superior a 4,5:1); el verde salvia se reserva para detalles y el foco, porque sobre fondo claro no alcanza el contraste necesario para texto.

4. SEO

  • Title: Estudio Aurora | Interiorismo y reformas en Madrid
  • Meta description: Reformas e interiorismo para familias jóvenes en Madrid. Espacios luminosos y prácticos. Pide tu presupuesto sin compromiso…

Datos clave

Categoría
Programación y desarrollo · Crear páginas web
Tipo de resultado
Código
Nivel
Intermedio
Pensado para
ChatGPT, Claude y Gemini
Verificado en
Pendiente de verificación editorial
Variables
Nombre del negocio, Sector, Ubicación, Público objetivo, Objetivo de la web, Tono y Colores de marca
Idioma
Español
Precio
Gratis, sin registro
Actualizado
07/11/2026

Preguntas frecuentes

¿Puedo publicar directamente el código que genera la IA?

Úsalo como base: revisa el código en un editor, prueba la web en móvil y escritorio, sustituye los marcadores [COMPLETAR] y comprueba el contraste y los textos alternativos antes de publicar.

¿Sirve para WordPress u otros constructores?

Sí. El mapa del sitio, los textos y las etiquetas SEO se pueden trasladar a cualquier constructor. El HTML y CSS te sirven como referencia de diseño o para una web estática.

¿Cuántas páginas debería tener la web de un pequeño negocio?

Depende del objetivo, pero suele bastar con inicio, servicios, sobre nosotros, contacto y las páginas legales. El prompt te propone un mapa del sitio adaptado a tu caso.

¿Para qué sirve este prompt?

Genera la estructura, el contenido y el código HTML/CSS de una web profesional responsive para un negocio, con SEO básico y accesibilidad.

¿Con qué herramientas de IA funciona?

Está pensado para ChatGPT, Claude y Gemini. Todavía no lo hemos verificado en estas herramientas, por lo que los resultados pueden variar entre ellas.

¿Cómo personalizo el prompt?

Pulsa «Personalizar» y rellena las variables (Nombre del negocio, Sector, Ubicación, Público objetivo, Objetivo de la web, Tono y Colores de marca). El texto se actualiza al instante y después puedes copiarlo con un clic. Los valores se guardan solo en tu navegador.

¿Necesito experiencia para usarlo?

Es de nivel intermedio: conviene que conozcas el tema para aportar buen contexto y revisar el resultado con criterio.

¿Este prompt es gratis?

Sí. Todos los prompts de HomeCasa Prompts son gratuitos, sin registro ni suscripción. Puedes usarlos también en proyectos profesionales.

¿Puedo fiarme del resultado de la IA?

Úsalo como un borrador de calidad: revisa siempre datos, cifras y afirmaciones importantes antes de publicarlos o tomar decisiones.

Prompts relacionados