stitch-design-taste
Generar Sistemas de Diseño de UI Premium para Google Stitch
Los agentes de IA frecuentemente generan interfaces genéricas con aspecto artificial. Esta habilidad impone estándares de diseño estrictos para producir especificaciones de UI premium, anti-genéricas, que evitan errores comunes como la fuente Inter, brillos neón y secciones hero centradas.
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-design-taste". Generate a design spec for a fintech dashboard
Resultado esperado:
Un archivo DESIGN.md con: fondo Canvas White (#F9FAFB), texto Charcoal Ink (#18181B), acento Emerald Signal (#10B981) para métricas de crecimiento, fuente Geist en peso 700-900 para titulares, monospace para todos los números, especificaciones de animación de física de muelles (rigidez: 100, amortiguación: 20), y prohibiciones explícitas de fuente Inter, brillos neón y datos genéricos de placeholder.
Usando "stitch-design-taste". Create a design spec for an editorial magazine site
Resultado esperado:
Un archivo DESIGN.md con: alta creatividad (9), alta varianza (8), diseños hero asimétricos con tipografía de imagen integrada, serif modernos distintivos (Fraunces, Instrument Serif) para display, ancho máximo estricto de 65ch para texto de cuerpo, y orquestación de movimiento con revelaciones escalonadas.
Auditoría de seguridad
SeguroStatic analysis flagged 205 potential issues, all evaluated as false positives. The skill contains only markdown documentation files describing design system specifications. No executable code, shell commands, or cryptographic operations exist. All detected patterns are design terminology being misinterpreted by the scanner (e.g., CSS hash notation, font weight values, design system references). Safe for publication.
Puntuación de calidad
Lo que puedes crear
Crear Landing Pages Premium
Generar especificaciones de diseño para landing pages de alta gama que evitan estética genérica de IA. Ideal para startups que buscan presencia web profesional y distintiva.
Construir Sistemas de Diseño Consistente
Establecer lenguaje visual consistente en una suite de productos mediante la documentación de tipografía, color, espaciado y comportamiento de componentes en una única fuente de verdad.
Prototipar con Restricciones de Diseño
Usar la lista de anti-patrones como salvaguardas al prototipar rápidamente. Las prohibiciones explícitas previenen errores comunes de diseño antes de que ocurran.
Prueba estos prompts
Use the stitch-design-taste skill to generate a DESIGN.md for a [describe your project type, e.g., 'SaaS dashboard'] with a [creativity level 1-10] creativity setting and [density level 1-10] density.
Use the stitch-design-taste skill to create a DESIGN.md for [describe your project]. The vibe is [describe vibe, e.g., 'editorial magazine with bold typography']. Set variance to 8 and motion to 6.
Use the stitch-design-taste skill to generate a DESIGN.md for a data-heavy dashboard. Set density to 9, variance to 7, and enable monospace for all numerical values. Include perpetual animations for status indicators.
Use the stitch-design-taste skill to create a DESIGN.md for a minimalist portfolio. Set creativity to 3, density to 2, variance to 2. Use Electric Blue as the single accent. No serif fonts.
Mejores prácticas
- Comienza con la descripción de la atmósfera — entiende el vibe antes de detallar los tokens para asegurar un lenguaje de diseño cohesivo
- Elige exactamente un color de acento y mantenlo en toda la especificación — múltiples acentos diluyen la sensación premium
- Incluye anti-patrones explícitos — la lista de prohibidos es lo que hace que la salida sea no-genérica y distintiva
Evitar
- Usar fuente Inter — crea interfaces genéricas con aspecto de IA; usa Geist, Satoshi, Cabinet Grotesk o Outfit en su lugar
- Agregar efectos de gradiente púrpura o neón — esto grita 'generado por IA' y está estrictamente prohibido en contextos premium
- Diseños hero centrados — estos son genéricos y prohibidos; usa estructuras de pantalla dividida asimétrica o alineadas a la izquierda en su lugar