Communitygithub.com

plugin87/redesign

Ein vorhandenes Webprojekt oder eine App auf Premium-Niveau heben, ohne die Funktionalität zu beeinträchtigen – bestehendes Design prüfen, generische/KI-Typica erkennen und mit Geschmack und Systemregeln gezielt nachbessern. Nutzen Sie dies, wenn der Kunde eine bestehende UI/Codebasis verbessern, modernisieren, aufpolieren oder „besser machen“ möchte.

Was ist redesign?

Dieses Skill führt eine audit-gestützte Neugestaltung (Redesign) eines bestehenden Webprojekts oder einer App durch, ohne die Funktionalität zu beeinträchtigen. Es erfasst zunächst das vorhandene Framework, die Styling-Methode und die Token-Reality, erstellt eine Prioritätenliste mit Hilfe einer Checkliste (Banned Defaults) und eines Bewertungsrasters (Design-Review), wählt dann ein passendes archetypisches System aus (apply-aesthetic), wendet die Änderungen in einer festgelegten Reihenfolge an (Tokens → Typografie/Abstände → Komponentenzustände → Bewegung) und validiert abschließend durch erneute Design-Review, Barrierefreiheits-Audit, Konstrastprüfung und einen Smoke-Test aller vorher funktionierenden Abläufe sowie Dark-Mode- und Responsive-Stichproben. Besondere Bedeutung kommt der Single-Theme-Konsistenz zu: Alle Seiten müssen dasselbe gemeinsame Token-Theme verwenden, und das Tool prüft mit einem Skript (`lint_hardcodes.py`), dass keine Seite abweichende Werte einführt. Das Skill ist für Claude Code und ähnliche KI-Agenten konzipiert, die Codebasis-Updates durchführen, und stellt sicher, dass keine funktionierenden Funktionen geopfert werden und keine Platzhalter ausgeliefert werden.

Funktioniert mit✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/plugin87/ux-ui-agent-skills/tree/main/.claude/skills/redesign
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Skill: Redesign & Audit

Audit-zentrierte Neugestaltung, die das Verhalten bewahrt.

Schritte

  1. Lies workflows/redesign-audit.md (die vollständige Scan → Diagnose → Anweisung → Anwendung → Überprüfung-Sequenz + Vollständigkeit der Ausgabe).
  2. Scanne die Codebasis: Framework, Styling-Methode (→ Route zum passenden Adapter in frameworks/), Token-Realität, Komponenten, was erhalten bleiben muss.
  3. Diagnostiziere mit der Checkliste der verbotenen Standardeinstellungen (taste/design-taste.md) + dem Bewertungsraster (design-review Skill). Erstelle eine priorisierte Tabelle der Befunde.
  4. Weise an: Wähle ein Archetyp/System (apply-aesthetic Skill), das zur Marke passt.
  5. Wende in der Reihenfolge an – zuerst Tokens, dann Typografie/Abstände, dann Komponentenzustände, dann Bewegung – ohne Routen/Daten/Markup-Semantik zu ändern (außer Barrierefreiheits-Korrekturen).
  6. Überprüfe: Führe erneut design-review + a11y-audit durch; führe einen Smoke-Test für jeden vorher funktionierenden Ablauf durch; führe Stichproben für Dark Mode und Responsive-Verhalten durch. Führe scripts/validate_contrast.py auf der Token-Quelle und scripts/lint_hardcodes.py über den geänderten Code aus.

Sicherheitsvorkehrungen

Opfere niemals eine funktionierende Funktion aus ästhetischen Gründen. Liefere niemals eine Markenfarbe aus, die den Kontrast nicht besteht. Entferne niemals vorhandene Barrierefreiheitshilfen. Liefere vollständige Dateien – keine Platzhalter.

Single-Theme-Konsistenz (entscheidend für Multi-Page-Apps)

Konsolidiere zu EINEM gemeinsamen Token-Theme und stelle sicher, dass jede Seite dieses Theme verwendet – ein Redesign, das verschiedene Seiten mit unterschiedlichen Paletten hinterlässt, ist gescheitert. Ersetze seiten-/ad-hoc-Farben durch semantische Tokens; überprüfe mit scripts/lint_hardcodes.py, dass keine Seite nicht-theme-konforme Werte einführt. Theme-Wechsel müssen aus der einzigen Token-Quelle stammen, nicht aus Seiten-Bearbeitungen (.claude/rules/tokens-and-color.md → Single-Theme-Konsistenz).

Individual skills in this repo

This repo contains 7 individual skills — each has its own dedicated page.

plugin87/design-tokens

Generate, extend, or audit design tokens in DTCG format with the 3-tier architecture (primitive → semantic → component). Use when the user wants a color palette, type scale, spacing/shadow/radius/motion tokens, multi-brand theming, or wants to validate token files. Covers colors, typography, spacing, shadows, borders, breakpoints, motion, gradients, opacity, blur, sizing, states, theming.

plugin87/governance

Govern how the design system evolves — SemVer for tokens/components, the contribution workflow, deprecation policy, and change communication. Use when the user wants to add/promote/deprecate a component or token, decide a version bump, set up a contribution process, or keep the system from fragmenting.

plugin87/image-to-code

Turn a reference image, screenshot, or mockup into token-driven, accessible code — infer the design system from the reference (palette, type scale, spacing, radius, layout archetype), map it to the 3-tier tokens, rebuild it, then verify with the kit's gates. Use when the user provides a design/screenshot and wants matching UI code.

plugin87/performance

Optimize UI performance against Core Web Vitals — LCP, INP, CLS — with loading/code-split strategy, layout-shift prevention, and animation performance rules. Use when the user wants to improve speed, fix jank or layout shift, hit Web Vitals budgets, or make a UI feel fast on low-end devices.

plugin87/prototype

Move an idea up the fidelity ladder (content-first → wireframe → low-fi → high-fi → code) with a validation plan at each level, plus user-journey mapping and usability-testing scripts. Use when the user wants to prototype, wireframe, map a user flow, or plan/run usability testing.

plugin87/token-build

Set up or run the token build pipeline — transform the DTCG tokens/*.json (source of truth) into platform artifacts (CSS variables, Tailwind @theme, JS/TS, iOS Asset Catalog, Android, Compose) with Style Dictionary / Tokens Studio / W3C DTCG export. Use when the user wants to generate platform theme files from tokens, wire token CI, or multi-platform token output.

plugin87/ux-writing

Write or review UI copy — buttons, errors, empty states, microcopy, notifications, labels — using the voice & tone system (clear, concise, useful, human, honest) with the what→why→how error formula and inclusive-language rules. Use when the user needs interface copy, error messages, empty-state text, or a copy review.

Verwandte Skills

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community