ALLIUMA — Guía completa para construir el website

Método: Vibe Coding con Claude Code · Sin e-commerce · Contacto por WhatsApp

Versión 1.1 · junio 2026 — Actualizada con inventario visual y atributo vegano

Cómo usar esta guía

Esta guía te dice exactamente qué construir, qué contenido poner en cada sección y cómo pedírselo a Claude Code. No necesitas saber programar. Solo necesitas tener clara la estructura y los textos antes de empezar a generar código.

El flujo de trabajo es:

Leer una sección de esta guía
Preparar el contenido (textos, fotos)
Darle a Claude Code el prompt de esa sección
Revisar el resultado y pedir ajustes

Antes de escribir una sola línea de código

Estas decisiones hay que tomarlas primero. Si empiezas a generar código sin esto, tendrás que rehacerlo.

1. Dominio y hosting

Dominio: alliuma.life (ya existe, verificar que está activo y apunta a algún servidor)

Hosting recomendado para vibe coding: Vercel o Netlify

Gratis para sitios estáticos
Despliegue con un clic desde GitHub
HTTPS automático
Son los que mejor se integran con el código que genera Claude

Cómo conectar: Claude Code puede generar el proyecto entero. Tú lo subes a GitHub y conectas el repositorio a Vercel. Claude te puede guiar en ese proceso paso a paso.

2. Stack tecnológico (qué pedirle a Claude)

Para un sitio como Alliuma, el stack ideal es:

HTML + CSS + JavaScript vanilla  →  opción más simple, Claude lo genera perfecto

O si quieres algo más estructurado:

Astro (framework de sitios estáticos)  →  mejor para SEO, más organizado

Recomendación para ti: Empieza con HTML/CSS/JavaScript puro. Es más fácil de entender, Claude lo genera sin errores, y para un sitio de 5 páginas es más que suficiente. Si en el futuro necesitas escalar, puedes migrar.

Prompt inicial para Claude Code:

Quiero crear un sitio web para una marca de superalimentos llamada Alliuma. 
El sitio será en HTML, CSS y JavaScript puros, sin frameworks.
Será un sitio de una sola página (single-page) con scroll suave entre secciones,
o múltiples páginas, aún no lo decido.
Por ahora solo configura la estructura base: index.html, styles.css, script.js,
y una carpeta /images vacía.

3. Contenido que debes tener listo ANTES de pedir código

No generes código sin tener esto preparado. El código es rápido; el contenido tarda.

Textos:

[ ] Tagline principal (ej: "La fruta que los Andes guardaron durante siglos")
[ ] Descripción de la empresa (2-3 oraciones)
[ ] Historia de Alliuma (3-4 párrafos, puedes adaptar el Dossier B2B)
[ ] Descripción del producto con sus beneficios
[ ] Lista de precios actualizada
[ ] Textos para cada producto (125g, 250g, 500g, 1kg)
[ ] 3-5 testimonios reales de clientes

Imágenes (las mínimas necesarias para lanzar):

El detalle completo de cada imagen — qué producir, con qué prompt y en qué orden — está en el documento ALLIUMA_INVENTARIO_VISUAL_Y_PROMPTS.md. Esta es la lista de lo que necesitas antes de escribir código:

[ ] alliuma-home-hero-territorio-desktop.avif — foto del territorio (hero)
[ ] alliuma-home-hero-territorio-mobile.avif — versión vertical del hero
[ ] Logo PNG con fondo transparente (ALLIUMA - Combinación blanco.png y color.png)
[ ] alliuma-producto-grupo-presentaciones.webp — las 4 bolsas juntas
[ ] alliuma-producto-125g-front.webp al 1kg-front.webp — packshots individuales
[ ] alliuma-producto-polvo-macro.webp — polvo y textura
[ ] alliuma-origen-ayapuma-panorama.webp — paisaje AyaPuma Samay
[ ] alliuma-origen-cosecha-manos.webp — manos cosechando
[ ] alliuma-receta-smoothie-bowl.webp, bebida-funcional.webp, granola-yogur.webp, postre.webp

Técnico:

[ ] Número de WhatsApp: +593 990 931 904
[ ] Email: contact@alliuma.life
[ ] Links a Instagram y Facebook
[ ] Google Analytics ID (opcional, para medir visitas)

Identidad visual — specs exactos para Claude

Cuando le pidas código a Claude, dale estos datos exactos para que los estilos sean consistentes.

Paleta de colores

Basada en los recursos visuales existentes de Alliuma:

css

/* Colores principales */
--color-tierra:     #3D2B1F;   /* marrón oscuro / textos principales */
--color-morado:     #5C1F6B;   /* morado del motilón / acentos */
--color-morado-claro: #8B3FA8; /* versión más viva del morado */
--color-crema:      #F5F0E8;   /* fondo cálido / secciones claras */
--color-verde:      #2D5016;   /* verde bosque / naturaleza */
--color-blanco:     #FFFFFF;
--color-negro:      #1A1A1A;

⚠️ Estos colores son una propuesta basada en los materiales visuales existentes. Si tienes los códigos exactos del manual de marca, úsalos en su lugar. Puedes abrirlos desde ALLIUMA - Usos de logotipo e isotipo.pdf.

Tipografías

css

/* Títulos grandes / display */
font-family: 'Sink', sans-serif;    /* retro, impactante */

/* Cuerpo de texto / párrafos */
font-family: 'Noto Sans', sans-serif;

/* Cómo cargarlas en el CSS:
   Sink está en /Tipografías/Sink.ttf
   Noto Sans está en /Tipografías/Noto_Sans/
   Se cargan con @font-face en el CSS */

Prompt para que Claude cargue las tipografías:

En el CSS, carga estas dos fuentes locales con @font-face:
- 'Sink' desde el archivo /fonts/Sink.ttf (usarla para h1, h2, h3)
- 'Noto Sans' desde /fonts/NotoSans-Regular.ttf (usarla para párrafos y botones)
Asegúrate de incluir también las variantes bold e italic de Noto Sans.

Espaciado y estilo general

- Máximo ancho de contenido: 1200px centrado
- Padding horizontal en mobile: 20px
- Secciones: mínimo 80px de padding arriba y abajo
- Bordes redondeados suaves: 8px en cards y botones
- Sombras: sutiles, no pesadas
- Estética general: natural, orgánica, premium pero no fría

Dirección visual — cómo producir y usar las imágenes

Esta sección resume las reglas del documento ALLIUMA_INVENTARIO_VISUAL_Y_PROMPTS.md. Léelo completo antes de generar cualquier imagen.

La proporción correcta

60% fotografía real: territorio, personas, cosecha, producto, recetas, testimonios.
30% ilustración artística generada con IA: procesos, beneficios, filosofía, fondos, separadores.
10% diseño SVG/CSS: íconos, gráficos, mapas, cifras, diagramas.

La IA complementa la realidad de Alliuma. No la reemplaza.

Concepto artístico: botánica andina contemporánea

El estilo visual de todas las ilustraciones generadas con IA debe combinar ilustración botánica precisa, gouache, lápiz de color, tinta fina, textura de serigrafía sobre papel natural, morado profundo, verdes de bosque, tierra volcánica y marfil cálido. Composición editorial, mucho espacio negativo, aspecto premium y culturalmente respetuoso.

Qué evitar siempre

Ilustración infantil o folclor turístico
Ponchos, llamas o símbolos andinos genéricos
Misticismo chamánico inventado
Estética boho o wellness genérica
Hojas flotantes sin sentido
Falsas comunidades generadas con IA
Paisajes inventados presentados como reales
Texto, logos o cifras dentro de las imágenes generadas con IA
El motilón representado como arándano, uva o açaí

Imágenes que deben ser reales — nunca generar con IA

Empaques y etiquetas · personas de las comunidades · equipo de Alliuma · testimonios · paisajes presentados como AyaPuma Samay o Imbabura · cosecha y procesos documentales · certificados · análisis nutricionales · comparaciones científicas · cifras · logotipo.

Bloques maestros para prompts de IA

Cuando pidas ilustraciones a una IA generativa, añade siempre estos bloques al final del prompt.

Bloque de estilo artístico (para todas las ilustraciones):

Premium contemporary Andean botanical editorial illustration for an ethical Ecuadorian
food brand. Naturalistic botanical accuracy, tactile gouache, colored pencil and fine ink,
subtle screen-print texture on warm uncoated paper, deep motilón purple, forest green,
volcanic charcoal, earth ochre and warm ivory, sophisticated modern composition, generous
negative space, refined and calm, culturally respectful, subtle geometric rhythm inspired
by Andean textile structures without copying sacred or specific indigenous symbols.
Not childish, not bohemian, not generic wellness branding, not tourist folklore,
no fantasy shamanism, no text, no letters, no logos, no watermark.

Bloque del motilón (cuando aparezca el fruto):

Use the supplied reference photographs of Hyeronima macrocarpa. Preserve the real shape,
scale, clustering, leaf structure and deep purple color of the motilón. Do not turn it
into blueberries, grapes, açaí berries or generic forest berries.

Regla para empaques (cuando aparezca el producto):

Use the supplied real Alliuma package image as an exact composited element. Preserve its
typography, label, logo, proportions, colors and printed information without alteration.
Do not redraw or reinterpret the packaging.

Qué imagen va en cada sección del sitio

Sección	Imagen principal	Imagen secundaria
Hero	`alliuma-home-hero-territorio-desktop.avif`	versión mobile
Propuesta de valor	`alliuma-iconos-atributos.svg`	—
Nosotros	`alliuma-origen-ayapuma-panorama.webp`	`alliuma-ilustracion-sumak-kawsay.webp`
Producto (fruto)	`alliuma-motilon-fruto-rama.webp`	`alliuma-ilustracion-botanica-motilon.webp`
Producto (polvo)	`alliuma-producto-still-life-principal.webp`	`alliuma-producto-polvo-macro.webp`
Liofilización	`alliuma-proceso-fruto-a-polvo.webp`	`alliuma-infografia-liofilizacion.webp`
Equivalencia	`alliuma-equivalencia-125g-1-3kg.webp`	—
Comparación antioxidante	`alliuma-comparacion-motilon.png` + `alliuma-comparacion-arandano.png`	—
Comprar	`alliuma-producto-125g-front.webp` a `1kg-front.webp`	`alliuma-producto-grupo-presentaciones.webp`
Origen	`alliuma-origen-ayapuma-panorama.webp`	`alliuma-origen-cosecha-manos.webp`
Origen (valores)	`alliuma-ilustracion-economia-regenerativa.webp`	—
Recetas	`alliuma-receta-smoothie-bowl.webp` et al.	—
Contacto / CTA final	`alliuma-footer-cta-background.webp`	—
Separadores	`alliuma-divider-botanico-left.png`	versión derecha y centro
Fondos opcionales	`alliuma-pattern-botanico-light.webp`	—

Arquitectura del sitio

El sitio es una Single Page Application (SPA) con scroll suave. Una sola URL (alliuma.life) y todo en una página larga dividida en secciones. Más simple para mantener y mejor para mobile.

alliuma.life/
│
├── #inicio       → Hero (pantalla completa con video o foto + tagline)
├── #nosotros     → Historia y valores de Alliuma
├── #producto     → El motilón: qué es, beneficios, equivalencias
├── #comprar      → Presentaciones, precios, botón a WhatsApp
├── #origen       → AyaPuma Samay, comunidad, territorio
└── #contacto     → WhatsApp, email, redes sociales

Páginas adicionales opcionales (fase 2):
├── /recetas      → Blog de recetas
└── /distribuidores → Formulario para B2B

Navegación fija (navbar): Logo a la izquierda + links de navegación a la derecha + botón CTA "Comprar ahora" que lleva a #comprar.

Sección por sección — specs completos

SECCIÓN 1: Hero (`#inicio`)

Función: Primera impresión. Detener el scroll. Transmitir quiénes son en 3 segundos.

Layout:

┌─────────────────────────────────────────┐
│  [IMAGEN/VIDEO FONDO — pantalla completa]│
│                                          │
│        LOGO ALLIUMA                      │
│                                          │
│   "Headline principal aquí"              │
│   Subtítulo de apoyo en una línea        │
│                                          │
│   [BOTÓN: Conoce el motilón]             │
│                                          │
└─────────────────────────────────────────┘

Contenido a preparar:

Headline: algo poderoso. Opciones:
- "La fruta que los Andes guardaron durante siglos"
- "Superalimento andino. Origen sagrado. Poder real."
- "Del volcán Imbabura a tu vida"
Subtítulo: "Motilón liofilizado — 2,5x más antioxidantes que el arándano"
Foto/video: horizontal, alta resolución, cielo o bosque del volcán Imbabura con luz cálida. Oscurecer con overlay para que el texto sea legible.

Imagen de esta sección: alliuma-home-hero-territorio-desktop.avif (escritorio) y alliuma-home-hero-territorio-mobile.avif (mobile). Brief de fotografía en el inventario visual, Imagen 01. Dejar espacio negativo a la izquierda para el titular.

Prompt para Claude:

Crea la sección hero del sitio. Debe ser de altura 100vh (pantalla completa).
Fondo escritorio: imagen /images/alliuma-home-hero-territorio-desktop.avif con overlay oscuro (rgba 0,0,0,0.45).
En mobile usar /images/alliuma-home-hero-territorio-mobile.avif con object-fit: cover.
Centrado vertical y horizontal. Elementos en este orden de arriba a abajo:
1. Logo /images/logo-blanco.png con max-width 180px
2. H1 con la fuente Sink: "La fruta que los Andes guardaron durante siglos"
3. Párrafo subtítulo en Noto Sans: "Motilón liofilizado — 2,5x más antioxidantes que el arándano"
4. Botón con fondo color #5C1F6B y texto blanco: "Conoce el motilón" — scroll suave a #producto
Todo el texto en blanco. Añade una animación de entrada sutil (fade-in) para los elementos.

SECCIÓN 2: Propuesta de valor rápida (sin ID propio)

Función: Después del hero, 3-4 íconos que resumen los valores principales. Sección de transición visual.

Layout:

┌──────────┬──────────┬──────────┬──────────┐
│  🌿      │  🏔️     │  💜      │  🤝     │
│ 100%     │  Origen  │ 2,5x más │  Comercio│
│ puro     │  andino  │ antioxid.│   justo  │
└──────────┴──────────┴──────────┴──────────┘

Contenido (5 ítems):

100% puro — Sin aditivos ni conservantes
100% vegano — Sin ingredientes de origen animal
Origen andino — Reserva natural Imbabura, Ecuador
Súper antioxidante — 2,5x más que el arándano
Comercio justo — Familias campesinas locales

Íconos a usar: alliuma-iconos-atributos.svg del inventario visual. Si aún no están listos, Claude puede generar íconos SVG simples de placeholder.

Prompt para Claude:

Crea una sección de 5 columnas con fondo color #F5F0E8.
Cada columna tiene: un ícono SVG (hoja/planta, vegetal/hoja verde, montaña, corazón, manos),
un título en Sink bold, y una línea descriptiva en Noto Sans.
En mobile, que se muestren en grid 2x2 con el quinto centrado debajo. Padding vertical: 60px.
Los 5 ítems son: [pega aquí el contenido de arriba]

SECCIÓN 3: Nuestra historia (`#nosotros`)

Función: Humanizar la marca. Contar el origen. Construir confianza y conexión emocional.

Layout:

┌────────────────────┬────────────────────┐
│                    │                    │
│   FOTO del lugar   │   Texto historia   │
│   (AyaPuma Samay)  │   y valores        │
│                    │                    │
└────────────────────┴────────────────────┘

En mobile: imagen arriba, texto abajo.

Contenido a preparar:

Título de sección: "Nacimos en el corazón de los Andes"
Cuerpo (adaptar del Dossier B2B, 3-4 párrafos):
- Párrafo 1: Quiénes son, dónde nacieron (Reserva AyaPuma Samay, territorio Karanki, Imbabura)
- Párrafo 2: El Sumak Kawsay — qué significa Buen Vivir como filosofía de la empresa
- Párrafo 3: La comunidad — familias campesinas, economía regenerativa
- Párrafo 4: La misión y visión en lenguaje humano (no corporativo)
Foto: paisaje de AyaPuma Samay o el volcán Imbabura (hay fotos en /Fotoagrafías/)

Imágenes de esta sección: alliuma-origen-ayapuma-panorama.webp (foto documental real, Imagen 17 del inventario). Opcionalmente alliuma-ilustracion-sumak-kawsay.webp como acento visual secundario.

Prompt para Claude:

Crea la sección #nosotros. Layout de dos columnas, mitad y mitad.
Columna izquierda: imagen /images/alliuma-origen-ayapuma-panorama.webp con border-radius 12px.
Columna derecha: título H2 en Sink "Nacimos en el corazón de los Andes",
luego 4 párrafos en Noto Sans con el texto que te voy a dar.
Fondo de la sección: blanco. En mobile: columna única, imagen arriba.
[Pega los 4 párrafos aquí]

SECCIÓN 4: El producto (`#producto`)

Función: Explicar qué es el motilón, por qué es especial, qué lo diferencia. Generar deseo.

Layout:

┌─────────────────────────────────────────┐
│   H2: "El motilón — superfruta andina"  │
│   Subtítulo introductorio               │
└─────────────────────────────────────────┘

┌─────────────────┬───────────────────────┐
│  Foto producto  │  Beneficios (lista    │
│  en contexto    │  visual con íconos)   │
│  natural        │                       │
└─────────────────┴───────────────────────┘

┌─────────────────────────────────────────┐
│   Tabla de equivalencia (visual)        │
│   "125g = 1,3kg fruta fresca"           │
└─────────────────────────────────────────┘

┌──────────────┬──────────────┬───────────┐
│  Smoothies   │   Bowls      │ Repostería│
│   y batidos  │              │           │
└──────────────┴──────────────┴───────────┘

Contenido a preparar:

Título: "El motilón — superfruta andina"
Intro: "Hyeronima macrocarpa. Fruta silvestre de los bosques nublados de Imbabura. Rica en antocianinas, polifenoles y antioxidantes naturales. Usada desde tiempos ancestrales en la colada morada, hoy disponible en su forma más concentrada."

Beneficios (para lista visual):

2,5x más antioxidantes que el arándano
Rico en antocianinas y polifenoles
Fuente natural de calcio, fibra y proteína vegetal
100% vegano — sin ingredientes de origen animal
Sin aditivos ni conservantes
Liofilizado en frío: todos los nutrientes intactos
Versátil: smoothies, bowls, repostería, suplementos

Equivalencia (para bloque visual destacado):

1 cucharadita   =   38 g de fruta fresca
1 cucharada     =   hasta 200 g de fruta fresca
125 g de bolsa  =   1,3 kg de fruta fresca entera

Usos (3 columnas con foto):

Smoothies y batidos
Bowls y desayunos
Repostería y snacks

Imágenes de esta sección:

Foto principal: alliuma-producto-still-life-principal.webp o alliuma-motilon-fruto-rama.webp
Ilustración de proceso: alliuma-proceso-fruto-a-polvo.webp (para la explicación de liofilización)
Equivalencia: alliuma-equivalencia-125g-1-3kg.webp (bolsa real + grupo de fruta)
Comparación: alliuma-comparacion-motilon.png y alliuma-comparacion-arandano.png (PNGs con fondo transparente, cifras en HTML)
Recetas: alliuma-receta-smoothie-bowl.webp, alliuma-receta-bebida-funcional.webp, alliuma-receta-granola-yogur.webp

Prompt para Claude:

Crea la sección #producto con fondo #F5F0E8.
Parte 1: Encabezado centrado con H2 en Sink y párrafo introductorio.
Parte 2: Dos columnas — izquierda imagen del producto (/images/alliuma-producto-still-life-principal.webp),
derecha lista de 7 beneficios con check icons o íconos circulares en color #5C1F6B.
Parte 3: Bloque de equivalencia con fondo blanco y border-left de 4px en #5C1F6B.
Mostrar las 3 equivalencias con el número grande en Sink y la descripción en Noto Sans.
Parte 4: Grid de 3 columnas con foto, título y descripción de usos.
Imágenes: /images/alliuma-receta-smoothie-bowl.webp, bebida-funcional.webp, granola-yogur.webp
En mobile todo apilado verticalmente.

SECCIÓN 5: Comprar (`#comprar`)

Función: Convertir. El visitante que llegó hasta aquí quiere comprar. Hacer el proceso lo más simple posible.

Layout:

┌─────────────────────────────────────────┐
│   H2: "Elige tu presentación"           │
│   Subtítulo de apoyo                    │
└─────────────────────────────────────────┘

┌──────────┬──────────┬──────────┬────────┐
│  125 g   │  250 g   │  500 g   │  1 kg  │
│  $14     │  $24     │  $44     │  $84   │
│[Pedir]   │[Pedir]   │[Pedir]   │[Pedir] │
└──────────┴──────────┴──────────┴────────┘

┌─────────────────────────────────────────┐
│  Descuentos por volumen (tabla limpia)  │
│  Envíos · Formas de pago               │
└─────────────────────────────────────────┘

Contenido a preparar:

Título: "Elige tu presentación"
Subtítulo: "Envíos a todo Ecuador. Pedidos por WhatsApp."
Cards de producto:

Presentación	Precio	Nota
Bolsa 125 g	$14	Ideal para probar
Bolsa 250 g	$24	La más popular
Bolsa 500 g	$44	Para uso frecuente
Bolsa 1 kg	$84	Mejor precio por gramo

Descuentos:
- 10 bolsas de 125g o 250g: precio especial
- 5 bolsas de 500g o 1kg: precio especial
- "¿Eres distribuidor o tienda? Escríbenos para precios B2B"

Botones de "Pedir": que abran WhatsApp con un mensaje predefinido. El link tiene este formato:

https://wa.me/593990931904?text=Hola,%20quiero%20pedir%20una%20bolsa%20de%20125g%20de%20motilón%20liofilizado

Prompt para Claude:

Crea la sección #comprar con fondo blanco.
Encabezado centrado: H2 en Sink "Elige tu presentación",
subtítulo "Envíos a todo Ecuador. Pedidos por WhatsApp."

Luego un grid de 4 cards. Cada card tiene:
- Nombre del producto (ej: "Bolsa 125 g") en Sink
- Precio grande ($14) en color #5C1F6B
- Una línea descriptiva (ej: "Ideal para probar")
- Botón verde con ícono de WhatsApp: "Pedir por WhatsApp"
  El botón debe abrir este enlace en nueva pestaña:
  https://wa.me/593990931904?text=Hola, quiero pedir [producto]

En mobile: 2 columnas de 2 cards.

Debajo de los cards, una sección gris claro con:
- Nota de descuentos por volumen
- Nota de precios B2B para distribuidores con link a WhatsApp

SECCIÓN 6: El origen (`#origen`)

Función: Reforzar la narrativa de marca. Esta es la sección que convierte compradores en fans. El consumidor ecuatoriano consciente conecta mucho con esta historia.

Layout:

┌─────────────────────────────────────────┐
│   Video o galería de fotos del lugar    │
│   (pantalla completa o ancho completo)  │
└─────────────────────────────────────────┘

┌─────────────────────────────────────────┐
│   "AyaPuma Samay — donde nace Alliuma"  │
│   Texto narrativo del territorio        │
└─────────────────────────────────────────┘

┌──────────────┬──────────────┬───────────┐
│  Conservación│  Comunidad   │  Sumak    │
│  activa      │  Karanki     │  Kawsay   │
└──────────────┴──────────────┴───────────┘

Contenido a preparar:

Foto de fondo: la más impresionante de las fotos de AyaPuma Samay (revisar /Fotoagrafías/)
Título: "AyaPuma Samay — donde nace Alliuma"
Texto narrativo (2-3 párrafos): historia de la reserva, el territorio Karanki, la relación con el bosque nublado de Imbabura. Adaptar del Dossier B2B.
3 valores con ícono, título y descripción breve:
- Conservación activa: parte de cada venta va a proteger estos bosques
- Comunidad Karanki: familias con más de una década de trabajo en el territorio
- Sumak Kawsay: el Buen Vivir como guía de cada decisión que tomamos

Prompt para Claude:

Crea la sección #origen con fondo oscuro (#3D2B1F) y texto blanco.
Parte 1: Foto de fondo /images/ayapuma.jpg con overlay oscuro sutil.
Encima, centrado: H2 en Sink blanco "AyaPuma Samay — donde nace Alliuma",
y 2-3 párrafos en Noto Sans blanco con el texto que te daré.
Parte 2 (debajo, fondo un poco más claro): grid de 3 columnas con ícono SVG,
título en Sink, y descripción en Noto Sans.
Los 3 ítems son: [pega el contenido de los 3 valores]

SECCIÓN 7: Contacto (`#contacto`)

Función: Dar múltiples formas de contactar y cerrar con la identidad de marca.

Layout:

┌─────────────────────────────────────────┐
│         H2: "Hablemos"                  │
│    Subtítulo cálido y directo           │
└─────────────────────────────────────────┘

┌────────────────┬────────────────────────┐
│  WhatsApp      │  Formulario simple     │
│  Email         │  (nombre, email,       │
│  Instagram     │   mensaje, enviar)     │
│  Facebook      │                        │
└────────────────┴────────────────────────┘

Contenido:

Título: "Hablemos"
Subtítulo: "¿Quieres probar el motilón, ser distribuidor o simplemente saber más? Escríbenos."
Links de contacto:
- WhatsApp: https://wa.me/593990931904
- Email: contact@alliuma.life
- Instagram: https://instagram.com/AlliUmaEc
- Facebook: https://facebook.com/AlliUma.ec

Prompt para Claude:

Crea la sección #contacto con fondo #F5F0E8.
Encabezado centrado: H2 "Hablemos" en Sink,
párrafo subtítulo en Noto Sans.

Dos columnas:
Izquierda: íconos de contacto con links. Incluir:
- Botón grande de WhatsApp (fondo verde #25D366) que abre wa.me/593990931904
- Email: contact@alliuma.life
- Instagram: @AlliUmaEc con link
- Facebook: @AlliUma.ec con link

Derecha: formulario simple con campos: Nombre, Email, Mensaje (textarea),
y botón "Enviar" en color #5C1F6B. El formulario puede usar Formspree
(servicio gratuito) para recibir los mensajes por email sin backend.
Instrucciones: usar action="https://formspree.io/f/[TU_ID]" en el form.

Siempre visible en la parte superior.

┌──────────────────────────────────────────────────────┐
│  [Logo]   Nosotros   Producto   Origen   Contacto   [Comprar ahora →] │
└──────────────────────────────────────────────────────┘

En mobile: hamburger menu que despliega los links verticalmente.

Prompt para Claude:

Crea una navbar fija (position: fixed, top: 0, z-index: 1000).
Fondo: blanco con sombra sutil al hacer scroll.
Izquierda: logo /images/logo-color.png con max-height 40px.
Centro: links de navegación en Noto Sans que hacen scroll suave
a #nosotros, #producto, #origen, #contacto.
Derecha: botón "Comprar ahora" con fondo #5C1F6B y texto blanco,
que hace scroll suave a #comprar.
En mobile (< 768px): ocultar links, mostrar ícono hamburger (☰)
que despliega un menú vertical con fondo blanco.

┌─────────────────────────────────────────┐
│  Logo  ·  Alimentos del Buen Vivir      │
│  Instagram  ·  Facebook  ·  WhatsApp    │
│  contact@alliuma.life                   │
│  © 2026 Alliuma. Todos los derechos     │
└─────────────────────────────────────────┘

Prompt para Claude:

Crea un footer con fondo #3D2B1F y texto blanco.
Tres columnas:
- Logo pequeño + tagline "Alimentos del Buen Vivir"
- Links de redes sociales (íconos SVG): Instagram, Facebook
- Contacto: WhatsApp, email
Debajo de las columnas, una línea divisoria y el texto centrado:
"© 2026 Alliuma · Todos los derechos reservados · Ibarra, Ecuador"

SEO básico — imprescindible desde el día 1

El SEO no requiere esfuerzo extra si lo pides en el prompt. Dale a Claude estas instrucciones para cada página:

Prompt para SEO:

Agrega en el <head> del HTML las siguientes metaetiquetas:
<title>Alliuma — Motilón Liofilizado · Superalimento Andino Ecuador</title>
<meta name="description" content="Motilón liofilizado de los Andes ecuatorianos.
Superalimento vegano rico en antioxidantes, sin aditivos. Origen: Reserva AyaPuma Samay,
Imbabura. Envíos a todo Ecuador.">
<meta name="keywords" content="motilón, superalimento Ecuador, antioxidantes,
liofilizado vegano, Imbabura, Alliuma, superfoods andinos, vegano Ecuador">

También agrega Open Graph tags para que el link se vea bien en WhatsApp y redes:
<meta property="og:title" content="Alliuma — Motilón Liofilizado">
<meta property="og:description" content="Superalimento andino de origen sagrado.
Sin aditivos. Envíos Ecuador.">
<meta property="og:image" content="/images/og-image.jpg">
<meta property="og:url" content="https://alliuma.life">

La imagen og-image.jpg debe ser horizontal, 1200x630px — una foto del producto o del paisaje.

Optimización de imágenes

Las imágenes son el mayor culpable de sitios lentos. Antes de subirlas:

Formatos y jerarquía

AVIF — formato prioritario, el más liviano. Usarlo para hero y fotos grandes.
WebP — respaldo universal. Para el resto de fotos.
PNG — solo para transparencias (ilustraciones botánicas, íconos, logo).
SVG — para íconos, mapas, gráficos y el patrón botánico.

Herramienta gratuita para convertir: squoosh.app

Tamaños de trabajo (antes de exportar)

Tipo	Resolución
Hero escritorio	2400 × 1350 px
Hero mobile	1440 × 1800 px
Horizontal general	1800 × 1200 px
Vertical / producto	1440 × 1800 px
Packshots (cuadrado)	1600 × 1600 px
Ilustraciones transparentes	mínimo 1600 × 1600 px
Íconos	mínimo 512 × 512 px

Pesos máximos exportados

Hero: menos de 350 KB
Imágenes secundarias: entre 80 y 220 KB
Packshots de producto: menos de 150 KB

Reglas de composición al generar o fotografiar

Generar siempre versión escritorio y mobile
Mantener rostros, fruto y producto fuera de las zonas de texto
No insertar titulares, cifras ni logos dentro de las imágenes
Dejar márgenes amplios para permitir recortes
El logo y las cifras siempre se superponen como HTML/CSS, nunca dentro de la imagen

Nomenclatura de archivos

Usar exactamente estos nombres (sin espacios, todo en minúsculas con guiones):

alliuma-home-hero-territorio-desktop.avif
alliuma-home-hero-territorio-mobile.avif
alliuma-motilon-fruto-rama-01.webp
alliuma-producto-grupo-presentaciones.webp
alliuma-producto-125g-front.webp
alliuma-producto-250g-front.webp
alliuma-producto-500g-front.webp
alliuma-producto-1kg-front.webp
alliuma-producto-polvo-macro.webp
alliuma-producto-still-life-principal.webp
alliuma-proceso-fruto-a-polvo.webp
alliuma-equivalencia-125g-1-3kg.webp
alliuma-infografia-liofilizacion.webp
alliuma-comparacion-motilon.png
alliuma-comparacion-arandano.png
alliuma-ilustracion-sumak-kawsay.webp
alliuma-origen-ayapuma-panorama.webp
alliuma-origen-cosecha-manos.webp
alliuma-equipo-retrato-ambiental.webp
alliuma-mapa-trazabilidad.svg
alliuma-ilustracion-economia-regenerativa.webp
alliuma-receta-smoothie-bowl.webp
alliuma-receta-bebida-funcional.webp
alliuma-receta-granola-yogur.webp
alliuma-receta-postre.webp
alliuma-footer-cta-background.webp
alliuma-pattern-botanico-light.webp
alliuma-iconos-atributos.svg
alliuma-divider-botanico-left.png
alliuma-divider-botanico-right.png

El detalle completo — brief fotográfico, prompt de IA, dimensiones y prioridad — de cada imagen está en ALLIUMA_INVENTARIO_VISUAL_Y_PROMPTS.md.

Flujo completo de construcción recomendado

Sigue este orden. No saltes pasos.

Paso 1 → Crea el proyecto base (carpetas, archivos vacíos, tipografías)
Paso 2 → Carga las tipografías y define los colores en CSS variables
Paso 3 → Construye la Navbar
Paso 4 → Construye el Hero
Paso 5 → Construye la franja de 4 valores
Paso 6 → Construye #nosotros
Paso 7 → Construye #producto
Paso 8 → Construye #comprar
Paso 9 → Construye #origen
Paso 10 → Construye #contacto
Paso 11 → Construye el Footer
Paso 12 → Agrega el SEO
Paso 13 → Optimiza imágenes y prueba en mobile
Paso 14 → Sube a GitHub y despliega en Vercel

Cómo pedirle correcciones a Claude Code

Cuando el resultado no sea exactamente lo que imaginas, no digas "no me gusta". Sé específico:

❌ "El hero no se ve bien"
✅ "El texto del hero está muy arriba, necesito que esté centrado verticalmente en la pantalla. También el botón necesita más espacio arriba (margin-top: 24px)"

❌ "El color está mal"
✅ "El color del botón debe ser #5C1F6B, ahora está en azul"

❌ "Hazlo más bonito"
✅ "La sección de beneficios se ve muy plana. Agrega una sombra sutil a cada card (box-shadow: 0 2px 12px rgba(0,0,0,0.08)) y 24px de padding interno"

Checklist final antes de publicar

Funcionalidad:

[ ] El sitio se ve bien en iPhone (Safari) y Android (Chrome)
[ ] Todos los botones de WhatsApp funcionan y abren el chat correcto
[ ] El formulario de contacto envía correctamente (probar con tu propio email)
[ ] Los links de redes sociales apuntan a las cuentas correctas
[ ] El scroll suave entre secciones funciona en todos los navegadores

Contenido:

[ ] El atributo vegano aparece en la franja de valores, en la lista de beneficios y en las cards de producto
[ ] Todos los precios están actualizados
[ ] Los textos no tienen errores de ortografía (revisar con Grammarly o similar)
[ ] El logo es visible sobre todos los fondos donde aparece

Imágenes:

[ ] Todas las imágenes usan la nomenclatura del inventario visual
[ ] No hay imágenes de IA presentando personas reales o paisajes ficticios como documentales
[ ] Las imágenes cargan rápido (probar en PageSpeed Insights)
[ ] El hero se ve bien tanto en escritorio como en mobile

Técnico:

[ ] El título y meta descripción están configurados (incluye "vegano" y "Ecuador")
[ ] El dominio alliuma.life apunta al hosting correcto (verificar DNS)
[ ] HTTPS activo (candado en el navegador)
[ ] Lazy loading activo en imágenes fuera del primer bloque visible

Esta guía es un documento vivo. Actualízala cuando el sitio evolucione.

ALLIUMA — Guía completa para construir el website ​

Método: Vibe Coding con Claude Code · Sin e-commerce · Contacto por WhatsApp ​

Cómo usar esta guía ​

Antes de escribir una sola línea de código ​

1. Dominio y hosting ​

2. Stack tecnológico (qué pedirle a Claude) ​

3. Contenido que debes tener listo ANTES de pedir código ​

Identidad visual — specs exactos para Claude ​

Paleta de colores ​

Tipografías ​

Espaciado y estilo general ​

Dirección visual — cómo producir y usar las imágenes ​

La proporción correcta ​

Concepto artístico: botánica andina contemporánea ​

Qué evitar siempre ​

Imágenes que deben ser reales — nunca generar con IA ​

Bloques maestros para prompts de IA ​

Qué imagen va en cada sección del sitio ​

Arquitectura del sitio ​

Sección por sección — specs completos ​

SECCIÓN 1: Hero (#inicio) ​

SECCIÓN 2: Propuesta de valor rápida (sin ID propio) ​

SECCIÓN 3: Nuestra historia (#nosotros) ​

SECCIÓN 4: El producto (#producto) ​

SECCIÓN 5: Comprar (#comprar) ​

SECCIÓN 6: El origen (#origen) ​

SECCIÓN 7: Contacto (#contacto) ​

Navbar (barra de navegación fija) ​

Footer ​

SEO básico — imprescindible desde el día 1 ​

Optimización de imágenes ​

Formatos y jerarquía ​

Tamaños de trabajo (antes de exportar) ​

Pesos máximos exportados ​

Reglas de composición al generar o fotografiar ​

Nomenclatura de archivos ​

Flujo completo de construcción recomendado ​

Cómo pedirle correcciones a Claude Code ​

Checklist final antes de publicar ​

ALLIUMA — Guía completa para construir el website

Método: Vibe Coding con Claude Code · Sin e-commerce · Contacto por WhatsApp

Cómo usar esta guía

Antes de escribir una sola línea de código

1. Dominio y hosting

2. Stack tecnológico (qué pedirle a Claude)

3. Contenido que debes tener listo ANTES de pedir código

Identidad visual — specs exactos para Claude

Paleta de colores

Tipografías

Espaciado y estilo general

Dirección visual — cómo producir y usar las imágenes

La proporción correcta

Concepto artístico: botánica andina contemporánea

Qué evitar siempre

Imágenes que deben ser reales — nunca generar con IA

Bloques maestros para prompts de IA

Qué imagen va en cada sección del sitio

Arquitectura del sitio

Sección por sección — specs completos

SECCIÓN 1: Hero (`#inicio`)

SECCIÓN 2: Propuesta de valor rápida (sin ID propio)

SECCIÓN 3: Nuestra historia (`#nosotros`)

SECCIÓN 4: El producto (`#producto`)

SECCIÓN 5: Comprar (`#comprar`)

SECCIÓN 6: El origen (`#origen`)

SECCIÓN 7: Contacto (`#contacto`)

Navbar (barra de navegación fija)

Footer

SEO básico — imprescindible desde el día 1

Optimización de imágenes

Formatos y jerarquía

Tamaños de trabajo (antes de exportar)

Pesos máximos exportados

Reglas de composición al generar o fotografiar

Nomenclatura de archivos

Flujo completo de construcción recomendado

Cómo pedirle correcciones a Claude Code

Checklist final antes de publicar