minimalist-uivon Leonxlnx

Minimalist UI Skill.

Ein Claude Code und Codex skill für UI-Design: klare, monochrome Interfaces im Editorial-Stil.

Web & UI
UI-Code

OpenDesign herunterladen Anleitung ansehen

Leonxlnx/taste-skill · skills/minimalist-skill/SKILL.mdSKILL.md

--- name: minimalist-ui description: Clean editorial-style interfaces. Warm monochrome palette, typographic contrast, flat bento grids, muted pastels. No gradients, no heavy shadows. --- ## 2. Absolute Negative Constraints (Banned Elements) ## 3. Typographic Architecture ## 4. Color Palette (Warm Monochrome + Spot Pastels) ## 5. Component Specifications ## 6. Iconography & Imagery Directives ## 7. Subtle Motion & Micro-Animations

Frontmatter und Abschnittsüberschriften aus der Upstream-Datei vom 14.09.2026 · 7.896 Zeichen insgesamt

01 Was es tut

Was das minimalist-ui 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

Dieses Skill generiert ultraminimalistische, dokumentartige Web-Interfaces, inspiriert von hochwertigen Workspace-Plattformen. Es setzt eine warme monochrome Palette mit Off-White- und Anthrazit-Tönen, eine ausgefeilte typografische Hierarchie aus editorialen Serifen und geometrischen Groteskschriften sowie flache Bento-Grid-Layouts mit gedeckten Pastellakzenten durch.

Das Protokoll verbietet strikt die Schriften Inter, Roboto und Open Sans, Standard-Icon-Bibliotheken wie Lucide und Heroicons, Tailwinds standardmäßig kräftige Schatten, Verläufe, Emojis und die üblichen KI-Textklischees. Komponenten verwenden 1px durchgezogene Rahmen in #EAEAEA, klare Border-Radien von 8-12px, großzügiges Innen-Padding und Scroll-Entry-Animationen mit IntersectionObserver. Die Bewegung wirkt unauffällig und raffiniert und animiert ausschließlich über transform und opacity.

Was er erzeugt

Frontend-Code in HTML, React, Tailwind oder Vue, der die hochwertige, aufgeräumte, editoriale Ästhetik nativ widerspiegelt
Layouts mit asymmetrischen Bento-Grid-Strukturen auf Basis von CSS Grid und großzügigem Makro-Weißraum

Siehe Beispiel-Prompt ↗

So funktioniert es

01
Zuerst Makro-Weißraum etablieren
Verwenden Sie sehr großes vertikales Padding zwischen den Abschnitten, konkret py-24 oder py-32 in Tailwind-Einheiten.
02
Inhaltsbreite begrenzen
Beschränken Sie die Haupttypografie auf max-w-4xl oder max-w-5xl, um editoriale Proportionen zu bewahren.
03
Typografische Hierarchie und monochrome Variablen anwenden
Legen Sie sofort benutzerdefinierte Schriften und Farbvariablen gemäß den Vorgaben der warmen monochromen Palette fest.
04
Rahmenstandards durchsetzen
Jede Karte, jeder Trenner und jeder Rahmen muss exakt 1px solid #EAEAEA verwenden.
05
Scroll-Entry-Animationen hinzufügen
Wenden Sie Animationen auf alle wesentlichen Inhaltsblöcke mit IntersectionObserver an, niemals mit window-Scroll-Listenern.
06
Visuelle Tiefe sicherstellen
Abschnitte brauchen Tiefe durch Bildmaterial, ambiente Verläufe oder feine Texturen statt leerer flacher Hintergründe.

02 Finden Sie Ihren Favoriten

Wann der minimalist-ui Skill zu verwenden ist

Verwenden Sie den minimalist-ui-Skill in Claude Code oder Codex, wenn es um UI-Design dieser Art geht. Eignung und Grenzen unten sind der eigenen Datei des Skills entnommen.

Gut geeignet

Erstellung hochgradig ausgefeilter, ultraminimalistischer, dokumentartiger Web-Interfaces nach dem Vorbild erstklassiger Workspace-Plattformen
Interfaces, die extremen typografischen Kontrast und eine hochwertige Schriftauswahl erfordern, um eine editoriale Wirkung zu erzielen
Designs, die asymmetrische Bento-Box-Feature-Grids mit großzügigem Innen-Padding von 24px bis 40px benötigen
Projekte, die subtile, unauffällige Bewegung erfordern, die durch Scroll-Entry-Animationen mit IntersectionObserver raffiniert wirkt

Grenzen kennen

Generische SaaS-Designtrends mit primärfarbigen Hintergründen für große Elemente oder Bereiche
Designs, die Verläufe, Neonfarben oder 3D-Glasmorphismus jenseits subtiler Navbar-Unschärfen erfordern
Interfaces, die Pillenformen (rounded-full) für große Container, Cards oder primäre Buttons verwenden
Inhalte, die Emojis in jeglicher Form oder generische Platzhalternamen wie John Doe oder Acme Corp erfordern

03 Innerhalb des Skills

Regeln, die der Skill minimalist-ui Claude Code und Codex gibt

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

Verbotene Schriftarten
Verwenden Sie niemals Inter, Roboto oder Open Sans. Nutzen Sie stattdessen SF Pro Display, Geist Sans, Helvetica Neue oder Switzer für Fließtext und UI.
Verbotene Icon-Bibliotheken
Verwenden Sie nicht Lucide, Feather oder Standard-Heroicons. Nutzen Sie stattdessen Phosphor Icons in Bold- oder Fill-Gewichtung, oder Radix UI Icons.
Grenzwert für Schattenopazität
Verwenden Sie nicht Tailwinds shadow-md, shadow-lg oder shadow-xl. Schatten müssen praktisch nicht vorhanden oder ultra-diffus mit einer Opazität unter 0,05 sein.
Keine Emojis, nirgendwo
Verwenden Sie keine Emojis in Code, Markup, Textinhalten, Überschriften oder Alt-Texten. Ersetzen Sie diese durch geeignete Icons oder saubere SVG-Primitiven.
Verbotene Formulierungen im Copywriting
Vermeiden Sie KI-Copywriting-Klischees: Elevate, Seamless, Unleash, Next-Gen, Game-changer oder Delve. Schreiben Sie stattdessen klar und konkret.
Vorgabe für die Textfarbe des Fließtexts
Fließtext darf niemals absolutes Schwarz #000000 sein. Verwenden Sie Off-Black oder Anthrazit #111111 oder #2F3437 mit einer Zeilenhöhe von 1,6.
Spezifikation für Card-Rahmen
Cards müssen exakt 1px durchgehende Rahmen in #EAEAEA haben mit einem klaren border-radius von maximal 8px oder 12px.
Anforderung an die Animationsperformance
Animieren Sie ausschließlich über transform und opacity. Verwenden Sie niemals layoutauslösende Eigenschaften wie top, left, width oder height.

04 In Betrieb nehmen

minimalist-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.

minimalist-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/Leonxlnx/taste-skill --skill minimalist-ui

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

Dem Skill eine erste UI-Design-Aufgabe geben

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

Starter prompt

Build a project dashboard using an asymmetrical bento-grid layout with the warm monochrome palette. Include feature cards with 1px solid #EAEAEA borders and 24px internal padding, a primary CTA button with #111111 background, status badges using pale blue and pale green pastels, and scroll-entry animations for each grid item. Use Geist Sans for body text and Instrument Serif for the hero heading. Add keystroke hints as <kbd> elements and ensure no Tailwind shadow utilities are used.

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:

Überprüfen Sie, ob Scroll-Entry-Animationen IntersectionObserver und translateY(12px) mit einer Dauer von 600ms verwenden

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

OpenDesign herunterladen Quickstart lesen

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/minimalist-skill/SKILL.md Inhalts-Checksum 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 minimalist-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.

In der SKILL.md

ProtokollübersichtFührt in die Direktive für ultraminimalistische, dokumentartige Web-Interfaces mit warmer Monochrom-Palette und flacher Architektur ein
Absolute Negativ-Vorgaben (Verbotene Elemente)Listet strikt verbotene Design-Elemente auf, darunter die Schrift Inter, Lucide-Icons, schwere Schatten, Farbverläufe, Emojis und Werbetext-Klischees
Typografische ArchitekturLegt Schriftfamilien, Größen und Hierarchie fest – mit geometrischen Sans-Serifs, editorialen Serifen und Monospace mit enger Laufweite
Farbpalette (Warmes Monochrom + Spot-Pastelltöne)Definiert Grundfarben, darunter reines Weiß, warme Knochen-Hintergründe, Anthrazit-Text und vier gedeckte Pastellakzente
KomponentenspezifikationenBeschreibt die Umsetzung von Bento-Grids, Buttons, Tags, Akkordeons, Tastenanschlag-UIs und Fenster-Chrome im Pseudo-OS-Stil
Icon- und BildvorgabenLegt Phosphor- oder Radix-Icons, monochrome Illustrationen, entsättigte Fotografie und subtile Hintergrundbehandlungen für Tiefe fest
Subtile Bewegung & Mikro-AnimationenDefiniert Scroll-Einblendungen, Hover-Zustände, versetzte Kaskaden und Ambient-Bewegung ausschließlich über transform und opacity
AusführungsprotokollBietet einen Schritt-für-Schritt-Workflow zur Umsetzung des Designsystems – von Weißraum bis Animationen

Die eigene Beschreibung des Skills

„Klare Interfaces im Editorial-Stil. Warme monochrome Palette, typografischer Kontrast, flache Bento-Grids, gedämpfte Pastelltöne. Keine Verläufe, keine starken Schatten."

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

06 Vor der Installation

Fragen zum Skill minimalist-ui

Die Antworten stammen aus der SKILL.md, gelesen am 14.09.2026, nicht aus einem protokollierten Lauf.

Welche Schriften sollte ich statt Inter oder Roboto verwenden?

Für Fließtext und UI-Text verwenden Sie SF Pro Display, Geist Sans, Helvetica Neue oder Switzer. Für Hero-Überschriften und Zitate verwenden Sie Lyon Text, Newsreader, Playfair Display oder Instrument Serif mit enger Laufweite. Für Code und Tastenanschläge verwenden Sie Geist Mono, SF Mono oder JetBrains Mono.

Welche Icon-Bibliotheken werden für diesen Stil empfohlen?

Verwenden Sie Phosphor Icons in den Gewichten Bold oder Fill, oder Radix UI Icons für eine technische, leicht dickere Strichästhetik. Verwenden Sie keine generischen dünnstrichigen Bibliotheken wie Lucide, Feather oder die Standard-Heroicons. Vereinheitlichen Sie die Strichbreite über alle Icons hinweg für Konsistenz.

Minimalist UI

minimalist-ui für eine echte UI-Design-Aufgabe ausführen.

Laden Sie OpenDesign herunter, importieren Sie minimalist-ui über den SKILL.md-Link, fügen Sie den obigen Prompt ein und lesen Sie den Plan vor dem Ergebnis.

OpenDesign herunterladen Alle Skills durchsuchen

Terminal

npx skills add https://github.com/Leonxlnx/taste-skill --skill minimalist-ui

Was das minimalist-ui Skill in Claude Code und Codex bewirkt

In den eigenen Worten des Skills

So funktioniert es

Wann der minimalist-ui Skill zu verwenden ist

Gut geeignet

Grenzen kennen

Regeln, die der Skill minimalist-ui Claude Code und Codex gibt

Verbotene Schriftarten

Verbotene Icon-Bibliotheken

Grenzwert für Schattenopazität

Keine Emojis, nirgendwo

Verbotene Formulierungen im Copywriting

Vorgabe für die Textfarbe des Fließtexts

Spezifikation für Card-Rahmen

Anforderung an die Animationsperformance