RESTAURANTE Y COMIDA · Claude Design · HTML

Marea Zen — Prompt de diseño web para Claude AI

★★★★★4,6 596 descargas

Restaurante de cocina japonesa y sushi Sabores auténticos del Pacífico.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea un sitio web estático completo para la marca ficticia **Marea Zen** (restaurante japonés) usando **HTML**, **Tailwind CSS CDN** y **JavaScript vanilla** en un solo archivo. El proyecto debe reproducir fielmente la estructura y estilo del sitio analizado, sin copiar textos ni imágenes reales.

**Alcance**
- Header fijo con logo a la izquierda, menú ancla (Home, Sobre, Platos, Menú, Blog, Contacto) centrado y botón de carrito a la derecha que abre una barra lateral derecha.
- Hero section: fondo de imagen full‑width (usar placeholder `https://picsum.photos/seed/hero/1600/900`), texto central grande con botón primario "Reservar" que abre el modal de reserva.
- Modal de reserva (overlay semi‑transparent) con formulario: nombre, email, fecha, hora, comensales, botón "Confirmar".
- Sección Sobre nosotros: dos columnas, texto descriptivo y foto placeholder (`https://picsum.photos/seed/about/600/400`).
- Destacados de platos: grid 3‑col (responsive a 1‑col móvil) de tarjetas con imagen placeholder, nombre del plato y breve descripción; botón "Ver detalle" abre otro modal con información ampliada.
- Menú: tabs horizontales para categorías (Entrantes, Sushi, Rolls, Postres, Bebidas). Cada tab muestra una lista de ítems con nombre, breve descripción, precio y botón "Añadir" que actualiza el contador del carrito.
- Blog: sección con 3 tarjetas de artículos (imagen placeholder, título, fecha, extracto, enlace "Leer más").
- Contacto: formulario (nombre, email, mensaje) + bloque de información de localización (dirección, teléfono, email) y horario de apertura. Incluye iframe de Google Maps con URL genérica.
- Footer: fondo oscuro, logo pequeño, breve tagline, enlaces rápidos, iconos de redes (usar SVG genéricos), campo de suscripción newsletter.

**Paleta de colores** (extraída del original):
- Primario: #0D1B2A (azul marino profundo)
- Secundario: #1B263B (gris azul
- Accent: #E0A96D (oro rosado)
- Fondo claro: #F5F5F5
- Texto oscuro: #2E2E2E

**Tipografía**: `Inter` para todo el cuerpo y `Playfair Display` para headings. Cargar ambas desde Google Fonts.

**Interactividad**
- Botón de carrito muestra/oculta la barra lateral y actualiza cantidad de ítems.
- Modal de reserva y detalle de plato abren y cierran con animación fade‑in/out.
- Tabs del menú cambian de contenido sin recargar página.
- Formularios validan campos requeridos con mensajes simples.
- Scroll suave al hacer click en enlaces de menú.

**Requisitos técnicos**
- Utilizar solo CDN de Tailwind (`https://cdn.tailwindcss.com`) y Google Fonts.
- Todo el código JavaScript debe estar dentro de `<script>` al final del body.
- Mantener estructura semántica (header, main, sections, footer).
- Incluir comentarios claros en el código para cada bloque.
- No usar imágenes reales; emplear placeholders de `picsum.photos`.
- El archivo debe ser autosuficiente y listo para abrir en el navegador.

Entrega el código completo listo para copiar‑pegar.

---

## 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.281 caracteres · 55 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Header con logo, menú ancla y botón de carrito lateral
1.2 Hero con imagen de fondo y llamada a la acción
1.3 Sección de reserva rápida (modal overlay)
1.4 Sobre nosotros con texto descriptivo
1.5 Destacados de platos (grid de tarjetas)
1.6 Menú completo con tabs
1.7 Blog con tarjetas de artículos
1.8 Contacto y mapa
1.9 Footer con información de contacto, redes y suscripción

RESERVA

2.1 Formulario de reserva con campos de nombre, fecha, hora y número de comensales
2.2 Botón enviar y mensaje de confirmación

PLATOS

3.1 Grid de tarjetas con imagen, nombre y breve descripción de cada plato
3.2 Botón "Ver detalle" que abre modal con información ampliada

BLOG

5.1 Tarjetas de artículos con imagen, título, fecha y extracto
5.2 Enlace a artículo completo

CONTACTO

6.1 Formulario de contacto (nombre, email, mensaje)
6.2 Información de ubicación y horario
6.3 Enlace a mapa integrado

FOOTER

7.1 Logo y breve descripción
7.2 Enlaces rápidos (Home, Sobre, Menú, Blog, Contacto)
7.3 Redes sociales iconos
7.4 Suscripción newsletter (campo email y botón)

PROMPTS RELACIONADOS · RESTAURANTE Y COMIDA

Otros prompts de la misma categoría

Ficha de marca

Nombre: Marea Zen
Sector: Restaurante de cocina japonesa y sushi
Claim: Sabores auténticos del Pacífico

Bloques de la home

1.1 Header con logo, menú ancla y botón de carrito lateral
1.2 Hero con imagen de fondo y llamada a la acción
1.3 Sección de reserva rápida (modal overlay)
1.4 Sobre nosotros con texto descriptivo
1.5 Destacados de platos (grid de tarjetas)
1.6 Menú completo con tabs
1.7 Blog con tarjetas de artículos
1.8 Contacto y mapa
1.9 Footer con información de contacto, redes y suscripción

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

Marea Zen — Prompt de diseño web para Claude AI

Cópialo y pégalo en Claude Design

Tabla de secciones

HOME

RESERVA

PLATOS

MENU

BLOG

CONTACTO

FOOTER

Otros prompts de la misma categoría

Kiku Sabor

Línea Áurea

Ágora Verde

AgriPulse