COMERCIO ELECTRÓNICO · Claude Design · HTML

Tienda Alba — Prompt de diseño web para Claude AI

★★★★★4,7 2.807 descargas

Agencia creativa y de diseño digital Diseñamos experiencias visuales sin ruido.

↓ 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 Tienda Alba (tiendaalba.com), agencia digital de diseño creativo. Utiliza una única página HTML que incluya Tailwind CSS a través del CDN y JavaScript vanilla en un bloque <script>. La paleta debe ser estrictamente monocromática: fondo #ffffff, texto #000000, acentos #111111 y #222222. Tipografía: headings con 'Playfair Display', cuerpo con 'Inter', ambas importadas de Google Fonts. 

HEADER: barra superior fija con logo (80px ancho, texto "Tienda Alba" en Playfair, peso 700) y al lado un botón hamburguesa que al hacer clic muestra un overlay circular oscuro (rgba(0,0,0,0.9)) con enlaces verticales: Studio, Work, News, Contact. A la derecha del header incluye ícono de carrito (SVG negro) con contador circular pequeño.

HERO (sección 1.1):

πµ╫ττ≥┤σ ╔▀ε▓◘█φ ±═²◘Ω┴╦ ≡╠╣┼²│ⁿ ß├═╫♣░Σ δß╡δ∞◙π ║δ↔┼±▀
 ▓■φ╫└δ╠ ▓♣♦→µ╬└ │π╦ß∩█² │σ├╔╬╗τ Φ┼↔═≤τ→ └σ┴Σ■↑█ α↓•α▓
├ ╬╝π≥├│┼ ▒±╝τ│▀┬ Φ▒α◙ε▒╠ ╚◘•└▀┴↓ ↓╡╗↑╦▓┼ ↔↔╦░█╡• α↔█◙
┤≡ δ←═╗±√╬ ╫πΩ∞▒τ≡ ═±Φ≤≡╡α ↔╗Φµ≡◙│ ◙σ•╗µ♦↔ ╡╠←♠╗▀└ ±±≥
φ↔┤ Ω↓↑╗╔±╝ ²█φ╬╫Ω↑ ↔↓█≤■┼← ◙≥≤≤▓┤α ║Φ┤Σ▀²╩ ▀ε└▀φ┴╚ ┴Φ
∞╝♠┬ √Σ█├║╡σ µ└→▀≡╗± α≥▓ß≥◙µ ═╠ε↔Ω╦┴ ┼εΦ♦µ◘• ←∩Σ▓│↑╡ ♣
╝▓═≡ß ↔╡µ╫╡♦ε ╫♣╣←║↔╚ ≡φ█τ²╩─ δ■░◘╔╦ⁿ ▓±φ²♦■Σ ←Ω↔ⁿσ╦π 
◘ßστ╚│ ┴┬╚╠♠ß─ ╣↔╫┼∞┤τ ├•▀├╔│♠ √╝↔→◘↑╔ µ≥α╩±ß≥ ²↑│→τ╦┬
↔┤π↔█↔← ▀═±π↓τ∩ │╣◘φ│∞→ ↔■•═╬╩┼ φ├µ↑▒±ε ╫ⁿ█└╗√┤ ╫↑─▒═█
 √└∞╠╣♣φ ┼±╫▀≥╫↓ ╝■±α♣√δ ◘┼╦♦→φ∞ ↓╔┤└┴∩┤ σ≤╗♦◙Σ▓ →╣╠ε↔
ⁿ ε╫≡α╚╦↑ φ╩└∩╔╝╗ █└╩↑≤↔≥ ↓╩├▒ΦΣ─ ▀Ω≤ⁿ┴♦τ ♣╣▓φ├∩█

4.248 caracteres · solo descargable completo ↓ Descargar PROMPT.md completo

4.248 caracteres · licencia libre Solo descarga completa disponible

CAPTURA COMPLETA · HOME

Para que Claude replique el diseño con máxima fidelidad, descarga la imagen y adjúntala en tu chat. Descargar captura

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Hero con logo, logo‑text y botón de carrito
1.2 Botón de menú hamburguesa que abre overlay
1.3 Sección de presentación con título y subtítulo
1.4 Grid de proyectos destacados (3‑4 tarjetas)
1.5 Bloque de estadísticas / contadores
1.6 Llamada a la acción “Hire Us”
1.7 Footer con enlaces sociales y copyright

ABOUT

2.1 Hero interno con título “Studio”
2.2 Texto descriptivo de la agencia
2.3 Equipo (cards con foto y rol)
2.4 Valores o procesos en columnas
2.5 Footer

WORK

3.1 Hero interno con título “Work”
3.2 Grid de proyectos (imagen + título + categoría)
3.3 Filtro por categoría (tabs)
3.4 CTA para contactar
3.5 Footer

NEWS

4.1 Hero interno con título “News”
4.2 Lista de artículos (imagen, título, extracto, fecha)
4.3 Paginación simple
4.4 Footer

CONTACT

5.1 Hero interno con título “Contact”
5.2 Formulario de contacto (nombre, email, mensaje, botón)
5.3 Mapa estático o ilustración de ubicación
5.4 Información de contacto y redes sociales
5.5 Footer

CART (overlay)

6.1 Cabecera “Your Cart” con botón cerrar
6.2 Lista de productos (imagen, nombre, precio, cantidad editable, botón eliminar)
6.3 Subtotal y botón “Continue to Checkout”
6.4 Estado vacío con mensaje y botón a paquetes
6.5 Footer del overlay

Imagen generada con OpenRouter · Nano Banana (Gemini 2.5 Flash Image) · google/gemini-2.5-flash-image · 10/07/2026

PROMPTS RELACIONADOS · COMERCIO ELECTRÓNICO