ui-design-system
Konsistente UI-Design-Muster anwenden
也可從以下取得: davila7,alirezarezvani
Teams benötigen klare Design-Regeln, um kohärente Schnittstellen zu erstellen. Diese Skill bietet ein vollständiges Designsystem mit Typografie, Farben, Komponenten und Animationen für moderne dunkel-themige Anwendungen.
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「ui-design-system」。 Einen Button nach dem Designsystem erstellen
預期結果:
- Button-Stil: Abgerundete Ecken mit sanften Hover-Übergängen
- Primärfarbe: #2d7d6c (Türkis/Grünlich)
- Hintergrundverlauf: #1a1f28 bis #0f1419
- Textfarbe: #ededed (Hellweiß)
- Rand: Subtiles rgba(255, 255, 255, 0.1)
- Übergang: all 0.2s ease mit subtilen Schatten
正在使用「ui-design-system」。 Eine Kartenkomponente gestalten
預期結果:
- Karten-Effekt: Glassmorphism mit Unschärfe 8-12px
- Hintergrund: rgba(255, 255, 255, 0.05) mit Transparenz
- Ecken: 12px bis 16px abgerundet
- Schatten: Subtile Tiefe für Schwebe-Effekt
- Rand: 1px solid rgba(255, 255, 255, 0.1)
正在使用「ui-design-system」。 Animationsrichtlinien abrufen
預期結果:
- Übergangszeit: 0.2s ease oder cubic-bezier für hochwertiges Gefühl
- Keyframe-Animationen: fadeIn, slideIn, dropdownSlideIn
- Konsistentes Easing bei allen interaktiven Elementen verwenden
- Subtile Skalierung auf Hover für Buttons und Karten anwenden
安全審計
安全Both files are pure documentation with no executable code. Static findings are false positives: hex color codes and hash strings were misidentified as weak cryptographic algorithms; markdown backticks for inline code were misidentified as shell execution; source URL is legitimate marketplace metadata.
風險因素
🌐 網路存取 (1)
📁 檔案系統存取 (1)
品質評分
你能建構什麼
Konsistente UI-Komponenten erstellen
Designsystem-Regeln beim Programmieren von Buttons, Karten, Eingaben und anderen UI-Elementen für dunkel-themige Anwendungen anwenden.
Design-Standards definieren
Konsistente Typografie, Farben und Komponenten-Stile für ein Designsystem eines Produktteams festlegen.
Markenkohärenz wahren
Sicherstellen, dass alle Schnittstellen-Elemente derselben visuellen Sprache mit definierten Verläufen, Schatten und Animationen folgen.
試試這些提示
Was sind die Typografie-Regeln für dieses Designsystem? Schriftfamilie, Schriftstärken und Nutzungsrichtlinien einbeziehen.
Die Dunkelmodus-Farbpalette zum Gestalten eines neuen Abschnitts anwenden. Hintergrundverlauf, Akzentfarben und Textfarben einbeziehen.
Eine Glassmorphism-Kartenkomponente erstellen. Unschärfe-Effekt, Transparenz, abgerundete Ecken und Schattentiefe einbeziehen.
Sanfte Hover-Übergänge und Keyframe-Animationen zu einem Dropdown-Menü hinzufügen. Cubic-Bezier-Easing für ein hochwertiges Gefühl verwenden.
最佳實務
- Poppins-Schriftart mit den Stärken 400, 500, 600 und 700 für konsistente Typografie bei allen Text-Elementen verwenden.
- Den dunklen Hintergrundverlauf und türkis-Akzentfarben anwenden, um visuelle Konsistenz in der gesamten Anwendung zu gewährleisten.
- Glassmorphism-Effekte mit Unschärfe, Transparenz und abgerundeten Ecken für Karten und schwebende Elemente implementieren.
避免
- Serif-Schriften mit der geometrischen Sans-Schriftart Poppins zu mischen, zerstört visuelle Hierarchie und Markenkonsistenz.
- Helle oder saturierte Akzentfarben statt des definierten Türkis #2d7d6c zu verwenden, erzeugt visuelle Dissonanz.
- Scharfe Ecken an Buttons und Karten statt 12px bis 16px abgerundete Ecken zu verwenden, unterminiert die moderne Ästhetik.