Webs y landings en un comando

La landing tuya o la de tu cliente publicada hoy, con su marca y su formulario conectado.

Tipo: paso a paso · Para: dueños de negocio y marcas personales sin web (o con una que no convierte), y quien vende webs y sistemas de IA a negocios · Tiempo: entre 1 y 3 horas la primera landing; la web de un cliente, el mismo día de la llamada.

Cómo usar esta página

Copia esta página entera (el botón «Copiar todo» de arriba) y pégala en un chat nuevo de Claude. Claude va a leer las instrucciones de abajo y te va a guiar paso a paso, una pregunta a la vez, hasta que lo tengas hecho.

INSTRUCCIONES PARA CLAUDE (si eres Claude y te pegaron esta página, síguelas):

• Eres el asistente que Ignacio Giaverini (CreaVinci) preparó para este recurso. Hablas en español neutro, tú.
• Primero pregúntale a la persona en cuál de estas situaciones está: 1) «No tengo web»; 2) «Quiero vender webs a negocios»; 3) «Quiero una landing que convierta». Una sola pregunta.
• Después sigue el paso a paso de ESE ángulo, un paso por mensaje, y no avances hasta que te confirme que lo hizo.
• Cuando un paso use una pieza (un prompt, una skill, una plantilla), se la das completa, lista para copiar.
• Si algo falla, ve a «Errores conocidos» antes de improvisar.
• No inventes cifras ni casos. No prometas lo que la página no dice.
• Al terminar, dile qué tiene hecho y cuál es el siguiente paso natural (está al final de la página).

Para quién es, y cuándo no

• Es para ti si la gente que llega desde un reel no tiene dónde caer: no hay link en la bio, el link no explica qué haces ni pide nada, o ya tienes web y no convierte (seis secciones, tres botones y ninguna acción clara).
• Es para ti si vendes, o quieres vender, webs y sistemas de IA a negocios y necesitas entregar algo tangible el mismo día de la llamada.
• No necesitas saber programar. Necesitas Claude (la app) y Claude Code; con la app sola llegas hasta el archivo terminado y queda pendiente publicarlo (Pieza N, paso 5).
• No es para ti (todavía) si no puedes decir en una línea qué vendes, a quién y qué quieres que haga la persona al terminar de leer → parte por el Ángulo 1, paso 2: la entrevista (Pieza D) lo saca de ti. Si las preguntas 5 y 6 de la ronda 1 quedan vacías, hay una oferta que definir antes que una landing.
• No es para ti si necesitas tienda con carrito, cobros en la página o textos legales. Sí resuelve la página que capta el contacto y lo manda a tu WhatsApp.

Ángulo 1 · «No tengo web»

Qué vas a tener al final: tu página de presentación publicada en el link de tu bio, con tu marca y un formulario de nombre y WhatsApp que abre tu WhatsApp con el mensaje ya escrito. Si te sobra tarde, las otras dos páginas que un negocio necesita para vender sin web: la del recurso y la de agenda.

1. La prueba de dos minutos. Escribe de corrido: qué haces, para quién, y tres resultados que tus clientes ya tuvieron (una línea cada uno, sin adjetivos). Si sale sin pensar, salta al paso 3. Si te trabas, paso 2.
2. Deja que Claude te entreviste. Usa la Pieza D: dos rondas, 15 minutos, y la web sale con tus palabras. Al terminar tienes entrevista.md (que además sirve de CONTEXTO.md para todo lo demás) y un index.html abierto en el navegador. Sigue en el paso 5.
3. Escribe tu marca una sola vez. Crea una carpeta nueva, copia adentro la Pieza B (BRAND.md) y cambia colores, tipografía y tono por los tuyos. Sin colores definidos, deja los del ejemplo y cambia solo el tono y lo prohibido. 5 minutos, y se reutiliza en cada página.
4. Corre la skill de la landing. Instala la Pieza C (landing de marca personal) y escribe /landing-marca-personal: te hace 6 preguntas, arma la página, conecta el formulario a tu WhatsApp y la publica. Contesta con lo del paso 1.
5. Revisa en el celular, no en el computador. Se entiende en 10 segundos qué haces y para quién; los resultados no llevan adjetivos; el botón abre WhatsApp con el mensaje escrito; ningún texto se corta; el texto sobre el color de acento no es blanco. Lo que falle se lo dices a Claude Code con la frase exacta («el título se corta en el celular»).
6. Publica. Si viniste por la entrevista, escribes «publica» y la skill lo hace; si viniste por la Pieza C, ya quedó publicada. Si algo se interrumpió, la Pieza N lo retoma.
7. Las otras dos páginas (opcional, la misma tarde). Con BRAND.md y CONTEXTO.md (o entrevista.md) en la carpeta, corre el prompt de la Pieza E: te deja recurso.html y agenda.html. Se publican con la Pieza N.
8. Pon cada link donde va. index.html en la bio; recurso.html cuando regalas algo por comentario o por historia; agenda.html a quien ya quiere hablar.

Cómo sabes que quedó bien: abres el link desde el celular de otra persona (el tuyo ya tiene todo en caché), entiendes en 10 segundos qué haces, tocas el botón y te llega a tu WhatsApp «Soy [nombre], quiero [lo que ofreces]».

Ángulo 2 · «Quiero vender webs a negocios»

Qué vas a tener al final: la página del cliente publicada y enviada el mismo día de la llamada; la propuesta enviada al día siguiente como un link que se abre en el celular; y una carpeta con el método para que el segundo cliente tarde la mitad. La web es la puerta de entrada, no el servicio: lo que se vende es lo que pasa después con los contactos que trae.

1. Antes de la llamada: las 10 preguntas por WhatsApp. Manda al cliente las 10 preguntas de la Pieza F (la web de tu cliente), tal cual, en un solo mensaje. Guarda sus respuestas, con sus palabras, en respuestas.md dentro de una carpeta con el nombre del negocio. Si contesta por audio, transcribe sin corregir: sus frases son el copy.
2. La marca del cliente en 5 minutos. Copia la Pieza B (BRAND.md) en la carpeta y rellénala con las respuestas 8 y 9. Si dijo «elige tú», deja los colores del ejemplo y cambia solo el tono según cómo escribe él.
3. Corre la skill de la web del cliente. Instala la Pieza F y escribe /web-de-cliente: lee respuestas.md, arma la página de una sola pantalla larga, la revisa en 390 píxeles de ancho, la publica y te devuelve el link.
4. Entrega hoy, con el mensaje que la skill te deja listo (Pieza F, paso 6) y nada más. Que pida cambios es lo que quieres: es la conversación que lleva al servicio mensual.
5. El extra que nadie más le ofrece (según el negocio). Espacio físico (clínica, tienda, estudio, propiedad): el tour 3D con el celular, Pieza G; se escanea en 15 minutos y el cliente manda el link cuando alguien pregunta «cómo es el lugar». Producto, arquitectura o diseño: la landing 3D, Pieza L, que además se graba sola para el reel. Ninguno de los dos: salta este paso; un extra que no calza resta.
6. Al día siguiente: la propuesta. Con la Pieza H (propuesta en un mensaje) escribes un solo mensaje con los 6 datos que pide. Sale un HTML de una página con tu marca, se publica con la Pieza N y se manda el link por WhatsApp con dos líneas.
7. Si el cliente pide algo que no es una página (un sistema con datos, un panel, una app): no cotices desde la conversación. Hazle las cinco preguntas de la Pieza I (el plano de tu app) y llena el plano antes de decir un precio. Una app sin plano se construye tres veces.
8. Guarda el método para el siguiente cliente. Arma la carpeta de la Pieza M (pack de diseño web): cada web nueva sigue el mismo orden.

Cómo sabes que quedó bien: el cliente recibió el link el mismo día y contestó pidiendo cambios (si contesta solo «gracias», pregúntale tú qué cambiaría). La propuesta se abre en su celular sin adjuntos, tiene un solo precio, y el botón «Empezamos» le abre WhatsApp contigo.

Ángulo 3 · «Quiero una landing que convierta»

Qué vas a tener al final: una landing con una sola acción, con el copy en tu voz, construida desde un archivo de diseño que fija las decisiones (cada cambio es una edición, no un volver a empezar), publicada en tu dominio, y con el único número que dice si convierte.

1. El contexto antes que el diseño. Si el contexto está vacío, el copy sale vacío. Escribe la Pieza A (CONTEXTO.md) y la Pieza B (BRAND.md) en una carpeta nueva. Si ya tienes entrevista.md del Ángulo 1, sirve como CONTEXTO.md tal cual. 15 minutos, una sola vez.
2. El prompt de diseño, en Claude (la app), no en Claude Code. El primer prompt de la Pieza J (landing en dos pasos), con CONTEXTO.md y BRAND.md pegados o adjuntos. Devuelve DISEÑO.md. Léelo entero: si el copy dice «transforma tu» o «desbloquea», se pide de nuevo; si hay más de un botón, se corta hasta que quede uno.
3. Guarda DISEÑO.md en la carpeta. Es el contrato: cuando la construcción se desvíe, se compara contra este archivo; cuando quieras cambiar algo, cambias el archivo y vuelves a construir. Nunca edites el HTML a mano.
4. El prompt de construcción, en Claude Code. El segundo prompt de la Pieza J, con DISEÑO.md y BRAND.md en la carpeta. Sale index.html, un solo archivo, celular primero, con el botón único apuntando a tu WhatsApp, tu calendario o tu formulario.
5. Si quieres una sección o un botón de una galería. Copia el código en componente-original.html y corre la Pieza K (adaptar cualquier componente). Se pega en el index.html. Un componente mal pensado para tu caso sigue mal pensado adaptado.
6. Si vendes producto físico, arquitectura o diseño y quieres una pieza de atención. La Pieza L (landing 3D): un objeto que gira con el scroll y un modo grabación que recorre la página sola en 20 segundos para el reel. Es atención, no conversión.
7. Revisión en dos anchos. Claude Code abre la página en 390 y en 1280 píxeles. Tú revisas en tu celular: ningún texto cortado, contraste de 4,5 a 1 como mínimo, texto sobre el acento casi negro, ninguna animación más larga de 300 milisegundos, y el botón abre lo que tiene que abrir.
8. Publica y conecta el dominio. Pieza N. El link provisorio funciona desde el primer minuto; el dominio propio se apunta con un registro A o CNAME en 10 minutos.
9. El único número que miras. Cuántos mensajes de WhatsApp (o citas, o formularios) te llegan desde el botón por cada 100 personas que abren la página. Cuando tengas 30 contactos al mes, agregas testimonios; antes no hay qué poner, y cada sección que agregas baja la conversión de la única que importa.

Cómo sabes que quedó bien: lees la landing en voz alta y suena a ti; hay un solo botón y sabes qué pasa después de tocarlo; DISEÑO.md y la página dicen lo mismo, sección por sección; y el primer contacto que llega por el botón trae el mensaje que escribiste en el punto 6 de DISEÑO.md.

Las piezas

Cómo se instala una skill (Piezas C, D, F y H): en tu carpeta de trabajo creas .claude/skills/<nombre-de-la-skill>/ y guardas el texto de la pieza, tal cual, como SKILL.md. En Claude Code escribes /<nombre-de-la-skill> y se activa. En la app de Claude, pegas el texto entero como primer mensaje del chat y funciona igual, salvo la publicación (Pieza N, paso 5).

Pieza A · CONTEXTO.md mínimo (plantilla)

El archivo que leen los prompts de diseño y de propuesta. Se escribe una vez y se reutiliza. Se asume esta plantilla porque las piezas originales pedían «lee mi CONTEXTO.md» sin decir qué lleva.

# Contexto
Quién soy: [nombre], [qué haces en una frase, como se lo contarías a alguien en un asado].
Para quién: [el cliente típico, en sus palabras: qué le pasa el día que te busca].
Qué vendo: [el servicio o producto principal, con precio y forma de pago si ya están definidos].
Tres resultados reales: [uno por línea; con nombre y cifra solo si los tienes de verdad; si no, sin cifra].
Qué me diferencia: [una cosa, la que dirían tus clientes, no la que dirías tú].
La única acción que pido: [escribirme por WhatsApp / agendar una llamada / pedir el recurso].
Mi número de WhatsApp: [con código de país, sin espacios].
Frases textuales de clientes: [dos o tres, entre comillas, tal como las dijeron].
Lo que nunca diría: [palabras, promesas o tonos que no van contigo].

Pieza B · BRAND.md de ejemplo (plantilla)

El archivo de marca que leen todos los prompts de esta página. Es la parte que la gente deja vacía, y por eso las landings salen todas iguales. Si no tienes colores, deja estos y cambia el tono.

# Marca
Colores: fondo #0A0B0D · texto #F4EFE4 · acento #C9A840 (solo para lo que se toca y lo que se destaca; nunca para párrafos) · secundario #7B2FBE (fondos de sección, nunca texto).
Regla de contraste: texto sobre acento va #241701, nunca blanco.
Tipografía: Space Grotesk 400/600/700. Títulos con letter-spacing -0,03 em.
Tono: tú, directo, sin exclamaciones, sin «transforma tu», sin «desbloquea».
Bordes: 18 px en tarjetas, 100 px en botones. Sombras: solo en lo que flota.
Prohibido: gradientes por defecto de la herramienta, íconos genéricos, tres columnas de features, texto en blanco sobre dorado.

Pieza C · Landing de marca personal en un comando (skill)

La landing mínima de una marca personal: quién eres, para quién, tres resultados, y un formulario de nombre y WhatsApp conectado. Ángulo 1, paso 4.

---
name: landing-marca-personal
description: Crea y publica la landing mínima de una marca personal (una frase, tres resultados, foto, formulario de nombre y WhatsApp conectado). Se activa cuando la persona escribe /landing-marca-personal o dice «quiero mi landing», «hazme mi página».
---

# Landing de marca personal en un comando

## Cuándo se activa
Cuando la persona quiere su primera landing y puede decir qué hace, para quién y tres resultados. Si no puede, no sigas: dile que primero haga la entrevista (skill web-por-entrevista).

## Qué necesitas antes
- BRAND.md en la carpeta (colores, tipografía, tono, lo prohibido). Si no está, crea uno con los valores por defecto (fondo #0A0B0D, texto #F4EFE4, acento #C9A840, texto sobre acento #241701, Space Grotesk) y avísale que puede cambiarlo después.

## Pasos (uno por mensaje; no avances sin confirmación)
1. Crea la carpeta con index.html vacío, BRAND.md (si no existía) y una carpeta assets/ con un marcador foto.jpg.
2. Haz estas 6 preguntas, de a una:
   1. Cómo te llamas (como quieres que aparezca).
   2. Qué haces y para quién, en una frase.
   3. Para quién exactamente (el cliente típico, en sus palabras).
   4. Tres resultados que tus clientes ya tuvieron, una línea cada uno, sin adjetivos.
   5. Tu número de WhatsApp con código de país, sin espacios.
   6. Dos colores que te representen, o «usa los de BRAND.md».
3. Rellena la landing con las respuestas. Estructura exacta, y nada más:
   - Una frase arriba: qué haces y para quién (respuesta 2).
   - Tres resultados, una línea cada uno, sin adjetivos (respuesta 4).
   - Una foto (assets/foto.jpg; la persona la reemplaza después).
   - El formulario: nombre y WhatsApp. Sin correo: el WhatsApp convierte más y el correo se pide después.
   - Un botón: «Quiero [lo que ofreces]».
4. Conecta el formulario: al enviar, abre WhatsApp al número de la respuesta 5 con el mensaje «Soy [nombre que escribió], quiero [lo que ofreces]», usando el formato wa.me/[número]?text=[mensaje codificado]. Si la persona te da el link de una hoja de cálculo publicada como formulario web, guarda además la fila ahí; si no, WhatsApp es la única salida.
5. Abre index.html en 390 píxeles de ancho y revisa que ningún texto se corte y que el botón abra WhatsApp con el mensaje. Corrige antes de mostrar.
6. Publica la carpeta como sitio estático desde la terminal y devuelve el link público. Si el servicio pide iniciar sesión, dile a la persona que lo haga ella en la terminal y espera; no entras a su cuenta.

## Formato de salida
Un solo index.html con el CSS adentro, sin frameworks, celular primero, con los colores y la tipografía de BRAND.md. Al final, un mensaje con: el link publicado, qué archivo editar para cambiar textos (index.html) y colores (BRAND.md), y cómo volver a publicar después de un cambio.

## Reglas que no se negocian
- Ninguna sección más que las cinco de arriba. Cada sección que se agrega baja la conversión de la única que importa.
- Ningún adjetivo en los resultados («increíble», «profesional», «completo»).
- Texto sobre el color de acento va casi negro, nunca blanco.
- Nada de gradientes por defecto, íconos genéricos ni tres columnas.
- No inventes resultados: si la persona da dos, van dos.

Pieza D · Web por entrevista (skill)

Para quien no sabe qué poner en su web: Claude pregunta, tú contestas hablando, y la web sale de tus respuestas. Ángulo 1, paso 2. Un kinesiólogo contestó las 12 preguntas en 14 minutos: su frase de la pregunta 1 quedó de título y la de un paciente (pregunta 4) como sección central. Se asume: la pieza original nombraba 4 preguntas en la ronda 2; se completó a 6 con el WhatsApp, el logo y las fotos, que la web necesita sí o sí.

---
name: web-por-entrevista
description: Entrevista a la persona en dos rondas (el negocio, 10 minutos; la forma, 5 minutos), guarda las respuestas en entrevista.md y construye la web con sus palabras. Se activa con /web-por-entrevista o cuando alguien dice «no sé qué poner en mi web».
---

# Web por entrevista

## Cuándo se activa
Cuando la persona quiere una web y no sabe qué poner, o cuando la prueba de «qué haces, para quién, tres resultados» no le sale de corrido.

## Cómo entrevistas
- Una pregunta por mensaje. Esperas la respuesta antes de la siguiente.
- La persona contesta hablando, como quiera. No corriges su forma de decirlo: sus palabras son el copy.
- Guardas cada respuesta, textual, en entrevista.md a medida que llega.
- Si una respuesta está vacía o es «no sé», la reformulas una vez con un ejemplo; si sigue vacía, la anotas como pendiente y sigues. No rellenas con conocimiento tuyo.

## Ronda 1 · el negocio (10 minutos), textual
1. Cuéntame qué haces como si me lo contaras en un asado.
2. Quién es la persona que más te agradece? Descríbela.
3. Cómo llegaste a hacer esto? (la versión corta)
4. Qué frase te han dicho tus clientes que te gustaría enmarcar?
5. Si alguien duda entre tú y otro, qué inclina la balanza?
6. Cuando alguien termina de leer tu web, qué quieres que haga? (una sola cosa)

Si la 5 y la 6 quedan vacías, detente: dile a la persona que todavía no hay web que hacer sino una oferta que definir, y que vuelva cuando pueda contestar esas dos.

## Ronda 2 · la forma (5 minutos), textual
1. Dime dos webs que te gusten y por qué (pega los links).
2. Qué colores no soportas?
3. Quieres tu foto en la web, o no?
4. Qué palabra nunca usarías para describirte?
5. Tu número de WhatsApp con código de país, y desde qué hora contestas.
6. Tienes logo y fotos del negocio, o partimos con texto y color?

## Construcción
1. Con entrevista.md completo, construye index.html: un solo archivo, CSS adentro, sin frameworks, celular primero.
2. Reglas al construir:
   - Usa sus palabras, no las tuyas: si dijo «asado», no escribes «experiencia gastronómica».
   - El título sale de la respuesta 1 de la ronda 1. La sección central es la frase de la respuesta 4, entre comillas. La respuesta 5 es una sección corta. La única acción del final es la de la respuesta 6, y el botón abre WhatsApp al número de la ronda 2 con el mensaje «Hola, vengo de tu web».
   - Colores: los que no soporta quedan prohibidos; el resto lo eliges tú respetando contraste mínimo 4,5 a 1. Si hay logo, sus colores mandan.
   - Nada que no haya dicho: si falta un dato, preguntas; no rellenas.
3. Abre index.html en el navegador a 390 píxeles de ancho y pregunta «qué cambio?». Aplica cada cambio y vuelve a preguntar, hasta que la persona escriba «publica».
4. Cuando escriba «publica»: publica la carpeta como sitio estático desde la terminal, devuelve el link, y dile que entrevista.md le sirve como CONTEXTO.md para todo lo que haga después.

## Formato de salida
entrevista.md (las 12 respuestas textuales, numeradas por ronda) e index.html publicado, con el link en el último mensaje.

## Qué no hace
No consigue fotos ni logo; no hace tienda, cobros ni textos legales; no define la oferta si la ronda 1 la dejó vacía.

Pieza E · Las 3 páginas gratis de tu negocio (prompt)

No necesitas una web para empezar a vender: bastan tres páginas de una sola pantalla. La de presentación (el link de tu bio), la del recurso (captura el contacto a cambio de algo útil) y la de agenda (el calendario embebido de tu herramienta de citas, que casi siempre tiene plan gratis, más 3 preguntas de calificación). Ángulo 1, paso 7. El prompt, en Claude Code, con CONTEXTO.md (o entrevista.md) y BRAND.md en la carpeta:

Lee CONTEXTO.md y BRAND.md. Crea tres páginas en HTML de un solo archivo cada una, celular primero, con mis colores y tipografía:
1. index.html: presentación. Una frase de qué hago y para quién, tres resultados en una línea cada uno, un botón «Escríbeme» que abre WhatsApp con el mensaje «Hola, vengo de tu página».
2. recurso.html: el recurso [nombre] en una línea, campo nombre y WhatsApp, botón que abre WhatsApp con «Soy [nombre], quiero [recurso]».
3. agenda.html: el calendario embebido [link de embed] y arriba tres preguntas: quién eres (3 opciones), cuánto vendes al mes (4 rangos), tu principal desafío (texto corto).
Sin frameworks. Sin secciones extra. Al terminar, ábrelas en 390 píxeles de ancho y revisa que nada se corte.

Estas páginas no traen tráfico: convierten a quien ya llegó por un reel, una historia o un anuncio.

Pieza F · La web de tu cliente en un comando (10 preguntas + skill)

Para quien vende webs o servicios de IA a negocios chicos: la primera entrega tangible el mismo día de la llamada. Ángulo 2, pasos 1, 3 y 4. Las 10 preguntas al cliente, por WhatsApp, antes de la llamada, tal cual, en un solo mensaje:

Para dejarte tu página lista hoy necesito 10 respuestas cortas. Contesta como te salga, por texto o por audio:
1. Cómo se llama el negocio y qué hace en una frase.
2. Para quién (el cliente típico, en sus palabras).
3. Los 3 servicios o productos principales.
4. Qué te diferencia (una cosa, la que dirían tus clientes).
5. Un resultado o un cliente contento (con su frase si la tienes).
6. Dónde estás y qué horario atiendes.
7. Cómo prefieres que te contacten (WhatsApp, llamada, formulario).
8. Tu logo y 3 fotos (o dime que no tienes y usamos texto y color).
9. Dos colores que te representen (o «elige tú»).
10. Algo que NO quieres en la página.

Las respuestas se guardan, textuales, en respuestas.md, numeradas del 1 al 10. La skill:

---
name: web-de-cliente
description: Arma la página de un negocio a partir de respuestas.md (las 10 respuestas del cliente), la publica y devuelve el link para mandárselo el mismo día. Se activa con /web-de-cliente o «hazle la página a [negocio]».
---

# La web de tu cliente en un comando

## Cuándo se activa
Cuando hay un archivo respuestas.md con las 10 respuestas del cliente en la carpeta. Si faltan respuestas, di cuáles faltan y sigue con las que hay, marcando en la página lo que quedó pendiente como [PENDIENTE] para que la persona lo pida.

## Pasos (uno por mensaje)
1. Lee respuestas.md y BRAND.md. Si BRAND.md no existe, créalo con las respuestas 8 y 9: los colores del cliente (o los por defecto: fondo #0A0B0D, texto #F4EFE4, acento #C9A840, texto sobre acento #241701), y tipografía Space Grotesk. Si no hay logo, el nombre va en texto grande.
2. Construye index.html, un solo archivo, CSS adentro, sin frameworks, celular primero: una sola pantalla larga con este orden y nada más:
   - Encabezado: el nombre y la frase de la respuesta 1.
   - Los 3 servicios de la respuesta 3, en tarjetas, una línea cada una.
   - El diferenciador (respuesta 4), como una frase grande.
   - El resultado (respuesta 5), con la frase del cliente entre comillas si la dio.
   - Ubicación y horario (respuesta 6).
   - El botón de contacto según la respuesta 7: WhatsApp (abre el chat con «Hola, vi la página de [negocio]»), llamada (abre el marcador con el número) o formulario (nombre y WhatsApp, que al enviar abre WhatsApp al número del negocio).
   - Nada de lo que dice la respuesta 10.
3. Usa las fotos de la respuesta 8 si las hay (carpeta assets/); si no, texto y color. No uses fotos de relleno.
4. Abre index.html en 390 píxeles de ancho. Revisa: ningún texto cortado, el botón abre lo que corresponde, los colores del cliente son los que están, texto sobre acento casi negro.
5. Publica la carpeta como sitio estático desde la terminal, con el nombre del negocio (sin espacios ni tildes) como nombre del proyecto, y devuelve el link.
6. Escribe el mensaje de entrega, listo para copiar: «Te dejé tu página lista: [link]. Es una primera versión con lo que me contaste; cámbiale lo que quieras y me dices».

## Formato de salida
index.html publicado; el link; el mensaje de entrega; y la lista de lo que quedó [PENDIENTE], si hay.

## Reglas
- Las palabras del cliente van tal cual: no mejoras su frase, no agregas adjetivos.
- No inventes resultados, servicios ni horarios: si no está en respuestas.md, no está en la página.
- Es la primera versión, no la web definitiva: sin tienda, sin blog, sin más secciones. El dominio propio se conecta después, en 10 minutos.

Pieza G · Tour 3D con el celular (paso a paso + prompt)

Para negocios con un espacio (una clínica, un estudio, una tienda, una propiedad): un recorrido 3D del lugar hecho con el celular, publicado en un link. Sin cámara especial. Ángulo 2, paso 5. Se asume: la pieza original no nombra la app de escaneo; sirve cualquiera del celular que exporte .glb, el único formato que el visor necesita, y se escanea caminando en video continuo, no por fotos sueltas.

El primer escaneo (15 minutos):

1. La luz: de día, con todas las luces del lugar encendidas y las cortinas abiertas. Sin flash. Sin contraluces fuertes (una ventana de frente confunde al escaneo).
2. Las vueltas: camina despacio por el espacio en un recorrido continuo, sin retroceder. Dos vueltas: una a la altura del pecho y otra un poco más alta. En cada puerta, detente dos segundos.
3. Lo que no: no apuntes al suelo ni al techo; no grabes espejos de frente; saca a las personas del cuadro.
4. Exporta el modelo desde la app como .glb. Si el archivo pesa más de 20 MB, vuelve a exportar con menos resolución: pesado no abre en celular.
5. Si el escaneo tiene huecos (paredes que faltan), no lo publiques: repite la vuelta en esa zona.

Publicar el tour, en Claude Code, en una carpeta nueva con el modelo copiado en ./modelo/modelo.glb:

Lee BRAND.md si existe; si no, usa fondo #0A0B0D, texto #F4EFE4 y acento #C9A840. En ./modelo/modelo.glb está el escaneo 3D de [nombre del lugar].
Construye un visor en un solo index.html, sin frameworks aparte de Three.js por CDN (con su cargador de GLB y sus controles de órbita), que:
1. Cargue ./modelo/modelo.glb centrado y encuadrado entero al abrir, con luz suficiente para verlo sin zonas negras.
2. Deje mover con el dedo (girar, acercar, desplazar) y con el mouse.
3. Muestre arriba el título «[nombre del lugar]» y abajo, fijo, un botón «Escríbenos» que abra WhatsApp al [número con código de país] con el mensaje «Hola, vi el recorrido 3D de [nombre del lugar]».
4. Muestre «Cargando el recorrido» con el porcentaje mientras baja el modelo. Si el modelo pesa más de 20 MB, dímelo antes de seguir.
5. Celular primero. Que abra con doble clic desde el archivo.
Al terminar, ábrelo en 390 y en 1280 píxeles de ancho, confírmame que el modelo se ve entero y que el botón abre WhatsApp, y publícalo como sitio estático. Dame el link.

Cómo se comparte: en la bio, «Recorre el lugar en 3D»; por WhatsApp, cuando alguien pregunta cómo es el lugar, el link y nada más; en un reel, graba la pantalla moviendo el tour 15 segundos. No reemplaza las fotos, y no mide ni cotiza.

Pieza H · Propuesta comercial en un mensaje (skill)

La propuesta que se manda al día siguiente de la llamada, mientras el cliente todavía se acuerda, cierra. La que llega en una semana, no. Sale en 10 minutos después de colgar. Ángulo 2, paso 6.

---
name: propuesta-en-un-mensaje
description: Convierte un mensaje sobre el cliente y la reunión en una propuesta comercial HTML de una sola página, con 6 secciones fijas y un botón a WhatsApp, lista para publicar y mandar por link. Se activa con /propuesta-en-un-mensaje o «hazme la propuesta para [cliente]».
---

# Propuesta comercial en un mensaje

## Cuándo se activa
Después de una llamada con un cliente, nunca antes: una propuesta sin llamada previa es un folleto.

## Qué le pides a la persona (un solo mensaje)
Quién es el cliente; qué le duele, con sus palabras textuales de la llamada; qué le propuso; cuánto cuesta y cómo se paga; cuándo se entrega; y qué necesita del cliente para partir. Antes de escribir, revisa si falta alguno de los 6 datos y pídelo. El precio lo decide la persona antes; tú no lo fijas ni lo sugieres.

## El prompt que aplicas (con CONTEXTO.md y BRAND.md en la carpeta)
Lee CONTEXTO.md y BRAND.md. Esta es la propuesta para [cliente]: [el mensaje de la persona].
Escribe el HTML de un solo archivo con las 6 secciones fijas. Reglas: en «Lo que entendí» usa las frases textuales que te di, entre comillas; ningún entregable lleva un adjetivo («completo», «profesional»); un solo precio (sin rangos), y si hay dos opciones, la más cara primero; el botón final abre WhatsApp con el texto indicado. Celular primero, mis colores, sin frameworks.
Antes de escribir, dime si falta alguno de los 6 datos.

## Las 6 secciones fijas, en este orden
1. Lo que entendí: su situación y su dolor con sus palabras, entre comillas. Es lo que hace que diga «sí, exacto».
2. Lo que propongo: tres a cinco entregables concretos, sin adjetivos.
3. Cómo se ve en 30, 60 y 90 días: un resultado observable por hito.
4. La inversión: un precio, una forma de pago, y qué pasa si no se cumple el hito.
5. Para empezar: lo que necesitas de él y la fecha de inicio.
6. Un botón «Empezamos» que abre WhatsApp al número de la persona con «Va, empezamos con [nombre de la propuesta]».

## Formato de salida
propuesta-[cliente].html, un solo archivo, con la marca de BRAND.md, que se lee bien en el celular. Después de construirlo, ábrelo en 390 píxeles de ancho, revisa que nada se corte, publícalo como sitio estático y devuelve el link junto con este mensaje listo para copiar: «Te dejo la propuesta como lo hablamos. Tiene 5 puntos y un botón al final; cualquier duda me escribes aquí».

## Reglas
- Sin PDF adjunto: el link se abre en el celular y se puede corregir sin reenviar.
- Si el cliente dice «lo tengo que pensar», lo que se retoma en el seguimiento es la sección 3 (los hitos), no el precio.

Pieza I · El plano de tu app (plantilla + prompt)

Una app que se construye sin plano se construye tres veces. El plano fija qué hace la app, para quién, qué NO hace y en qué orden se construye; Claude Code construye mucho mejor desde un plano que desde una conversación. Ángulo 2, paso 7. Las cinco preguntas (al cliente, o a ti):

1. Quién la usa y qué hace hoy sin la app (la tarea a mano, con tiempos).
2. Cuál es la única cosa que tiene que hacer bien (si hace solo eso, ya sirve).
3. De dónde entran los datos y a dónde salen (una hoja, un formulario, una API, un chat).
4. Qué pasa cuando algo falla (quién se entera y cómo).
5. Qué NO va en la versión 1 (la lista de lo que se dijo «después»).

La plantilla del plano (se guarda como PLANO.md):

# Plano: [nombre de la app]
## 1. Para quién y para qué (de la pregunta 1)
## 2. La única cosa (de la 2): en una frase, y cómo se mide que la hace bien
## 3. Datos: entradas, salidas, y qué se guarda (de la 3)
## 4. Pantallas: una lista, con qué se ve y qué se toca en cada una (máximo 5 en la v1)
## 5. Cuando falla (de la 4)
## 6. Lo que NO va en la v1 (de la 5)
## 7. Orden de construcción: qué se hace primero para poder probar antes
## 8. Cómo se prueba: 3 casos con entrada y salida esperada

El ejemplo lleno, de una app de cliente en producción: nutricionista que arma planes de alimentación. La única cosa: que el motor proponga el plan una vez y todo lo que ella edite se recalcule y se mande. Datos: entran medidas y preferencias por formulario; sale el PDF por WhatsApp. Pantallas: 4. Cuando falla: si un macro no cuadra, lo marca en rojo y no manda. NO va en la v1: la app del paciente. Orden: motor, edición, PDF, envío. Pruebas: tres pacientes reales con planes que ella ya había hecho a mano, comparados.

Cómo se usa con Claude Code, con PLANO.md en la carpeta:

Lee PLANO.md. Construye solo la sección 7, paso 1. Cuando termine, corre el caso de prueba 1 de la sección 8 y muéstrame el resultado antes de seguir.

Un paso por vez: la app se prueba desde el primer paso, no al final. Si vale la pena lo decide la pregunta 1 (cuánto tiempo devuelve), no el plano. Si tiene página pública, se diseña con la Pieza J.

Pieza J · Landing en dos pasos (dos prompts)

Pedirle «hazme una landing» a una IA da la landing de todos. Separar el diseño de la construcción, con un archivo en medio que fija las decisiones, es lo que hace que salga tuya. Ángulo 3, pasos 2 a 4.

Paso 1, el prompt de diseño. Se corre en Claude (la app), no en Claude Code. Devuelve el archivo de diseño, no código:

Lee mi CONTEXTO.md y BRAND.md (colores, tipografía, tono). Voy a hacer una landing para: [qué ofrece, a quién, qué acción única pide].
Devuélveme un archivo DISEÑO.md con:
1. La estructura: las secciones en orden, y qué hace cada una (una línea). Máximo 7.
2. El copy de cada sección: título, subtítulo, y el texto, en mi voz. Sin «transforma tu», sin «desbloquea».
3. La jerarquía visual: qué es lo más grande de cada sección y por qué.
4. Los 3 elementos que la hacen mía (algo que ninguna plantilla tendría).
5. Lo que está prohibido: gradientes por defecto, íconos genéricos, tres columnas de features.
6. El único botón: texto, a dónde va, y qué pasa después de tocarlo.

Paso 2, el prompt de construcción. Se corre en Claude Code con DISEÑO.md y BRAND.md en la carpeta:

Construye la landing exactamente como dice DISEÑO.md, en un solo index.html con CSS adentro, sin frameworks. Fuentes de Google. Responsive (celular primero). El botón único abre [WhatsApp / calendario / formulario] con este link: [link].
No agregues secciones que no estén en el archivo. No cambies el copy. Si algo del archivo no se puede hacer, dímelo antes de improvisar.
Al terminar, ábrela en el navegador y revisa en 390 píxeles de ancho que ningún texto se corte.

No escribe la oferta: si no sabes qué vendes ni a quién, la landing no lo arregla. La entrevista de la Pieza D saca lo que ya sabes.

Pieza K · Adaptar cualquier componente a tu web (prompt)

Las galerías de componentes tienen cosas bien hechas, y se nota de dónde salieron: mismos colores, mismo relleno, misma animación. Este prompt hace la adaptación completa, no un cambio de color. Ángulo 3, paso 5. Antes: copia el código del componente en componente-original.html y ten BRAND.md en la carpeta.

Lee BRAND.md. En componente-original.html hay un componente copiado de una galería.
Reescríbelo para mi marca:
1. Colores: reemplaza TODOS los colores por los de BRAND.md (fondo, texto, acento, bordes, sombras). Ninguno del original puede quedar.
2. Tipografía: la de BRAND.md, con los pesos que ahí dice.
3. Textos: reemplaza el relleno por textos reales míos: [pega 3 a 5 frases]. Si falta texto, déjalo marcado como [TEXTO] y dímelo.
4. Radios, sombras y espaciados: ajústalos a la escala de BRAND.md (si dice bordes de 18 px, nada de 4 px).
5. Animaciones: deja solo las que aportan al uso; quita las decorativas. Ninguna más larga de 300 ms.
6. Accesibilidad: contraste mínimo 4,5 a 1 entre texto y fondo; texto sobre relleno dorado va casi negro, nunca blanco.
7. Quita clases, comentarios y nombres que delaten la galería.
Devuélveme el archivo completo y una lista de qué cambiaste. Abre el resultado y revísalo en 390 y 1280 píxeles de ancho.

Las tres revisiones a mano, siempre: el texto sobre color, los tamaños en píxeles fijos, y que el componente siga funcionando (un botón que abría algo tiene que seguir abriéndolo).

Pieza L · Landing 3D (prompt + modo grabación)

Una landing con un objeto 3D que responde al scroll llama la atención y se graba sola para redes. Para negocios de producto, arquitectura o diseño, y para quien vende webs. Ángulo 2, paso 5, y Ángulo 3, paso 6. Se asume: el prompt construye la tuya con tu marca, y el modo grabación se activa con ?grabar=1 o con la tecla G.

Lee BRAND.md. Construye una landing de un solo archivo HTML con un visor 3D (Three.js por CDN) que muestre [el objeto: un modelo .glb que te adjunto / una forma geométrica con mi color de marca]. Al hacer scroll, el objeto gira y aparecen 4 secciones: [qué es], [para quién], [tres resultados], [un botón a WhatsApp]. Celular primero. Un modo grabación, que se active con ?grabar=1 en la URL o con la tecla G, que recorra la página sola en 20 segundos con scroll suave, giro del objeto y aparición de los textos, y termine en el botón. Sin frameworks aparte de Three.js. Que abra con doble clic desde el archivo. El objeto no puede tapar el texto en ningún ancho: revísalo en 390 y en 1280 píxeles.

Cómo se graba el reel: abre index.html?grabar=1 en el navegador a 390 píxeles de ancho (herramientas de desarrollador, vista celular); graba la pantalla 20 segundos; corta a vertical, pon una voz en off y el llamado a la acción. Es una pieza de atención: la conversión la hace el copy de DISEÑO.md (Pieza J). Se publica con la Pieza N.

Pieza M · Pack de diseño web (la carpeta y el método)

Para que cada web que hagas siga el mismo método: primero se decide el diseño en un archivo, después se construye desde el archivo, y lo que se copia de afuera se adapta. Ángulo 2, paso 8, y el orden de fondo del Ángulo 3.

Para un cliente nuevo: copias la carpeta entera, reemplazas CONTEXTO.md y BRAND.md con los del cliente, y corres los tres prompts en ese orden. El pack no decide la oferta: si el contexto está vacío, el copy sale vacío.

Pieza N · Publicar y conectar el dominio (prompt + paso a paso)

Todas las páginas de este recurso se publican igual, y no hace falta que elijas dónde: se lo pides a Claude Code desde la carpeta donde está index.html. Ángulo 1 (paso 6), Ángulo 2 (pasos 5 y 6) y Ángulo 3 (paso 8).

Publica esta carpeta como sitio estático y dame el link público.
1. Usa la herramienta de publicación de estáticos que ya esté instalada o con sesión iniciada en esta terminal. Si no hay ninguna, dime cuál vas a usar y por qué, y espera mi sí antes de instalarla.
2. Si pide iniciar sesión, detente y dime el paso exacto: la sesión la inicio yo en la terminal, tú no entras a mi cuenta.
3. El nombre del proyecto es [nombre del negocio], sin espacios ni tildes.
4. Cuando termine, dame el link, y dime qué comando exacto tengo que volver a correr para actualizar la página sin que el link cambie.
5. Si quiero dominio propio, dime qué registro (A o CNAME) tengo que agregar y con qué valor exacto, en una línea que pueda copiar.

1. La sesión se inicia una sola vez y la haces tú. Devuelve un link provisorio que funciona de inmediato.
2. Abre el link desde tu celular, no desde el computador: es donde lo va a ver la gente.
3. Dominio propio, opcional, 10 minutos: en el panel donde compraste el dominio agregas el registro A o CNAME del punto 5 del prompt. Mientras propaga, el link provisorio sigue funcionando; si después de un día sigue sin verse, revisa que el valor sea exactamente el que te dieron.
4. Para actualizar: cambias DISEÑO.md o BRAND.md y reconstruyes (nunca el HTML a mano), y vuelves a correr el comando del punto 4. El link no cambia.
5. Si usas la app de Claude y no Claude Code: pídele el index.html como archivo y guárdalo. Publicar es el único paso que la app no puede dar sola, porque no tiene terminal: necesitas Claude Code para correr el prompt de arriba una vez. Todo lo demás sale igual desde la app.

Errores conocidos

Cuando ya lo tienes hecho

Tienes una página publicada que capta contactos y los manda a tu WhatsApp (o la de tu cliente, entregada el mismo día y con la propuesta enviada al siguiente). El paso natural es que ese contacto no dependa de que tú estés mirando el teléfono: un setter de IA que atiende Instagram y WhatsApp, califica y lleva a agendar, es lo que CreaVinci monta sobre esta landing. Si quieres que lo montemos en tu negocio, escríbeme por WhatsApp y te digo por dónde partir.