CREATIVO · Claude Design · HTML

PixelMosaico — Prompt de diseño web para Claude AI

★★★★★4,7 3.263 descargas

Plantilla web para agencias y creativos digitales Recursos y diseños listos para lanzar tu presencia online.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea una página web completa para la marca ficticia "PixelMosaico" (dominio pixelmosaico.com) usando solo HTML en un solo archivo, Tailwind CSS CDN y JavaScript vanilla (sin dependencias externas). Reproduce la estructura visual del sitio analizado, conservando los patrones de UI pero con contenido totalmente original en español de España.

---
**Paleta de colores**
- Primary: #0D3B66 (azul marino profundo)
- Accent: #F4D35E (amarillo cálido)
- Secondary: #EE964B (naranja suave)
- Background: #F9F9F9 (gris casi blanco)
- Text: #333333 (gris oscuro)

---
**Tipografía**
- Fuente principal: "Inter", sans-serif (carga desde Google Fonts)
- Fuente secundaria: "Playfair Display", serif para títulos destacados

---
**Header**
- Barra de navegación fija, altura 80px, fondo blanco, sombra ligera.
- Logo a la izquierda (texto "PixelMosaico" en Inter, negrita, color primary).
- Menú horizontal con enlaces: Intro, Sobre nosotros, Blog, Contacto.
- Botón destacado "Comenzar" a la derecha con fondo primary y texto blanco.
- Menú colapsable en móvil (icono hamburguesa).

---
**Sección 1: Hero**
- Contenedor centrado, margen superior 120px, máximo ancho 1200px.
- Tagline pequeña en mayúsculas, color secondary.
- Título grande (h1) en Playfair, 4xl, color primary.
- Párrafo descriptivo en Inter, gris.
- Botón CTA "Explorar páginas" con fondo accent, hover darken.
- A la derecha, carrusel de cinco capturas de pantalla (imágenes de placeholder) con desplazamiento automático y control de navegación.

---
**Sección 2: Galería de logotipos**
- Grid de 6 columnas en escritorio, 2 columnas en móvil.
- Cada celda contiene un SVG de logotipo ficticio (Iceberg, Blossom, Luminous, Minty, Sitemark, Product) coloreados con primary.

---
**Sección 3: Bloque informativo**
- Repetición estilística del hero pero sin carrusel.
- Título "Intro PixelMosaico Template" y párrafo similar al original, adaptado al tono de la marca.

---
**Sección 4: Métricas**
- Grid de 2 tarjetas con icono circulado (usar placeholders) y texto: "30+ Páginas" y "65+ Símbolos".
- Fondo blanco, borde sutil, sombra ligera.

---
**Sección 5: Páginas principales**
- Grid de 3 filas, cada fila 3 tarjetas (total 9). Cada tarjeta es un enlace a una página de ejemplo (Home vr.1, Home vr.2, Home vr.3, Blog vr.1, Blog vr.2, Blog vr.3, Pricing, FAQ, Contact).
- Tarjeta con mini‑imagen de fondo (placeholder) y título superpuesto en fondo semi‑transparente.
- Hover: escala 1.05 y sombra aumentada.

---
**Footer**
- Fondo primary, texto en blanco.
- Tres columnas: Navegación (Intro, Sobre, Blog, Contacto), Recursos (Style‑Guide, Licencias, Changelog), Legal (Política de privacidad, Términos).
- Íconos de redes sociales (Twitter, Instagram, LinkedIn) con hover a accent.
- Texto pequeño con © 2026 PixelMosaico.

---
**Interactividad**
- Menú móvil abre/cierra con transición de altura.
- Carrusel del hero avanza cada 5 s y permite navegación manual.
- Smooth scroll para anclas internas.
- Responsividad completa (mobile‑first).

---
**Requisitos técnicos**
- Incluir `<meta charset="utf-8">` y viewport.
- Enlace a Tailwind CSS CDN (`https://cdn.tailwindcss.com`).
- Enlace a Google Fonts para Inter y Playfair Display.
- Todo el CSS debe generarse vía clases de Tailwind; evitar estilos personalizados.
- JavaScript debe estar al final del body, escrito en modo estricto, sin librerías externas.
- Comentarios claros en el código explicando cada bloque.
- Mantener una estructura semántica (header, main, section, footer).

Genera el archivo HTML completo siguiendo estas indicaciones.

---

## 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>
```

3.906 caracteres · 95 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Cabecera con logo, navegación y botón "Comenzar"
1.2 Hero: tagline, título grande, párrafo descriptivo, botón "Explorar páginas"
1.3 Galería de capturas (imágenes en carrusel)
1.4 Grid de logotipos de marcas
1.5 Bloque de introducción reiterado
1.6 Grid de 2 tarjetas métricas (30+ páginas, 65+ símbolos)
1.7 Grid de 3 filas de tarjetas de páginas principales (Home vr.1, vr.2, vr.3, Blog vr.1, vr.2, etc.)
1.8 Footer con enlaces secundarios y redes sociales

ABOUT

1.1 Cabecera común
1.2 Sección de texto descriptivo sobre la empresa
1.3 Equipo o valores (placeholder)
1.4 Footer

BLOG

1.1 Cabecera común
1.2 Lista de artículos en grid
1.3 Sidebar con categorías y últimos posts
1.4 Footer

CONTACT

1.1 Cabecera común
1.2 Formulario de contacto (nombre, email, mensaje)
1.3 Mapa incrustado (placeholder)
1.4 Footer

PROMPTS RELACIONADOS · CREATIVO

Otros prompts de la misma categoría

Ficha de marca

Nombre: PixelMosaico
Sector: Plantilla web para agencias y creativos digitales
Claim: Recursos y diseños listos para lanzar tu presencia online

Bloques de la home

1.1 Cabecera con logo, navegación principal y botón de acción
1.2 Hero con encabezado, subtítulo, botón principal y carrusel de capturas de pantalla
1.3 Galería de logotipos de marcas ficticias
1.4 Bloque informativo de introducción con título y descripción
1.5 Tarjetas de métricas (30+ páginas, 65+ símbolos)
1.6 Sección de páginas principales con cuadrícula de tarjetas enlazadas
1.7 Pie de página minimalista con enlaces de navegación y redes sociales

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

PixelMosaico — Prompt de diseño web para Claude AI

Cópialo y pégalo en Claude Design

Tabla de secciones

HOME

ABOUT

BLOG

CONTACT

Otros prompts de la misma categoría

CalleArte

Línea Ágil

Línea Aurora

Línea Íntima