Cómo enseñar a un agente de IA a construir sitios web y escribir componentes React

Me encontré pensando recientemente: nos hemos acostumbrado a que las redes neuronales escriban código, pero el proceso todavía parece intercambiar fragmentos de texto de un lado a otro en un chat. Copias un prompt, obtienes un muro de código, lo pegas en tu proyecto, te das cuenta de que olvidaste los imports o los estilos se rompieron... ¿Rutina familiar?

Parece que la gente de Google Labs se cansó de lo mismo y sacó stitch-skills. No es otro "asesino de programadores", sino un conjunto de habilidades concretas para agentes de IA que funcionan a través del MCP (Model Context Protocol). Para simplificar: son instrucciones y herramientas que permiten que tu Claude, Cursor o Gemini no solo generen texto, sino que manipulen conscientemente la estructura del proyecto, sigan sistemas de diseño e incluso ensamblen sitios web completos a partir de una sola oración.

Qué es esto en realidad

El proyecto es una biblioteca de habilidades diseñada para trabajar con Stitch — un servidor para generación de diseño visual e interfaces. La característica principal aquí es la estandarización. Cada habilidad en el repositorio está empaquetada siguiendo una plantilla unificada: hay un manifiesto para el agente (SKILL.md), scripts de validación y ejemplos de "estándar dorado".

Esto es necesario para que el agente no tenga que adivinar qué hacer, sino que siga un algoritmo claro. Por ejemplo, si pides convertir un boceto en componentes React, el agente usa la habilidad react-components, que conoce las reglas del juego: cómo verificar la sintaxis y no perder los design tokens.

Para qué es útil en la práctica

El repositorio actualmente tiene alrededor de una docena de habilidades listas para usar. He destacado las que realmente ahorran tiempo, en lugar de solo verse llamativas en las demos.

Generación de sitios completos mediante stitch-loop

En lugar de pedir "construye una landing page" y obtener un archivo index.html, esta habilidad hace que el agente despliegue una estructura completa. Crea las páginas necesarias por sí mismo, organiza los archivos y verifica que todo realmente se abra. Básicamente, esto es automatización de construcción de prototipos.

Perfeccionar ideas con enhance-prompt

A menudo una red neuronal da un mal resultado porque el prompt fue algo como "hazlo bonito". La habilidad enhance-prompt toma tus ideas fragmentadas y las convierte en una especificación con términos de UI/UX y contexto del sistema de diseño. Es como tener un lead experimentado que revise la tarea antes de enviarla a un desarrollador.

Documentación mediante design-md

Mi parte "favorita" del trabajo — describir por qué el botón es exactamente de ese color y cómo funciona el espaciado. La habilidad design-md analiza el proyecto y genera el archivo DESIGN.md por sí misma. No es solo una lista de estilos, sino una descripción del sistema de diseño en lenguaje humano que luego ayuda al mismo agente de IA a generar nuevas pantallas con más precisión.

Conversión a React y shadcn/ui

Para quienes ya han experimentado con prototipos y quieren llevarlos a producción, existen las habilidades react-components y shadcn-ui. Se aseguran de que al transferir el diseño a código, la lógica del componente no se pierda y se utilicen las bibliotecas correctas.

Cómo funciona internamente

Si miras dentro de cualquier carpeta de habilidad, verás una estructura estricta. La gente de Google Labs es claramente defensora de la predecibilidad:

• SKILL.md: esencialmente un system prompt que explica la tarea del agente.
• scripts/: archivos ejecutables para validar el resultado. Si el agente arruinó el código, el script se lo dirá.
• examples/: ejemplos de referencia. El modelo aprende de ellos (few-shot learning) para entender qué resultado se espera.

Instalar las habilidades es lo más simple posible a través de CLI:

npx skills add google-labs-code/stitch-skills --skill react:components --global

El comando en sí encontrará las herramientas que tienes instaladas (como Cursor o Claude Code) y les agregará nuevas capacidades.

¿Vale la pena probar?

El proyecto es específico. Si escribes código a la antigua usanza en Vim plano sin asistencia de IA, esto probablemente no te será útil. Pero si ya has movido parte de tu rutina a Cursor o usas servidores MCP, entonces stitch-skills es un gran ejemplo de cómo puedes estructurar el trabajo con redes neuronales.

Esto appeal especialmente a los desarrolladores frontend y a quienes construyen MVPs rápidamente. La capacidad de convertir un boceto abstracto en un proyecto estructurado con documentación y componentes React en un par de minutos es algo a lo que eventualmente llegaremos de todos modos.

En el lado negativo: la documentación es algo escasa en algunos lugares, y el proyecto no está oficialmente soportado por Google como producto comercial (es un experimento de Google Labs). Pero como base para crear tus propias habilidades o para acelerar tu trabajo actual de maquetación — es una opción muy digna.

Puedes ver todas las habilidades disponibles y leer la especificación en el repositorio del proyecto.