¿Qué hace design-ref?
Referencia: $ARGUMENTS
1. Capturar la referencia
URL: tomar captura de pantalla con el toolkit compartido a 1440 y 375, luego leer las hojas:
node ${CLAUDE_SKILL_DIR}/../ui-audit/scripts/audit.mjs <url> --widths 375,1440 --no-axe --out /tmp/design-ref/<host>
Extraer los estilos computados con --inject, o un script CDP único que importe ${CLAUDE_SKILL_DIR}/../ui-audit/scripts/cdp.mjs (launch() → navigate() → evaluate()). Obtener getComputedStyle de body, h1–h3, p, a, button, el CTA principal, una tarjeta, una ceja/kicker, un input y el footer. Recopilar font-family/size/weight/line-height/letter-spacing, color, background, border-radius, box-shadow, padding y gap.
HTML pegado / correo electrónico: guardarlo en /tmp/design-ref/ref.html, renderizar con render-html.mjs y leer los estilos en línea directamente.
2. Destilar el sistema
- Roles de color: canvas, surface, ink, muted ink, accent, accent-ink, border, success/warn. Dar valores hex y dónde aparece cada uno.
- Tipografía: familias (y el equivalente gratuito más cercano si una fuente tiene licencia), pasos de escala con px/altura-de-línea/peso/seguimiento, y mayúsculas (cejas en mayúsculas + seguimiento?).
- Espaciado: el ritmo realmente usado (ej. 8/16/24/40/64), padding de secciones y padding de tarjetas.
- Forma: radios por clase de elemento, recetas de sombra y peso del borde.
- Anatomía: botón (altura, padding, radio, peso, icono), tarjeta, ceja y composición del héroe.
- Tono: 3 adjetivos más lo que hace el copy (oraciones cortas? segunda persona? números?).
3. Mapear sobre el proyecto (no bifurcarlo)
Leer los tokens del proyecto (app/globals.css @theme/:root, tailwind.config o el archivo de tema) y sus componentes existentes. Producir:
| Rol | Referencia | Token del proyecto ahora | Propuesta |
|---|---|---|---|
| accent | #FF5A1F | --color-brand #… | mantener / reajustar valor / nuevo (justificar) |
Reglas:
- Reajustar tokens existentes antes de añadir nuevos. Cada token nuevo necesita una razón de una línea.
- Los elementos bloqueados por marca no se tocan: logotipo, el color de marca si el proyecto tiene uno, y fuentes ya licenciadas o en uso.
- Verificar contraste accent-sobre-canvas e ink-sobre-surface para cada propuesta (≥ 4.5:1 texto, ≥ 3:1 UI).
- Si el proyecto mantiene un archivo Figma en sincronía con el código, los cambios de tokens van a Figma en la misma tarea.
Criterios de salida
- Tabla de tokens completa, con cada fila marcada como mantener, reajustar o nuevo.
- Contraste verificado para los pares propuestos.
- Sin cambios de código aún. Eso es
design-pass, después de que el usuario acepte la tabla. - Resumen de una oración para el usuario con la tabla debajo.