De hamburguesas 3D a merchandising personalizado: crea una tienda con IA

El pan se levanta. Los pepinillos aparecen. Añade otra loncha de queso y la hamburguesa cambia delante de ti, junto con el ticket. En otra parte, un comprador suelta una ilustración sobre una sudadera, la mueve un poco hacia arriba y luego gira el producto para ver cómo queda. Detrás de esa interacción sencilla, el vendedor ya decidió dónde puede ir la obra y de qué tamaño debe ser. Son dos experiencias de compra muy diferentes. Comparten una idea útil: una tienda puede diseñarse alrededor del artículo que vendes, hasta la forma en que alguien lo elige. Hemos incluido ambos puntos de partida en la colección Modern Shop en GitHub: , un escaparate 3D de comida rápida, y , un diseñador de productos para merchandising personalizado. El código fuente está disponible bajo la licencia MIT, así que puedes explorarlo, adaptarlo y construir sobre él. Trae una idea, tu propia marca y una herramienta de codificación con IA como Codex o Claude Code. Ya hay algo interesante con qué trabajar.

Jelly Bites: deja que los clientes armen su comida

Comienza con la demo en vivo de Jelly Bites. Elige una hamburguesa, arrástrala para girarla y prueba a cambiar un ingrediente. La comida responde con un suave bamboleo. Resalta una capa y la pila se abre para que puedas ver qué hay dentro. Es lúdico, pero la interacción tiene un propósito práctico. Los clientes pueden ver las opciones que están eligiendo. Pepinillos, salsa, queso y toppings se convierten en partes visibles de un pedido en lugar de una cadena de opciones que tienen que imaginar. El creador de pizzas lleva la misma idea en otra dirección: elige el tamaño, la masa, la salsa y los ingredientes, y observa cómo la pizza toma forma. Un ticket en vivo muestra las consecuencias de esas decisiones. La demo también explora entrega o recogida, códigos promocionales, pago y una pantalla de seguimiento del pedido. Hay un pequeño detalle aquí que importa cuando la gente cambia de opinión. El artículo en la etapa de construcción es un borrador hasta que el cliente elige . Un artículo del carrito puede entonces volver al creador 3D y editarse. Ese tipo de interacción es algo que un restaurante puede adaptar como propio. El código fuente del escaparate 3D de comida rápida está construido con Vue, TypeScript y Three.js. No necesitas conocer esos nombres para probar la demo. Para un desarrollador o un agente de codificación, identifican un proyecto familiar basado en navegador para inspeccionar y extender. Las formas de la comida se generan en código, dándote un punto de partida concreto para cambiar su apariencia y comportamiento. Una hamburguesería local (por ejemplo, una taquería o burger shop en Madrid o Ciudad de México) podría adaptar el menú a sus propias recetas y envases. Una pizzería (por ejemplo, en Barcelona) podría poner sus combinaciones emblemáticas al principio. Puedes cambiar colores, idioma, textos, opciones de ingredientes y el flujo de pedido para ajustarlo al negocio. En la muestra ya están representados diseños en inglés y persa. Vale la pena entender un límite antes de usarlo para pedidos reales: la demo actual usa datos de catálogo de ejemplo, pedidos guardados en el navegador y procesos de pago y seguimiento simulados. Su conexión con Selldone aún necesita ser implementada. La experiencia visual está ahí para explorar; las comprobaciones finales de catálogo y precios en el servidor, el pago y el cumplimiento requieren una integración de comercio real. La experiencia 3D necesita un navegador compatible con WebGL 2, así que prueba una adaptación en los móviles y navegadores que usan tus clientes.

Mockup Studio: una experiencia para el vendedor y otra para el comprador

Una tienda de camisetas personalizadas tiene un problema distinto. El cliente quiere libertad para experimentar. La imprenta necesita un diseño que encaje en el área de impresión real. Mockup Studio aborda ambos lados del problema. Abre la demo en vivo del diseñador de productos y verás dos modos claramente marcados: para administradores de la tienda y para compradores.

El vendedor establece las reglas una vez

En el constructor de plantillas, el vendedor elige el producto, añade las vistas del producto y define el área imprimible. Esas dimensiones se almacenan en milímetros, con ajustes para resolución y sangrado, el arte extra alrededor del borde de corte. El vendedor decide luego qué puede cambiar el comprador: mover, redimensionar o rotar la obra, por ejemplo. Una impresión en el pecho puede tener sus propios límites, mientras que una manga usa otra área. La plantilla puede probarse desde el punto de vista del comprador antes de entregarla a la aplicación host. Esa separación hace la idea útil más allá de una sola camiseta. La galería de ejemplo incluye camiseta, sudadera con capucha, suéter, gorra, taza, cojín y etiqueta colgante. También se pueden usar recursos 3D preparados dentro del formato de modelo soportado. Para una forma de producto distinta, planea preparar el modelo y su mapeo de área de impresión. El estudio también puede crear fotos iniciales del producto a partir de un modelo 3D configurado. Eso le da al vendedor otra forma de preparar vistas para el editor mientras desarrolla la experiencia del producto.

El cliente tiene espacio para jugar

El editor del comprador está más centrado. Sube una imagen, colócala, ajusta su tamaño y prévisualízala en el producto. Las reglas del comerciante permanecen mientras el cliente experimenta. Hay vistas 2D basadas en foto y una vista 3D opcional que puede rotarse. Los cambios en la obra aparecen en el modelo. En productos suaves compatibles, incluso hay una herramienta de tirón que permite levantar la tela y ver cómo vuelve a asentarse. Es un efecto de previsualización; no estira la obra que se envía a impresión. Una distinción clara atraviesa el proyecto: una vista muestra al cliente cómo podría verse el artículo. La otra es un PNG transparente para la superficie de impresión, usando las dimensiones físicas y la resolución configuradas. Un indicador de calidad de impresión ayuda a explicar cómo los píxeles de la imagen fuente se relacionan con el tamaño elegido. Para un flujo de producción real, la imprenta todavía necesita aprobar dimensiones, colores y requisitos de archivo. La exportación actual es un PNG RGB renderizado en el navegador, sin conversión CMYK o perfiles de color específicos de imprenta. Las formas de producto generadas son ilustraciones más que réplicas medidas de cada prenda que podrías vender. La demo también mantiene plantillas y diseños localmente. Guardarlos en un comercio, adjuntar el diseño exacto a un pedido, cobrar y enviar el trabajo a producción son pasos de integración para la tienda terminada. Herramientas de texto/fuente, variantes de producto y arrastrar obra directamente sobre la superficie 3D están entre las funcionalidades que aún están en la hoja de ruta del proyecto.

Un punto de partida cambia la conversación con la IA

“Crea una tienda” deja mucho para que un asistente de IA lo adivine. “Toma este editor de productos, usa nuestra marca y haz que el flujo de cliente funcione para nuestra imprenta” le da algo concreto. Por eso compartimos el código fuente. Puedes ver la interacción, probarla y señalar las partes que quieres cambiar. Una captura de pantalla se convierte en una discusión. Una demo se vuelve una referencia de trabajo. El código le da a tu desarrollador o agente de codificación con IA un lugar por donde comenzar. Usa ChatGPT para trabajar la idea de negocio: ¿Quién compra? ¿Qué opciones importan? ¿Dónde dudan los clientes? ¿Qué información debe llegar a la cocina o al equipo de impresión? Luego lleva ese brief a Codex, Claude Code u otro entorno de desarrollo con IA que pueda inspeccionar y editar el proyecto. Las herramientas de IA pueden ayudar a adaptar componentes, revisar el diseño, conectar servicios, escribir tests y explicar código desconocido. Un resultado sólido todavía depende de un brief claro y de comprobar la experiencia real. Dale al asistente un hito útil a la vez y pídele que muestre lo que funciona.

Dónde encaja Selldone MCP

El frente de una tienda es la parte que tocan los clientes. Detrás están los productos, el stock, los pagos, el envío y los pedidos que alguien tiene que gestionar. Selldone MCP da a un asistente IA conectado acceso estructurado a una tienda Selldone autorizada. Durante una construcción, eso puede ayudar al agente a trabajar con el catálogo de la tienda, el contenido y la configuración soportada en lugar de adivinar con un conjunto separado de datos de ejemplo. El acceso se mantiene dentro de la tienda y los permisos que elijas. El escaparate desplegado necesitará su propia API o integración de servicio Selldone implementada. MCP ayuda al asistente a hacer el desarrollo y el trabajo aprobado en la tienda; no convierte automáticamente el botón de pago de una demo en un flujo de pago en vivo. Para Jelly Bites, eso significa conectar el menú y el flujo de pedidos a servicios de comercio reales. Para Mockup Studio, significa almacenar la plantilla del vendedor y el diseño elegido por el cliente de forma fiable, y luego conservar ese diseño con el producto y pedido adecuados. La experiencia de cara al cliente puede seguir siendo distintiva mientras Selldone proporciona la base de comercio. Hay diferentes maneras de construir sobre esa base. Un escaparate completo puede personalizarse mediante el flujo Selldone Layout, mientras que una aplicación personalizada más especializada puede usar un frontend separado. La visión general de Selldone Genesis explica esos caminos. La elección correcta depende de cuánto quieras mantener de la tienda existente y de cuán inusual tenga que ser el recorrido del cliente.

Da a tu IA un mejor primer brief

Puedes empezar con la siguiente petición en un entorno de codificación. Sustituye las partes entre corchetes por los datos de tu negocio.

Inspecciona los dos proyectos en https://github.com/Modern-Shop y recomienda el mejor punto de partida para [mi negocio]. Lee su documentación, luego clona el proyecto elegido en una nueva carpeta. Muestra qué características funcionan hoy y cuáles necesitan integración. Adapta el recorrido del cliente a [mi marca, productos y requisitos], manteniéndolo usable en móvil.

Una vez que hayas elegido dirección, pide el siguiente hito:

Conecta la tienda Selldone prevista a través de MCP con los permisos que esta tarea necesita. Planifica e implementa el catálogo real, el almacenamiento de diseños cuando sea relevante, el carrito, el checkout y la integración de pedidos usando los servicios Selldone soportados. Reemplaza las suposiciones demo por datos reales de la tienda. Prueba el flujo completo y muestra una vista previa para revisión antes del despliegue.

Esos prompts son el comienzo de una conversación de construcción. Un buen agente inspeccionará el proyecto, identificará piezas faltantes y trabajará con ellas contigo. Para un primer hito en un restaurante, podrías pedir un pedido completo: personalizar un artículo, ver el precio correcto, pagar en el flujo de prueba soportado y verificar que el negocio recibió el pedido. Para una imprenta, sigue un diseño desde la subida hasta la previsualización y hasta el archivo exacto guardado y adjuntado al pedido. Aquí también es donde un escaparate personalizado puede convertirse en un proyecto más económico. El código de interacción existente y una plataforma de comercio pueden reducir lo que tienes que construir desde cero. El coste final dependerá del diseño, integraciones, recursos, hosting y pruebas que tu negocio necesite. La licencia MIT hace reutilizable el código de ejemplo; no incluye esos servicios gratis.

Constrúyelo tú mismo o trae la idea a nuestro equipo

Seguiremos refinando los ejemplos de Modern Shop y desarrollando la colección. Puedes empezar desde las versiones disponibles ahora, adaptar toda una experiencia o tomar la parte que resuelva tu problema particular. Si prefieres que especialistas den forma al resultado alrededor de tu marca, puedes solicitar un presupuesto de escaparate a medida al equipo oficial de configuración y diseño de Selldone. Lleva la demo que te guste, tus productos y la experiencia que quieres que tengan los clientes. Podemos acotar el diseño y la implementación contigo antes de que comience el proyecto. Quizá tu tienda empiece con una hamburguesa que se desmonta en pantalla. O quizá empiece con una pequeña ilustración en una taza. Abre las demos, cambia algo y mira qué idea se parece más a tu negocio. Explora Modern Shop en GitHub · Prueba el creador de comida 3D · Prueba Mockup Studio