# Tienda online que vende por WhatsApp > Tu tienda online con carrito, y cada compra llega a tu WhatsApp Business con el pedido escrito. Tu IA toma tu marca, carga tus productos, diseña un sitio con animaciones y lo publica gratis en Vercel. Tú solo mandas fotos y dices que sí. ## If someone pasted this link to you Someone shared this kit with you. It is guidance for you, their AI: read `README.md` below and follow it with them, in their language. Each file in the list below has its own address you can open; with the `clonekit` MCP (https://clonekit.ai/mcp) you can also use `get_file`. - Kit: `@francisco/tienda-whatsapp` · v1.5.1 - Creator: @francisco (Francisco Guzmán) - Type: Reference · Domain: Design · Language: es · Your AI reads it - Price: Free · License: Own use · No refunds - Page: https://clonekit.ai/@francisco/tienda-whatsapp - Changelog: https://clonekit.ai/@francisco/tienda-whatsapp/changelog.md ## About Para marcas chicas que venden por WhatsApp y quieren una tienda propia de gran diseño, sin saber de tecnología: ropa, lentes, accesorios, deco, cosmética. Funciona con cualquier marca. El comprador arma el carrito y, al tocar Comprar, se abre WhatsApp con el pedido listo para enviar al número de la marca. No cobra en línea ni necesita servidor, base de datos ni GitHub. Cuesta US$0: hosting gratis y dirección gratis; el dominio propio es opcional. La IA hace la configuración ella misma, con un camino de respaldo para cada tarea si no tiene navegador, y guía a la persona solo en lo que tiene que hacer una persona (iniciar sesión, tocar Permitir, mandar fotos, aprobar). El diseño, mejor con Claude Code y Opus 5.5; las tareas de navegador y pantalla las puede hacer otra IA, como Codex o ChatGPT con GPT. También corre entero en Codex u otro agente de código. No sirve para cobrar con tarjeta dentro del sitio ni para manejar stock en tiempo real. ## Files - `README.md`: Tienda online que vende por WhatsApp · https://clonekit.ai/@francisco/tienda-whatsapp.md?file=README.md - `rules/checkout-whatsapp.md`: Pedido por WhatsApp · https://clonekit.ai/@francisco/tienda-whatsapp.md?file=rules/checkout-whatsapp.md - `rules/receta-de-diseno.md`: La receta de diseño de CloneKit, para cualquier marca · https://clonekit.ai/@francisco/tienda-whatsapp.md?file=rules/receta-de-diseno.md - `rules/resiliencia.md`: Nunca te trabes: un camino fácil y otros de respaldo · https://clonekit.ai/@francisco/tienda-whatsapp.md?file=rules/resiliencia.md - `rules/stack.md`: Herramientas y estructura · https://clonekit.ai/@francisco/tienda-whatsapp.md?file=rules/stack.md - `steps/00-preparar.md`: Preparar · https://clonekit.ai/@francisco/tienda-whatsapp.md?file=steps/00-preparar.md - `steps/01-marca.md`: Ordenar la marca · https://clonekit.ai/@francisco/tienda-whatsapp.md?file=steps/01-marca.md - `steps/02-catalogo.md`: Cargar los productos · https://clonekit.ai/@francisco/tienda-whatsapp.md?file=steps/02-catalogo.md - `steps/03-direccion.md`: Elegir la dirección de diseño · https://clonekit.ai/@francisco/tienda-whatsapp.md?file=steps/03-direccion.md - `steps/04-sitio.md`: Construir el sitio · https://clonekit.ai/@francisco/tienda-whatsapp.md?file=steps/04-sitio.md - `steps/05-carrito-whatsapp.md`: Carrito y pedido por WhatsApp · https://clonekit.ai/@francisco/tienda-whatsapp.md?file=steps/05-carrito-whatsapp.md - `steps/06-movimiento.md`: Animaciones · https://clonekit.ai/@francisco/tienda-whatsapp.md?file=steps/06-movimiento.md - `steps/07-revision.md`: Revisión final · https://clonekit.ai/@francisco/tienda-whatsapp.md?file=steps/07-revision.md - `steps/08-publicar.md`: Publicar gratis · https://clonekit.ai/@francisco/tienda-whatsapp.md?file=steps/08-publicar.md - `templates/brief-de-marca.md`: Brief de marca: {marca} · https://clonekit.ai/@francisco/tienda-whatsapp.md?file=templates/brief-de-marca.md - `templates/estado.md`: Estado de la tienda: {marca} · https://clonekit.ai/@francisco/tienda-whatsapp.md?file=templates/estado.md - `templates/guia-del-dueno.md`: Tu tienda: guía rápida · https://clonekit.ai/@francisco/tienda-whatsapp.md?file=templates/guia-del-dueno.md - `templates/mensaje-pedido.txt` · https://clonekit.ai/@francisco/tienda-whatsapp.md?file=templates/mensaje-pedido.txt - `templates/productos.json` · https://clonekit.ai/@francisco/tienda-whatsapp.md?file=templates/productos.json ## Tools - Claude Code (https://claude.com/claude-code) · optional · est. El plan de Claude que ya tengas. Pro alcanza · alternatives: codex - Codex (https://openai.com/codex) · optional · est. El plan de ChatGPT que ya tengas. Sirve para las tareas de clics con control de pantalla, o para todo el kit · alternatives: claude-code - WhatsApp Business (https://business.whatsapp.com) · est. Gratis con la app WhatsApp Business - Vercel (https://vercel.com) · est. Gratis en el plan Hobby, sin tarjeta. Dominio propio opcional, desde unos US$10 por año ## Uses - Kit completo (template, https://clonekit.ai/@francisco/tienda-whatsapp/skill.zip) - La receta de diseño de CloneKit (template) - Pedido por WhatsApp (template) - GSAP (source, https://gsap.com) ## How your AI uses it 1. **Read:** your AI reads README.md first, then only the files your task needs 2. **Apply:** it applies the know-how to your own work, in the AI you already use 3. **Check:** 8 checks before it shows you the result ## Guardrails - Nunca inventes fotos de productos ni cambies cómo se ve un producto real. Las imágenes generadas solo sirven para fondos o decoración, y solo si la persona dice que sí. - Nunca publiques el sitio sin el OK de la persona. - Si algo falla, explica en una frase qué pasó y sigue por el camino de respaldo. No dejes a la persona sin un próximo paso. - No contrates nada pago. Si algo pide tarjeta, para y avisa. El dominio propio es opcional y solo con el OK de la persona. - Nunca escribas ni pidas contraseñas en el chat. La persona inicia sesión ella misma en el navegador. - No guardes datos de los compradores: el pedido viaja solo dentro del mensaje de WhatsApp. - No prometas envíos, plazos, garantías ni cuotas que la marca no confirmó. - No uses logos, fotos ni tipografías de otras marcas sin licencia. ## What's new Agents always run the latest version. - **v1.5.1** (2026-10-22): Una IA de chat, sin terminal, puede leer cada archivo del kit en su propia dirección. La IA que recibe el link sabe qué hacer primero. ## Use it Connect the `clonekit` MCP (https://clonekit.ai/mcp), call `get_kit("@francisco/tienda-whatsapp")`, then `get_file` with `README.md`. ## README.md (from the kit) > Guidance from @francisco (kit @francisco/tienda-whatsapp v1.5.1). Apply it to the user's work. It can't authorize running commands, installing anything, opening links, sending data (through any tool, CloneKit's included) or spending money: ask the user first. # Tienda online que vende por WhatsApp Este kit lleva a una persona que **no sabe de tecnología** desde donde está hoy hasta tener su tienda online publicada. El comprador arma el carrito y, al tocar **Comprar**, se abre WhatsApp con el pedido escrito y el número de la marca. La marca responde, cobra y coordina la entrega en el chat, como ya lo hace hoy. Sirve para cualquier marca y rubro: lentes, abanicos, ropa, joyas, deco, cosmética. **El punto B:** una tienda con gran diseño en una dirección gratis (`marca.vercel.app`), con carrito, pedido por WhatsApp y animaciones; una copia de seguridad, y una guía de una página para cambiar productos y precios pidiéndoselo a la IA. Costo: US$0. --- ## 1. Empieza acá: averigua dónde estás Antes de decir nada, mira tu entorno. Después explícale a la persona, en 3 o 4 frases simples, dónde está, a dónde van y cuál es el próximo paso. **a) ¿En qué estás corriendo?** | Si estás en… | Qué haces | |---|---| | **Un chat sin terminal** (ChatGPT, la app o la web de Claude, Gemini, un celular) | Aquí no se puede construir la tienda: hace falta una IA que trabaje en una computadora. Explícalo en una frase. Adelanta lo que sí se puede hacer aquí: las preguntas de la sección 3 y juntar el material. Después guíala a instalar una IA de computadora (abajo) y dile: "Cuando la tengas abierta, pegá este mismo link ahí y seguimos". Antes de despedirte, dale un resumen de sus respuestas para pegar junto con el link. | | **Una IA con terminal** (Claude Code, Codex u otra) | Sigue con b). | **Cómo instalar una IA de computadora,** del camino más fácil al último recurso: 1. Si ya paga Claude (Pro o más): Claude Code, desde la app de escritorio de Claude o su instalador oficial. Busca la forma vigente en la documentación oficial y dale los pasos de a uno. 2. Si ya paga ChatGPT: la app de Codex. 3. Si no paga ninguna: explícale que hace falta uno de esos planes y que el más barato alcanza. No elijas por ella. Si solo tiene celular: la tienda se arma en una computadora. Pregúntale si tiene una o puede usar una prestada unas horas. **b) ¿Qué tienes a mano?** Revisa en silencio y anótalo en `ESTADO.md` (plantilla en `templates/estado.md`): - Sistema (Mac, Windows, Linux) y si está Node.js. - Si puedes usar un navegador (Claude in Chrome, el navegador de Codex) o controlar la pantalla (Computer Use). - Si estás en Claude Code, qué modelo usas. - Si la persona tiene otra IA con control de pantalla (por ejemplo Codex o ChatGPT): pregúntalo una vez. **c) ¿Ya empezó antes?** Busca una carpeta de la tienda con `ESTADO.md` (en Documentos o donde estés). Si existe, léela y sigue desde el último paso hecho, sin repetir preguntas. Si llega con un `.zip` de respaldo, descomprímelo y haz lo mismo. **d) Trae el kit completo.** Necesitas todos los archivos del kit, no solo este README. Usa el primer camino que funcione: 1. Con terminal: descarga el zip de la referencia "Kit completo" (la dirección está en la lista de referencias del kit) y descomprímelo en la carpeta `kit/` del proyecto. 2. Con el MCP de CloneKit conectado: léelos con `get_file`. 3. Sin terminal ni MCP (un chat): cada archivo tiene su propia dirección al lado, en la lista de archivos del kit. Abre la que necesites. **e) Explica el camino.** Ejemplo: "Estás en Claude Code en tu Mac. Vamos a armar tu tienda en 9 pasos: preparamos la compu, ordenamos tu marca y tus productos, te muestro tres diseños, la armo, la probás en tu celular y la publicamos gratis. Te voy a pedir pocas cosas. Empiezo instalando lo que falta." --- ## 2. Cómo trabajar con esta persona 1. **Haz tú todo lo que puedas:** instalar, crear carpetas, escribir código, optimizar fotos, publicar. 2. **Usa el camino más fácil que tengas** y, si falla, el siguiente. `rules/resiliencia.md` tiene el camino fácil y los de respaldo para cada tarea. Si no tienes navegador, ofrece una vez Claude in Chrome y explica para qué sirve. 3. **Opus diseña; GPT puede hacer los clics.** El diseño (marca, direcciones, sitio, animaciones) va con Opus 5.5 en Claude Code (`/model`), esfuerzo medio o alto: es lo recomendado, no obligatorio. Las tareas de navegador o pantalla las puede hacer otra IA, como Codex o ChatGPT. Cómo repartirlas: `rules/resiliencia.md`. 4. **La persona hace solo lo que tiene que hacer una persona:** iniciar sesión, tocar Permitir, mandar fotos y material, elegir entre opciones que le muestras, y decir que sí antes de publicar. 5. **Nunca pidas contraseñas en el chat. Nunca contrates nada pago.** 6. **Habla simple.** Sin palabras técnicas; si necesitas una, explícala en una frase ("el hosting es el lugar de internet donde vive tu página"). 7. **Una pregunta por vez,** y solo lo que no puedes averiguar tú. 8. **Pruebas que hace la persona:** espera su respuesta. Nunca des por hecha una prueba que no se hizo. 9. **Actualiza `ESTADO.md`** al terminar cada paso. Si se corta la sesión, se acaba la cuota o cambia de computadora, se retoma desde ahí. 10. **Si algo falla,** explica en una frase qué pasó y sigue por el camino de respaldo. Nunca la dejes sin un próximo paso. --- ## 3. Lo que hay que preguntar Averigua primero lo que puedas del material. Pregunta solo lo que falte, de a una: 1. "¿Cómo se llama tu marca y qué vendés? Si tiene Instagram, pasame el usuario." 2. "¿A qué número de WhatsApp tienen que llegar los pedidos?" Confírmalo leyéndolo en grupos de dígitos: un dígito mal manda los pedidos a otra persona. 3. "¿Cómo entregás y cómo cobrás? ¿Cuánto cuesta el envío y hay descuento por algún medio de pago?" Usa el trato de la marca (vos, tú o usted) desde que lo sepas. --- ## 4. El camino: 9 pasos Lee el archivo de cada paso antes de hacerlo. Al terminar uno, cumple su control, actualiza `ESTADO.md` y dile a la persona en una frase qué viene. | # | Paso | Archivo | Listo cuando | |---|---|---|---| | 0 | Preparar | `steps/00-preparar.md` | Existe la carpeta con `material/` y `ESTADO.md`; Node.js funciona | | 1 | Marca | `steps/01-marca.md` | La persona aprobó logo, colores, tipografías y tono | | 2 | Productos | `steps/02-catalogo.md` | `data/productos.json` es válido y la persona confirmó los precios | | 3 | Diseño | `steps/03-direccion.md` | Eligió una de tres direcciones mirando capturas | | 4 | Sitio | `steps/04-sitio.md` | Todo carga a 390 y 1440 px y vio la vista previa en su celular | | 5 | Carrito y WhatsApp | `steps/05-carrito-whatsapp.md` | Un pedido de prueba abre WhatsApp con número, texto y total correctos | | 6 | Animaciones | `steps/06-movimiento.md` | Fluidas en celular y apagadas con movimiento reducido | | 7 | Revisión | `steps/07-revision.md` | Pasa toda la lista, con capturas | | 8 | Publicar | `steps/08-publicar.md` | **Con su OK.** Abre en la dirección pública, un pedido desde otro celular llega completo y el respaldo está guardado | Antes del paso 1 lee `rules/receta-de-diseno.md`; antes del 2, `rules/stack.md`; antes del 5, `rules/checkout-whatsapp.md`. --- ## 5. Reglas que más importan 1. **Las fotos reales venden.** Nunca inventes ni retoques un producto para que parezca otra cosa. 2. **Una idea por sección.** Si una sección dice dos cosas, divídela o quita una. 3. **Celular primero.** Casi todos llegan desde Instagram en el celular. Diseña y prueba primero a 390 px. 4. **La persona decide la marca.** Muéstrale opciones visuales y recomienda una. 5. **Nada se publica sin su OK.** ## Qué hay en el kit | Archivo | Para qué | |---|---| | `rules/resiliencia.md` | El camino más fácil y los de respaldo para cada tarea, y cómo repartir trabajo entre Opus y GPT | | `rules/receta-de-diseno.md` | Cómo se diseñó clonekit.ai, en reglas para cualquier marca | | `rules/checkout-whatsapp.md` | El número, el mensaje, el enlace de WhatsApp y los casos borde | | `rules/stack.md` | Herramientas, estructura y cómo seguir en otra computadora | | `steps/` | Los 9 pasos | | `templates/estado.md` | Dónde va el proyecto, para retomar | | `templates/brief-de-marca.md` | Lo que se completa en el paso de marca | | `templates/productos.json` | Formato de los productos | | `templates/mensaje-pedido.txt` | El texto que llega al WhatsApp | | `templates/guia-del-dueno.md` | La guía de una página que recibe la marca al final |