Gridgeist

Diseña UIs web nativas de producto que escapan a la estética genérica de SaaS de IA

Por ohmiler · ohmiler/gridgeist

Probado · Funciona ★ 8.8/10

Gridgeist — Diseña UIs web nativas de producto que escapan a la estética genérica de SaaS de IA

Qué hace

Inteligencia de diseño para crear, rediseñar o revisar interfaces web con estructura específica del producto, jerarquía clara e interacción accesible. Se activa en trabajos de UI que necesitan alivio de la estética genérica de SaaS generada por IA en React, Next.js, Tailwind y HTML/CSS. Proporciona una referencia de lenguaje de diseño y una lista de verificación de revisión de 9 secciones que cubre estados de interacción, anchos responsivos y accesibilidad.

Informe de la prueba

Se revisó un héroe deliberadamente genérico (texto centrado, mancha de desenfoque de gradiente, tres tarjetas sombreadas idénticas): su lista de verificación de revisión encontró hallazgos localizados y priorizados que un pase de línea base omitió - texto SaaS intercambiable, ningún elemento dominante entre tres tarjetas iguales, falta de enfoque/contraste/alt y sin estados vacíos/de error - además de una tesis de reemplazo. La referencia del lenguaje de diseño fuerza una tesis estructural+expresiva+motivo en lugar de importar una estética de la casa. Sin scripts, solo markdown y activos, por lo que se instala limpiamente en un HOME vacío; la 'belleza' del diseño no se mide en píxeles, pero el rigor de la revisión y la cobertura de estado/accesibilidad son una diferencia concreta sobre una crítica no estructurada.

Probado el: 2026-07-18 · Claude Code 2.x (agent harness)

Instalación

git clone https://github.com/ohmiler/gridgeist
mkdir -p ~/.claude/skills
cd gridgeist && cp -r skills/gridgeist ~/.claude/skills/gridgeist

Comandos y prompts de ejemplo

  • /gridgeistDiseña UIs web nativas de producto que escapan a la estética genérica de SaaS de IA

Los skills se activan con peticiones en lenguaje natural, sin comandos que memorizar. Tras instalarlo, prompts como estos lo activan (en inglés):

  • Redesign this landing hero so it doesn't look like generic AI slop.
  • Review this React component's UI for hierarchy and accessibility issues.
  • Redesign my dashboard's layout so the cards aren't all identical.