La landing de tu negocio con Claude Code

Pasos

1. Prepara la carpeta

mkdir arroceria-web
cd arroceria-web
mkdir fotos

Copia las fotos a fotos/ y crea un fichero carta.txt con los arroces, precios, horario, dirección y teléfono, tal cual los tengas. Después arranca Claude Code:

claude

Al acabar ves el prompt de Claude Code con la carpeta arroceria-web como directorio de trabajo.

2. Pide la estructura

Pulsa Shift+Tab hasta entrar en modo plan para que Claude proponga antes de escribir (lo explicamos en Plan Mode). Luego:

Quiero la web de una arrocería de 40 cubiertos en Valencia. Una sola página.
Solo HTML y CSS en un index.html y un estilos.css. Nada de frameworks ni librerías.
JavaScript solo si hace falta de verdad.

Secciones, en este orden:
1. Portada: nombre, una frase y botón "Reservar mesa".
2. La carta: los arroces de carta.txt con su precio.
3. Horario.
4. Cómo llegar: dirección y mapa (te pasaré el código del mapa).
5. Pie: teléfono, dirección, Instagram.

Diseñado primero para el móvil. Letra legible, botones grandes, fotos de fotos/.
Antes de escribir nada, enséñame el plan.

Revisa el plan, corrige lo que no te guste y apruébalo. Al acabar tienes index.html y estilos.css.

3. Los textos, sin inventos

Revisa los textos de la página. Reglas:
- Usa solo datos de carta.txt. No inventes premios, años de historia ni ingredientes.
- Frases cortas, tono cercano, sin palabras como "experiencia gastronómica única".
- La frase de portada debe decir qué somos y dónde: arroces a leña en Valencia.
Si te falta algo, déjalo como [PENDIENTE] y dímelo al final.

Al acabar, busca [PENDIENTE] en la página y rellénalo tú.

4. Mete el mapa

En Google Maps, en el ordenador, busca tu local. Abre el menú (arriba a la izquierda), pulsa «Compartir o insertar el mapa», entra en «Insertar un mapa» y pulsa «Copiar HTML». Pégaselo a Claude:

Este es el código del mapa de Google. Ponlo en "Cómo llegar",
que ocupe todo el ancho y no se salga de la pantalla en el móvil: <pega aquí el código>

5. El botón de reservar

Si las reservas son por teléfono, el botón llama directamente con un enlace tel::

Haz que todos los botones "Reservar mesa" llamen al +34 960 000 000
con un enlace tel:. Añade también un botón fijo abajo en el móvil
que se vea siempre al hacer scroll.

Si usas un sistema de reservas, pásale su enlace en vez del teléfono. Tienes opciones en Reservas online.

6. Revísala en el móvil

Abre index.html en el navegador (doble clic) y estrecha la ventana hasta el ancho de un móvil. Luego pide una revisión:

Revisa la página como si la abriera en un móvil de 375 px de ancho:
- Que tenga la etiqueta meta viewport.
- Que nada se salga por los lados ni obligue a hacer zoom.
- Botones de al menos 44 px de alto y texto de al menos 16 px.
- Fotos en WebP, de menos de 300 KB, con texto alternativo que describa el plato.
- Un title y una meta description con "arrocería" y "Valencia".
Dime qué has cambiado.

Al acabar, la página se lee bien en el móvil sin hacer zoom y carga rápido.

Errores típicos

• Fotos de 5 MB sacadas del móvil → pide a Claude que las reduzca y las pase a WebP. Si para eso tiene que instalar algo, te pedirá permiso antes. La página carga mucho antes.
• Teléfono sin prefijo → en el enlace tel: ponlo con +34 y sin espacios.
• Textos que suenan a folleto → dale ejemplos de cómo hablas tú y prohíbe las frases hechas.
• Pedir todo en un solo mensaje → estructura, textos, mapa y revisión móvil por separado. Cada paso se corrige mejor.
• Horario distinto al de Google → que coincida con tu ficha de Google Business, o confundes a la gente.

Siguiente paso

La página ya funciona en tu ordenador. Para que la vea todo el mundo, publícala gratis con Publica tu web gratis en Cloudflare. Si prefieres una web con más secciones, SEO local y diseño a medida, en KENSHO la hacemos por ti.