Zur Nutzungsanleitung springen
redesign-existing-projectsvon Leonxlnx

Redesign Existing Projects Skill.

Ein Claude Code und Codex Skill für Design-Review: prüft eine bestehende Website oder App und hebt sie auf Premium-Qualität.

  • Design Review & Accessibility
  • Review-Bericht
Leonxlnx/taste-skill · skills/redesign-skill/SKILL.mdSKILL.md
--- name: redesign-existing-projects description: Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla CSS. --- ## How This Works ## Design Audit ## Upgrade Techniques ## Fix Priority ## Rules
Metadaten und Abschnittsüberschriften aus der Quelldatei vom 14.09.2026 · 15.032 Zeichen insgesamt

01 Was es tut

Was der redesign-existing-projects Skill in Claude Code und Codex bewirkt

Zusammenfassung, Workflow und Ergebnisse — alles aus der SKILL.md des Skills ausgelesen.

Aus der SKILL.mdGelesen am 14.09.2026 · kein aufgezeichneter Durchlauf

In den eigenen Worten des Skills

Hebt bestehende Websites und Apps auf ein Premium-Visualniveau, indem das aktuelle Design geprüft, generische KI-Muster identifiziert und hochwertige Designstandards angewendet werden, ohne die Funktionalität zu beeinträchtigen. Funktioniert mit jedem CSS-Framework oder Vanilla CSS.

Der Skill scannt die Codebasis, um das Framework und die Styling-Methode zu identifizieren, diagnostiziert jedes generische Muster und jeden Schwachpunkt durch ein umfassendes Design-Audit und wendet dann gezielte Upgrades an, die mit dem bestehenden Stack arbeiten. Änderungen werden nach visueller Wirkung und Risiko priorisiert, von Font-Austausch und Farbbereinigung bis zu Komponentenersatz und Typografie-Feinschliff.

Prüfbericht
Siehe Beispiel-Prompt ↗

So funktioniert es

  1. 01
    Codebasis scannen

    Liest die Codebasis, um das Framework, die Styling-Methode (Tailwind, Vanilla CSS, styled-components usw.) und die aktuellen Designmuster zu identifizieren.

  2. 02
    Generische Muster diagnostizieren

    Durchläuft das Design-Audit, um jedes generische Muster, jeden Schwachpunkt und jeden fehlenden Zustand im Projekt aufzulisten.

  3. 03
    Mit gezielten Upgrades beheben

    Wendet gezielte Upgrades an, die mit dem bestehenden Stack arbeiten, ohne von Grund auf neu zu schreiben, und verbessert das bereits Vorhandene.

02 Finden Sie Ihren Favoriten

Wann Sie den redesign-existing-projects Skill verwenden

Verwenden Sie den redesign-existing-projects Skill in Claude Code oder Codex, wenn es um ein Design-Review dieser Art geht. Eignung und Grenzen unten stammen aus der eigenen Datei des Skills.

Gut geeignet

  • Bestehende Websites und Apps, die auf Premium-Qualität angehoben werden müssen
  • Projekte mit generischen KI-Designmustern, die identifiziert und ersetzt werden müssen
  • Projekte, die ein beliebiges CSS-Framework (Tailwind, styled-components) oder reines CSS verwenden

    03 Innerhalb des Skills

    Regeln, die der redesign-existing-projects Skill Claude Code und Codex vorgibt

    8 konkrete Anweisungen, Standardwerte und Grenzen, die die SKILL.md für den Agent festlegt – der Teil der Datei, der das Ergebnis verändert.

    1. Mit dem vorhandenen Tech-Stack arbeiten

      Migrieren Sie keine Frameworks oder Styling-Bibliotheken. Halten Sie Änderungen mit dem aktuellen Setup kompatibel.

    2. Nach jeder Änderung testen

      Zerstören Sie keine bestehende Funktionalität. Testen Sie nach jeder Änderung, ob das Projekt noch funktioniert.

    3. Abhängigkeiten vor dem Import prüfen

      Bevor Sie eine neue Bibliothek importieren, prüfen Sie zunächst die Dependency-Datei des Projekts, um zu sehen, was bereits verfügbar ist.

    4. Tailwind-Version prüfen

      Wenn das Projekt Tailwind verwendet, prüfen Sie vor dem Bearbeiten der Konfigurationsdatei, ob es sich um v3 oder v4 handelt.

    5. Reines CSS verwenden, wenn kein Framework vorhanden ist

      Wenn das Projekt kein Framework hat, verwenden Sie reines CSS, anstatt ein neues Styling-System einzuführen.

    6. Niemals Lorem Ipsum verwenden

      Verwenden Sie niemals lateinischen Platzhaltertext. Schreiben Sie stattdessen echten Entwurfstext anstelle generischer Platzhalterinhalte.

    7. Priorisierte Reihenfolge der Korrekturen befolgen

      Wenden Sie Änderungen in Prioritätsreihenfolge an: zuerst der Schriftaustausch (größte sofortige Verbesserung, geringstes Risiko), dann Farbbereinigung, Hover-Zustände, Layout, Komponentenersatz, Zustände und zuletzt Typografie-Feinschliff.

    8. Änderungen überprüfbar halten

      Halten Sie Änderungen überprüfbar und fokussiert. Bevorzugen Sie kleine, gezielte Verbesserungen gegenüber großen Neuschreibungen.

    04 In Betrieb nehmen

    Installieren Sie redesign-existing-projects in Claude Code oder Codex

    Ein npx skills add-Befehl, dann eine erste Aufgabe in Ihrem Agent und eine Checkliste für das Ergebnis.

    Fügen Sie redesign-existing-projects zu Claude Code, Codex oder Ihrem Agent hinzu

    Im eigenen Projekt ausführen; der Installer fragt, welchem Agent er hinzugefügt werden soll.

    Terminal
    npx skills add https://github.com/Leonxlnx/taste-skill --skill redesign-existing-projects

    Generische skills CLI-Form für skills/redesign-skill/SKILL.md; das Repository kann seinen eigenen Pfad dokumentieren.

    Dem Skill eine erste Design-Review-Aufgabe geben

    In den eigenen Begriffen des Skills verfasst; ersetzen Sie die Teile in Klammern durch Ihr Material.

    Starter prompt
    Audit the design of my [React dashboard app] and upgrade it to premium quality. The project uses Tailwind CSS v3. Identify generic AI patterns like the purple gradient background, centered three-column feature cards, and browser default fonts. Replace them with high-end design standards while keeping all existing functionality working. Focus on typography, color palette cleanup, and adding proper hover states first.

    Quelle: verfasst aus der SKILL.md in den eigenen Begriffen des Skills.

    Das erste Ergebnis prüfen

    Was die SKILL.md selbst als korrektes Ergebnis beschreibt:

    • Bestätigen Sie, dass alle Icons im gesamten Projekt einheitliche Strichbreiten haben
    • Prüfen Sie, ob alle Bilder beschreibenden Alt-Text für Screenreader haben

    In OpenDesign importieren Sie redesign-existing-projects über dessen SKILL.md-Link: Plugins → Add → Skill → Import from link, und wählen Sie es dann in der oberen Leiste aus.

    05 Open Source, nachvollziehbar

    Quelle, Lizenz und Verifizierung

    Woher die Fakten auf dieser Seite stammen und wann sie zuletzt geprüft wurden.

    Author
    Leonxlnx
    Repository
    github.com/Leonxlnx/taste-skill Branch main
    Skill-Datei
    skills/redesign-skill/SKILL.md Inhaltsprüfsumme bei Verifizierung aufgezeichnet; Commit ccbc156
    License
    MIT Aus LICENSE.
    Repository-Sterne
    86.946 GitHub-Snapshot vom 14.09.2026 für das gesamte Repository Leonxlnx/taste-skill, das 11 Skills in diesem Katalog enthält. Keine Bewertung oder Nutzungszahl für redesign-existing-projects.
    Verifiziert von OpenDesign
    14.09.2026 Quelldatei, Pfad, Lizenztext und Sternezählung wurden geprüft. Nicht in OpenDesign main gebündelt (geprüft 28.08.2026); ein Live-Durchlauf wurde auf dieser Seite nicht erfasst.

    In der SKILL.md

    1. So funktioniert esDreistufiger Prozess: Codebase scannen, Muster diagnostizieren, mit gezielten Upgrades beheben
    2. Design-AuditUmfassende Checkliste zu Typografie, Farbe, Layout, Interaktivität, Inhalt, Komponenten, Icons, Codequalität und strategischen Auslassungen
    3. TypografieBrowser-Standardwerte korrigieren, Headline-Präsenz, Textbreite, Gewichtsvarianz, Zahlenformatierung, Buchstabenabstand und verwaiste Wörter beheben
    4. Farbe und OberflächenReines Schwarz, übersättigte Akzentfarben, gemischte Grautöne, KI-Gradienten, generische Schatten, Flat Design und uneinheitliche Lichtführung ersetzen
    5. LayoutSymmetrie aufbrechen, Drei-Spalten-Karten ersetzen, CSS Grid nutzen, Container hinzufügen, Radien variieren, Tiefe erzeugen, Ausrichtung korrigieren
    6. Interaktivität und ZuständeHover-, Active-, Focus-, Ladezustände, Leer- und Fehlerzustände mit sanften Übergängen und GPU-beschleunigten Animationen hinzufügen
    7. InhaltRealistische Namen und Daten verwenden, KI-Klischees entfernen, aktive Sprache verwenden, Datumsangaben variieren, Lorem Ipsum vermeiden
    8. KomponentenmusterGenerische Karten, Button-Paare, Badges, Akkordeons, Karussells, Modals, Avatare, Toggles und Footer-Linkfarmen ersetzen
    9. IconografieÜber die Standards von Lucide/Feather hinausgehen, klischeehafte Metaphern vermeiden, Strichbreiten vereinheitlichen, Favicon hinzufügen, echte Fotos verwenden
    10. CodequalitätSemantisches HTML verwenden, konsistente Gestaltung, relative Einheiten, Alt-Texte, sauberer z-index, toten Code entfernen, Meta-Tags hinzufügen
    11. Strategische AuslassungenRechtliche Links, Zurück-Navigation, individuelle 404-Seite, Formularvalidierung, Skip-Links und Cookie-Einwilligung bei Bedarf hinzufügen
    12. Upgrade-TechnikenWirkungsvolle Techniken für Typografie-, Layout-, Bewegungs- und Oberflächen-Upgrades zum Ersetzen generischer Muster
    Die eigene Beschreibung des Skills
    „Hebt bestehende Websites und Apps auf Premium-Qualität. Prüft das aktuelle Design, identifiziert generische KI-Muster und wendet hochwertige Design-Standards an, ohne die Funktionalität zu beeinträchtigen. Funktioniert mit jedem CSS-Framework oder Vanilla-CSS."

    Front-Matter-Beschreibung aus SKILL.md. Die vollständige Datei umfasst etwa 15.032 Zeichen. Vollständige Datei auf GitHub lesen.

    Bestehende Projekte redesignen

    Führen Sie redesign-existing-projects für eine echte Design-Review-Aufgabe aus.

    Laden Sie OpenDesign herunter, importieren Sie redesign-existing-projects über den SKILL.md-Link, fügen Sie die obige Eingabe ein und lesen Sie den Plan vor dem Ergebnis.

    Terminal
    npx skills add https://github.com/Leonxlnx/taste-skill --skill redesign-existing-projects

    OpenDesign Desktop

    Ein Designsystem. Jeder Output unverkennbar deine Marke

    Im vollständigen Vibe Design Workspace gelten dieselben Markenregeln für Websites, Slides, interaktive Prototypen, Dashboards, Bilder und HTML-Videos. Verbinde Codex, Claude Code, Cursor und weitere lokale Coding-Agents und gestalte kostenlos.

    • Web, Slides, Prototypen, Dashboards, Bilder und Video
    • 140+ Designsysteme plus die vollständige Vorlagen- und Skill-Bibliothek
    • Lokales Codex und 21+ Coding-Agents verbinden · Kostenlos

    Für macOS und Windows