redesign-existing-projects
Bestehende Projekte mit Premium-Designstandards aufwerten
KI-generierte Websites weisen häufig dieselben generischen Muster auf, was sie ununterscheidbar macht. Dieses Skill prüft Ihr bestehendes Projekt und wendet gezielte Design-Upgrades an, um ein poliertes, Premium-Erscheinungsbild zu schaffen, ohne Ihre Codebasis neu zu schreiben.
Die Skill-ZIP herunterladen
In Claude hochladen
Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen
Einschalten und loslegen
Teste es
Verwendung von "redesign-existing-projects". Design-Audit auf einer mit Tailwind CSS erstellten Marketing-Site durchführen
Erwartetes Ergebnis:
- Typografie: Inter für gesamten Text verwendet, Überschriften haben keine Gewichtungsvariation, Absätze erstrecken sich über volle Viewport-Breite
- Farbe: Reines schwarzes Background mit gesättigter blauer Akzentfarbe, warme und kühle Grautöne inkonsistent gemischt
- Layout: Drei gleiche Kartenspalten für Features, alles symmetrisch zentriert, keine max-width-Einschränkung
- Zustände: Keine Hover-Effekte auf Buttons, keine Lade- oder Leer-Zustände im Kontaktformular
- Inhalt: Generische Firmennamen, Lorem Ipsum im Blog-Bereich, Ausrufezeichen in allen Erfolgsmeldungen
Verwendung von "redesign-existing-projects". Typografie auf einem Next.js Dashboard aufwerten
Erwartetes Ergebnis:
- Inter durch Geist für Fließtext und Cabinet Grotesk für Überschriften ersetzt
- Absatz max-width auf 65ch mit erhöhter Zeilenhöhe für bessere Lesbarkeit gesetzt
- Medium (500) Gewicht für Navigationsbeschriftungen und SemiBold (600) für Kartentitel hinzugefügt
- font-variant-numeric: tabular-nums auf alle Datentabelle-Spalten angewendet
- Verwaiste Wörter mit text-wrap: pretty auf allen Absatzelementen korrigiert
Sicherheitsaudit
SicherAll 77 static analysis findings are false positives. The scanner treated Markdown documentation as executable code. The 49 external_commands detections are Markdown backtick syntax for inline code references (CSS properties, font names like Geist, Outfit). The 27 blocker detections for weak cryptographic algorithms and system reconnaissance have no basis in the file content, which contains only design guidelines and audit checklists. The single network detection is a documentation reference to picsum.photos, a placeholder image service. No executable code, scripts, or network calls exist in this skill. It is a pure Markdown document providing design improvement guidance.
Qualitätsbewertung
Was du bauen kannst
Portfolio oder Marketing-Site aufpolieren
Nehmen Sie eine funktionale, aber generische Website und werten Sie sie auf mit Premium-Typografie, benutzerdefinierten Farbpaletten und anspruchsvollen Layoutmustern, die sich von Vorlagendesigns abheben.
KI-generierte Anwendung aufwerten
Identifizieren und ersetzen Sie die verräterischen Anzeichen KI-generierter Oberflächen, einschließlich Platzhalterinhalten, generischen Kartenlayouts und klischeehaften Komponentenmustern, durch verfeinerte Alternativen.
Designschuld in Legacy-Projekt prüfen und beheben
Systematisch ein bestehendes Projekt auf Barrierefreiheitslücken, fehlende Interaktionszustände, inkonsistentes Styling und Content-Probleme überprüfen, dann priorisierte Korrekturen anwenden.
Probiere diese Prompts
Wenden Sie dieses Skill auf mein Projekt an. Lesen Sie die Codebasis durch und geben Sie mir eine Liste aller generischen Designmuster, die Sie finden, nach Kategorie geordnet. Machen Sie noch keine Änderungen, zeigen Sie mir nur die Audit-Ergebnisse.
Wenden Sie dieses Skill auf mein Projekt an. Beheben Sie alle Typografie-Probleme und Farbprobleme, die Sie finden. Ersetzen Sie generische Schriftarten durch bessere Alternativen, korrigieren Sie die Überschriftenhierarchie, passen Sie Absatzbreiten an und bereinigen Sie die Farbpalette. Arbeiten Sie innerhalb des bestehenden CSS-Setups.
Wenden Sie dieses Skill auf mein Projekt an. Führen Sie den vollständigen Audit durch, dann beheben Sie Probleme in Prioritätsreihenfolge: Schriftarten, Farben, Hover-States, Layout und Abstand, generische Komponenten, Lade- und Fehlerzustände und Typografie-Politur. Halten Sie Änderungen fokussiert und überprüfbar.
Wenden Sie dieses Skill auf mein Projekt an. Konzentrieren Sie sich speziell darauf, die häufigsten KI-generierten Designmuster zu ersetzen: den violett-blauen Verlauf, drei gleiche Kartenspalten, Kapsel-Badges, Akkordeon-FAQs, Karussell-Testimonials und generischen Text. Ersetzen Sie jedes durch eine ausgefallenere Alternative.
Bewährte Verfahren
- Prüfen Sie immer die bestehende Codebasis, bevor Sie Änderungen vornehmen, um den aktuellen Tech-Stack, die Framework-Version und den Styling-Ansatz zu verstehen
- Wenden Sie Korrekturen in Prioritätsreihenfolge für maximale visuelle Wirkung mit minimalem Risiko an: Schriftarten zuerst, dann Farben, dann Interaktionszustände, dann Layout
- Halten Sie jede Änderung klein und fokussiert, damit Pull Requests leicht zu überprüfen und zurückzusetzen bleiben
Vermeiden
- Das gesamte Projekt von Grund auf neu schreiben, anstatt bestehenden Code schrittweise zu verbessern
- Zu einem neuen CSS-Framework oder einer neuen Styling-Bibliothek migrieren, wenn das aktuelle System funktioniert
- Große übergreifende Änderungen in einem einzigen Commit vornehmen, die unmöglich zu überprüfen oder zu debuggen sind