Haizhucodex Design Skill

Was macht Haizhucodex Design Skill?

Erstelle polierte Frontend-Erlebnisse mit einer klaren visuellen These, einem nutzbaren Interaktionsmodell, barrierefreien Komponenten, zurückhaltender Bewegung und geprüfter Implementierungsqualität.

Betriebsmodi

Wähle einen Modus basierend auf Anfrage und Projektstatus:

• Design: Etabliere Hierarchie, visuelle Richtung, Tokens, Komponenten, Zustände und Bewegung vor der Implementierung.
• Build: Implementiere eine gelieferte Kurzbeschreibung, einen Screenshot, einen Mockup oder ein bestehendes Designsystem im aktuellen Frontend-Stack.
• Redesign: Bewahre das Produktverhalten, verbessere dabei Hierarchie, Branding, Responsivität, Barrierefreiheit und wahrgenommene Qualität.
• Audit: Prüfe eine bestehende Oberfläche, reihe Probleme nach Auswirkungen ein und behebe die wertvollsten Probleme.
• Designsystem: Erstelle oder verfeinere DESIGN.md, Tokens, Komponentenregeln, Bewegungsregeln und wiederverwendbare Muster.

Kern-Workflow

1. Prüfe das Repository vor der Bearbeitung. Identifiziere Framework, Paketmanager, Routen, Komponenten, Styling-System, Tokens, Abhängigkeiten, Build-Befehle und Projekt-Konventionen.
2. Extrahiere ein kompaktes Design-Briefing, das Produkttyp, Zielgruppe, Primäraufgabe, Inhaltshierarchie, Markenattribute, Plattform, responsive Ziele, Barrierefreiheitsanforderungen und technische Einschränkungen enthält.
3. Wähle eine visuelle These aus. Definiere Typografie-Charakter, Farbverhalten, Dichte des Abstands, Formsprache, Erhebung, Bildsprache und Bewegungshierarchie.
4. Leite die Arbeit durch die fünf spezialisierten Fähigkeiten, sofern verfügbar:
   • UI UX Pro Max: Produktkategorie-spezifische UX-Muster, Informationsarchitektur, Palette- und Typografie-Optionen, Plattform-Konventionen und Barrierefreiheitsbeschränkungen.
   • Design MD Collection: Designsprache auf Projektebene, Tokens, wiederverwendbare Komponentenregeln und Anleitung zur DESIGN.md.
   • Taste Skill: Komposition, Differenzierung, visuelles Urteilsvermögen, anti-generische Einschränkungen und künstlerische Leitung.
   • shadcn: Barrierefreie React-Primitive, Komponenten-APIs, Formulare, Overlays, Navigation, Datenanzeige und Zustände.
   • Impeccable: Finale Prüfung, die Hierarchie, Typografie, Abstände, Poliertheit, Responsivität und Barrierefreiheit abdeckt.
5. Lese references/prompt-library.md. Wähle nur die Quellmuster aus, die einem bestimmten Produkt- oder Interaktionsziel dienen.
6. Erstelle eine Implementierungskarte, die Seitenabschnitte, wiederverwendbare Komponenten, Inhaltszustände, responsives Verhalten, Interaktionen, Animationsverantwortung, Verhalten bei reduzierter Bewegung und Verifikationsbefehle abdeckt.
7. Implementiere direkt im bestehenden Stack. Verwende bestehende Abhängigkeiten und Konventionen wieder, es sei denn, eine neue Abhängigkeit bietet einen klaren Mehrwert.
8. Überprüfe die Zustände Laden, Leer, Fehler, Deaktiviert, Hover, Fokus, Aktiv, Ausgewählt, Erfolg und Destruktiv, wo zutreffend.
9. Teste Tastaturnavigation, Fokussichtbarkeit, semantische Struktur, Kontrast, Touch-Ziele, responsives Layout, Laufzeitfehler und prefers-reduced-motion.
10. Führe Formatierung, Linting, Typecheck, Tests und Produktionsbuild aus. Behebe Fehler, die durch die Arbeit entstanden sind.
11. Führe eine finale Kritik im Impeccable-Stil durch und behebe die restlichen Probleme mit der höchsten Auswirkung.

Muster-Auswahlregeln

• Verwende Motion Sites für Scroll-Narrative, redaktionelle Übergänge, Launch-Seiten, Portfolios und immersive Hero-Bereiche.
• Verwende React Bits für wiederverwendbare React-Animations-Primitive, animierten Text, Listen, Karten, Hintergründe und Übergänge.
• Verwende Uiverse für fokussierte Steuerelemente und Mikrointeraktionen wie Buttons, Eingabefelder, Umschalter, Ladezustände und Tooltips.
• Verwende Anime.js für koordinierte Zeitlinien, SVG-Sequenzen, gestaffelte Animationen und zustandsgesteuerte Bewegung, die CSS allein nicht sauber ausdrücken kann.
• Verwende Aceternity UI für hochwertige React-Landingpage-Kompositionen, Feature-Showcases, Navigation, Karten und atmosphärische Hintergründe.

Staple keine Signatur-Effekte nur, weil sie verfügbar sind. Jeder Effekt muss Hierarchie, Feedback, Orientierung, Geschichtenerzählen oder Verständnis unterstützen.

Design-Leitplanken

• Etabliere eine dominante visuelle Idee und wende sie konsistent an.
• Priorisiere Aufgabenabschluss und Informationsarchitektur vor Dekoration.
• Vermeide generisches, verlaufslastiges KI-Styling, übermäßigen Glas-Morphismus, zufällig schwebende Karten, ornamentale Diagramme, einheitlich abgerundete Rechtecke und Animation auf jedem Element.
• Beschränke prominente Schriftarten, Akzentfarben, Erhebungsebenen, Rahmenradien und Bewegungsfamilien.
• Verwende semantisches HTML und barrierefreie Komponenten-Primitive.
• Behandle Mobilgeräte als bewusste Komposition und nicht als komprimiertes Desktop-Layout.
• Bevorzuge CSS-Übergänge für einfache Zustandsänderungen und führe JavaScript-Animation nur ein, wenn Koordination oder Ablaufsteuerung dies erfordern.
• Animiere, wo möglich, Transformationen und Deckkraft. Vermeide Layout-Thrashing und unnötige kontinuierliche Animationen.
• Bewahre lesbaren Inhalt vor der Hydratation und wenn Animation deaktiviert ist.
• Respektiere externe Lizenzen. Verwende dokumentierte APIs oder Installationsmethoden und verteile keine Drittanbieter-Quellen ohne Erlaubnis weiter.

Abhängigkeitsrichtlinie

Bevor du ein Paket hinzufügst:

1. Überprüfe, ob das Projekt bereits eine äquivalente Abhängigkeit enthält.
2. Bestätige die Kompatibilität von Framework, Rendering-Modell und Version.
3. Erkläre, warum CSS oder vorhandene Hilfsmittel nicht ausreichen.
4. Installiere mit dem Paketmanager des Repositorys.
5. Halte Importe schmal und entferne ungenutzte Experimente.
6. Dokumentiere die Abhängigkeit und ihren Zweck in der abschließenden Zusammenfassung.

Wenn eine genannte Fähigkeit oder Bibliothek nicht verfügbar ist, übernimm ihre Rolle direkt und fahre fort. Blockiere die routinemäßige Implementierung nicht aufgrund einer optionalen Integration.

Erforderliche Ergebnisse

Für reine Design-Arbeit, gib zurück:

1. Design-Briefing.
2. Visuelle These.
3. Seiten- und Komponentenarchitektur.
4. Token- und Typografie-Richtung.
5. Bewegungsplan.
6. Responsive und Barrierefreiheitsanforderungen.

Für Implementierungsarbeit, gib zurück:

1. Gewählte Richtung und Begründung.
2. Geänderte Dateien und wichtige Komponentenentscheidungen.
3. Bewegungs- und Interaktionsverhalten.
4. Barrierefreiheits- und Responsivitätsprüfung.
5. Ausgeführte Befehle und Ergebnisse.
6. Hinzugefügte Abhängigkeiten.
7. Verbleibende Annahmen oder Kompromisse.