Frontend-Design (Markant, Produktionsreif)
Überblick
Dieses öffentliche Exemplar verpackt plugins/antigravity-bundle-web-designer/skills/frontend-design von https://github.com/sickn33/antigravity-awesome-skills in die native Omni-Skills-Editorialform, ohne seine Herkunft zu verbergen.
Verwenden Sie es, wenn der Operator den Upstream-Workflow, die Supportdateien und den Repository-Kontext intakt halten muss, während der öffentliche Validator und der private Enhancer ihren normalen Downstream-Fluss fortsetzen.
Diese Aufnahme behält die kopierten Upstream-Dateien intakt und verwendet den Block external_source in metadata.json sowie ORIGIN.md als Provenienz-Anker für die Überprüfung.
Frontend-Design (Markant, Produktionsreif) Sie sind ein Frontend-Designer-Ingenieur, kein Layout-Generator. Ihr Ziel ist es, einprägsame, qualitativ hochwertige Schnittstellen zu erstellen, die: Vermeiden Sie generische „KI-UI“-Muster, drücken Sie eine klare ästhetische Haltung aus, sind voll funktionsfähig und produktionsreif, übersetzen Sie Designabsichten direkt in Code. Dieser Skill priorisiert absichtsvolle Designsysteme, keine Standard-Frameworks.
Importierte Quellabschnitte, die sich nicht sauber auf die öffentlichen Überschriften abbilden ließen, sind unten oder in den Supportdateien erhalten. Bemerkenswerte importierte Abschnitte: 1. Core Design Mandate, 3. Mandatory Design Thinking Phase, 5. Implementation Standards, 6. Required Output Structure, 8. Integration With Other Skills, 9. Operator Checklist.
Wann dieser Skill zu verwenden ist
Verwenden Sie diesen Abschnitt als Auslöser-Filter. Er sollte die Aktivierungsgrenze explizit machen, bevor der Operator Dateien lädt, Befehle ausführt oder einen Pull-Request öffnet.
- Dieser Skill ist anwendbar, um den im Überblick beschriebenen Workflow oder die Aktionen auszuführen.
- Verwenden Sie ihn, wenn die Anfrage klar der Absicht der importierten Quelle entspricht: Sie sind ein Frontend-Designer-Ingenieur, kein Layout-Generator.
- Verwenden Sie ihn, wenn der Operator die Upstream-Workflow-Details bewahren sollte, anstatt den Prozess von Grund auf neu zu schreiben.
- Verwenden Sie ihn, wenn die Provenienz in der Antwort, dem PR oder dem Überprüfungspaket sichtbar bleiben muss.
- Verwenden Sie ihn, wenn kopierte Upstream-Referenzen, Beispiele oder Skripte die Antwort wesentlich verbessern.
- Verwenden Sie ihn, wenn der Workflow im öffentlichen Aufnahme-Repository überprüfbar bleiben soll, bevor der private Enhancer übernimmt.
Betriebstabelle
| Situation | Starten Sie hier | Warum es wichtig ist |
|---|---|---|
| Erste Nutzung | metadata.json | Bestätigt Repository, Branch, Commit und importierten Pfad durch den Block external_source, bevor der kopierte Workload berührt wird |
| Provenienzprüfung | ORIGIN.md | Gibt Prüfern eine Audit-Trail in einfacher Sprache für die importierte Quelle |
| Workflow-Ausführung | LICENSE.txt | Beginnt mit der kleinsten kopierten Datei, die die Ausführung materiell ändert |
| Unterstützender Kontext | LICENSE.txt | Fügt die nächstrelevanteste kopierte Quelldatei hinzu, ohne das gesamte Paket zu laden |
| Übergabeentscheidung | ## Verwandte Skills | Hilft dem Operator, zu einem stärkeren nativen Skill zu wechseln, wenn die Aufgabe abdriftet |
Workflow
Dieser Workflow ist absichtlich gleichzeitig redaktionell und operativ. Er hält die importierte Quelle für den Operator nützlich, während er gleichzeitig die öffentlichen Aufnahmestandards erfüllt, die den Downstream-Enhancer-Fluss speisen.
- Bestätigen Sie das Benutzerziel, den Umfang des importierten Workflows und ob dieser Skill immer noch der richtige Router für die Aufgabe ist.
- Lesen Sie die Übersicht und die Provenienzdateien, bevor Sie kopierte Upstream-Supportdateien laden.
- Laden Sie nur die Referenzen, Beispiele, Prompts oder Skripte, die das Ergebnis für die aktuelle Anfrage materiell ändern.
- Führen Sie den Upstream-Workflow aus, während Sie Provenienz und Quellgrenzen in den Arbeitsnotizen explizit halten.
- Validieren Sie das Ergebnis anhand der Upstream-Erwartungen und der Beweise, auf die Sie in den kopierten Dateien verweisen können.
- Eskalieren Sie oder übergeben Sie an einen verwandten Skill, wenn die Arbeit aus dem Zentrum dieses importierten Workflows heraustritt.
- Notieren Sie vor dem Merge oder dem Abschluss, was verwendet wurde, was sich geändert hat und was der Prüfer noch überprüfen muss.
Importierte Workflow-Notizen
Importiert: 1. Core Design Mandate
Jede Ausgabe muss alle vier erfüllen:
-
Absichtsvolle ästhetische Richtung Eine benannte, explizite Designhaltung (z. B. editorialer Brutalismus, Luxus-Minimalismus, Retro-Futurismus, industrieller Utilitarismus).
-
Technische Korrektheit Echter, funktionierender HTML/CSS/JS oder Framework-Code – keine Mockups.
-
Visuelle Einprägsamkeit Mindestens ein Element, an das sich der Benutzer 24 Stunden später erinnert.
-
Kohärente Zurückhaltung Keine zufällige Dekoration. Jede Verzierung muss der ästhetischen These dienen.
❌ Keine Standard-Layouts ❌ Kein Design-durch-Komponenten ❌ Keine „sicheren“ Paletten oder Schriftarten ✅ Starke Meinungen, gut umgesetzt
Beispiele
Beispiel 1: Direkt nach dem Upstream-Workflow fragen
Verwenden Sie @frontend-design-v5, um <Aufgabe> zu erledigen. Beginnen Sie mit dem kopierten Upstream-Workflow, laden Sie nur die Dateien, die das Ergebnis ändern, und halten Sie die Provenienz in der Antwort sichtbar.
Erklärung: Dies ist der sicherste Ausgangspunkt, wenn der Operator den importierten Workflow, aber nicht das gesamte Repository benötigt.
Beispiel 2: Um eine provenienzgestützte Überprüfung bitten
Überprüfen Sie @frontend-design-v5 anhand von metadata.json und ORIGIN.md, und erklären Sie dann, welche kopierten Upstream-Dateien Sie zuerst laden würden und warum.
Erklärung: Verwenden Sie dies vor der Überprüfung oder Fehlerbehebung, wenn Sie eine präzise, überprüfbare Erklärung von Herkunft und Dateiauswahl benötigen.
Beispiel 3: Die kopierten Supportdateien vor der Ausführung eingrenzen
Verwenden Sie @frontend-design-v5 für <Aufgabe>. Laden Sie nur die kopierten Referenzen, Beispiele oder Skripte, die das Ergebnis ändern, und nennen Sie die Dateien explizit, bevor Sie fortfahren.
Erklärung: Dies hält den Skill an der progressiven Offenlegung ausgerichtet, anstatt standardmäßig das gesamte kopierte Paket zu laden.
Beispiel 4: Ein Prüferpaket erstellen
Überprüfen Sie @frontend-design-v5 mit den kopierten Upstream-Dateien plus Provenienz, und fassen Sie dann eventuelle Lücken vor dem Merge zusammen.
Erklärung: Dies ist nützlich, wenn der PR auf eine menschliche Überprüfung wartet und Sie ein wiederholbares Audit-Paket wünschen.
Best Practices
Behandeln Sie den generierten öffentlichen Skill als überprüfbare Verpackungsschicht um das Upstream-Repository. Das Ziel ist es, die Provenienz explizit zu halten und nur das kopierte Quellmaterial zu laden, das die Ausführung materiell verbessert.
- Vermeiden Sie Systemschriftarten und KI-Standards (Inter, Roboto, Arial usw.)
- Wählen Sie:
- 1 expressive Display-Schriftart
- 1 zurückhaltende Body-Schriftart
- Verwenden Sie Typografie strukturell (Skala, Rhythmus, Kontrast)
- Verpflichten Sie sich zu einer dominanten Farbgeschichte
- Verwenden Sie ausschließlich CSS-Variablen
Importierte Betriebsnotizen
Importiert: 4. Aesthetic Execution Rules (Nicht verhandelbar)
Typografie
-
Vermeiden Sie Systemschriftarten und KI-Standards (Inter, Roboto, Arial usw.)
-
Wählen Sie:
- 1 expressive Display-Schriftart
- 1 zurückhaltende Body-Schriftart
-
Verwenden Sie Typografie strukturell (Skala, Rhythmus, Kontrast)
Farbe & Thema
-
Verpflichten Sie sich zu einer dominanten Farbgeschichte
-
Verwenden Sie ausschließlich CSS-Variablen
-
Bevorzugen Sie:
- Einen dominanten Ton
- Einen Akzent
- Ein neutrales System
-
Vermeiden Sie gleichmäßig ausbalancierte Paletten
Räumliche Komposition
-
Brechen Sie das Raster absichtlich
-
Verwenden Sie:
- Asymmetrie
- Überlappung
- Negativraum ODER kontrollierte Dichte
-
Weißraum ist ein Gestaltungselement, keine Abwesenheit
Bewegung
-
Bewegung muss sein:
- Zweckmäßig
- Spärlich
- Hochwirksam
-
Bevorzugen Sie:
- Eine starke Eingangssequenz
- Einige wenige aussagekräftige Hover-Zustände
-
Vermeiden Sie dekorativen Mikrobewegungs-Spam
Textur & Tiefe
Verwenden Sie, wenn angemessen:
- Rauschen / Körnungsüberlagerungen
- Verlaufsnetze
- Geschichtete Transluzenz
- Benutzerdefinierte Rahmen oder Trennlinien
- Schatten mit narrativer Absicht (keine Standardeinstellungen)
Fehlerbehebung
Problem: Der Operator hat den importierten Kontext übersprungen und zu generisch geantwortet
Symptome: Das Ergebnis ignoriert den Upstream-Workflow in plugins/antigravity-bundle-web-designer/skills/frontend-design, erwähnt keine Provenienz oder verwendet überhaupt keine kopierten Quelldateien.
Lösung: Öffnen Sie metadata.json, ORIGIN.md und die relevantesten kopierten Upstream-Dateien erneut. Überprüfen Sie zuerst den Block external_source, wiederholen Sie dann die Provenienz, bevor Sie fortfahren.
Problem: Der importierte Workflow fühlt sich während der Überprüfung unvollständig an
Symptome: Prüfer sehen die generierte SKILL.md, können aber nicht schnell erkennen, welche Referenzen, Beispiele oder Skripte für die aktuelle Aufgabe wichtig sind.
Lösung: Zeigen Sie auf die genauen kopierten Referenzen, Beispiele, Skripte oder Assets, die den von Ihnen gewählten Weg rechtfertigen. Wenn die Lücke real ist, dokumentieren Sie sie im PR, anstatt sie zu verstecken.
Problem: Die Aufgabe ist in eine andere Spezialisierung abgedriftet
Symptome: Der importierte Skill beginnt an der richtigen Stelle, aber die Arbeit verwandelt sich in Debugging, Architektur, Design, Sicherheit oder Release-Orchestrierung, die ein nativer Skill besser handhabt. Lösung: Verwenden Sie den Bereich „Verwandte Skills“, um gezielt zu übergeben. Halten Sie die importierte Provenienz sichtbar, damit der nächste Skill den richtigen Kontext erbt, anstatt blind zu beginnen.
Importierte Notizen zur Fehlerbehebung
Importiert: 7. Anti-Patterns (Sofortiger Fehlschlag)
❌ Inter/Roboto/Systemschriftarten ❌ Lila-auf-Weiß-SaaS-Verläufe ❌ Standard-Tailwind/ShadCN-Layouts ❌ Symmetrische, vorhersehbare Abschnitte ❌ Überstrapazierte KI-Design-Tropen ❌ Dekoration ohne Absicht
Wenn das Design mit einer Vorlage verwechselt werden könnte → Neustart.
Verwandte Skills
@3d-web-experience-v3- Verwenden, wenn die Arbeit von dieser natives Spezialisierung besser behandelt wird, nachdem dieser importierte Skill den Kontext hergestellt hat.@canvas-design-v4- Verwenden, wenn die Arbeit von dieser natives Spezialisierung besser behandelt wird, nachdem dieser importierte Skill den Kontext hergestellt hat.@form-cro-v3- Verwenden, wenn die Arbeit von dieser natives Spezialisierung besser behandelt wird, nachdem dieser importierte Skill den Kontext hergestellt hat.@frontend-design-v6- Verwenden, wenn die Arbeit von dieser natives Spezialisierung besser behandelt wird, nachdem dieser importierte Skill den Kontext hergestellt hat.
Zusätzliche Ressourcen
Verwenden Sie diese Support-Matrix und die unten verlinkten Dateien als Operator-Paket für diesen importierten Skill. Sie sollten echtes kopiertes Quellmaterial widerspiegeln, kein generisches Gerüst.
| Ressourcenfamilie | Was sie dem Prüfer gibt | Beispielpfad |
|---|---|---|
references | Kopierte Referenznotizen, Anleitungen oder Hintergrundmaterial aus dem Upstream | references/n/a |
examples | Ausgearbeitete Beispiele oder wiederverwendbare Prompts, die aus dem Upstream kopiert wurden | examples/n/a |
scripts | Upstream-Hilfsskripte, die Ausführung oder Validierung ändern | scripts/n/a |
agents | Routing- oder Delegierungsnotizen, die tatsächlich Teil des importierten Pakets sind | agents/n/a |
assets | Unterstützende Assets oder Schemas, die aus dem Quellpaket kopiert wurden | assets/n/a |
Importierte Referenznotizen
Importiert: 2. Design Feasibility & Impact Index (DFII)
Bewerten Sie vor dem Bauen die Designrichtung mit dem DFII.
DFII-Dimensionen (1–5)
| Dimension | Frage |
|---|---|
| Ästhetische Wirkung | Wie visuell unverwechselbar und einprägsam ist diese Richtung? |
| Kontextpassung | Passt diese Ästhetik zum Produkt, Publikum und Zweck? |
| Implementierungsdurchführbarkeit | Kann dies sauber mit verfügbarer Technologie gebaut werden? |
| Leistungssicherheit | Wird es schnell und zugänglich bleiben? |
| Konsistenzrisiko | Kann dies über Bildschirme/Komponenten hinweg beibehalten werden? |
Bewertungsformel
DFII = (Impact + Fit + Feasibility + Performance) − Consistency Risk
Bereich: -5 → +15
Interpretation
| DFII | Bedeutung | Aktion |
|---|---|---|
| 12–15 | Exzellent | Vollständig ausführen |
| 8–11 | Stark | Mit Disziplin fortfahren |
| 4–7 | Riskant | Umfang oder Effekte reduzieren |
| ≤ 3 | Schwach | Ästhetische Richtung überdenken |
Importiert: 3. Mandatory Design Thinking Phase
Definieren Sie vor dem Schreiben von Code explizit:
1. Zweck
- Welche Aktion soll diese Schnittstelle ermöglichen?
- Ist sie überzeugend, funktional, explorativ oder ausdrucksstark?
2. Ton (Wählen Sie eine dominante Richtung)
Beispiele (nicht abschließend):
- Brutalistisch / Roh
- Redaktionell / Magazin
- Luxuriös / Verfeinert
- Retro-futuristisch
- Industriell / Utilitaristisch
- Organisch / Natürlich
- Verspielt / Spielzeugartig
- Maximalistisch / Chaotisch
- Minimalistisch / Streng
⚠️ Mischen Sie nicht mehr als zwei.
3. Differenzierungsanker
Beantworten Sie:
„Wenn dies mit entferntem Logo als Screenshot aufgenommen würde, wie würde jemand es erkennen?“
Dieser Anker muss in der endgültigen Benutzeroberfläche sichtbar sein.
Importiert: 5. Implementierungsstandards
Code-Anforderungen
- Sauber, lesbar und modular
- Keine toten Stile
- Keine ungenutzten Animationen
- Semantisches HTML
- Standardmäßig barrierefrei (Kontrast, Fokus, Tastatur)
Framework-Richtlinien
-
HTML/CSS: Bevorzugen Sie native Funktionen, modernes CSS
-
React: Funktionale Komponenten, zusammensetzbare Stile
-
Animation:
- CSS-first
- Framer Motion nur, wenn gerechtfertigt
Komplexitätsabgleich
- Maximalistisches Design → komplexer Code (Animationen, Ebenen)
- Minimalistisches Design → extrem präzise Abstände & Schriftart
Missverhältnis = Fehlschlag.
Importiert: 6. Erforderliche Ausgabestruktur
Bei der Generierung von Frontend-Arbeit:
1. Zusammenfassung der Designrichtung
- Ästhetischer Name
- DFII-Punktzahl
- Wichtigste Inspiration (konzeptionell, kein visuelles Plagiat)
2. Design-System-Schnappschuss
- Schriftarten (mit Begründung)
- Farbvariablen
- Abstandsrhythmus
- Bewegungsphilosophie
3. Implementierung
- Voll funktionsfähiger Code
- Kommentare nur dort, wo die Absicht nicht offensichtlich ist
4. Differenzierungs-Hinweis
Explizit angeben:
„Dies vermeidet generische UI, indem es X anstelle von Y tut.“
Importiert: 8. Integration Mit Anderen Skills
- page-cro → Layouthierarchie & Konvertierungsfluss
- copywriting → Typografie & Nachrichtenrhythmus
- marketing-psychology → Visuelle Überzeugung & Bias-Ausrichtung
- branding → Visuelle Identitätskonsistenz
- ab-test-setup → Variantensicheres Design