Skills de tareas
Stitch Skills
Guía de un texto o imagen a diseños y componentes frontend.
Presentación
Preparado por LessAI Tools a partir de documentación pública
Para revisar pantallas antes de construir. Las habilidades usan tus proyectos Google Stitch para generar, editar, gestionar estilos y convertir a código como React. Necesita cuenta, acceso al proyecto, conexión MCP y dependencias. Lo publica Google Labs code pero declara no tener soporte oficial de Google. Las cuotas siguen la guía actual.
Primeros pasos
Revisa los requisitos y elige tu asistente para ver los pasos.
- Qué necesitas
- Codex, Claude Code o Cursor con plugins; los dos últimos requieren Node.js y npm al instalar.
- Usa tu cuenta Stitch y prepara credenciales MCP. Generar diseños necesita internet.
- Costes
- Plugin Apache-2.0; revisa cuotas y límites en Stitch. Asistente aparte.
- Permisos necesarios
- MCP lee y cambia proyectos autorizados. Prompts, imágenes y HTML elegidos van a Stitch; archivos generados quedan locales. Sube material permitido y guarda credenciales en tu asistente.
CodexConfiguración oficial documentada
El README incluye Codex explícitamente. Conecta también Stitch MCP para acceder a tus diseños.
Pasos de configuración
- En Codex: Ajustes → Mercados de plugins → Añadir; fuente https://github.com/google-labs-code/stitch-skills y Git ref main.
- Instala stitch-design desde el mercado añadido; empieza por diseño.
- Configura credenciales y conexión con la guía Stitch MCP; en nueva sesión pide tus proyectos.
Comprobar la configuración
Comprueba tus proyectos; lista vacía es válida si no tienes. Pide luego pantalla de prueba y revísala en Stitch. Habilidades solas no conectan MCP.
Fuentes oficiales
Claude CodeConfiguración oficial documentada
El README incluye Claude Code; conecta además Stitch MCP para tus diseños.
Pasos de configuración
- Abre terminal en el proyecto y comprueba Node.js y npm.
- Ejecuta npx plugins add google-labs-code/stitch-skills --scope project --target claude-code y revisa los avisos.
- Configura credenciales y conexión con la guía Stitch MCP; en nueva sesión pide tus proyectos.
Comprobar la configuración
Comprueba tus proyectos; lista vacía es válida si no tienes. Pide luego pantalla de prueba y revísala en Stitch. Habilidades solas no conectan MCP.
Fuentes oficiales
CursorConfiguración oficial documentada
El README incluye Cursor; conecta además Stitch MCP para tus diseños.
Pasos de configuración
- Abre terminal en el proyecto y comprueba Node.js y npm.
- Ejecuta npx plugins add google-labs-code/stitch-skills --scope workspace --target cursor y revisa los avisos.
- Configura credenciales y conexión con la guía Stitch MCP; en nueva sesión pide tus proyectos.
Comprobar la configuración
Comprueba tus proyectos; lista vacía es válida si no tienes. Pide luego pantalla de prueba y revísala en Stitch. Habilidades solas no conectan MCP.
Fuentes oficiales
Fuentes oficiales
Configuración revisada 2026-10-13 · Basado en documentación pública; no se ha instalado y probado cada proyecto.
Formas de usarlo
- Generar y editar pantallas con texto o imágenes
- Gestionar estilos coherentes
- Convertir diseños a componentes con habilidades elegidas
Proyecto y documentación oficiales
Descripción del proyecto (traducida)
Biblioteca para Stitch MCP que sigue Agent Skills abierto y admite Antigravity, Gemini CLI, Claude Code y Cursor
Plugins para tareas similares
Primero coincide el uso principal; después, tareas comunes y estrellas. La configuración puede variar.
- Anthropic Skills · Frontend Design — Planifique, cree y critique una interfaz con opciones deliberadas de diseño, tipografía e interacción.
- Taste Skill — Déle a un sitio web público una dirección visual deliberada y luego verifique el resultado en un navegador.
- Text to CAD — Describe formas y medidas para crear piezas 3D editables con IA.