Communitygithub.com

UI

Esta habilidad construye, restila y revisa interfaces de usuario con buen gusto. Se utiliza al construir, restilar o mejorar una UI, página, pantalla o componente, incluyendo héroes, barras de navegación, encabezados, tarjetas, formularios o secciones; al trabajar con diseño, espaciado, tipografía, color, modo oscuro o tokens de diseño; al pulir estados de hover y foco; al trabajar con diseño responsive o móvil; al criticar, auditar o rediseñar una interfaz; al hacer una revisión de diseño; o al simplificar o hacer un diseño más audaz.

¿Qué es UI?

Esta habilidad consolida varios conjuntos de habilidades de diseño de interfaces de renombre en un único manual de referencia. Está diseñada para agentes de IA como Claude Code o Cursor que trabajan en el desarrollo de interfaces de usuario. La habilidad proporciona reglas detalladas, guías y referencias para todo el proceso de diseño de UI, desde la planificación inicial y la definición de dirección hasta la implementación final y el pulido. Cubre aspectos como diseño visual, tipografía, color, modo oscuro, animaciones de feedback, diseño responsive, y revisión de interfaces. La habilidad se basa en un 'direccionamiento' de cinco líneas (producto, carácter, mundo, momentos y firma) para dar carácter a la pantalla antes de escribir código, y ofrece una estructura de 'profundidad' que indica qué referencias leer para cada tarea específica. Es útil porque evita los resultados genéricos que los modelos de IA suelen producir, ayudando a crear interfaces únicas y con buen gusto.

Compatible con✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/molveau/skills/tree/main/skills/ui
Ver original→Ver todas las habilidades

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentación

¿Qué hace UI?

Una habilidad para construir y restilar interfaces. Une las habilidades de Jakub Krehel, make-interfaces-feel-better, Impeccable y las propias referencias de Molveau (incluyendo una guía de gusto destilada del trabajo de Emil Kowalski) en un solo manual.

Comenzar aquí

Lee references/playbook.md primero, comenzando con su bloque "Haz esto primero"; abre los archivos de proveedores y las referencias de Molveau solo para profundizar o para ejemplos prácticos. El manual es la doctrina unificada (antes de empezar, dar forma, diseño, tipo, color, modo oscuro, superficies, iconos, componentes y estados, movimiento de feedback, responsive y nativo, revisiones, refinamientos, rendimiento, primero el mockup, indicaciones) con etiquetas de fuente y las decisiones tomadas cuando las fuentes discrepan. La tabla siguiente es el índice de profundidad.

Puerta de dirección

Haz esto antes de cualquier código para una nueva página, pantalla o restilo, incluso cuando la solicitud sea de una línea. El resto de esta habilidad elimina errores; no da carácter a una pantalla. Si se omite, el resultado es la página mediana que todo modelo produce: correcta en los detalles, pero sin dueño.

  1. Cinco líneas. Producto: qué hace, para quién. Carácter: dos o tres palabras concretas (tranquilo, exacto, un poco cálido), nunca limpio, moderno, elegante, minimalista o premium. Mundo: el lugar o material al que pertenece el producto; tiñe los neutros y establece el acento. Momentos: los uno o dos lugares que reciben color y detalle ricos. Firma: un pequeño detalle que solo este producto tiene, usado de forma consistente. Un momento se dibuja con cuidado, no solo se limpia: un gráfico redibujado para lo que debe decir (líneas suaves, una comparación reflejada, una escala real), o el propio objeto del producto renderizado con peso y luz.
  2. Inventario, luego la idea. Enumera de 8 a 12 cosas que ningún competidor comparte (nombre, calle, números en el resumen, materiales, herramientas, rituales, documentos que el oficio imprime). Escribe: "En esta pantalla, [un elemento] se convierte en [el dispositivo]". Ese dispositivo es el momento.
  3. Rechaza los valores predeterminados de segundo orden a menos que la marca ya los posea. Son lo que un modelo alcanza una vez que las pistas obvias están prohibidas:
    • un fondo crema, piedra o blanco cálido con un acento naranja quemado, terracota, salvia o bosque, con o sin un titular serif (el aspecto de "papel y tinta" es el nuevo valor predeterminado, no una dirección);
    • Fraunces, Instrument Serif, Playfair o Georgia como tipografía de titular por reflejo; system-ui como la única tipografía;
    • Inter o Geist sobre blanco con un acento índigo o azul;
    • héroe, tres características, testimonios, llamada a la acción, en ese orden, sin argumento; en una pantalla de aplicación, cuatro tarjetas de estadísticas iguales sobre un gráfico de barras;
    • una ceja centrada, un titular y dos botones como toda la primera pantalla.
  4. Prueba de intercambio. Reemplaza el nombre y el oficio por los de un competidor. Si la pantalla sigue funcionando, cambia la propuesta, el momento y la firma, y prueba de nuevo.
  5. Muestra y espera. Muestra las cinco líneas y la idea, y espera al propietario. Si no puedes preguntar (el usuario dijo que lo construyas, o trabajas sin una persona), escríbelas como un comentario al principio del archivo principal y construye exactamente eso.

Profundidad: manual anti-slop §2 (dirección) y §12 (pantallas de aplicación); la habilidad design-inspiration-index para referencias reales.

Siempre activo

  1. Primero el proyecto. Sus tokens, componentes, DESIGN.md y pantallas hermanas deciden antes que cualquier valor predeterminado aquí.
  2. Una autoridad de diseño a la vez. Termina una pasada antes de superponer otra.
  3. Un punto focal y una acción principal por pantalla, cada estado diseñado (manual §3, §9).
  4. Mockup antes de la implementación para pantallas nuevas o restiladas cuando el proyecto trabaja primero con mockups, el valor predeterminado de Molveau (references/mockup-first.md); de lo contrario, el propio proceso de revisión del proyecto.
  5. Antes de dar por terminada la UI: la habilidad anti-slop y su detector, luego verificación de tipos, lint y pruebas.

Vecinas: la habilidad anti-slop posee las marcas de código generado por vibraciones y las pasadas de des-AI; motion posee la animación más allá del feedback de UI; ux posee el texto, formularios, foco, objetivos, profundidad de accesibilidad, errores, casos límite y onboarding. Profundidad de revisión: design-grill es la auditoría profunda (siete lentes, informe clasificado), las filas de crítica a continuación son la pasada única más ligera, y anti-slop es la pasada de aspecto-AI.

Qué leer para cada tarea

Todas las rutas son relativas a esta carpeta de habilidad.

TareaLeer
Las reglas unificadas, valores y decisiones de conflictoreferences/playbook.md
Pantalla nueva o restilada que necesita feedback (no un ajuste pequeño)references/mockup-first.md
Valores predeterminados de gusto cuando un proyecto aún no tiene tokensreferences/taste.md
Diseño, agrupación, alineación, espaciadoreferences/vendor/jakub/better-layout.md, luego references/vendor/impeccable/layout.md
Tipografía: fuentes, escala, longitud de línea, OpenTypereferences/vendor/jakub/better-typography.md y references/vendor/impeccable/typeset.md
Color: paleta, contraste, modo oscuro, tokensreferences/vendor/jakub/better-colors.md, más references/vendor/impeccable/colorize.md para añadir color
Pulido final: radios, sombras, alineación óptica, estados de iconoreferences/vendor/feel/make-interfaces-feel-better.md y references/vendor/impeccable/polish.md; references/vendor/jakub/better-ui.md para valores exactos
Revisión clasificada de pantalla completa (la accesibilidad y el texto están en la habilidad ux)references/vendor/jakub/better-interface.md, el paraguas
Revisar una rama o PR para regresiones de UIreferences/vendor/jakub/interface-review.md
Auditoría de diseño de lentes múltiples completa de un archivo, componente o ruta (pesado: varios agentes)la habilidad design-grill
Referencias visuales o inspiración para un héroe, CTA, navbar, animación, iconosla habilidad design-inspiration-index
Crítica o revisión de diseño de una pantallareferences/vendor/impeccable/critique.md (heurísticas, carga cognitiva, personas); desmontaje rápido: prompt 4 en references/prompts.md
Auditoría: rendimiento, tematización, responsive (para accesibilidad, usa la habilidad ux)references/vendor/impeccable/audit.md, references/vendor/impeccable/optimize.md
Demasiado recargado o pesadoreferences/vendor/impeccable/distill.md, references/vendor/impeccable/quieter.md
Demasiado insípido o tímidoreferences/vendor/impeccable/bolder.md, references/vendor/impeccable/colorize.md, references/vendor/impeccable/delight.md
Efectos técnicamente ambiciososreferences/vendor/impeccable/overdrive.md
Planificar un nuevo diseño desde ceroreferences/vendor/impeccable/shape.md; references/vendor/impeccable/new-work.md y los archivos de modo (references/vendor/impeccable/mode-operate.md, mode-persuade.md, mode-read.md) para una nueva identidad visual
Profundidad de aplicación, dashboard y configuraciónreferences/vendor/impeccable/operate.md
Pantallas pequeñas, táctil, otras plataformasreferences/vendor/impeccable/adapt.md; nativo: references/vendor/impeccable/ios.md, references/vendor/impeccable/android.md, references/vendor/impeccable/adapt.native.md
Escribir o actualizar DESIGN.md, extraer tokens y componentesreferences/vendor/impeccable/document.md, references/vendor/impeccable/extract.md
Recetas de movimiento de feedback (presionar, entrar y salir, intercambios de iconos, cambio de tema)references/vendor/jakub/better-ui/animations.md, references/vendor/jakub/better-ui/enter-exit.md, references/vendor/jakub/better-ui/icon-transitions.md; los números de Emil en references/animation.md (flujo de trabajo completo: la habilidad motion). Algunas recetas allí duran más (una hoja de ~500ms, los 400ms de Sonner): en UI el manual limita las superposiciones a 300ms (§10)
Lista de verificación de componentes interactivos (toasts, cajones, menús)references/components.md
Sitio de marketing público que debe ser citado por LLMsreferences/discoverability.md
Indicaciones que fuerzan el gusto en la UI generada por IAreferences/prompts.md
La filosofía detrás de las reglasreferences/quotes.md
La UI se ve genérica o generada por vibracionesla habilidad anti-slop
Texto, errores, estados vacíos, profundidad de accesibilidadla habilidad ux

El punto de entrada de Impeccable references/vendor/impeccable/impeccable.md describe un conjunto de comandos completo con sus propios archivos de configuración y scripts; léelo cuando quieras ese flujo de trabajo completo en lugar de una pasada única. Sus comandos clarify, harden y onboard están incluidos una vez, en la habilidad ux.

Notas sobre los archivos de proveedores

Los archivos en references/vendor/ se copian sin modificar de sus autores, por lo que los enlaces relativos y los nombres de comandos dentro de ellos (los comandos de barra de Impeccable, scripts/impeccable, modo en vivo, compuertas de componentes) pueden no existir en esta instalación. Toma la guía; omite lo que apunte a herramientas faltantes. Cuando un archivo de proveedor solicite capturas de pantalla del navegador, subagentes o pasadas visuales automatizadas, sigue la propia regla del proyecto (conflicto del manual 14). Las licencias y fuentes exactas están en cada carpeta de proveedor (LICENSE, SOURCE.md).

Créditos y licencias

  • references/vendor/jakub/ son las habilidades de Jakub Krehel (https://github.com/jakubkrehel/skills), MIT.
  • references/vendor/feel/ es make-interfaces-feel-better de Jakub Krehel (https://github.com/jakubkrehel/make-interfaces-feel-better), MIT.
  • references/vendor/impeccable/ es Impeccable de Paul Bakaus (https://github.com/pbakaus/impeccable), Apache-2.0, con su LICENSE y NOTICE conservados. Archivos reubicados, SKILL.md renombrado, scripts/ no incluido; consulta su SOURCE.md. El manual parafrasea y condensa la guía de Impeccable; esa adaptación es un cambio con respecto al original.
  • La guía de gusto (references/taste.md, animation.md, components.md, quotes.md) está destilada del trabajo de diseño-ingeniería de Emil Kowalski (https://emilkowal.ski), etiquetado [Molveau/Emil] en el manual. Las palabras y la estructura son de Molveau (MIT); las ideas y los números son suyos. references/quotes.md atribuye cada cita. references/animation.md también se basa en devouringdetails.com de Rauno Freiberg.
  • references/discoverability.md está destilado de la investigación de Suganthan Mohanadasan (suganthan.com).
  • references/playbook.md, references/prompts.md y references/mockup-first.md son propios de Molveau (MIT), acreditando cada fuente por etiqueta.

Individual skills in this repo

This repo contains 3 individual skills — each has its own dedicated page.

molveau/anti-slop

Removes the AI-generated look from a UI and gives it a direction of its own. Use when a screen, landing page or dashboard looks vibe-coded or generic (purple gradients, gradient text, emoji labels, glow, eyebrow pills, Inter everywhere, buzzword copy, uneven spacing), when the user asks to unslop, de-AI or make a page stop looking generated, and before shipping any UI to check the 20 tells. Includes a zero-dependency detector script and a ratchet-test recipe.

molveau/design-inspiration-index

Routing index for design inspiration. Use when you need visual references or ideas for a UI (a hero, landing page, SaaS page, navbar, CTA, motion or micro-interaction, brand or rebrand, component, icon) and want to know which curated gallery to pull from. Maps a need to the best source among galleries, component registries and optional MCP servers. Use it before hunting blindly for inspiration.

molveau/vitrine

Playbook for a vitrine, a business showcase / brochure site for a local business. Use at the start of a small business website, brochure site, landing page for a local business, service-business site, or when adding pricing, booking, city pages, local SEO, bilingual FR/EN or a Québec privacy setup to one. Says what such a site needs, in which order to apply the ui, ux, anti-slop, motion, french-typography and loi-25-website skills, and gives a done checklist.

Skills relacionados

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community