Install
npx skills add google-labs-code/stitch-skillsPara quién
Si ya usas Google Stitch para interfaces y quieres que un agent de programación, según el estándar abierto Agent Skills, genere pantallas nuevas, edite las existentes o produzca variantes de diseño, este conjunto encaja. Es un paquete de habilidades y plugins para Google Stitch. La página explicativa es
https://github.com/google-labs-code/stitch-skills
El producto en sí es
https://stitch.withgoogle.com/
El perfil más adecuado ya registró Stitch MCP, tiene variables de entorno y credenciales listas según las notas oficiales de instalación, y acepta solo el comando de instalación de habilidad de abajo. Estas habilidades exigen que Stitch MCP esté configurado y en ejecución en el entorno del agent; sin MCP no hay backend de diseño que llamar. Notas de instalación:
https://stitch.withgoogle.com/docs/mcp/setup/
La primera pasada debe ser una generación o variante pequeña y comprobable, no rehacer de entrada todo un sistema de diseño de producción. Lo oficial nombra varios entornos de programación; uno indica instalación manual, pero no da esos pasos. No leas el roster nombrado como los únicos entornos usables, y no inventes instaladores no escritos. El paquete sigue el estándar abierto Agent Skills. Los nombres aparecen como stitch::generate-design; no completes otros nombres stitch:: que no estén escritos. Si aún no tienes cuenta Stitch o credenciales MCP, ve primero a los documentos Setup, no ejecutes npx primero.
Primera prueba en 3 minutos
Las habilidades solo usan este comando oficial opcional:
npx skills add google-labs-code/stitch-skills
No busques otro mercado, plugin ni un segundo instalador de habilidad. Tras instalar, reinicia el agent y confirma que la habilidad aparece.
Requisito: Stitch MCP está registrado según los documentos Setup de arriba, las variables de entorno y credenciales están puestas, y el proceso corre. Si MCP no está listo, párate en la comprobación de configuración; no llames a generar. Esta máquina también debe poder ejecutar npx.
En un agent con la habilidad instalada y MCP en marcha, haz una tarea de bajo riesgo: llama stitch::generate-design, describe una pantalla de prueba en un texto corto (por ejemplo «una página de estado vacío solo con título y botón principal») y primero haz que repita el prompt que irá a Stitch, si editará una pantalla existente y si escribirá archivos locales. Cuando confirmes que solo generará un borrador nuevo y no sobrescribirá uno formal, permite que continúe.
Señal de éxito: en Stitch aparece una pantalla nueva coincidente o un resultado de diseño que se puede abrir, no un HTML falso ajeno a Stitch. Si la habilidad dice que el backend no está disponible, vuelve a si MCP corre y si las credenciales siguen los documentos oficiales. No cambies el comando de instalación para probar fuentes no documentadas. Si pide marcadores de secreto que no aparecen en los documentos, para. Usa solo los nombres de variables de entorno escritos en la página Setup.
Casos de uso
Caso 1: generar una pantalla nueva a partir de texto o una imagen. La nota de stitch::generate-design es generar pantallas nuevas a partir de texto o imágenes. Prepara una descripción de interfaz, o una imagen de referencia que tengas derecho a usar, y deja que la habilidad saque un primer borrador en Stitch. Para si la ruta de imagen o el texto no están listos. La generación cae del lado de Stitch y es una llamada saliente; confirma el prompt antes de ejecutar. Lo oficial no da plantillas de prompt ni límites de tamaño de imagen. Si faltan esos detalles, mantén la descripción corta y no inventes parámetros.
Caso 2: editar una pantalla existente o sacar variantes. La misma habilidad también dice que puede editar pantallas existentes y crear variantes de diseño. Señala un borrador existente en Stitch y pide solo una o dos variantes; no sobrescribas en lote. Lo oficial no da tope de variantes ni botón de revertir, así que primero haz que diga qué pantalla cambiará y si guardará una variante aparte; ejecuta solo tras confirmar. Es otra operación de la misma habilidad que el caso 1, no otra instalación. Si el agent propone un comando de plugin no documentado para lo mismo, recházalo y sigue solo con el nombre de habilidad instalado.
Límites de uso
Sin un Stitch MCP en ejecución, este conjunto no sirve como habilidad de dibujo ordinaria. Primero hay que terminar el registro del servidor más variables de entorno y credenciales; lo oficial no da atajo si falta alguna pieza. Tampoco trates el comando de instalación de habilidad como comando de instalación de MCP.
La instalación oficial de habilidad es solo npx skills add google-labs-code/stitch-skills. La página también tiene una forma npx plugins add con --target para un anfitrión dado; eso es un aterrizaje de plugin, no la entrada de instalación de habilidad de esta guía. En entornos cuyo roster dice «instalación manual», lo oficial no da pasos copiables; no inventes copiar directorios ni órdenes de mercado.
generate-design crea o modifica pantallas en Stitch y es una llamada externa con efectos secundarios. Revisa el prompt, la pantalla objetivo y si guardará aparte antes de ejecutar. Lo oficial no autoriza publicar el resultado generado directo a una app de producción, ni enumera nombres de habilidad fuera de la tabla; no adivines capacidades no escritas. Al generar desde una imagen, usa solo una referencia que tengas derecho a usar. Antes de editar una pantalla existente, confirma en Stitch que sigue siendo borrador, para no sobrescribir una interfaz ya entregada.