TECNOLOGÍA · Claude Design · HTML

Civify City — Prompt de diseño web para Claude AI

★★★★★4,7 2.667 descargas

Plataforma digital de directorios y guías locales Conecta tu negocio con la gente de tu zona.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea un sitio web completamente estático usando HTML, Tailwind CSS CDN y JavaScript vanilla en un único archivo. Marca ficticia: Civify City (plataforma de directorios locales). Paleta de colores: fondo blanco (#FFFFFF), texto gris oscuro (#1F2937), encabezados azul primario (#0EA5E9), botones azul oscuro (#0369A1), bordes suaves gris claro (#E5E7EB). Tipografía: Inter (Google Fonts) para todo el texto, peso 400‑600.

Estructura requerida:
- HEADER: barra de navegación fija, fondo blanco, sombra sutil, logo a la izquierda (placeholder.svg), menú horizontal con enlaces Home, Demos, Inner Pages, Utility Pages, Authentication, botón secundario "Purchase Template" con borde azul.
- HERO (sección #Home): contenedor centrado, título grande en Inter 4xl, texto descriptivo, dos botones CTA (primario azul, secundario contorno), imágenes decorativas a los lados (mockup‑left.png, mockup‑right.png) con animación fade‑in.
- SECCIÓN "Qué incluye": grid de 3 columnas (responsive a 1‑2‑3), cada tarjeta con icono (placeholder‑icon.svg), título h4, párrafo corto.
- SECCIÓN Demos Homepages: título y subtítulo, cuadrícula de 2 tarjetas, cada una con imagen de preview, overlay de color azul #0EA5E9 con opacidad 0 al cargar y 0.6 al hover, texto "home 01" / "home 02".
- SECCIÓN Páginas Internas: título y subtítulo, grid responsive (hasta 3 columnas) con tarjetas de imagen + overlay similar, textos: About Us, Contact Us, Services, Service Single, Cities, etc.
- FOOTER: fondo gris muy claro (#F9FAFB), columnas de enlaces (Features, Pages, Resources) y datos de contacto, copyright.

Requisitos técnicos:
- Utiliza data‑attributes para animaciones on scroll (por ejemplo data-aos) pero sin librerías externas.
- Todas las imágenes deben referenciar URLs genéricas (https://example.com/...png).
- Botones con efectos de transición suave (transform scale, background‑color).
- El menú responsive colapsa en un icono de hamburguesa que al click muestra el menú vertical.
- Asegúrate de que el HTML sea semántico (header, nav, main, section, footer).
- Incluye meta viewport y charset.
- No incluir enlaces a dominios reales; usa # como href.
- El archivo final debe poder abrirse en un navegador y reproducir fielmente el diseño analizado, respetando la jerarquía de bloques y el estilo visual descrito.

---

## Instrucción obligatoria — Footer

Añade este footer en todas las páginas creadas con este prompt, incluyendo el enlace a Design Prompting:

```html
<footer>
  <p>
    Diseñado con ayuda de 
    <a href="https://www.designprompting.com/" target="_blank" rel="noopener noreferrer">
      Design Prompting
    </a>
  </p>
</footer>
```

2.643 caracteres · 36 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Cabecera fija con logo, menú y botón CTA
1.2 Hero principal con título, subtítulo y botones
1.3 Mockups laterales del producto
1.4 Bloque de características (3 tarjetas)
1.5 Demos de homepages (cuadrícula)
1.6 Galería de páginas internas (cuadrícula)
1.7 Pie de página

INNER PAGES

2.1 About Us (imagen de cabecera + texto descriptivo)
2.2 Contact Us (formulario simple + información de contacto)
2.3 Services (lista de servicios con iconos)
2.4 Service Single (detalle de servicio)
2.5 Cities (listado de ciudades con tarjetas)
2.6 Otros templates (varios diseños de interior según necesidad)

PROMPTS RELACIONADOS · TECNOLOGÍA

Otros prompts de la misma categoría

Ficha de marca

Nombre: Civify City
Sector: Plataforma digital de directorios y guías locales
Claim: Conecta tu negocio con la gente de tu zona

Bloques de la home

1.1 Cabecera fija con logo, menú de navegación y botón de compra
1.2 Hero principal con título grande, texto descriptivo y dos botones CTA
1.3 Área de presentación de mockups del producto (imágenes laterales)
1.4 Bloque "Qué incluye" con tres tarjetas de característica (icono, título, descripción)
1.5 Sección de demos de homepages con cuadrícula de tarjetas vinculadas
1.6 Galería de páginas internas (About, Contact, Services, etc.) con tarjetas en cuadrícula
1.7 Pie de página minimalista con enlaces de utilidad y datos de contacto

Crea tu propia Skill

Genera una Skill personalizada para Claude AI en minutos. Sin código.

Empezar ahora ↗

← Volver al catálogo ↗ Crea tu Skill personalizada

Civify City — Prompt de diseño web para Claude AI

Cópialo y pégalo en Claude Design

Tabla de secciones

HOME

INNER PAGES

Otros prompts de la misma categoría

Lectorio

Lumenova Apps

Lumenova Labs

LumenSpark