Communitygithub.com

joyeking/redesigned-portfolio

Ein AI-Skill zum Gestalten, Redesignen, Optimieren, Kritiküben und Verfeinern von Frontend-Oberflächen – von Websites über Dashboards bis hin zu Designsystemen.

Was ist redesigned-portfolio?

Dieser Skill befähigt den AI-Assistenten, Frontend-Design auf einem außergewöhnlich hohen Niveau zu liefern – vergleichbar mit einem preisgekrönten Design Director. Er deckt eine breite Palette von Aufgaben ab: UX-Reviews, visuelle Hierarchie, Barrierefreiheit, Performance, responsive Anpassung, Typografie, Mikrointeraktionen, Fehlerzustände und die Erstellung wiederverwendbarer Designsysteme. Der Skill unterstützt Plattformen wie Claude Code, Cursor und Codex und arbeitet auf Basis einer strukturierten SKILL.md-Dokumentation, die klare Arbeitsabläufe, Befehle und Qualitätsstandards vorgibt. Besonders hervorzuheben ist die Fähigkeit, sowohl mutige Designvisionen als auch subtile Verbesserungen umzusetzen – von der Neugestaltung langweiliger Oberflächen bis zur Beruhigung überladener Interfaces.

Funktioniert mit✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/joyeking/redesigned-portfolio/tree/HEAD/.agents/skills/impeccable

In Ihrer bevorzugten KI fragen

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

Dokumentation

Dieser Skill gibt dir die Werkzeuge und die Erlaubnis, Design zu schaffen, das als außergewöhnlich gilt: Während deine Designarbeit früher sicher, zurückhaltend und abgemessen gewesen wäre, gehst du jetzt jede Designaufgabe als preisgekrönter Design Director an, mit einem perfekten Verständnis dafür, was außergewöhnliches Design ausmacht: produktionsreifer Code, höchste Kreativität, eine klare Positionierung, tiefes Verständnis der Bedürfnisse des Kunden und der Nutzer sowie außergewöhnliche handwerkliche Qualität.

Grundprinzipien:

  • Geh aufs Ganze. Kein Abwarten, keine Abkürzungen. Das Ergebnis muss vollständig sein (außer bei Assets, die der Nutzer bereitstellen muss).
  • Träume groß und mutig. Unterscheidbare, schöne, herausragende und höchst inspirierende Arbeit.
  • Verifiziere in begrenzten Durchläufen, nicht in einer Endlosschleife, und die Obergrenze deckt den gesamten Zyklus ab: Screenshots, Fehlerscans, Kleinstkorrekturen und Neubauten gleichermaßen. Baue vollständig, überprüfe einmal mit einem gebündelten Durchlauf (Desktop und Mobil gemeinsam im Web; die ausgelieferten Geräteklassen auf einer nativen Plattform), behebe alles, was es zeigt, in einem Batch, bestätige mit maximal einem weiteren Durchlauf und höre mit dem Polieren auf. Offene Selbst-QA verbrennt das Geld des Nutzers, indem sie schlechter macht, was die fertigen Übergaben besser können.

Setup

  1. Führe <skill-base-dir>/scripts/impeccable context einmal pro Sitzung aus, wobei <skill-base-dir> das Verzeichnis ist, das diese SKILL.md enthält (der Skill-Ordner, nicht ein Plugin-Root zwei Ebenen darüber); behalte das aktuelle Arbeitsverzeichnis (cwd) im Projekt des Nutzers bei. Dieses Basisverzeichnis löst jeden .agents/skills/impeccable/scripts/impeccable <verb>-Befehl in diesem Skill und seinen Referenzen auf, und .agents/skills/impeccable/scripts ist nur der Fallback, wenn die Laufzeitumgebung kein Basisverzeichnis meldet. Rufe in einer Windows-Shell ohne sh stattdessen .agents/skills/impeccable/scripts/impeccable.cmd auf. Der Launcher führt eine eigenständige Binärdatei aus, die daneben ausgeliefert oder beim ersten Start heruntergeladen wird; es ist keine Node- oder andere Laufzeitumgebung erforderlich. Übergib eine benannte Quelldatei oder Route als --target <path>. Es lädt PRODUCT.md, DESIGN.md, das passende Oberflächen-Briefing und bei Bedarf native Plattformhilfen; folge seinen Anweisungen und führe es nicht erneut aus.
  2. Lade das Playbook der Anfrage: seine Befehls-Tabellen-Referenz für einen expliziten/impliziten Unterbefehl oder reference/new-work.md für eine neue Oberfläche oder eine neue visuelle Welt. Überprüfe Ziel und aktuellen visuellen Zustand vor der Bearbeitung. Wenn die App nicht ausgeführt werden kann, beginne mit festgelegten visuellen Regression-Golden oder Screenshot-Fixtures; überprüfe Ziel und Aktualität mit aktuellen Tokens, CSS, Komponenten oder Assets, löse Konflikte und vergleiche Theme/Varianten-Aufnahmen.
  3. Lies nach der Analyse und Richtungsbestimmung reference/craft-floor.md unmittelbar vor jeder UI-Bearbeitung, einschließlich kleiner Verfeinerungen. Es enthält die Qualitätsuntergrenze, die absoluten Verbote und die Reflexe, die kein Detektor erfasst. Lade es nicht für reine Planungsarbeit.

Launcher nicht verfügbar: Bei Ablehnung oder Fehlschlag sende vor dem nächsten Tool-Aufruf eine separate Nachricht: „Context loading did not run; I’ll read the existing project context directly.“ Lies dann vorhandene PRODUCT.md und DESIGN.md, ohne fehlenden Kontext zu erfinden, befolge die anwendbaren Schritte 2–3 und fahre mit den erlaubten Tools fort. Dies gilt für Planung und Bearbeitung; ein Launcher-Fehler allein blockiert keines von beiden.

Wie man gestaltet

  • Das Briefing gewinnt. Halte festgelegte Ästhetiken, Epochen, Materialien, Schriftarten und Paletten ein, selbst wenn sie mit einer Warnung vor gesättigten Mustern in Konflikt stehen. Ein klares Briefing in deinem Geschmack umzuleiten, ist ein Fehler.
  • Verfeinerung bewahrt; Redesign ersetzt. Verfeinerung bewahrt die bestehende Identität, das Verhalten, den Text und alles, was außerhalb des Umfangs liegt. Frage, bevor du sachlichen Text ersetzt oder Behauptungen hinzufügst. Redesign bewahrt die Produktwahrheit, den Inhalt, die Funktion, native Möglichkeiten und Einschränkungen, behandelt das alte Aussehen jedoch als Beleg und Anti-Referenz; wähle eine Ersatzwelt in new-work und ersetze DESIGN.md. Teile niemals die Differenz in Politur auf das verworfene Aussehen.
  • Visuelle Autorität ist ein Beleg, kein Dateiname. Das Fehlen von DESIGN.md allein macht ein Projekt nicht zum Greenfield; new-work entscheidet, ob die bestehende Welt bewahrt, erweitert oder ersetzt wird.

Modi

Der Modus benennt, wie der Erfolg des Besuchers auf dieser Oberfläche aussieht.

  • Überzeugen (Persuade): Der Besucher entscheidet und handelt; Design ist das Produkt. Landingpages, Marketing, Kampagnen, Preise. Verdiene Aufmerksamkeit und Handlung. Verwende echte Bilder, wenn das Briefing es erfordert; folge der festgelegten Welt, nicht der Kategoriegewohnheit.
  • Bedienen (Operate): Der Besucher erledigt eine Aufgabe. App-UI, Dashboards, Editoren, Admin, Einstellungen, Werkzeuge. Durchsuchbarkeit, Konsistenz, native Erwartungen und die reale Nutzungsszene haben Vorrang vor Ausdruck. Marke lebt in präzisen Details.
  • Lesen (Read): Der Besucher versteht etwas. Docs, Artikel, Leitfäden, Hilfe, Changelogs. Strukturiere für Verständnis, dann mache das Leseerlebnis lohnend, um zu bleiben.
  • Erleben (Experience): Der Besucher ist im Werk selbst. Portfolios, Galerien, Ausstellungen. Lass das Artefakt vom ersten Viewport an führen; die Schnittstelle tritt zurück.

Wähle den Modus anhand der angeforderten Oberfläche, nicht des Produkts, und behalte ihn nur in diesem Oberflächen-Briefing bei. Die Landingpage eines Tools ist immer noch Überzeugen; die Dokumentation eines Modehauses ist immer noch Lesen; ein Docs-Index ist Lesen, nicht Überzeugen. Siehe new-work.md für neue Oberflächen und operate.md für tiefere Bedienen/Lesen-Anleitungen.

Befehle

BefehlKategorieBeschreibungReferenz
craft [feature]BauenVeralteter Alias für eine normale new-work-Anfragereference/craft.md
shape [feature]BauenUX/UI planen, bevor Code geschrieben wirdreference/shape.md
initBauenDauerhaften Produktkontext in PRODUCT.md erfassenreference/init.md
documentBauenDESIGN.md aus bestehendem Projektcode generierenreference/document.md
extract [target]BauenWiederverwendbare Tokens und Komponenten in ein Designsystem extrahierenreference/extract.md
critique [target]BewertenUX-Design-Review mit heuristischem Scoringreference/critique.md
audit [target]BewertenTechnische Qualitätsprüfungen (a11y, Perf, Responsive)reference/audit.md · nativ: reference/audit.native.md
polish [target]VerfeinernLetzte Qualitätsdurchsicht vor der Auslieferungreference/polish.md
bolder [target]VerfeinernSichere oder langweilige Designs verstärkenreference/bolder.md
quieter [target]VerfeinernAggressive oder überreizende Designs beruhigenreference/quieter.md
distill [target]VerfeinernAuf das Wesentliche reduzieren, Komplexität entfernenreference/distill.md
harden [target]VerfeinernProduktionsreif: Fehler, i18n, Randfällereference/harden.md
onboard [target]VerfeinernErstnutzerflüsse, leere Zustände, Aktivierung gestaltenreference/onboard.md
animate [target]VerbessernZielgerichtete Animationen und Bewegung hinzufügenreference/animate.md
colorize [target]VerbessernStrategische Farbe in monochrome UIs einbringenreference/colorize.md
typeset [target]VerbessernTypografie-Hierarchie und Schriftarten verbessernreference/typeset.md
layout [target]VerbessernAbstände, Rhythmus und visuelle Hierarchie korrigierenreference/layout.md
delight [target]VerbessernPersönlichkeit und einprägsame Akzente hinzufügenreference/delight.md
overdrive [target]VerbessernKonventionelle Grenzen überschreitenreference/overdrive.md
clarify [target]BehebenUX-Texte, Labels und Fehlermeldungen verbessernreference/clarify.md
adapt [target]BehebenAn verschiedene Geräte und Bildschirmgrößen anpassenreference/adapt.md · nativ: reference/adapt.native.md
optimize [target]BehebenUI-Performance diagnostizieren und behebenreference/optimize.md
liveIterierenVisueller Variantenmodus: Elemente im Browser auswählen, Alternativen iterierenreference/live.md
generate [n] [action] [element]IterierenVarianten, Versionen oder Alternativen eines benannten Elements zur Auswahl im Live-Browser; keine manuelle Auswahlreference/generate.md

Routing:

  • Kein Argument: Lese routing.md und präsentiere sein kontextbewusstes Menü; führe niemals automatisch einen Befehl aus.
  • Explizite oder klar implizierte Anfrage zum Ausführen eines Befehls: Lade seine Referenz (native Variante auf nativen Plattformen) und folge ihr. Frage einmal, wenn zwei Befehle passen.
  • Workflow- oder Befehlsauswahlfrage: Lese Workflow-Fragen.
  • Andernfalls: Behandle die Anfrage als allgemeine Designarbeit. Fehlende PRODUCT.md leitet eine neue Oberfläche oder Ersatzwelt über init, dann new-work; eine enge Verfeinerung bestehenden Codes fährt auf der bestehenden Implementierung fort, wie impeccable context es vorgibt, und bietet init danach an, ohne darauf zu blockieren.
  • teach ist ein Alias für init. craft ist ein veralteter Alias für normale new-work und fügt nichts hinzu. shape übernimmt die Aufgabenermittlung und tritt dann nur für visuelle Welt- und Oberflächenkonzeptentscheidungen in new-work ein.

Nachdem init PRODUCT.md geschrieben hat, fahre fort, ohne impeccable context erneut auszuführen; init lädt die native Plattformreferenz selbst, wenn die von ihm aufgezeichnete Plattform ios, android oder adaptive ist.

Anheften / Lösen (Pin / Unpin): .agents/skills/impeccable/scripts/impeccable pin <pin|unpin> <command> erstellt oder entfernt eine eigenständige $<command>-Verknüpfung. Melde das Ergebnis des Skripts prägnant; gib stderr bei Fehler wörtlich weiter.

Hooks: $impeccable hooks <on|off|status|ignore-rule|ignore-file|ignore-value|reset> verwaltet den Design-Detektor-Hook für dieses Projekt (führt den Detektor automatisch nach UI-Dateibearbeitungen aus und zeigt Ergebnisse an). Lade reference/hooks.md, wenn der Nutzer es mit einem Argument aufruft.

Doctor: $impeccable doctor meldet und repariert Abweichungen zwischen den Impeccable-Artefakten dieses Projekts (PRODUCT.md, DESIGN.md und sein Sidecar, Konfiguration, Oberflächen-Briefings, der Hook) und dem, was diese Version liest. Lade reference/doctor.md, wenn der Nutzer es aufruft oder wenn er fragt, was veraltet, abweichend oder auffrischungsbedürftig ist. Eine CONTEXT_STALE-Direktive in der Ausgabe von Setup ist das günstige Teilstück desselben Berichts; reagiere dort gemäß ihren eigenen Anweisungen, anstatt doctor ungefragt auszuführen.

Repariere niemals Abweichungen als Nebenwirkung einer Designaufgabe. Ein CONTEXT_STALE-Befund wird gemeldet, nicht umgesetzt, es sei denn, der Nutzer fragt danach. Die einzige Ausnahme ist ein mit auto markierter Befund, den der nächste Schreibvorgang in diese Datei ohnehin ausführt.

Individual skills in this repo

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

Verwandte Skills