avoid-ai-design

Desarrollo

Descripción

Pides a Claude, Cursor o Codex una landing y te llega la misma página de siempre: degradado de morado a azul, Inter en cada palabra, un hero centrado y tres tarjetas redondeadas con icono. Si les pides que se vea menos IA, aparece el siguiente cliché: cream con acento terracota, negro con un verde ácido, o etiquetas en versalitas y numeración 01 / 02 / 03.

avoid-ai-design audita el frontend que acaba de generar el modelo, señala los patrones que lo delatan y reescribe la interfaz alrededor de una dirección sacada de tu producto, no de una lista de looks. En trabajo multipágina deja esa dirección en un DESIGN.md para que la segunda página no se desvíe de la primera.

Qué pilla el catálogo

  • 67 señales de diseño IA, cada una con criterio de detección, por qué se lee como IA y un arreglo para HTML/CSS y para React + Tailwind + shadcn.
  • Degradados índigo, paletas shadcn sin tocar, Inter/Geist/Space Grotesk por defecto, cristal, fade-up en cada sección y CTAs genéricos.
  • Los defaults de segundo orden: cream + terracota, negro con acento ácido, chrome de plantilla y el fallback esmeralda.

Incluye un escáner sin dependencias (Node 18+) que localiza las señales en el código sin llamar a ningún modelo. Es la contraparte de diseño de avoid-ai-writing: la misma idea, aplicada a la UI. Encaja con Claude Code, Cursor, Codex y Copilot.

Tecnologías y temas

  • Claude Code

    Skill lista para Claude Code; también encaja con Cursor, Codex y Copilot.

  • DESIGN.md

    Fija una dirección de diseño entre páginas para que no haya deriva visual.

  • Diseño frontend

    Caza clichés de UI generada por modelos y propone un rediseño con dirección de producto.

  • Linter de UI

    Escáner Node sin dependencias que puntúa señales P0, P1 y P2 en tu código.

  • Tailwind y shadcn

    Trae arreglos concretos para HTML/CSS y para React + Tailwind + shadcn.