Así rediseñé una tienda Shopify entera con un solo prompt · Recursos · Nerdos de la IA Saltar al contenido
Nerdos de la IA
Todos los recursos

Así rediseñé una tienda Shopify entera con un solo prompt

Victor · Nerdos de la IA

ProyectoActualizado 788 palabrasMarkdown

Un solo prompt, una imagen de referencia y 6 agentes: Claude Code rehízo la tienda Shopify de mi amigo Juan en un borrador, en 1 h 38 min. El paso a paso y el prompt.

Empieza aquí

Pásaselo a Claude Code

Pega esta línea y Claude Code lee el recurso completo y lo hace contigo.

Baja con curl https://neuralextension.com/resources/rediseno-tienda-shopify.md, léelo completo y hazlo conmigo, paso a paso.

O copia el prompt

Completo y listo para pegar.

Ver el prompt

La receta

Herramienta
Claude Code (app de escritorio) + conector de Shopify + Shopify CLI
Modelo
Claude Opus 5.5
Esfuerzo
Extra alto xhigh
Tiempo
1 h 38 min, con un solo prompt
Costo
Incluido en el plan Max (148,7 M tokens procesados)
Dos celulares: a la izquierda la tienda de antes, sencilla; a la derecha el borrador rediseñado, con títulos en coral, botones redondos y tarjetas de colores. Arriba, una imagen de referencia clavada con un alfiler; a un lado, cuatro Claude, uno por pantalla, y una lupa con un chulo: el crítico.

Qué es

Mi amigo Juan me prestó su tienda Shopify, GRATU, y le pedí a Claude Code un rediseño total con base en una imagen que me encantó. Un solo prompt: seis agentes trabajaron 1 hora y 38 minutos y me entregaron el home, la colección, el producto y el carrito nuevos, en el celular. Todo en un borrador: la tienda real nunca se tocó.

Dos celulares lado a lado. Antes: barra amarilla, header blanco, la foto de dos planeadores y «Toma el control de tu día.» en letra sencilla. Después: barra azul, botones redondos con borde, píldoras de categorías, «toma el control de tu día» con «de tu día» en coral subrayado en ola, y la foto inclinada con stickers.
El home antes y después, en el artefacto que armó Claude. Captura real.

Lo mostré en la Feria EffiX, por eso el borrador se llama así. Esta es la parte 2, el cómo; la parte 1 está en mi Instagram.

Lo que necesitas

  • Claude Code en la app de escritorio de Claude. Yo uso Opus 5.5 en esfuerzo extra alto, con el plan Max.
  • Tu tienda Shopify, con una cuenta de dueño o de staff con permiso de temas.
  • El conector de Shopify en Claude, para leer la tienda.
  • El Shopify CLI, para copiar y subir el tema. Claude te lo instala.
  • Una imagen de referencia: un diseño que te encante.
  • Nada de programar.

Paso a paso

  1. Activa el conector de Shopify. Agrégalo desde su página y conéctalo a tu tienda. En la app lo ves en el «+» del cuadro de texto → Connectors. Con él, Claude lee tus temas, productos y colecciones.
El menú «+» del cuadro de texto de Claude abierto en Connectors: Gmail, Google Drive, Notion, Shopify, Slack y Claude in Chrome, cada uno con su interruptor azul encendido.
«+» → Connectors, con Shopify encendido. Captura real.
  1. Conecta el Shopify CLI. Es la herramienta de Shopify para trabajar los temas, y Claude la usa por debajo. Pídele que la instale; la primera vez te pide iniciar sesión con tu cuenta de Shopify (así lo explica Shopify).
Terminal (o pídeselo a Claude)
npm install -g @shopify/cli@latest
Una terminal con tres comandos del Shopify CLI: theme list muestra «Mi tema» como [live]; theme duplicate crea «Rediseño» con role «unpublished»; theme push sube un archivo y responde que el tema «Rediseño» se subió con éxito. Los números de los temas van tapados.
Lo que hizo el CLI: ver el tema publicado, copiarlo sin publicar y subir cada cambio a la copia. Rehecho en código con una tienda de ejemplo.
  1. Escoge una imagen de referencia. Un diseño que te encante, aunque sea de otro negocio. Yo usé el de una app para parejas, lovelee-app.com. Claude toma el estilo y lo lleva a tus productos.
A la izquierda, pequeña y marcada «referencia · otra marca», la imagen del antes y el después de lovelee-app.com: crema, azul marino, coral y tarjetas tipo sticker. Una flecha lleva a la derecha, a un celular con la primera pantalla del borrador de GRATU en ese estilo.
La referencia, de otra marca, y en lo que se convirtió.
  1. Pega el prompt con la imagen. En la app, pestaña Code, abre una sesión nueva, arrastra la imagen al cuadro de texto, pega el prompt de abajo, cambia lo que está entre corchetes y dale Enter.
    PromptEl prompt, todo en uno
    Ver completo
La app de Claude en la pestaña Code, en modo oscuro, en la sesión «Rediseno Tienda Shopify»: arriba la imagen de referencia y mi prompt recortado con «Show more»; debajo, Claude usa el conector de Shopify (Get Shop Info: GRATU Colombia, gratu.co), crea el tema borrador «Ejemplo Victor Feria Effix» y muestra su lista de tareas en 2 de 6.
El primer minuto de mi sesión del 15 de octubre. Rehecha en código para no mostrar mis otras sesiones.

Yo lo dicté con errores y todo, y no volví a escribir. El de abajo es el mismo pedido, ordenado para cualquier tienda.

Lo que hizo Claude

6:18 p. m. · Copió la plantilla a un borrador. Con el CLI duplicó el tema publicado como «Ejemplo Victor Feria Effix». Cada cambio se subió solo ahí: unas 60 subidas, ninguna al tema en vivo.

El admin de Shopify en Online Store › Themes: el tema en vivo de gratu.co, «Tinker · PDP Gratu (LA REAL)», guardado por última vez el 3 de octubre; debajo, en Draft themes, el borrador «Ejemplo Victor Feria Effix», guardado el jueves a las 7:52 p. m.
El admin hoy: el tema en vivo sigue con su último cambio del 3 de octubre. Captura real, recortada.

6:27 p. m. · Repartió el trabajo: un agente por pantalla. Cuatro al mismo tiempo, cada uno en sus archivos, trabajando en rondas: subir al borrador, tomarle foto a la tienda en un iPhone simulado, compararla con la imagen y arreglar. Entre todos miraron 221 fotos.

Tres fotos del home del borrador en el celular. 18:36, ronda 1: el título muestra código crudo («<span class="lvh-accent lv-wavy">de tu día</span>»). 18:40, ronda 2: el título ya dice «toma el control de tu día» con «de tu día» en coral. 19:48, final: header nuevo, botones y la foto con stickers.
Fotos del agente del home. En la ronda 1 se coló código en el título; en la 2 ya estaba arreglado.

También probaron el carrito: agregar, cambiar cantidades y quitar.

7:31 p. m. · Entró el crítico. Un agente que no construyó nada revisó todo contra la imagen y encontró 19 defectos: marcos de más, espacios vacíos, datos repetidos y un producto sin precio ni botón en la primera pantalla. Cada agente arregló su parte.

Dos celulares con la página del planeador diario cosido. 19:32, lo que vio el crítico: la foto grande y el título, y el precio apenas asoma abajo, sin botón. 19:53, final: el precio de $59.900 con el -20 % y la barra «agregar al carrito — $59.900» en la primera pantalla.
El producto que vio el crítico y el final. Fotos de los agentes.

7:55 p. m. · Me entregó el artefacto, con el antes y el después de cada pantalla, el tiempo, los tokens y el prompt.

La parte de arriba del artefacto, en crema con puntos: «ejemplo victor feria effix», la nota «Tema sin publicar. El tema en vivo no se tocó» y cuatro tarjetas: tiempo total 1 h 38 min, tokens procesados 148,7 M, 6 agentes (1 líder + 4 constructores) y 4 pantallas.
Captura real del artefacto; el número del tema va tapado.

Pídele siempre un borrador y un crítico

El borrador te deja trabajar tranquilo: Claude cambia una copia y la tienda sigue vendiendo. Tú miras la vista previa y decides si la publicas.

El crítico sube el nivel. El que construye se acostumbra a lo que hizo; uno con ojos frescos, que solo revisa, encuentra lo que falta.

Ahora le toca a Juan decidir. A esta misma tienda le hice un agente de voz, y tengo una biblioteca de skills para Shopify. Este link te llegó por DM gracias a esto.

El prompt

Prompt

El prompt, todo en uno

Quiero un rediseño total de mi tienda Shopify [TU TIENDA], con base en la imagen que te adjunto. Es un diseño de otra marca que me encanta: toma su estilo (colores, letras, tarjetas, botones y detalles) y llévalo a mi tienda, con mis productos, mis textos y mis precios. Quiero que quede súper terminado.

Todo va en un borrador:
- Copia mi tema publicado a un tema nuevo, sin publicar, y llámalo «[NOMBRE DEL BORRADOR]».
- Cada cambio se sube solo a ese borrador. Nunca publiques nada ni toques el tema en vivo. Al final confírmame que el tema en vivo sigue publicado y sin cambios.
- Para leer la tienda usa el conector de Shopify. Para copiar, bajar y subir el tema usa el Shopify CLI (theme duplicate, theme pull y theme push con el --theme del borrador). Si el CLI no está instalado o conectado a mi tienda, dime qué hacer y espérame.

Las pantallas, en el celular: el home, la colección, la página de producto y el carrito, con el header y el footer.

Cómo trabajar:
- Primero toma fotos del «antes» de cada pantalla en un iPhone simulado y arma la base del diseño: colores, letras, tarjetas y botones.
- Después crea un equipo de agentes, uno por pantalla (home; colección y tarjeta de producto; página de producto; header, footer y carrito), que trabajen al mismo tiempo. Cada uno edita solo sus archivos; si encuentra un problema en los de otro, te lo avisa a ti y tú se lo pasas al dueño.
- Cada agente trabaja en rondas: sube sus cambios al borrador, le toma foto a la vista previa en el celular, la compara con la imagen y arregla lo que no se parezca. Que también pruebe que todo funcione: agregar al carrito, cambiar cantidades y quitar, sin llegar al pago y sin crear pedidos.
- Cuando terminen, lanza un agente crítico que no haya construido nada. Solo revisa las cuatro pantallas contra la imagen y hace una lista de defectos, sin tocar archivos. Reparte esa lista entre los agentes y que la arreglen.

Al final, crea un artefacto con:
- el antes y el después de cada pantalla en el celular, lado a lado;
- cuánto tiempo se demoró todo;
- cuántos tokens se gastaron, por agente y en total;
- este prompt.

Y mándame el link de la vista previa del borrador para revisarlo antes de decidir si lo publico.