Communitygithub.com

molveau/ui

Baut Benutzeroberflächen auf, restyled, poliert und prüft sie mit Geschmack.

Was ist ui?

Diese Fähigkeit ist ein umfassendes Playbook für den Bau und das Restyling von Benutzeroberflächen. Es vereint die besten Praktiken aus Jakub Krehels 'make-interfaces-feel-better' und 'Impeccable' von Paul Bakaus sowie Molveaus eigene Referenzen zu Geschmack und Design (distilliert aus Emil Kowalskis Arbeit) in einer einzigen, kohärenten Anleitung. Die Fähigkeit führt den Nutzer durch einen strukturierten Prozess, der mit einer kreativen 'Richtungsphase' beginnt – die fünf Zeilen, die den Charakter des Produkts definieren – bevor auch nur eine Zeile Code geschrieben wird. Danach folgt eine tiefe Bibliothek von Referenzdateien, die für spezifische Aufgaben wie Layout, Typografie, Farbe, Feinschliff und Barrierefreiheit herangezogen werden können. Das Tool ist plattformunabhängig und funktioniert mit jeder Codebasis. Es bietet klare Entscheidungsregeln, wann welche Referenz zu lesen ist, und enthält sogar vorgefertigte Prompts, um Geschmack in KI-generierte UIs zu erzwingen. Ein besonderer Fokus liegt auf der Vermeidung von generischen, 'vibe-codierten' Ergebnissen durch die Integration der 'anti-slop'-Fähigkeit und einer eigenen 'Richtungsphase'.

Funktioniert mit✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/molveau/skills/tree/main/skills/ui
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Was macht ui?

Eine Fähigkeit zum Erstellen und Restylen von Oberflächen. Sie vereint Jakub Krehels Fähigkeiten (make-interfaces-feel-better, Impeccable) und Molveaus eigene Referenzen (einschließlich eines Geschmacksleitfadens, der aus Emil Kowalskis Arbeit destilliert wurde) in einem einzigen Playbook.

Start hier

Lies zuerst references/playbook.md, beginnend mit dem Block „Do this first“; öffne die Vendor-Dateien und die Molveau-Referenzen nur für tiefere Einblicke oder ausgearbeitete Beispiele. Das Playbook ist die zusammengeführte Doktrin (vor dem Start, Formgebung, Layout, Typografie, Farbe, Dark Mode, Oberflächen, Icons, Komponenten und Zustände, Feedback-Animation, responsives und natives Design, Überprüfungen, Verfeinerungsdurchläufe, Performance, Mockup-first, Prompts) mit Quellen-Tags und den getroffenen Entscheidungen, wo die Quellen unterschiedlicher Meinung sind. Die folgende Tabelle ist der Tiefenindex.

Richtungstor

Führe dies vor jedem Code für eine neue Seite, einen neuen Bildschirm oder ein Restyling durch, selbst wenn die Anfrage nur eine Zeile lang ist. Der Rest dieser Fähigkeit entfernt Fehler; er verleiht einem Bildschirm keinen Charakter. Wird dies übersprungen, entsteht die durchschnittliche Seite, die jedes Modell erstellt: in den Details korrekt, aber niemandem gehörend.

  1. Fünf Zeilen. Produkt: was es tut, für wen. Charakter: zwei oder drei konkrete Wörter (ruhig, präzise, ein wenig warm), niemals clean, modern, sleek, minimal oder premium. Welt: der Ort oder das Material, zu dem das Produkt gehört; es färbt die Neutraltöne und setzt den Akzent. Momente: die ein oder zwei Stellen, die reichhaltige Farbe und Details erhalten. Signatur: ein kleines Detail, das nur dieses Produkt hat und konsequent verwendet wird. Ein Moment wird mit Sorgfalt gezeichnet, nicht nur gereinigt: ein Diagramm, das für das, was es aussagen soll, neu gezeichnet wird (glatte Linien, ein gespiegelter Vergleich, ein realer Maßstab), oder das eigene Objekt des Produkts, dargestellt mit Gewicht und Licht.
  2. Inventar, dann die Idee. Liste 8 bis 12 Dinge auf, die kein Konkurrent teilt (Name, Straße, Zahlen im Briefing, Materialien, Werkzeuge, Rituale, Dokumente, die der Beruf druckt). Schreibe: „Auf diesem Bildschirm wird [ein Gegenstand] zum [Gerät]“. Dieses Gerät ist der Moment.
  3. Verweigere die Second-Order-Standardeinstellungen, es sei denn, die Marke besitzt sie bereits. Diese werden von einem Modell verwendet, sobald die offensichtlichen Hinweise verboten sind:
    • eine cremefarbene, steinfarbene oder warme off-white Seite mit einem Akzent in verbranntem Orange, Terrakotta, Salbei oder Waldgrün, mit oder ohne Serifen-Überschrift (der „Papier und Tinte“-Look ist der neue Standard, keine Richtung);
    • Fraunces, Instrument Serif, Playfair oder Georgia reflexartig als Schrift für die Überschrift; system-ui als einzige Schriftart;
    • Inter oder Geist auf Weiß mit einem einzigen Indigo- oder Blau-Akzent;
    • Hero, drei Funktionen, Testimonials, Call-to-Action, in dieser Reihenfolge, ohne Begründung; auf einem App-Bildschirm vier gleiche Stat-Karten über einem Balkendiagramm;
    • ein zentrierter Eyebrow, eine Überschrift und zwei Buttons als gesamter erster Bildschirm.
  4. Austauschtest. Ersetze den Namen und den Beruf durch die eines Konkurrenten. Wenn der Bildschirm immer noch passt, ändere die Behauptung, den Moment und die Signatur und teste erneut.
  5. Zeigen und warten. Zeige die fünf Zeilen und die Idee und warte auf den Eigentümer. Wenn du nicht fragen kannst (der Benutzer hat gesagt, baue es einfach, oder du arbeitest ohne eine Person), schreibe sie als Kommentar an den Anfang der Hauptdatei und baue genau das.

Tiefe: anti-slop Playbook §2 (Richtung) und §12 (App-Bildschirme); die design-inspiration-index Fähigkeit für echte Referenzen.

Immer an

  1. Projekt zuerst. Seine Tokens, Komponenten, DESIGN.md und verwandte Bildschirme entscheiden vor jeder Voreinstellung hier.
  2. Eine Designautorität auf einmal. Beende einen Durchgang, bevor du einen weiteren hinzufügst.
  3. Ein Brennpunkt und eine primäre Aktion pro Bildschirm, jeder Zustand entworfen (Playbook §3, §9).
  4. Mockup vor der Implementierung für neue oder restyled Bildschirme, wenn das Projekt mockup-first arbeitet, Molveaus Hausstandard (references/mockup-first.md); ansonsten der eigene Überprüfungsprozess des Projekts.
  5. Bevor UI als fertig erklärt wird: die anti-slop Fähigkeit und ihr Detektor, dann Typprüfung, Lint und Tests.

Nachbarn: Die anti-slop Fähigkeit besitzt die vibe-codierten Hinweise und De-AI-Durchgänge; motion besitzt Animationen über UI-Feedback hinaus; ux besitzt Copy, Formulare, Fokus, Ziele, Barrierefreiheitstiefe, Fehler, Randfälle und Onboarding. Überprüfungstiefe: design-grill ist das tiefe Audit (sieben Linsen, bewerteter Bericht), die Kritikzeilen unten sind der leichtere Einzeldurchgang, und anti-slop ist der AI-Look-Durchgang.

Was für welche Aufgabe zu lesen ist

Alle Pfade sind relativ zu diesem Fähigkeitsordner.

AufgabeLesen
Die zusammengeführten Regeln, Werte und Konfliktentscheidungenreferences/playbook.md
Neuer oder restyled Bildschirm, der Feedback benötigt (keine winzige Anpassung)references/mockup-first.md
Geschmacksstandards, wenn ein Projekt noch keine Tokens hatreferences/taste.md
Layout, Gruppierung, Ausrichtung, Abständereferences/vendor/jakub/better-layout.md, dann references/vendor/impeccable/layout.md
Typografie: Schriftarten, Skalierung, Zeilenlänge, OpenTypereferences/vendor/jakub/better-typography.md und references/vendor/impeccable/typeset.md
Farbe: Palette, Kontrast, Dark Mode, Tokensreferences/vendor/jakub/better-colors.md, plus references/vendor/impeccable/colorize.md zum Hinzufügen von Farbe
Feinschliff: Radien, Schatten, optische Ausrichtung, Icon-Zuständereferences/vendor/feel/make-interfaces-feel-better.md und references/vendor/impeccable/polish.md; references/vendor/jakub/better-ui.md für genaue Werte
Ganzer Bildschirm, bewertete Überprüfung (Barrierefreiheit und Text leben in der ux-Fähigkeit)references/vendor/jakub/better-interface.md, der Überbegriff
Überprüfe einen Branch oder PR auf UI-Regressionenreferences/vendor/jakub/interface-review.md
Vollständiges Multi-Linsen-Design-Audit einer Datei, Komponente oder Route (schwer: mehrere Agents)die design-grill-Fähigkeit
Visuelle Referenzen oder Inspiration für einen Hero, CTA, Navbar, Motion, Iconsdie design-inspiration-index-Fähigkeit
Kritik oder Design-Review eines Bildschirmsreferences/vendor/impeccable/critique.md (Heuristiken, kognitive Last, Personas); schnelle Zerlegung: Prompt 4 in references/prompts.md
Audit: Performance, Theming, Responsive (für Barrierefreiheit, verwende die ux-Fähigkeit)references/vendor/impeccable/audit.md, references/vendor/impeccable/optimize.md
Zu überladen oder schwerreferences/vendor/impeccable/distill.md, references/vendor/impeccable/quieter.md
Zu langweilig oder zaghaftreferences/vendor/impeccable/bolder.md, references/vendor/impeccable/colorize.md, references/vendor/impeccable/delight.md
Technisch ambitionierte Effektereferences/vendor/impeccable/overdrive.md
Ein neues Design von Grund auf planenreferences/vendor/impeccable/shape.md; references/vendor/impeccable/new-work.md und die Modusdateien (references/vendor/impeccable/mode-operate.md, mode-persuade.md, mode-read.md) für eine neue visuelle Identität
App-, Dashboard- und Einstellungstiefereferences/vendor/impeccable/operate.md
Kleine Bildschirme, Touch, andere Plattformenreferences/vendor/impeccable/adapt.md; nativ: references/vendor/impeccable/ios.md, references/vendor/impeccable/android.md, references/vendor/impeccable/adapt.native.md
DESIGN.md schreiben oder aktualisieren, Tokens und Komponenten extrahierenreferences/vendor/impeccable/document.md, references/vendor/impeccable/extract.md
Feedback-Bewegungsrezepte (drücken, ein- und ausblenden, Icon-Wechsel, Theme-Wechsel)references/vendor/jakub/better-ui/animations.md, references/vendor/jakub/better-ui/enter-exit.md, references/vendor/jakub/better-ui/icon-transitions.md; Emils Zahlen in references/animation.md (vollständiger Workflow: die motion-Fähigkeit). Einige Rezepte laufen dort länger (ein ~500ms Blatt, Sonners 400ms): in der UI begrenzt das Playbook Overlays auf 300ms (§10)
Checkliste für interaktive Komponenten (Toasts, Drawer, Menüs)references/components.md
Öffentliche Marketingseite, die von LLMs zitiert werden solltereferences/discoverability.md
Prompts, die Geschmack in KI-generierte UI erzwingenreferences/prompts.md
Die Philosophie hinter den Regelnreferences/quotes.md
UI sieht vibe-codiert oder generisch ausdie anti-slop Fähigkeit
Copy, Fehler, leere Zustände, Barrierefreiheitstiefedie ux-Fähigkeit

Der Einstiegspunkt von Impeccable references/vendor/impeccable/impeccable.md beschreibt einen vollständigen Befehlssatz mit eigenen Setup-Dateien und Skripten; lies ihn, wenn du diesen gesamten Workflow anstelle eines einzelnen Durchgangs möchtest. Seine clarify-, harden- und onboard-Befehle werden einmalig in der ux-Fähigkeit bereitgestellt.

Hinweise zu den vendorisierten Dateien

Die Dateien unter references/vendor/ sind unverändert von ihren Autoren kopiert, daher können relative Links und Befehlsnamen darin (Impeccables slash commands, scripts/impeccable, live mode, comp gates) in dieser Installation nicht existieren. Nimm die Anleitung; überspringe, was auf fehlende Werkzeuge verweist. Wo eine vendorisierte Datei nach Browser-Screenshots, Sub-Agents oder automatischen visuellen Durchgängen fragt, folge der eigenen Regel des Projekts (Playbook-Konflikt 14). Lizenzen und genaue Quellen befinden sich in jedem Vendor-Ordner (LICENSE, SOURCE.md).

Danksagungen und Lizenzen

  • references/vendor/jakub/ sind die Fähigkeiten von Jakub Krehel (https://github.com/jakubkrehel/skills), MIT.
  • references/vendor/feel/ ist make-interfaces-feel-better von Jakub Krehel (https://github.com/jakubkrehel/make-interfaces-feel-better), MIT.
  • references/vendor/impeccable/ ist Impeccable von Paul Bakaus (https://github.com/pbakaus/impeccable), Apache-2.0, mit seiner LICENSE und NOTICE beibehalten. Dateien wurden verschoben, SKILL.md umbenannt, scripts/ nicht enthalten; siehe seine SOURCE.md. Das Playbook paraphrasiert und verdichtet Impeccables Anleitung; diese Anpassung ist eine Änderung des Originals.
  • Der Geschmacksleitfaden (references/taste.md, animation.md, components.md, quotes.md) ist destilliert aus Emil Kowalskis Design-Engineering-Arbeit (https://emilkowal.ski), im Playbook mit [Molveau/Emil] getaggt. Die Worte und die Struktur stammen von Molveau (MIT); die Ideen und Zahlen sind seine. references/quotes.md weist jedes Zitat zu. references/animation.md stützt sich auch auf Rauno Freibergs devouringdetails.com.
  • references/discoverability.md ist destilliert aus Suganthan Mohanadasans Forschung (suganthan.com).
  • references/playbook.md, references/prompts.md und references/mockup-first.md stammen von Molveau selbst (MIT), wobei jede Quelle durch ein Tag gekennzeichnet ist.

Individual skills in this repo

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

molveau/anti-slop

Removes the AI-generated look from a UI and gives it a direction of its own. Use when a screen, landing page or dashboard looks vibe-coded or generic (purple gradients, gradient text, emoji labels, glow, eyebrow pills, Inter everywhere, buzzword copy, uneven spacing), when the user asks to unslop, de-AI or make a page stop looking generated, and before shipping any UI to check the 20 tells. Includes a zero-dependency detector script and a ratchet-test recipe.

molveau/design-inspiration-index

Routing index for design inspiration. Use when you need visual references or ideas for a UI (a hero, landing page, SaaS page, navbar, CTA, motion or micro-interaction, brand or rebrand, component, icon) and want to know which curated gallery to pull from. Maps a need to the best source among galleries, component registries and optional MCP servers. Use it before hunting blindly for inspiration.

molveau/vitrine

Playbook for a vitrine, a business showcase / brochure site for a local business. Use at the start of a small business website, brochure site, landing page for a local business, service-business site, or when adding pricing, booking, city pages, local SEO, bilingual FR/EN or a Québec privacy setup to one. Says what such a site needs, in which order to apply the ui, ux, anti-slop, motion, french-typography and loi-25-website skills, and gives a done checklist.

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