Sergio RamírezONLINEHablemos
/recursos/anti-diseno-iaSkill · Claude Code

Anti diseño de IA

Audita tu proyecto, detecta los 20 patrones de diseño que delatan que lo hizo una IA y elimina solo los que elijas, centralizando todo en tokens.

Instalar

Un comando. Copia la skill a tu carpeta personal; reinicia Claude Code después.

git clone --depth 1 https://github.com/theraven998/Recursos.git /tmp/recursos && mkdir -p ~/.claude/skills && cp -r /tmp/recursos/skills/anti-diseno-ia ~/.claude/skills/ && rm -rf /tmp/recursos
Ver en GitHub

Cómo se usa

  1. Abre Claude Code en la raíz de tu proyecto y escribe /anti-diseno-ia.
  2. Auditoría: te muestra una tabla con los 20 patrones: si aparecen, dónde y qué tan graves son.
  3. Elegir: respondes “todos”, “1,3,14”, “1-10” o “todos menos 5”. No toca nada antes.
  4. Corregir: aplica solo lo elegido, con tokens de color, tipografía, radios y espaciado. Sin commits ni deploy sin tu confirmación.
  5. Resumen: qué cambió, qué quedó y por qué, y qué capturas tomar antes y después.

En un proyecto nuevo sin código usa los 20 patrones como prohibiciones al generar la interfaz.

Los 20 patrones

  1. Degradado morado → azul (“AI purple”), a veces en el texto
  2. Inter, Roboto o fuente del sistema en todo, sin jerarquía ni identidad
  3. Hero centrado gigante + subtítulo vago + CTA + exactamente 3 cards idénticas
  4. Cards dentro de cards / todo es una card
  5. Glassmorphism / backdrop-blur decorativo sin función
  6. Glows, bordes neón y sombras de colores sobre dark mode
  7. Emoji como íconos (🚀 ✨ 🧠 ⚡) en un cuadrito redondeado
  8. Dashboard genérico con métricas falsas
  9. Mismo border-radius enorme, mismo padding y misma sombra en todo
  10. Dark mode obligatorio + una sola columna larga sin grid; terminal falso de tres bolitas
  11. Pastilla encima del título (“✨ Nuevo”, “Powered by AI”)
  12. Rejilla de puntos y orbes de color borrosos detrás del hero
  13. Copy de relleno: “Seamless”, “Revolutionize”, “Empower”, “sin esfuerzo”
  14. Testimonios inventados: avatar, 5 estrellas, “Sarah J., CEO”
  15. Logos de “empresas que confían” y cifras redondas (10K+, 99.9 %, 24/7)
  16. Precios en 3 planes con el del medio “Más popular”
  17. Animaciones en todo: fade-in al hacer scroll y hover que agranda cada card
  18. Botón con degradado y flechita (“Empieza gratis →”) + secundario “Saber más”
  19. Navbar flotante en forma de píldora con blur
  20. Cierre de plantilla: “¿Listo para empezar?” + FAQ en acordeón + footer con enlaces a #

El SKILL.md

Si prefieres no clonar, crea ~/.claude/skills/anti-diseno-ia/SKILL.md con este contenido. Los detalles de cada patrón están en la carpeta references/ del repo.

---
name: anti-diseno-ia
description: Audita un proyecto web o app, detecta los 20 patrones de diseño que delatan que lo hizo una IA (degradado morado, tipografía genérica, hero con 3 cards gemelas, cards dentro de cards, glassmorphism, glows neón, emojis como íconos, dashboard con métricas falsas, mismos radios y sombras, dark mode obligatorio, pastilla sobre el título, orbes y rejilla de fondo, copy de relleno, testimonios y logos inventados, 3 planes con «más popular», animaciones en todo, botón con degradado y flecha, navbar en píldora, cierre de plantilla) y elimina solo los que el usuario elija, centralizando en tokens. También sirve como lista de prohibiciones al generar una interfaz nueva. Úsala cuando pidan quitar el look de IA, "que no parezca hecho con IA", revisar o limpiar el diseño, o antes de entregar una UI generada.
---

# Anti diseño de IA

Quitas de un proyecto los patrones de diseño que delatan que lo hizo una IA y los reemplazas por
decisiones con intención. Corriges solo lo que la persona elija, nada más.

Detalle de cada patrón (cómo detectarlo y con qué reemplazarlo): [references/patrones.md](references/patrones.md).
Estructura de tokens de ejemplo: [references/tokens.md](references/tokens.md).
Ayuda opcional para la auditoría: `bash scripts/auditar.sh <carpeta>` (solo lee). Detecta el stack (web, React Native, Jetpack Compose, Android XML, SwiftUI, Flutter) y cuenta señales por patrón con los 3 archivos que más tienen. Son indicios: confirma leyendo esos archivos; la decisión es tuya.

## Reglas
- No toques nada antes de que la persona elija qué patrones quitar (Fase 2).
- No rompas funcionalidad: no cambies lógica, rutas, nombres de props ni textos legales. Si un cambio visual obliga a tocar lógica, pregunta.
- Centraliza en tokens (variables CSS, `@theme` de Tailwind, `tailwind.config`, tema del framework) en vez de parches sueltos. Si el proyecto ya tiene tokens, extiéndelos.
- No inventes marca: si faltan colores, fuentes o referencias, pregunta.
- Sin commits, deploy ni dependencias nuevas (fuentes, íconos) sin confirmación.
- Un patrón a la vez, verificando que el proyecto compile. Español claro, tablas cortas.

## Fase 1: auditoría (sin preguntar, sin modificar)
1. Detecta el stack (Next.js, Vite, Astro, React Native, Flutter, HTML plano, Tailwind, CSS modules…) y dónde viven estilos, tokens y componentes.
2. Revisa CSS/Tailwind, componentes, tokens, layouts y copy (titulares, subtítulos, botones, textos de ejemplo). Usa `grep` y lee las pantallas principales.
3. Muestra esta tabla con los 20 patrones, aunque sea con "No":

| # | Patrón | ¿Aparece? | Dónde (archivo:línea y ejemplo corto) | Gravedad |
|---|---|---|---|---|

Gravedad: **alta** (primera pantalla o todo el sitio), **media** (varias secciones), **baja** (puntual).

**Si no hay código** (proyecto nuevo): haz una sola pregunta de dirección de diseño y usa los 20 patrones como **prohibiciones** al generar la interfaz. Al terminar cada pantalla, revisa la lista y confirma que no cae en ninguno.

## Fase 2: elegir qué quitar
Pregunta en un solo mensaje:
1. **¿Qué patrones quieres eliminar?** Responde "todos", números como "1,3,14", rangos como "1-10" o "todos menos 5". Recomienda los de gravedad alta.
2. **Dirección de diseño**, solo lo que no puedas deducir del código:
   - Personalidad de marca o referencias (2 o 3 sitios, o palabras como "sobrio", "editorial", "técnico"). Si no sabe, propón 2 direcciones con paleta y fuentes concretas.
   - Color de marca (hex) o propón uno.
   - ¿Dark mode es necesario? (sí, no, o ambos según el sistema).

Espera la respuesta antes de seguir.

## Fase 3: corregir
1. Define o ajusta primero los **tokens**: colores, tipografía, radios, espaciado y elevación (ver [references/tokens.md](references/tokens.md)).
2. Aplica solo los patrones elegidos, uno por uno, con el "en su lugar" de [references/patrones.md](references/patrones.md), sin valores sueltos (`#8b5cf6`, `rounded-3xl`, `shadow-xl` repetidos).
3. Reescribe el copy genérico afectado con lo que el producto hace de verdad. Si no lo sabes, deja una propuesta marcada [POR CONFIRMAR].
4. Corre el build o linter y revisa que nada se rompió. Si hay servidor de desarrollo, indica la URL.
5. Pregunta antes de hacer commit o deploy.

## Resumen final
- **Qué cambió por patrón**: patrón → archivos → qué había → qué hay ahora.
- **Qué quedó y por qué**: patrones no elegidos o dejados a propósito, y los [POR CONFIRMAR].
- **Tokens nuevos**: dónde están y cómo usarlos.
- **Captura antes/después**: sugiere capturar 2 o 3 pantallas principales con el mismo tamaño y contenido.
- Pregunta si quiere hacer commit, con un mensaje simple.
← Todos los recursos