impeccable
Construye interfaces frontend pulidas con IA
Las interfaces generadas por IA suelen parecer genéricas y estandarizadas. Impeccable guía a la IA a través de decisiones de diseño expertas, produciendo código frontend distintivo y de calidad profesional.
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 "impeccable". Crear una sección hero para el portafolio de una agencia creativa con tipografía audaz y diseño asimétrico
Resultado esperado:
Una sección hero responsiva con tipografía display fluida usando clamp(), un diseño de cuadrícula asimétrico con espaciado variado, una combinación de fuentes distintiva elegida mediante el procedimiento de selección de fuentes, y una jerarquía visual clara que pasa la prueba de entrecerrar los ojos.
Usando "impeccable". Extraer tokens reutilizables de una página con valores de color inconsistentes
Resultado esperado:
Un sistema cohesivo de tokens de diseño con colores primitivos basados en OKLCH, escalas neutras con tinte, mapeos de color semántico para colores primarios y de estado, y documentación sobre cuándo usar cada token.
Usando "impeccable". Diseñar un formulario de contacto accesible con validación adecuada
Resultado esperado:
Un formulario con etiquetas visibles, validación en blur, mensajes de error descriptivos con aria-describedby, anillos de foco adecuados usando focus-visible, y áreas de toque con tamaño apropiado para usuarios móviles.
Auditoría de seguridad
Riesgo bajoAll 329 static findings are false positives. The scanner misinterpreted Markdown code fences as shell commands, design terminology as cryptographic patterns, and documentation URLs as network risks. The only real operational risk is a post-update cleanup script that removes deprecated skill files from the filesystem, which is benign and documented to the user before execution. No malicious intent, data exfiltration, or dangerous code execution detected.
Problemas de riesgo bajo (1)
Factores de riesgo
⚙️ Comandos externos (1)
📁 Acceso al sistema de archivos (3)
Puntuación de calidad
Lo que puedes crear
Rediseño del sitio de marketing
Un fundador de una startup quiere que su landing page destaque entre el mar de plantillas SaaS idénticas. Impeccable guía a la IA a través de una dirección estética audaz con elecciones de tipografía y colores distintivas.
Inicialización de un sistema de diseño
Un desarrollador necesita extraer tokens de diseño consistentes, componentes y patrones de una base de código existente hacia un sistema de diseño reutilizable. El modo extract identifica patrones reutilizables y los formaliza.
Diseño accesible de formularios e interacción
Un equipo de producto necesita formularios bien diseñados, estados de foco, patrones de carga y navegación por teclado. Impeccable proporciona material de referencia sobre cumplimiento WCAG, la Popover API y el diseño de anillos de foco.
Prueba estos prompts
Ejecuta /impeccable teach para recopilar el contexto de diseño de mi proyecto. Escanea primero la base de código y luego hazme las preguntas que aún necesites responder.
Ejecuta /impeccable craft una página de precios para un producto SaaS. La audiencia objetivo son propietarios de pequeñas empresas que valoran la claridad y la rapidez. El tono de la marca es confiado, práctico y directo.
Ejecuta /impeccable extract los tokens de diseño compartidos y los componentes reutilizables de mi biblioteca de componentes existente. Céntrate en colores, espaciado, tipografía y variantes de botones.
Ejecuta /impeccable craft un panel de control en modo oscuro para una herramienta de observabilidad utilizada por SREs. La interfaz debe ser densa en información pero legible, con una paleta de colores apagada y una fuerte jerarquía de visualización de datos.
Mejores prácticas
- Recopila siempre el contexto de diseño del usuario antes de generar cualquier trabajo de diseño. Comprueba las instrucciones existentes, luego .impeccable.md, y finalmente ejecuta el flujo teach.
- Comprométete con una dirección estética audaz en lugar de retroceder hacia valores predeterminados seguros y genéricos. Tanto el maximalismo como el minimalismo funcionan cuando se ejecutan con intencionalidad.
- Ejecuta la prueba de IA slop en cada resultado: ¿alguien reconocería inmediatamente esto como generado por IA? Si la respuesta es sí, el diseño necesita opciones creativas más distintivas.
Evitar
- Usar fuentes reflejas como Inter, Fraunces, Space Grotesk y Cormorant que crean una monocultura en todos los proyectos generados por IA.
- Usar como predeterminado cyan sobre fondo oscuro, gradientes de púrpura a azul, o acentos brillantes sobre fondos oscuros, que son las señales de diseño IA más reconocibles.
- Usar franjas de acento con border-left en tarjetas, texto con gradiente y glassmorphism como decoración, que están explícitamente prohibidos como patrones de IA slop.
Preguntas frecuentes
¿Cuándo debo invocar Impeccable?
¿Cuál es la diferencia entre los modos craft, teach y extract?
¿Impeccable funciona con React, Vue u otros frameworks?
¿Cómo evita Impeccable diseños genéricos con aspecto de IA?
¿Puede Impeccable ayudar con el cumplimiento de accesibilidad?
¿Qué sucede cuando actualizo a una nueva versión de Impeccable?
Detalles del desarrollador
Autor
pbakausLicencia
Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md for attribution.
Ref.
main
Estructura de archivos