Cuándo usarlo: Le pediste a Claude una landing page y obtuviste otro hero con gradiente púrpura y tarjetas redondeadas.
Flujo
-
Nombra la estética
Usa cc-frontend-skills. Construye una landing page para mi libro en el estilo de las portadas de libros de bolsillo Penguin de mediados de siglo — tipografía contenida, un color de acento, espacios en blanco generosos.✓ Copiado
→ Borrador de layout con elecciones de tipografía específicas, no un hero de shadcn
-
Itera sobre grilla y tipografía
Ajusta la escala tipográfica a una escala modular de 1.333; usa Charter o un serif similar.✓ Copiado
→ CSS concreto con fuentes nombradas, no 'sans-serif'
-
Elimina señales de IA
Audita las señales de diseño de IA: headers con emoji, shadow-lg excesivo, texto con degradado, diseños de tarjetas idénticas. Elimínalas.✓ Copiado
→ Diff eliminando los sospechosos usuales
Resultado: Una landing page que se vea como si alguien se hubiera preocupado.
Errores comunes
- Claude vuelve a los valores predeterminados después de algunas iteraciones — Fija la referencia de estilo en cada prompt de seguimiento — no confíes en que el contexto lo mantenga
Cuándo usarlo: Tu dashboard funciona pero se ve como todas las demás aplicaciones basadas en shadcn.
Flujo
-
Diagnostica
Usa cc-frontend-skills. Mira /app/dashboard. ¿Cuáles son las señales específicas de diseño de IA aquí?✓ Copiado
→ Lista concreta: 'todo tiene lg-rounded, sombras en cada tarjeta, CTA con degradado, la grilla siempre es de 3 columnas'
-
Propón una alternativa
Sugiere una dirección estética anclada en una referencia de diseño denso en datos (terminal de Bloomberg, panel de inspector de Figma).✓ Copiado
→ Referencias nombradas con aplicaciones concretas
-
Aplica de manera incremental
Comienza solo con tipografía — corrige la jerarquía sin tocar el layout.✓ Copiado
→ Diff cambiando solo font-size, letter-spacing, weight
Resultado: Un dashboard con opiniones.
Errores comunes
- Diseñar en exceso y romper accesibilidad — Mantén el contraste AA; la identidad visual no requiere gris claro sobre blanco
Cuándo usarlo: Tus botones, tarjetas e inputs fueron generados independientemente y ahora chocan.
Flujo
-
Inventario
Usa cc-frontend-skills. Revisa components/ e identifica inconsistencias en border-radius, shadow, spacing.✓ Copiado
→ Tabla de varianza por token
-
Propón tokens
Propón un conjunto consolidado de tokens de diseño con una escala de radio, una escala de sombra, una rampa de espaciado.✓ Copiado
→ Token JSON / config de Tailwind
Resultado: Un conjunto de tokens que hace que la librería se sienta como una sola cosa.