stitch-ui-design
Crear diseños de interfaz de usuario con Google Stitch
Esta habilidad ayuda a los usuarios a elaborar indicaciones efectivas para la herramienta de diseño de interfaz de usuario con IA de Google Stitch. Proporciona mejores prácticas, ejemplos de indicaciones y técnicas avanzadas para generar interfaces profesionales para web y móviles.
Descargar el ZIP de la skill
Subir en Claude
Ve a Configuración → Capacidades → Skills → Subir skill
Activa y empieza a usar
Pruébalo
Usando "stitch-ui-design". How do I create a dashboard with Stitch?
Resultado esperado:
Para crear un panel de control con Google Stitch, sigue estos principios:
1. Sé específico: En lugar de 'Crear un panel de control', usa 'Panel de control de miembro con cuadrícula de módulos de cursos, barra de seguimiento de progreso y barra lateral de comunidad usando tema púrpura y diseño basado en tarjetas'
2. Define el estilo visual: Incluye esquemas de colores, estéticas de diseño
3. Lista los componentes: Especifica cada elemento de interfaz de usuario necesario
Ejemplo de indicación: 'Panel de control analítico con tarjetas de KPI, gráfico de líneas para tendencias, selector de rango de fechas y botón de exportar. Usa tema oscuro moderno con colores de acento para visualización de datos.'
Usando "stitch-ui-design". What should I include for mobile app prompts?
Resultado esperado:
Para aplicaciones móviles, especifica:
- Plataforma: iOS, Android o multiplataforma
- Dimensiones de pantalla y comportamiento responsivo
- Patrón de navegación (barra de pestañas, cajón, pila)
- Componentes nativos para la plataforma
- Tamaño y espaciado favorables para tocarse
Ejemplo: 'Pantalla de inicio de sesión de aplicación móvil (estilo iOS) con campos de correo electrónico/contraseña, botones de autenticación social (Google, Apple) y enlace de contraseña olvidada. Usa las directrices de interfaz humana de iOS con fuente SF Pro.'
Auditoría de seguridad
SeguroThis is a documentation-only skill containing markdown files with guidance for Google Stitch AI UI design tool. All static analyzer findings are false positives: backticks are markdown code formatting, not shell execution; cryptographic algorithm flags are documentation text misinterpreted by scanner. No executable code, network requests, or dangerous patterns present.
Problemas de riesgo alto (3)
Puntuación de calidad
Lo que puedes crear
Aprender los conceptos básicos de indicaciones en Stitch
Usuarios nuevos que desean entender cómo escribir indicaciones efectivas para Google Stitch para generar sus primeros diseños de interfaz de usuario
Mejorar la calidad de los resultados del diseño
Usuarios que han probado Stitch pero obtienen resultados genéricos y desean aprender técnicas específicas para obtener mejores diseños más personalizados
Crear flujos de aplicaciones de múltiples pantallas
Usuarios que construyen aplicaciones completas que necesitan orientación sobre indicaciones para múltiples pantallas conectadas y diseños responsivos
Prueba estos prompts
Create a [component type] with [specific features], using [color scheme] theme and [layout style] design.
Design an e-commerce product page with hero image gallery, add-to-cart button, reviews section, and related products carousel. Use clean minimalist design with [accent color] accents and generous white space.
Design a [screen name] screen for a [app type] mobile app. Include [list of features and components]. Use [design style] with [color palette]. Add [interactive states] and [navigation elements].
Create a [app type] app with: - [screen 1] with [features] - [screen 2] with [features] - [screen 3] with [features] Use [design system] style and ensure responsive behavior across mobile and desktop.
Mejores prácticas
- Siempre especifica detalles visuales: colores, tipografía, espaciado y estilo de diseño para evitar resultados genéricos de IA
- Lista cada pantalla explícitamente para aplicaciones de múltiples pantallas - Stitch confirmará antes de generar múltiples diseños
- Incluye requisitos funcionales: acciones de botones, validación de navegación, patrones de navegación y flujos de usuario
Evitar
- Usar indicaciones vagas como 'Crear una buena página de inicio de sesión' - resulta en diseños genéricos e inutilizables
- Olvidar especificar la plataforma (móvil vs escritorio) lo que lleva a expectativas de diseño incorrectas
- No definir el estilo visual, lo que hace que la IA genere estéticas aleatorias o inconsistentes