Zur Nutzungsanleitung springen
improve-uivon Julien Thibeaut

Improve UI Skill.

Ein Claude Code- und Codex-Skill für Design Review: prüft eine Produktoberfläche anhand ihrer eigenen Design-Vorgaben und erstellt Umsetzungspläne.

  • Design Review & Accessibility
  • Review-Bericht
ibelick/ui-skills · skills/improve-ui/SKILL.mdSKILL.md
--- name: improve-ui description: Audit an existing product surface against its own design evidence, identify verified UI problems, and write self-contained implementation plans for another agent. Strictly read-only on product source. Use when asked to review, refine, improve, or clean up an interface without replacing its identity; investigate design-system drift; or prepare a design handoff. --- ## Boundaries ## 1. Select the surface ## 2. Reconstruct the local system ## Design language ## 3. Prove findings ## 4. Vet findings
Metadaten und Abschnittsüberschriften aus der Ursprungsdatei vom 14.09.2026 · 7.816 Zeichen insgesamt

01 Was es tut

Was die improve-ui-Skill in Claude Code und Codex macht

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

Improve UI prüft eine kohärente Produktoberfläche gegen das Designsystem, das tatsächlich für sie gilt, und schreibt anschließend eigenständige Umsetzungspläne, die ein anderer Agent ausführen kann. Es ist bei der Produktquelle nur lesend tätig: Dateien werden ausschließlich unter design-plans erstellt oder bearbeitet, und Abhängigkeiten, Formatierer, Commits oder Pushes sind nicht erlaubt.

Befunde müssen drei Nachweise überstehen, Vertrag, Laufzeit und Korrektur, sowie einen späteren Falsifizierungsdurchgang, und der Bericht endet bei drei, geordnet nach Vertrauen, Nutzerauswirkung, Reichweite und Korrekturaufwand. Geeignet für Designer und Entwickler, die eine Oberfläche überprüfen, verfeinern oder aufräumen möchten, ohne ihre Identität zu ersetzen, die Abweichung vom Designsystem untersuchen oder eine Design-Übergabe vorbereiten. Fragen zu Barrierefreiheit, Verhalten, Performance und Architektur liegen außerhalb des Umfangs, sofern nicht ausdrücklich angefordert.

Prüfbericht
Siehe Beispiel-Prompt ↗

So funktioniert es

  1. 01
    Eine Kohärente Oberfläche Auswählen

    Eine breite Anfrage wird auf eine bereitstellbare Anwendung und eine kohärente Oberflächenfamilie für eine primäre Produktaufgabe eingeschränkt; die Skill benennt diese Auswahl, statt das Repository als ein einziges Produkt zu behandeln.

  2. 02
    Das Lokale System Rekonstruieren

    Eine Quelle wird erst verwendet, nachdem nachgewiesen wurde, dass sie aktuell ist und für die ausgewählte Oberfläche gilt; Entwürfe, Vorschläge, Migrationen und Aufgabenlisten beschreiben zukünftige Absichten, sofern nicht ausdrücklich als akzeptiert und aktuell bestätigt.

  3. 03
    Drei Nachweise pro Kandidat Verlangen

    Jeder beibehaltene Kandidat benötigt einen Vertrag, einen Laufzeitpfad und eine deterministische Korrektur; Suchergebnisse, Wiederholungen und Implementierungsunterschiede erzeugen Kandidaten, keine Befunde.

  4. 04
    Verifizieren und Falsifizieren

    Kandidaten werden vor der Berichterstattung erneut angegriffen, und nur diejenigen, die diesen Durchgang überstehen, dürfen in die Befundtabelle aufgenommen werden.

  5. 05
    Bericht, Geordnet und Begrenzt

    Befunde werden nach Vertrauen, Nutzerauswirkung, Reichweite und Korrekturaufwand geordnet, und die Liste wird auf drei begrenzt.

  6. 06
    Ausgewählte Änderungen Spezifizieren

    Vor dem Schreiben werden zitierte Quellen erneut geöffnet, der aktuelle Commit wird, falls verfügbar, festgehalten, und exakte wiederverwendbare Primitive und Vorbilder werden über die betroffenen Oberflächen hinweg identifiziert.

02 Finden Sie Ihren Favoriten

Wann Sie den improve-ui Skill verwenden

Verwenden Sie den improve-ui-Skill in Claude Code oder Codex, wenn die Aufgabe Design-Review dieser Art ist. Eignung und Grenzen unten stammen aus der eigenen Datei des Skills.

Gut geeignet

  • Wenn Sie aufgefordert werden, eine Oberfläche zu überprüfen, zu verfeinern, zu verbessern oder aufzuräumen, ohne deren Identität zu ersetzen

Grenzen kennen

  • Ändern Sie niemals Produktquellcode. Erstellen oder bearbeiten Sie Dateien nur unter design-plans/.
  • Installieren Sie keine Abhängigkeiten, führen Sie keine Formatter aus, committen, pushen oder verändern Sie anderweitig den Arbeitsbaum.
  • Aktualisieren Sie keine Design-Dokumentation. Erfassen Sie akzeptierte Dokumentationsänderungen im Plan für dessen Ausführer.
  • Verwenden Sie gerenderte Nachweise nur, wenn der Benutzer diese bereitstellt oder explizit eine visuelle Inspektion anfordert.

03 Innerhalb des Skills

Was der improve-ui Skill zum Design-Review beiträgt

4 Dinge, die die SKILL.md Claude Code oder Codex anweist zu tun, in der Abschnittsreihenfolge der Datei.

  1. 1. Oberfläche auswählen

    Respektieren Sie den vom Benutzer vorgegebenen Umfang. Wenn die Anfrage breit gefasst ist, wählen Sie eine auslieferbare Anwendung und eine kohärente Oberflächenfamilie, die eine primäre Produktaufgabe repräsentiert.

  2. 2. Das lokale System rekonstruieren

    Prüfen Sie auf DESIGN.md, Repository-Guidance und oberflächenlokale Design-Dokumentation.

  3. Design Language

    Schreiben Sie None documented unter Explicit exceptions, sofern keine zitierte Quelle die Ausnahme explizit benennt.

  4. 3. Befunde beweisen

    Bevor Sie das Proof Gate anwenden, untersuchen Sie die benutzersichtigen Labels, die Darstellung aktiver Zustände, responsive Verzweigungen und Geschwistervarianten jeder verfolgten Oberfläche auf interne Widersprüche.

04 In Betrieb nehmen

improve-ui in Claude Code oder Codex installieren

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

improve-ui zu Claude Code, Codex oder Ihrem Agent hinzufügen

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

Terminal
npx skills add https://github.com/ibelick/ui-skills --skill improve-ui

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

Dem Skill eine erste Design-Review-Aufgabe geben

Die SKILL.md enthält keinen Beispiel-Prompt; dieser Starter ist aus der Katalog-Einzeiler geschrieben. Ersetzen Sie die Aufgabenzeile mit Ihrem echten Briefing.

Starter prompt
Use the improve-ui skill on the material I attach. What the skill should do here: Audits a product surface against its own design evidence and writes implementation plans. Rules: do not invent copy, data or brand assets. State your plan first, then produce the result and tell me what to check.

Quelle: Starter-Prompt geschrieben aus der Katalog-Einzeilen-Verwendung (nicht aus der SKILL.md).

Das erste Ergebnis prüfen

Prüfen Sie vor Annahme der Ausgabe Folgendes im Transkript und in den Dateien:

  • Das Ergebnis wird als Review-Bericht geliefert, wie es der Katalog für dieses Skill auflistet.
  • Der Agent nennt den improve-ui Skill in seinem Plan oder Transkript, bevor er das Ergebnis produziert.
  • Ihre eigenen Inhalte, Namen und Zahlen erscheinen unverändert in der Ausgabe.

In OpenDesign importieren Sie improve-ui ü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.

Repository
github.com/ibelick/ui-skills Branch main
Skill-Datei
skills/improve-ui/SKILL.md Inhaltsprüfsumme bei Verifizierung aufgezeichnet; Commit 79081ab
License
MIT Aus LICENSE.
Repository-Sterne
8.402 GitHub-Snapshot vom 14.09.2026 für das gesamte Repository ibelick/ui-skills, das 5 Skills in diesem Katalog enthält. Keine Bewertung oder Nutzungszahl für improve-ui.
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.
Die eigene Beschreibung des Skills
„Eine bestehende Produktoberfläche gegen ihre eigenen Designnachweise prüfen, verifizierte UI-Probleme identifizieren und eigenständige Umsetzungspläne für einen anderen Agent schreiben. Strikt read-only auf Produktquelle. Verwenden, wenn gebeten wird, eine Oberfläche zu reviewen, zu verfeinern, zu verbessern oder aufzuräumen, ohne ihre Identität zu ersetzen; Designsystem-Drift zu untersuchen; oder eine Design-Übergabe vorzubereiten."

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

UI verbessern

Führen Sie improve-ui bei einer echten Design-Review-Aufgabe aus.

Laden Sie OpenDesign herunter, importieren Sie improve-ui über den SKILL.md-Link, fügen Sie den obigen Prompt ein und lesen Sie den Plan, bevor Sie das Ergebnis sehen.

Terminal
npx skills add https://github.com/ibelick/ui-skills --skill improve-ui

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