En el vertiginoso mundo del desarrollo web, los proyectos a menudo se enfrentan a un desafío recurrente: la necesidad de cumplir con expectativas de diseño elevadas y funcionalidades complejas, todo ello con un presupuesto limitado. ¿Es posible lograr un equilibrio entre estas demandas aparentemente contradictorias? Un reciente caso de estudio nos muestra cómo la inteligencia artificial, específicamente Claude Code, se ha convertido en una herramienta transformadora para un desarrollador en solitario, permitiéndole construir una tienda WooCommerce con un diseño "pixel-matched" y sincronización ERP en tiempo real.

El desafío: lujo, funcionalidad y presupuesto ajustado

Imagina un escenario familiar para muchos autónomos y pequeñas agencias: un cliente con un sistema de inventario complejo (en este caso, 1C, el ERP dominante en el comercio minorista ruso), un diseño prototipado en React que debe replicarse con precisión milimétrica, y un presupuesto que no permite las plataformas empresariales habituales. La solución tradicional, como Bitrix en el mercado ruso, resultaba inviable por su alto coste y su rigidez para adaptarse a un diseño tan específico.

El cliente no quería una plantilla genérica; buscaba una estética "quiet-luxury" con una paleta de cuatro colores, tipografías Lora y Raleway, y cero bordes redondeados. Recrear esto en una plantilla estándar habría sido más laborioso que construir desde cero. Además, las funcionalidades requeridas eran completas: stock en tiempo real desde el ERP (esencial para ropa con variaciones de talla y color), procesamiento de pagos locales, integración con servicios de mensajería, cumplimiento de la normativa de privacidad de datos y seguimiento de eventos de comercio electrónico. Un proyecto ambicioso para un solo desarrollador.

La apuesta: WordPress, WooCommerce y Claude Code

La estrategia se basó en dos pilares: una pila de software de código abierto (WordPress y WooCommerce) y un agente de codificación de IA, Claude Code, que actuaría como un equipo de desarrollo virtual. El desarrollador se centró en la arquitectura, el diseño de tareas y la revisión, mientras que la IA se encargaba de la mayor parte de la codificación.

La pila tecnológica clave:

  • CMS: WordPress con un tema basado en bloques (FSE) creado desde cero, sin constructores de páginas.
  • E-commerce: WooCommerce y WooCommerce Blocks, con un mini carrito a través de la API de la tienda.
  • Backend: PHP 8, estructura modular y campos personalizados registrados por código.
  • Frontend: Módulos ES planos, sin jQuery, `IntersectionObserver` para animaciones y `history.pushState` para el estado de los filtros.
  • Tokens de diseño: `theme.json` como fuente única de verdad para las variables CSS.
  • Sincronización ERP: 1C a través del protocolo CommerceML, en tiempo real.
  • Herramientas de IA: Claude Code, complementado con servidores MCP para comprobaciones de navegador con Playwright y despliegues SSH.

La elección de un tema de bloques de WordPress, en lugar de un constructor de páginas, fue crucial. En proyectos con presupuesto limitado, un constructor añade complejidad, impacta en el rendimiento y ata el proyecto a un ecosistema externo. El sistema de diseño del prototipo de React se trasladó a `theme.json`, el archivo de tokens nativo de WordPress, lo que permitió que la IA generara CSS consistente y alineado con la estética deseada.

El "vibe coding": colaboración entre humano e IA

La IA no construyó la tienda por sí sola. Su rol fue el de un codificador eficiente, mientras el desarrollador humano mantenía el control estratégico. Este enfoque, denominado "vibe coding", implica la misma cantidad de toma de decisiones, pero con un rendimiento de código mucho mayor.

Un elemento fundamental fue el archivo `CLAUDE.md`, que contenía las instrucciones del proyecto y, crucialmente, las reglas del sistema de diseño: solo cuatro colores, sin valores hexadecimales directos, radio de borde cero, encabezados en mayúsculas con espaciado de letras, y espaciado basado en una escala de 8px. Estas prohibiciones explícitas evitaron que la IA "improvisara" y se desviara del diseño estricto.

La memoria entre sesiones también fue vital. Cada lección aprendida, como "WooCommerce Blocks no carga jQuery" o "las exportaciones delta de 1C borran silenciosamente las variaciones de productos", se documentaba en un archivo Markdown que la IA leía en la siguiente sesión. Esto permitía a Claude Code aprender y evitar errores recurrentes, actuando como una memoria externa para el proyecto.

La verificación fue otro pilar innegociable. Claude Code tenía acceso a Playwright a través de MCP, lo que le permitía abrir la página en vivo, hacer clic, tomar capturas de pantalla y compararlas con el prototipo. Esto garantizaba que las "soluciones" de la IA fueran realmente efectivas y no solo afirmaciones. Por ejemplo, la IA detectó un error donde los enlaces de las tarjetas de productos dejaban de funcionar en escritorio y en producción, identificando que `setPointerCapture` en el carrusel de imágenes interceptaba los eventos de clic, un problema que habría sido difícil de rastrear manualmente.

La IA puede "arreglar" la causa raíz equivocada si no se le obliga a reproducir el error primero. Se desviará del sistema de diseño si las reglas no son explícitas. Y pierde el hilo en tareas largas sin recordatorios externos.

Estos puntos débiles de la IA no son fallos del modelo, sino problemas de proceso que el desarrollador humano debe gestionar. La clave está en una supervisión activa y una definición clara de las reglas.

La integración ERP: el mayor desafío

La sincronización con el ERP 1C, a través del protocolo CommerceML (basado en XML), consumió la mayor parte del tiempo. Aunque el esquema es simple (el ERP exporta paquetes y un plugin de WordPress los analiza y actualiza el catálogo), los detalles son complejos. Este es un desafío común al integrar cualquier sistema ERP o POS con una plataforma de comercio electrónico mediante feeds XML.

Este caso demuestra que, con la estrategia y las herramientas adecuadas, un desarrollador individual puede superar las limitaciones de presupuesto y complejidad de diseño, utilizando la inteligencia artificial como un potente aliado para construir soluciones de comercio electrónico de alta calidad. La clave reside en una colaboración inteligente entre la creatividad humana y la eficiencia de la IA.