Esta es la lista completa del carrusel SKILLS: las 10 skills y estándares que más ayudan a un agente de código a dejar de entregar diseño con cara de IA. Juntas suman más de 740 mil estrellas en GitHub, y tres vienen directo de Anthropic, Vercel y Google. Casi todas se instalan con un comando y funcionan en Claude Code, Codex y Cursor.
Antes de empezar
- Un agente de código: Claude Code, Codex o Cursor.
- Node.js 18 o más reciente, para
npx. - Ejecuta los comandos en la carpeta del proyecto. El instalador
skillspregunta para qué agentes instalar;-a claude-code -a codex -a cursorse salta la pregunta y-ginstala para todos los proyectos. - No necesitas las 10. Empieza con una de dirección visual y una de revisión.
UI/UX Pro Max · 130 mil estrellas
Un motor de diseño completo dentro de tu agente. Consulta una base local con 79 estilos, 192 paletas por tipo de producto, 74 combinaciones de fuentes y 119 reglas de UX antes de dibujar una pantalla.
npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-maxEn Claude Code también hay plugin: /plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill. Repositorio: nextlevelbuilder/ui-ux-pro-max-skill.
frontend-design · skill oficial de Anthropic
La skill que la propia Anthropic publica para que Claude evite lo visual genérico: elegir una dirección estética clara y ejecutarla con cuidado en lugar de repetir la plantilla de siempre. Está en el repositorio oficial de skills, con 178 mil estrellas.
npx skills add anthropics/skills --skill frontend-designRepositorio: anthropics/skills.
Awesome DESIGN.md · 118 mil estrellas
Una colección de 74 archivos DESIGN.md con el lenguaje visual de sitios reales (Apple, Airbnb, Claude y otros). No hay nada que instalar: copias el archivo de la marca que admiras en la raíz del proyecto y le pides al agente que siga ese estilo.
Primer uso. Descarga un archivo de getdesign.md o de la carpeta design-md/ del repositorio, guárdalo como DESIGN.md y pide: "Construye esta página siguiendo el DESIGN.md." Repositorio: VoltAgent/awesome-design-md.
Taste Skill · 90 mil estrellas
Le da buen gusto al agente. Deduce el lenguaje visual de tu pedido y ajusta tres controles del 1 al 10: audacia del layout, intensidad de animación y densidad de información.
npx skills add Leonxlnx/taste-skill --skill "design-taste-frontend"Cuidado con las copias de nombre parecido. El original es Leonxlnx/taste-skill.
Impeccable · 71 mil estrellas
De Paul Bakaus, creador de jQuery UI y ex Google. Una skill cuyos comandos se vuelven un vocabulario compartido con tu agente: critique, audit, polish, bolder, quieter, más un detector de los vicios más comunes de los sitios hechos por IA.
npx impeccable installDespués ejecuta /impeccable init dentro del agente (en Codex, $impeccable init). Paso a paso completo en nuestra guía de skills de diseño. Repositorio: pbakaus/impeccable.
Skills de Emil Kowalski · 41 mil estrellas
Emil es design engineer en Linear, pasó por el equipo de diseño de Vercel y creó Sonner y Vaul. El paquete enseña animación y microinteracciones: las curvas correctas, la duración adecuada y la revisión de animaciones que ya tienes.
npx skills@latest add emilkowalski/skillsRepositorio: emilkowalski/skills.
web-design-guidelines · skill oficial de Vercel
Revisa tu código de interfaz según las Web Interface Guidelines de Vercel: accesibilidad, foco, formularios, estados de carga. Pídele "revisa mi UI" y te devuelve la lista de lo que hay que corregir. Está en el repositorio oficial de skills de Vercel, con 31 mil estrellas.
npx skills add vercel-labs/agent-skills --skill web-design-guidelinesRepositorio: vercel-labs/agent-skills.
Hallmark · 29 mil estrellas
Una skill anti slop de Together AI. Para cada pedido elige una estructura y uno de 21 temas, y pasa la página por decenas de verificaciones antes de entregarla. También tiene audit, redesign y study, que extrae el estilo de un sitio que admiras.
npx skills add nutlope/hallmarkRepositorio: Nutlope/hallmark.
design.md · formato oficial de Google
La especificación de Google Labs para describirle una identidad visual al agente: tokens exactos (colores, fuentes, espaciados) al inicio del archivo y el porqué de cada decisión en texto. Es el formato detrás del punto 3. El paquete oficial valida tu archivo:
npx @google/design.md lint DESIGN.mdRepositorio: google-labs-code/design.md.
Huashu Design · 24 mil estrellas
Prototipos en HTML, diapositivas y animaciones directo desde tu agente. Antes de construir, propone tres direcciones visuales para que elijas. La documentación está en chino, pero la skill funciona con pedidos en cualquier idioma.
npx skills add alchaincyf/huashu-designRepositorio: alchaincyf/huashu-design.
Comentarios
¿Tienes alguna pregunta o algo que añadir? Participa en la conversación.
No necesitas una cuenta. Selecciona Entrar y elige un nombre para comentar.
Cargando la conversación…
Privacidad de los comentariosNormas para comentar