Cómo rediseñar tu tienda online con IA: del FTP a la web

Quieres renovar tu tienda online y ya tienes algunas ideas: una cabecera más clara, fichas de producto mejor organizadas y un carrito que dé gusto utilizar. La IA puede ayudarte a convertirlas en cambios reales. Para trabajar bien juntos, primero hay que preparar los archivos, después darle contexto y, por último, revisar el resultado como lo haría un comprador.

Esta guía está pensada para quienes ya utilizan ChatGPT y quieren dar el siguiente paso con un agente capaz de leer y modificar archivos. Sigue un proceso utilizado en un proyecto real de rediseño de plantillas de ShopinCloud/LiveCommerce, explicado con ejemplos que puedes adaptar a tu tienda.

Empezamos por el principio: descargar las plantillas que tienes en el FTP. Si todavía no están en tu ordenador, ese será nuestro primer pequeño logro. Café preparado y vamos allá.

1. Descarga las plantillas del FTP a tu ordenador

Tu tienda utiliza archivos alojados en un servidor. Para que el agente pueda estudiarlos y trabajar con una copia local, debes descargar las carpetas de las plantillas.

Pide a tu proveedor los datos de acceso y la ubicación exacta de esas carpetas. El acceso puede ser FTP o SFTP, según la configuración. Necesitarás un cliente de transferencia de archivos compatible: una aplicación que conecta tu ordenador con el servidor.

Puedes utilizar FileZilla Client. En su distribución habitual, el panel izquierdo muestra tu ordenador y el derecho, el servidor. Abre en el izquierdo la carpeta donde guardarás el proyecto; en el derecho, localiza las plantillas. Selecciónalas y utiliza el menú contextual Descargar . Tienes el recorrido explicado en la guía oficial de FileZilla .

1. Conéctate con los datos facilitados por tu proveedor. Introduce el servidor, el usuario y el método de autenticación que corresponda, como una contraseña o una clave. Utiliza el protocolo y el puerto que te indique.
2. Localiza la carpeta de plantillas en el servidor. Si no sabes cuál es, confirma la ubicación antes de seleccionar archivos.
3. Crea una carpeta en tu ordenador para el proyecto. Ponle un nombre reconocible, como Rediseño de mi tienda.
4. Descarga todas las carpetas de plantillas que tienes en esa ubicación. Conserva sus nombres, subcarpetas y archivos. Los temas originales pueden servir de referencia para entender funciones existentes.
5. Espera a que termine la transferencia y revisa los errores. Confirma que no quedan archivos pendientes o fallidos y que la estructura local corresponde a la seleccionada en el servidor.

La dirección del viaje importa: descargar es llevar los archivos del servidor a tu ordenador . Más adelante, cuando publiques cambios, harás el recorrido contrario: subirlos.

Si necesitas ayuda para preparar este paso, puedes pedir:

«Quiero descargar las plantillas de mi tienda para trabajar con una IA. Indícame el acceso, el protocolo y la carpeta exacta. Necesito conservar la estructura completa».

Comprueba que los archivos realmente se han descargado. Una captura de la lista de carpetas le enseña al agente sus nombres; para estudiar el código necesita acceder a su contenido.

2. Guarda el original y prepara tu carpeta de trabajo

Cuando la descarga esté completa, conserva una copia del original, identificada con la fecha. Prepara otra copia para trabajar y deja claro al agente cuál puede editar.

Así podrás comparar lo que había con lo que se ha cambiado. Una pequeña dosis de orden al principio ahorra bastante arqueología digital después.

También debes acordar con tu proveedor dónde se probará el rediseño y qué plantilla utilizará ese entorno. Duplicar una carpeta en tu ordenador no instala ni activa automáticamente un tema en la tienda. Esa parte depende de la plataforma y de su configuración.

«Esta es la carpeta de trabajo. Conserva intacta la copia original. Antes de publicar, identifica la plantilla y el entorno de pruebas acordados».

3. Abre la carpeta con un agente que pueda trabajar sobre los archivos

Para este proceso necesitas que el agente tenga herramientas para leer y editar el proyecto. Abre o vincula la carpeta descargada en tu entorno de trabajo y comprueba que puede ver su contenido.

Piensa en ello como darle acceso a su mesa de trabajo. Si tu herramienta permite abrir una carpeta o un proyecto, selecciona la copia que has preparado. Después pídele que enumere los temas y algunos archivos que encuentre. Así comprobarás que está leyendo los archivos correctos.

Hay tres lugares que conviene tener claros:

Esta distinción explica por qué un cambio terminado en el ordenador puede seguir sin aparecer en la tienda: todavía falta publicarlo en su destino.

La conexión con el servidor se configura por separado. Puedes subir tú los archivos desde el cliente FTP/SFTP o utilizar un agente que tenga esa herramienta configurada. Facilítale la URL de la tienda, el nombre del tema y las carpetas local y remota acordadas; las credenciales se configuran mediante el mecanismo de acceso de la herramienta. Si necesitas ayuda con esa conexión, tu proveedor puede prepararla contigo.

«Comprueba que puedes leer la carpeta de trabajo y dime qué temas contiene. Después identifica qué conexión y destino se utilizarán para subir los cambios al entorno de pruebas».

4. Pide a la IA que estudie cómo funciona tu plantilla

Antes de mover botones, toca conocer la casa. Encarga al agente que localice la cabecera, la portada, las categorías, la ficha de producto y el carrito, y que siga sus conexiones con otros archivos.

«Estudia las plantillas descargadas. Identifica qué archivos controlan cada parte de la tienda y cómo funcionan compra, favoritos y filtros. Documenta lo aprendido antes de empezar el rediseño».

En estas plantillas aparecen archivos Twig o .tpl, que construyen páginas con datos reales; CSS, que define su apariencia; y JavaScript, que gestiona interacciones. Cada componente puede repartir su trabajo entre varios archivos.

El agente debe descubrir esos detalles leyendo el proyecto. Tú puedes ayudarle señalando una pantalla que ya funciona o aclarando qué plantilla está activa. «Aprender la plantilla» significa analizar su código y guardar una guía útil para este trabajo.

5. Define qué plantilla puede modificar

Si has descargado varios temas, elige el destino de los cambios. Sus nombres pueden parecerse mucho, así que utiliza el nombre exacto y confirma qué papel tiene cada uno.

«Trabajaremos exclusivamente en la plantilla acordada para el rediseño. Puedes consultar las demás para entender su funcionamiento. Mantén todos los cambios en la carpeta de trabajo indicada».

La IA puede deducir cuál parece ser el tema principal, pero la decisión sobre qué versión quieres transformar te corresponde a ti. Deja también anotado dónde se probará y cómo se podrá volver a la versión anterior.

6. Dale un diseño de referencia y un orden de trabajo

Una referencia visual ayuda a concretar la conversación. Puede ser un boceto o una propuesta de cómo quieres que quede la página. A esa representación se le suele llamar mockup .

Prepara referencias por pantalla: portada, categoría, producto, carrito y contacto. Los componentes especiales, como un menú desplegable o el minicart, pueden tener su propia imagen.

«Te adjunto el diseño de la portada. Empieza por la cabecera, continúa con el pie y después con el contenido central. Conserva el logo real de la tienda».

Así proporcionas un objetivo, un orden y una condición importante. Guarda la referencia: la utilizarás para comparar cada revisión.

Puedes ver otro ejemplo de este proceso en cómo pasamos de una captura al rediseño de los comentarios del blog con IA .

Trabaja por partes que puedas revisar. Completar una cabecera te permite comprobar logo, buscador y menús antes de pasar a una ficha de producto con sus propias particularidades.

7. Explica qué debe pasar cuando alguien haga clic

La imagen muestra el aspecto. Tu explicación completa el comportamiento. En el minicart, por ejemplo, hay que definir qué ocurre al abrirlo, cambiar una cantidad o eliminar un producto.

«El minicart debe abrirse al pulsar el icono del carrito. Al aumentar una unidad, actualiza el importe de esa línea y el total. Mantén el panel abierto. La papelera debe eliminar el producto».

Utiliza esta pequeña receta: situación, acción y resultado esperado . Para una vista rápida podrías pedir que se abra a la derecha del producto y que cambie de lado cuando esté junto al borde de la pantalla.

Son instrucciones comprensibles sin escribir código. Ayudan a que el botón bonito tenga también un trabajo que hacer.

8. Utiliza funciones existentes como ejemplo y exige datos reales

Cuando algo ya funciona en otra plantilla, indícalo. En el proyecto que inspira esta guía, comparar componentes existentes ayudó a recuperar el funcionamiento de favoritos, categorías y carrito.

«El botón de favoritos funciona en la plantilla original. Estudia cómo está construido y conserva ese funcionamiento en el nuevo diseño».

También puedes aportar código de un bloque que ya uses en otra web. El agente deberá revisar su compatibilidad y adaptar lo que corresponda.

Con los datos hay una regla fundamental: deben representar tu tienda. Un producto que indica «128 GB» como característica no tiene por qué ofrecer un selector de capacidades. Para mostrar otras opciones deben existir esas variantes.

«Utiliza productos, precios, stock y variantes reales. Obtén el logo y los datos de contacto de su configuración. Si falta información para reproducir el diseño, indícala».

Tu conocimiento del catálogo ayuda a detectar interpretaciones incorrectas. Lo mismo ocurre con opiniones, promociones y mensajes comerciales.

9. Revisa el resultado con ejemplos concretos

Abre la pantalla, compárala con el diseño y utilízala. Pulsa los controles. Prueba nombres largos y productos distintos. Si algo falla, explica qué hiciste y qué esperabas.

«En este producto, el nombre ocupa el espacio de la papelera del minicart. Te paso la URL. Ajusta la distribución y comprueba que eliminarlo sigue funcionando».

Para diferencias visuales, divide la revisión en zonas: galería, información central, precio y compra. Adjunta de nuevo la referencia cuando ayude a precisar la comparación.

Pide también al agente que abra la página y compruebe sus propios cambios. Una respuesta de «hecho» describe el trabajo que afirma haber realizado; tu aceptación llega al revisar el resultado.

Si aparece primero un diseño y después otro, o si una interacción deja de funcionar, cuéntaselo. Esas observaciones permiten revisar la forma en que se ha implementado la solución.

10. Publica los cambios en el destino acordado y comprueba la caché

Ahora llega el viaje de vuelta. Subir significa transferir los archivos desde tu ordenador al servidor. La publicación debe respetar la plantilla, el entorno y el alcance que hayas autorizado.

«Sube los archivos modificados al destino de pruebas acordado. Actualiza la caché necesaria y comprueba en el navegador que se está mostrando la versión nueva».

La caché conserva contenido preparado para cargar más rápido. Puede seguir mostrando una versión anterior aunque el archivo nuevo ya esté en el servidor. El agente necesita conocer el procedimiento de la plataforma para regenerarla cuando corresponda.

El ciclo completo es: editar, subir, actualizar la caché necesaria, abrir y comprobar . Si algo no aparece, hay que investigar qué archivo o configuración está utilizando la página. Algunas portadas, por ejemplo, pueden componerse desde bloques del panel de administración.

11. Prueba también el móvil y los estados menos vistosos

Los diseños suelen enseñar productos con buenas imágenes y textos bien proporcionados. Los compradores se encontrarán también carritos vacíos, artículos agotados y nombres que parecen una novela.

Revisa al menos un producto con una imagen, otro con varias, uno sin stock, textos largos, filtros, favoritos y cambios de cantidad. Comprueba el carrito vacío y qué ocurre al eliminar su último producto.

Hazlo en móvil y escritorio. Después mira el conjunto: anchos, márgenes, colores y estilos deben mantener coherencia entre páginas. Prueba las operaciones comerciales en el entorno adecuado y acuerda con tu proveedor cómo validar el proceso de compra.

«Comprueba estos casos y registra cuáles has probado. Corrige los fallos encontrados y señala las verificaciones que siguen pendientes».

12. Deja un cuaderno de relevo para la próxima sesión

Cuando lleves varias conversaciones, agradecerás tener las decisiones por escrito. Pide un documento de continuidad, habitualmente llamado handoff.md, con lo realizado, los archivos importantes, las pruebas y los pendientes.

«Actualiza el documento de continuidad con la plantilla de trabajo, los cambios publicados, las comprobaciones y los errores descartados. Separa lo confirmado de las suposiciones y deja las credenciales fuera del documento».

Una skill puede recoger las instrucciones reutilizables sobre la arquitectura y los patrones de la plantilla. El handoff explica en qué punto está este rediseño. Ambos deben mantenerse actualizados.

Al continuar, empieza pidiendo que el agente lea esa documentación y confirme el siguiente paso. Así podrá aprovechar lo aprendido y reconocer las decisiones que hayan cambiado.

Tu primer ejercicio puede ser la cabecera. Descarga las plantillas, prepara la copia de trabajo, entrega una referencia y acompaña esa parte hasta verla funcionando en el entorno acordado. Ese recorrido te dará una base práctica para abordar el resto de la tienda.

La documentación de usuario de ShopinCloud puede acompañarte durante el proceso. Si necesitas ayuda para localizar tus plantillas o preparar el entorno de trabajo, cuéntanos qué tienda utilizas y qué parte quieres rediseñar . Podemos empezar por dejar listo ese primer paso.