El vocabulario que no sabías que necesitabas. 1 habilidad, 18 comandos y anti-patrones seleccionados para un diseño frontend impecable.
Inicio rápido: Visita impeccable.style para descargar los paquetes listos para usar.
Anthropic creó frontend-design, una habilidad que guía a Claude hacia un mejor diseño de interfaz de usuario (UI). Impeccable se basa en esa base con una experiencia más profunda y un mayor control.
Todos los LLMs aprendieron de las mismas plantillas genéricas. Sin orientación, obtienes los mismos errores predecibles: la fuente Inter, degradados de color púrpura, tarjetas anidadas dentro de tarjetas y texto gris sobre fondos de color.
Impeccable combate ese sesgo con:
- Una habilidad ampliada con 7 archivos de referencia de dominios específicos (ver fuente)
- 18 comandos de dirección para auditar, revisar, pulir, destilar, animar y más
- Anti-patrones seleccionados que le dicen explícitamente a la IA qué NO hacer
Una habilidad de diseño integral con 7 referencias de dominios específicos (ver habilidad):
| Referencia | Cubre |
|---|---|
| typography | Sistemas tipográficos, emparejamiento de fuentes, escalas modulares, OpenType |
| color-and-contrast | OKLCH, neutros tintados, modo oscuro, accesibilidad |
| spatial-design | Sistemas de espaciado, cuadrículas, jerarquía visual |
| motion-design | Curvas de aceleración, escalonamiento, reducción de movimiento |
| interaction-design | Formularios, estados de foco, patrones de carga |
| responsive-design | Enfoque móvil-primero, diseño fluido, consultas de contenedor (container queries) |
| ux-writing | Etiquetas de botón, mensajes de error, estados vacíos |
| Comando | Qué hace |
|---|---|
/impeccable teach |
Configuración única: reúne el contexto de diseño, guárdalo en la configuración |
/impeccable craft |
Flujo completo de dar forma y luego construir con iteración visual |
/impeccable extract |
Extrae componentes y tokens reutilizables hacia el sistema de diseño |
/audit |
Ejecuta comprobaciones de calidad técnica (a11y, rendimiento, adaptabilidad) |
/critique |
Revisión de diseño de UX: jerarquía, claridad, resonancia emocional |
/polish |
Pase final, alineación del sistema de diseño y preparación para el lanzamiento |
/distill |
Reduce a lo esencial |
/clarify |
Mejora los textos de la interfaz (copy de UX) poco claros |
/optimize |
Mejoras de rendimiento |
/harden |
Manejo de errores, onboarding, i18n, casos extremos |
/animate |
Añade movimiento intencionado |
/colorize |
Introduce color estratégico |
/bolder |
Amplifica diseños aburridos |
/quieter |
Atenúa diseños demasiado llamativos |
/delight |
Añade momentos de alegría |
/adapt |
Adapta para diferentes dispositivos |
/typeset |
Corrige la elección de fuentes, jerarquía y tamaño |
/layout |
Corrige el diseño, espaciado y ritmo visual |
/overdrive |
Añade efectos técnicamente extraordinarios |
/audit - Ejecuta comprobaciones de calidad, obtiene un informe (sin ediciones)
/audit blog # Audita el hub de blog + las páginas de publicaciones
/audit dashboard # Comprueba los componentes del dashboard
/audit checkout flow # Se enfoca en la UX del checkout
Cuándo usarlo: Antes de realizar cambios, para entender qué necesita corregirse.
/critique - Revisión de diseño de UX
/critique landing page # Revisa la UX de la página de destino
/critique onboarding # Comprueba el flujo de onboarding
Cuándo usarlo: Cuando desees feedback de diseño, no soluciones técnicas.
/polish - Pase final antes de lanzar
/polish feature modal # Limpia el modal antes de lanzarlo
/polish settings page # Revisión final de la interfaz de configuración
Cuándo usarlo: Último paso antes de desplegar a producción.
Combinando comandos:
/audit /polish blog # Flujo completo: auditar → pulir
/critique /harden checkout # Revisión de UX + añadir manejo de errores
La habilidad incluye pautas explícitas sobre qué evitar:
- No uses fuentes sobreutilizadas (Arial, Inter, las predeterminadas del sistema)
- No uses texto gris sobre fondos de color
- No uses negro/gris puro (siempre tíñelos)
- No envuelvas todo en tarjetas ni anides tarjetas dentro de tarjetas
- No uses aceleración elástica o de rebote (se siente anticuada)
Visita impeccable.style para ver estudios de casos de antes/después de proyectos reales transformados con comandos de Impeccable.
Visita impeccable.style, descarga el archivo ZIP para tu herramienta y extráelo en tu proyecto.
Cursor:
cp -r dist/cursor/.cursor tu-proyecto/Nota: Las habilidades en Cursor requieren configuración:
- Cambia al canal Nightly en Cursor Settings → Beta
- Habilita Agent Skills en Cursor Settings → Rules
Claude Code:
# Específico del proyecto
cp -r dist/claude-code/.claude tu-proyecto/
# O global (se aplica a todos los proyectos)
cp -r dist/claude-code/.claude/* ~/.claude/OpenCode:
cp -r dist/opencode/.opencode tu-proyecto/Pi:
cp -r dist/pi/.pi tu-proyecto/Gemini CLI:
cp -r dist/gemini/.gemini tu-proyecto/Nota: Las habilidades del Gemini CLI requieren configuración:
- Instala la versión de vista previa:
npm i -g @google/gemini-cli@preview- Ejecuta
/settingsy habilita "Skills"- Ejecuta
/skills listpara verificar la instalación
Codex CLI:
cp -r dist/codex/.codex/* ~/.codex/Trae:
# Trae China (versión doméstica)
cp -r dist/trae/.trae-cn/skills/* ~/.trae-cn/skills/
# Trae Internacional
cp -r dist/trae/.trae/skills/* ~/.trae/skills/Nota: Trae tiene dos versiones con diferentes directorios de configuración:
- Trae China:
~/.trae-cn/skills/- Trae Internacional:
~/.trae/skills/Después de copiar, reinicia el IDE de Trae para activar las habilidades.
Rovo Dev:
# Específico del proyecto
cp -r dist/rovo-dev/.rovodev tu-proyecto/
# O global (se aplica a todos los proyectos)
cp -r dist/rovo-dev/.rovodev/skills/* ~/.rovodev/skills/Una vez instalado, usa los comandos en tu entorno de IA:
/audit # Encuentra problemas
/critique # Revisa la UX de diseño
/polish # Limpieza final
/distill # Elimina la complejidad
La mayoría de los comandos aceptan un argumento opcional para enfocarse en un área específica:
/audit header
/polish checkout-form
Nota: Codex CLI usa una sintaxis diferente: /prompts:audit, /prompts:polish, etc.
Impeccable incluye una interfaz de línea de comandos (CLI) independiente para detectar anti-patrones sin necesidad de un entorno de IA:
npx impeccable detect src/ # escanea un directorio
npx impeccable detect index.html # escanea un archivo HTML
npx impeccable detect https://example.com # escanea una URL (Puppeteer)
npx impeccable detect --fast --json . # solo expresiones regulares, salida JSONEl detector detecta 24 problemas clasificados entre "basura de IA" (bordes de acento lateral, degradados púrpuras, rebotes, brillos oscuros) y calidad general del diseño (longitud de línea, rellenos reducidos, objetivos táctiles pequeños, niveles de encabezado omitidos y más).
Consulta DEVELOP.md para conocer las pautas de contribución e instrucciones de compilación.
Apache 2.0. Ver LICENSE.
La habilidad impeccable se basa en la habilidad original de diseño frontend de Anthropic. Ver NOTICE.md para atribuciones.
Creado por ByChoke | Buy Me a Coffee (Basado en el trabajo original de Paul Bakaus)