Communitygithub.com

frogg435/frontend-design-styles

Assistent zur originalgetreuen Umsetzung von Frontend-Design-Stilen – deckt MIUIX/HyperOS, Apple HIG, Google Material Design 3 und Microsoft Fluent 2 ab.

Was ist frontend-design-styles?

Dieser Skill befähigt den AI-Agenten, Anwendungen oder Komponenten (HTML/CSS/JS, React, Vue, Tailwind, Compose/Kotlin) präzise in einer von vier führenden Designsprachen umzusetzen: Xiaomi MIUIX/HyperOS, Apple HIG, Google Material Design 3 und Microsoft Fluent 2. Der Fokus liegt auf semantischen Token (Farben, Typografie, Radien, Schatten, Abstände, Animationen), die aus den offiziellen Referenzdokumenten extrahiert werden, sowie auf der korrekten Komponentengeometrie und Bewegungsphysik jedes Systems. Der Skill enthält einen klaren Workflow, der den Benutzer durch Stilauswahl, Token-Lesen, Umsetzung und Selbstprüfung führt, und beinhaltet strenge Regeln gegen Stilvermischung und für Barrierefreiheit (Kontrast, Fokusringe, `prefers-reduced-motion`). Er kann auch verwendet werden, um bestehende Schnittstellen auf Konformität mit einer bestimmten Designsprache zu prüfen. Der Skill unterstützt mehrere Plattformen und Frameworks, mit einem Schwerpunkt auf der Ausgabe von ausführbaren HTML-Dateien, die alle Tokens als CSS-Variablen enthalten.

Funktioniert mit~Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add frogg435/frontend-design-styles
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Frontend Design Styles

Setzen Sie die vier führenden Designsprachen originalgetreu in Frontend-Code um. Der Kern liegt nicht darin, dass es „ungefähr so aussieht“, sondern in einer konsistenten Wiederherstellung auf drei Ebenen: semantische Tokens + Komponentengeometrie + Bewegungskurven, sodass das Ergebnis von Benutzern der jeweiligen Plattform als „das ist iOS / das ist Material / das ist Windows“ erkannt wird.

Wann verwenden / Nicht verwenden

Verwenden: Erstellen oder Überarbeiten einer Oberfläche in einem bestimmten Designstil; Vergleich und Auswahl zwischen den vier Stilen; Erstellen von Design-Tokens und Theme-Dateien; visuelle Prüfung auf Konformität mit einer Designsprache.

Nicht verwenden: Der Benutzer hat keine Stilpräferenz und möchte nur schnell „eine hübsche Seite“ → Fragen Sie zuerst, ob ein Stil gewünscht wird, oder folgen Sie der Empfehlungslogik in references/style-router.md; reine Backend-/Algorithmusaufgaben sind nicht relevant für diesen Skill.

Kurzübersicht der vier Stile

Dies sind die markantesten Merkmale. Überprüfen Sie diese Tabelle vor jeder Implementierung und konsultieren Sie die entsprechende Referenz für Details.

| | MIUIX / HyperOS | Apple HIG | Material Design 3 | Fluent 2 | |---|---|---|---| | Primärfarbe | #3482FF (hell) / #277AF7 (dunkel) | #007AFF / #0A84FF | Rollenbasiert, Basis #6750A4 | #0F6CBD | | Schriftart | MiSans | SF Pro (<20pt Text, ≥20pt Display) | Roboto / Roboto Flex | Segoe UI Variable | | Basis-Schriftgröße (Körpertext) | 16–17px | 17pt | 16sp (body-large) | 14px (body-1) | | Eckenradius-Sprache | Einheitlicher 16dp-Radius + Squircle (wie bei iOS, aber Tasten nicht kapselförmig) | Kontinuierlicher Kurvenradius (Squircle), Container 10–20pt | 12dp Karten / 28dp FAB & Dialoge / Voll gerundete Tasten | Kleine Radien, Steuerelemente 4px, Dialoge 8px, Verschachtelung −2px | | Schichtungsmethode | Farbstufenschichtung (#FFFFFF / #F7F7F7 / #E8E8E8), fast keine starken Schatten | Materialunschärfe (Transluzenz) + gruppierte Listen + Inhalt überlagert UI | Tonüberlagerung (Tonal Overlay) priorisiert, Schatten sekundär | Material (Mica / Acrylic) + dezente mehrschichtige Schatten | | Bewegung | Leicht, mit elastischem Zurückfedern, 200–300ms | Federphysik, 200–300ms, kein linear | Betonungskurve cubic-bezier(0.2,0,0,1), abgestuft nach Zeit-Token | Schnell und dezent, 150–250ms, easyEase | | Berührungs-/Klickziele | ≥ 48dp | ≥ 44×44pt | ≥ 48dp | Steuerelementhöhe 32px (kompakt/komfortabel) | | Charakter (ein Satz) | Rund, durchscheinend, blaue Tech-Ästhetik | Zurückhaltend, viel Weißraum, Inhalt zuerst | Ausdrucksstarke Farben, Schichtung durch Töne | Produktivität, Klarheit, Desktop-nativ |

Arbeitsablauf

Schritt 1 · Stil festlegen. Benutzer hat einen Stil angegeben → direkt verwenden. Nicht angegeben → Lesen Sie references/style-router.md, geben Sie einen empfohlenen und einen alternativen Stil basierend auf Produkttyp/Plattform/Dichte an und lassen Sie den Benutzer bestätigen.

Schritt 2 · Tokens lesen. Öffnen Sie das entsprechende Referenzdokument. Lesen Sie alle Farben, Schriftgrößen, Abstände, Radien, Schatten und Bewegungskurven durch, bevor Sie beginnen – verlassen Sie sich nicht auf Ihr Gedächtnis:

  • MIUIX / HyperOS → references/miuix-hyperos.md
  • Apple HIG → references/apple-hig.md
  • Material Design 3 → references/material-design-3.md
  • Fluent 2 → references/fluent-2.md

Schritt 3 · Tokens anwenden. Kopieren Sie direkt assets/tokens/<style>.css als semantische Token-Schicht (enthält bereits beide Themen Hell/Dunkel). Schreiben Sie keine Hex-Werte in Ihre Komponenten-Stile. Der Dark-Mode wird über [data-theme="dark"] oder prefers-color-scheme umgeschaltet.

Schritt 4 · Komponenten bauen. Implementieren Sie die Komponenten gemäß den Spezifikationen des gewählten Stils in references/components-playbook.md (Button-Varianten, Eingabefelder, Karten, Navigation, Dialoge, Schalter, Listen). Jeder Interaktionszustand (Hover / Focus / Pressed / Selected / Disabled) muss vorhanden sein – nicht nur der Standardzustand.

Schritt 5 · Animationen + Selbstprüfung. Fügen Sie Übergänge gemäß references/motion-and-accessibility.md hinzu, führen Sie dann python3 scripts/lint_tokens.py <artefakt> --style <stil> aus und gehen Sie die Selbstprüfliste durch (siehe unten).

Eiserne Regeln

  1. Stile nicht mischen. Wenn Sie sich für Fluent entschieden haben, verwenden Sie kein #007AFF von iOS, keinen Pill-FAB von Material oder die großen Eckenradien von HyperOS. Vermischung ist der häufigste Fehler.
  2. Tokens zuerst. Im Komponenten-CSS dürfen nur var(--xxx) vorkommen, keine Literal-Farben, -Schriftgrößen oder -Radienwerte.
  3. Hell- und Dunkelmodus zusammen erstellen. Alle vier Systeme haben offizielle Dunkelwerte – schlagen Sie diese direkt nach, verwenden Sie keine filter: invert- oder manuelle Abdunkelungs-Tricks.
  4. Plattformkonventionen sind unantastbar. Z.B. iOS minimale Klickfläche 44pt, Material State-Layer-Transparenz, Fluent 1px unterer Strich bei Steuerelementen, HyperOS dunkler Hintergrund #242424 (nicht reines Schwarz).
  5. Barrierefreiheit ist Pflicht. Körpertext-Kontrast ≥ 4.5:1, UI-Elemente ≥ 3:1, Fokusringe müssen sichtbar sein, prefers-reduced-motion respektieren.
  6. Chinesisches Layout separat behandeln. Roboto / Segoe UI / SF Pro haben keine vollständigen chinesischen Glyphen – für chinesische Oberflächen muss auf Schriftarten wie PingFang / Source Han Sans / MiSans zurückgegriffen werden, und der Zeichenabstand (letter-spacing) muss reduziert werden (lateinischer Abstand ist für Chinesisch ungeeignet).

Lieferumfang

  • Standardmäßig wird ein ausführbares HTML (inline <style> + <script> ) erzeugt, Tokens werden als :root-CSS-Variablen organisiert, damit der Benutzer die Seite direkt ansehen und kopieren kann.
  • Wenn der Benutzer ein bestimmtes Framework angibt, wechseln Sie entsprechend den Regeln in references/framework-mappings.md: Tailwind verwendet assets/mappings/tailwind.css; React/Vue verwenden ein Token-Objekt + CSS-Variablen; Compose bevorzugt offizielle Bibliotheken (MIUIX mit MiuixTheme, M3 mit MaterialTheme).
  • Eine Demo-Seite mit Komponenten finden Sie unter assets/templates/showcase.html (gleiche Komponenten in vier Stilen nebeneinander, mit schaltbarem Thema und Hell/Dunkel-Modus).
  • Nach der Erstellung muss die Prüfung ausgeführt werden: python3 scripts/lint_tokens.py <ausgabedatei> --style <stil>. Wenn eine der drei Prüfungen (hartcodierte Farben / Kontrast / Kern-Token-Vollständigkeit) nicht bestanden wird, korrigieren Sie sie, bevor Sie ausliefern.
  • Geben Sie bei der Auslieferung an: welches System verwendet wurde, welche bewussten Abweichungen es gibt, wie der Dark-Mode umgeschaltet wird und wie der Font-Fallback-Stack aussieht.

Selbstprüfliste

Gehen Sie nach Fertigstellung Punkt für Punkt durch. Korrigieren Sie, wenn etwas nicht zutrifft:

  • Alle Farben aus Tokens, keine hartcodierten Hex-Werte
  • Schrifthierarchie nicht mehr als 4 Stufen, Basis-Schriftgröße entspricht dem System
  • Eckenradius-System konsistent (verschachtelte Radien = äußerer Radius − innerer Abstand)
  • Schatten-/Materialverwendung entspricht dem System (Material verwendet Tonüberlagerung, Fluent Mica/Acrylic, iOS unscharfes Material, HyperOS Farbstufen)
  • Alle Interaktionszustände vorhanden: Hover / Focus-Visible / Active / Disabled / Selected
  • Hell- und Dunkelmodus getestet
  • Klickzielgrößen erfüllt
  • Kontrast erfüllt, Fokusringe sichtbar
  • prefers-reduced-motion reduziert Animationen
  • Chinesischer Font-Fallback korrekt, Zeichenabstand angepasst
  • Keine Vermischung mit anderen Systemen

Referenzdateien

DateiInhalt
references/style-router.mdEntscheidungsbaum für die Stilauswahl, Vergleichsmatrix, Verbotszonen für Mischungen
references/miuix-hyperos.mdVollständige MIUIX-Token-Tabelle + HyperOS-Visual-Eigenschaften + Komponentenspezifikationen
references/apple-hig.mdVollständige Systemfarbtabelle + Dynamic Type 12 Stufen + Material + Komponentenspezifikationen
references/material-design-3.md29 Farbrollen Hell/Dunkel komplett + 15-stufige Schriftgrößenleiter + Formen/Höhen/State-Layers
references/fluent-2.mdNeutrale/Markenfarbstufen + Type Ramp + Steuerelementgrößen + Mica/Acrylic + Schatten-Token
references/components-playbook.mdStilspezifische Implementierungsspezifikationen für Buttons/Eingabe/Karten/Navigation/Dialoge/Schalter/Listen
references/motion-and-accessibility.mdBewegungskurven und -dauern der vier Systeme, Barrierefreiheitsanforderungen, Prüfliste
references/framework-mappings.mdToken-Mapping-Regeln für Tailwind / React / Vue / Compose / SwiftUI
scripts/lint_tokens.pyAusführbare Prüfung: hartcodierte Farben, Kontrast, Vollständigkeit der Kern-Tokens
assets/mappings/tailwind.cssTailwind v4 @theme-Token-Mapping, vier Systeme können auf einer Seite koexistieren

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