Habilidades ui-design-system
🎨

ui-design-system

Seguro 🌐 Acceso a red📁 Acceso al sistema de archivos⚙️ Comandos externos

Konsistente UI-Design-Muster anwenden

También disponible en: 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.

Soporta: Claude Codex Code(CC)
📊 69 Adecuado
1

Descargar el ZIP de la skill

2

Subir en Claude

Ve a Configuración → Capacidades → Skills → Subir skill

3

Activa y empieza a usar

Pruébalo

Usando "ui-design-system". Einen Button nach dem Designsystem erstellen

Resultado esperado:

  • 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

Usando "ui-design-system". Eine Kartenkomponente gestalten

Resultado esperado:

  • 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)

Usando "ui-design-system". Animationsrichtlinien abrufen

Resultado esperado:

  • Ü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

Auditoría de seguridad

Seguro
v5 • 1/16/2026

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.

2
Archivos escaneados
74
Líneas analizadas
3
hallazgos
5
Auditorías totales

Factores de riesgo

🌐 Acceso a red (1)
skill-report.json:6
📁 Acceso al sistema de archivos (1)
skill-report.json:6
⚙️ Comandos externos (15)
SKILL.md:18 SKILL.md:19 SKILL.md:20 SKILL.md:21 SKILL.md:25 SKILL.md:25 SKILL.md:26 SKILL.md:30 SKILL.md:30 SKILL.md:31 SKILL.md:31 SKILL.md:31 SKILL.md:34 SKILL.md:35 SKILL.md:36
Auditado por: claude Ver historial de auditorías →

Puntuación de calidad

38
Arquitectura
100
Mantenibilidad
87
Contenido
23
Comunidad
100
Seguridad
83
Cumplimiento de la especificación

Lo que puedes crear

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.

Prueba estos prompts

Typografie-Regeln abrufen 
Was sind die Typografie-Regeln für dieses Designsystem? Schriftfamilie, Schriftstärken und Nutzungsrichtlinien einbeziehen.
Farbpalette anwenden 
Die Dunkelmodus-Farbpalette zum Gestalten eines neuen Abschnitts anwenden. Hintergrundverlauf, Akzentfarben und Textfarben einbeziehen.
Glassmorphism-Karte erstellen 
Eine Glassmorphism-Kartenkomponente erstellen. Unschärfe-Effekt, Transparenz, abgerundete Ecken und Schattentiefe einbeziehen.
Sanfte Animationen implementieren 
Sanfte Hover-Übergänge und Keyframe-Animationen zu einem Dropdown-Menü hinzufügen. Cubic-Bezier-Easing für ein hochwertiges Gefühl verwenden.

Mejores prácticas

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

Evitar

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

Preguntas frecuentes

Welche KI-Tools unterstützen diese Skill?
Diese Skill funktioniert mit Claude, Codex und Claude Code für Design-Beratung.
Welche Schriftart verwendet dieses Designsystem?
Poppins geometrische Sans-Schriftart mit den Stärken 400, 500, 600 und 700.
Kann ich dies für Hellmodus-Schnittstellen verwenden?
Dieses Designsystem ist für den Dunkelmodus mit türkis-Akzentfarben optimiert. Der Hellmodus wird nicht abgedeckt.
Sind meine Daten bei der Verwendung dieser Skill sicher?
Ja. Diese Skill liest nur Dokumentation. Es erfolgt keine Code-Ausführung oder Netzwerkzugriff.
Wie integriere ich mich mit Tailwind CSS?
Das Designsystem definiert globale Variablen in app/globals.css und Tailwind-Konfiguration.
Wie unterscheidet sich dies von anderen Designs?
Dieses System konzentriert sich auf Physical AI-Ästhetik mit Glassmorphism, dunklen Verläufen und türkis-Akzentfarben.

Detalles del desarrollador

Licencia

MIT

Repositorio

https://github.com/AbdulSamad94/Hackhaton-SpecsKitPlus/tree/master/.claude/skills/ui-design

Ref.

master

Estructura de archivos

📄 SKILL.md