Designer Skill

Un skill transversal de staff-software-engineer, que se aplica cuando el trabajo construye algo nuevo con UI: una app, una página, una feature o una landing. Se apila sobre el área skill web o mobile. {repo}/.claude/conventions/web.md tiene prioridad sobre él, y un repo que ya tiene un design system conserva ese sistema.

Archivo del skill: skills/designer/SKILL.md. /sse:plan y /sse:dev lo leen para trabajo de UI nueva. Cuando no está claro si aplica, /sse:dev marca NOT FOUND - NEEDS REVIEW: designer-skill applicability y sigue sin él.

Por qué

Las UIs hechas por IA convergen en un mismo aspecto: todo centrado, azul por defecto, íconos con emoji, lorem ipsum, un solo tema, solo en inglés. El skill es un guide feedforward que sube la vara antes del primer componente.

Material Design 3

M3 es obligatorio y se usa como sistema de tokens. El color sale de los roles de M3 (primary, on-primary, *-container, surface, surface-container, on-surface-variant, outline, error) derivados de una sola semilla elegida a partir del contexto del producto. El CSS de los componentes nunca lleva hex crudo.

La tipografía sigue display, headline, title, body y label, cada una en L, M y S, mapeadas a clases una sola vez. La forma va de none 0, xs 4, s 8, m 12, l 16, xl 28 a full; las cards usan l, los botones full o m, las sheets xl. La elevación tiene 6 niveles de tintes de surface-container más una sombra sutil. Las capas de estado son hover 8%, focus 10% y pressed 10% del color on-*. El movimiento usa el easing enfatizado cubic-bezier(.2,0,0,1), 200 a 300ms el estándar y 100ms el chico.

Los inputs son text fields de M3, de 56px de alto con label flotante. Los encabezados de página tienen un eyebrow, un título display y un subtítulo.

Oscuro y claro

Se entregan los dos temas. Primero va la preferencia del sistema, después un toggle del usuario que escribe data-theme y localStorage. El oscuro usa una superficie tintada #1A1C1E, nunca negro puro.

:root { color-scheme: light dark; }
:root[data-theme="light"] { --surface:#FDFCFF; --on-surface:#1A1C1E; --primary:#0B57D0; }
:root[data-theme="dark"]  { --surface:#1A1C1E; --on-surface:#E3E2E6; --primary:#A8C7FA; }

Tipografía

La UI carga una fuente variable de verdad, y el stack del sistema nunca es el aspecto final. El cuerpo elige una entre Geist, Instrument Sans, General Sans, Manrope e Inter Tight; Inter queda como fallback. Display elige una entre Bricolage Grotesque, Clash Display, Sora, Fraunces y Space Grotesk con peso de 600 a 800. Los datos usan font-variant-numeric: tabular-nums.

Las fuentes cargan con font-display: swap, embebidas como data URI woff2 en base64 cuando la superficie corre offline o bajo una CSP estricta.

Color, profundidad, movimiento

La paleta es vívida: una semilla saturada, un segundo acento y gradientes en el hero, en los botones primarios y en los números focales.

Las superficies llevan sombras tintadas en capas y brillo de acento. Las vistas animan la entrada, la interacción, los cambios de valor y el mostrar y ocultar en ambas direcciones, nunca un salto con display:none. El movimiento queda bajo prefers-reduced-motion y anima solo transform y opacity.

Los callouts y textos de ayuda usan un contenedor tonal (secondary-container o surface-container-high) con un radio real y un ícono info. Una barra de acento de color en el borde izquierdo está prohibida.

Pulido nivel Behance

El agent busca trabajos actuales de Behance y Dribbble en el dominio del producto y dice qué tomó. Los layouts usan una grilla de 8pt, un punto focal por vista, textos realistas y estados vacío, de carga y de error diseñados. Una suma de partes recibe una visualización en CSS o SVG (barra apilada, donut, sparkline) en lugar de una lista de números.

Íconos

Los emojis están prohibidos en todas partes. La marca y las acciones primarias son SVGs originales en una grilla de 24px con trazo de 2px; el resto sale de un solo set (Material Symbols, Lucide, Phosphor), nunca mezclados. Los íconos usan currentColor y llevan aria-label o <title>.

Textos e i18n

El texto visible para el usuario no tiene rayas largas ni medias en ningún idioma. Cada string pasa por t('key') con claves semánticas como cart.empty.title. locales/{en,pt-BR,es}.json comparten un mismo conjunto de claves; la app detecta navigator.language, cae a en como respaldo, guarda la elección del usuario, define <html lang> y formatea con Intl.

Favicon

El favicon es una marca SVG sacada del contexto del producto (un monograma, un carrito para comercio) en la semilla de la marca, legible a 16px. El set es favicon.svg, favicon.ico de 32, apple-touch-icon.png de 180 y site.webmanifest con PNGs maskable de 192 y 512. El agent dice qué símbolo y qué semilla eligió y por qué.

Accesibilidad

El contraste es de al menos 4.5:1 para el texto del cuerpo y 3:1 para texto grande y UI (WCAG 2.2 AA) en los dos temas. Cada elemento interactivo tiene un anillo :focus-visible y un área táctil de 44x44px, y se alcanza con el teclado.

Qué se entrega

Una UI nueva se entrega con tokens claros y oscuros, un toggle de tema, una fuente cargada, los tres archivos de idioma con selector de idioma, íconos originales, el set de favicon, profundidad y movimiento, y estados vacío, de carga y de error diseñados.

Ver también

Agents, Guides, Pipeline y stages.

Referencias

Material Design 3, m3.material.io. WCAG 2.2. Inter, rsms.me/inter, y Roboto Flex en Google Fonts. Intl de ECMAScript. MDN sobre el Web App Manifest y los favicons.

Traducción manual de Designer Skill, la página original en inglés en la wiki.