RESTAURANTE Y COMIDA · Claude Design · Tailwind · Vanilla JS

Kiku Sabor – Alta cocina japonesa con tradición y elegancia

★★★★★4,7 4.329 descargas

Tema web para Kiku Sabor, un restaurante de alta cocina japonesa que combina tradición y elegancia. Diseño moderno con TailwindCSS, tipografía Playfair Display e Inter, y animaciones suaves.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

You are Claude Design. Create a single‑file website that reproduces the visual pattern of a modern Japanese restaurant landing page, using only TailwindCSS via CDN and vanilla JavaScript. No external assets besides placeholders. Follow these specifications:

**Brand**: Kiku Sabor (kikusabor.com). Claim: "Tradición y elegancia en cada bocado". Use generic placeholder texts in Spanish (no copied phrasing).

**Palette**: Dark navy #0A1F33, Soft amber #D9A66B, Light ivory #FAF5EF, Accent red #C74440, White #FFFFFF.

**Typography**: Headings – "Playfair Display" (serif), Body – "Inter" (sans). Load from Google Fonts.

**Layout**:
1. **Header (fixed)** – left side logo placeholder, right side hamburger icon that toggles a vertical overlay menu with links: ABOUT, DISHES, RESERVATION, GALLERY. Menu slides from right with smooth transition.
2. **Hero section** – full‑height, background patterned SVG wave (use CSS repeating‑linear‑gradient to mimic). Centered stacked texts:
   - Line 1: "UN SABOR DE JAPÓN" (uppercase, tracking wide, color amber).
   - Line 2: "SUSHI & RAMEN" (large, Playfair, color white).
   - Line 3: "UN PLATO A LA VEZ" (same style as line 1).
   Below, a heading "COMIDA JAPONESA MODERNA" (h1, Playfair, white) and three overlapping food images (use unsplash placeholders) positioned with absolute/flex layers.
   Two primary buttons: "VER MENÚ" and "SCROLL PARA MÁS". Buttons use amber background, white text, rounded, with a right‑pointing arrow SVG rotated 90°.
3. **About section** – full‑width background wave same as hero. Two‑column layout: left column text block with heading (Playfair, amber) and paragraph describing the concept; right column circular portrait placeholder of the chef with caption "CHEF AKIRA" and "FUNDADOR" underneath.
4. **Dishes section** – background wave, title "CREACIONES ESTELARES" (uppercase, amber). Grid of 3 cards (responsive: 1‑col mobile, 3‑col desktop). Each card:
   - Image placeholder (ratio 4:3).
   - Overlay label "ONLY" and price "127€ / SERVE" in amber badge.
   - Dish name below image.
   Add numeric slide indicator (01, 02, 03 / 03) on the left side.
   Primary button "EXPLORAR MENÚ COMPLETO" below grid.
5. **Reservation section** – background wave, large vertical text animation spelling "HANAKANA" (each letter appears with fade‑in on scroll). Centered decorative chopsticks SVG (inline). Simple reservation form: Name, Date, Guests, Submit button (amber, full width).
6. **Footer** – dark navy background, small columns: navigation links, social icons (use simple inline SVGs), and contact line "© 2026 Kiku Sabor - hola@kikusabor.com".

**Interactions**:
- Hamburger toggles overlay menu with fade/slide.
- Buttons have hover scale (scale‑105) and shadow.
- Scroll‑triggered fade‑in for sections (use IntersectionObserver).
- Image hover zoom effect.

**Technical**:
- Include `<script>` at bottom handling menu toggle, scroll animations, and simple form validation.
- Use Tailwind CDN: `<script src="https://cdn.tailwindcss.com"></script>` with custom config to add the palette colors.
- Ensure responsive design (mobile first). No external JS libraries.
- All text must be original Spanish, active voice, no marketing clichés.
- Export as a single HTML file.

Generate the complete HTML content.

---

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

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Barra superior fija con logo y menú hamburguesa
1.2 Hero con fondo wavy, títulos superpuestos y botón primario
1.3 Sobre nosotros con encabezado, párrafo y foto del chef
1.4 Platos destacados en grid, cada ítem con imagen, label "ONLY", precio y nombre
1.5 Reserva con animación de letras y elemento decorativo de palillos
1.6 Footer con enlaces de sección y datos de contacto

ABOUT

1.1 Encabezado grande y descriptivo
1.2 Subtítulo con nombre y cargo del chef
1.3 Imagen del chef en formato retrato

DISHES

1.1 Título de la colección
1.2 Grid de platos (mínimo 3 items) con imagen, precio y nombre
1.3 Navegación numérica de slides
1.4 Botón para ver menú completo

RESERVATION

1.1 Texto animado con letras individuales
1.2 Icono de palillos decorativo
1.3 Formulario de reserva simplificado (nombre, fecha, número de comensales, botón enviar)

FOOTER

1.1 Enlaces de navegación rápida
1.2 Iconos de redes sociales
1.3 Información de copyright y contacto

PROMPTS RELACIONADOS · RESTAURANTE Y COMIDA

Otros prompts de la misma categoría

Ficha de marca

Nombre: Kiku Sabor
Sector: Restaurante de alta cocina japonesa
Claim: Tradición y elegancia en cada bocado

Bloques de la home

1.1 Barra superior fija con logo y menú hamburguesa
1.2 Hero con fondo repetido, título principal, subtítulo, botón de ver menú y llamada a scroll
1.3 Sección "Sobre nosotros" con texto descriptivo y foto del chef
1.4 Sección de platos destacados en cuadrícula con labels y precios
1.5 Sección de reserva con elemento tipográfico animado y chopsticks decorativos
1.6 Footer 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

Kiku Sabor – Alta cocina japonesa con tradición y elegancia

Cópialo y pégalo en Claude Design

Tabla de secciones

HOME

ABOUT

DISHES

RESERVATION

FOOTER

Otros prompts de la misma categoría

Línea Áurea

Ágora Verde

AgriPulse

AgroVerde