Gridgeist

Entwirft produktnative Web-UIs, die generische KI-SaaS-Ästhetiken vermeiden

von ohmiler · ohmiler/gridgeist

Getestet · Funktioniert ★ 8.8/10

Gridgeist — Entwirft produktnative Web-UIs, die generische KI-SaaS-Ästhetiken vermeiden

Was es kann

Design-Intelligenz zum Erstellen, Neugestalten oder Überprüfen von Weboberflächen mit produktspezifischer Struktur, klarer Hierarchie und zugänglicher Interaktion. Wird ausgelöst bei UI-Arbeiten, die eine Abhilfe von generischen KI-generierten SaaS-Ästhetiken über React, Next.js, Tailwind und HTML/CSS benötigen. Bietet eine Designsprachenreferenz und eine 9-teilige Überprüfungscheckliste, die Interaktionszustände, responsive Breiten und Barrierefreiheit abdeckt.

Testbericht

Ein bewusst generischer Hero (zentrierter Text, Gradienten-Unschärfe-Blob, drei identische schattierte Karten) wurde überprüft: Die Überprüfungscheckliste deckte lokalisierte, priorisierte Befunde auf, die eine Baseline-Überprüfung übersehen hatte – austauschbarer SaaS-Text, kein dominantes Element unter drei gleichwertigen Karten, fehlender Fokus/Kontrast/Alt-Text und keine leeren/Fehlerzustände – plus eine Ersatzthese. Die Designsprachenreferenz erzwingt eine strukturelle+expressive+Motiv-These, anstatt eine Hausästhetik zu importieren. Keine Skripte, nur Markdown und Assets, sodass es sauber in ein leeres HOME installiert wird; Design-'Schönheit' wird nicht pixelgenau gemessen, aber die Überprüfungsstrenge und die Abdeckung von Zuständen/Barrierefreiheit sind ein konkretes Delta gegenüber einer unstrukturierten Kritik.

Getestet am: 2026-07-18 · Claude Code 2.x (agent harness)

Installation

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

Befehle & Beispiel-Prompts

  • /gridgeistEntwirft produktnative Web-UIs, die generische KI-SaaS-Ästhetiken vermeiden

Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):

  • 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.