Zum Hauptinhalt springen

Frontend Design

Skill Verifiziert Aktiv

Erstellen Sie unverwechselbare Frontend-Oberflächen in Produktionsqualität mit hoher Designqualität. Verwenden Sie diese Fähigkeit, wenn der Benutzer auffordert, Webkomponenten, Seiten oder Anwendungen zu erstellen. Generiert kreativen, polierten Code, der generische KI-Ästhetik vermeidet.

Zweck

Erstellung unverwechselbarer Frontend-Oberflächen in Produktionsqualität mit hoher Designqualität, insbesondere wenn Benutzer Webkomponenten, Seiten oder Anwendungen anfordern, die generische KI-Ästhetik vermeiden.

Funktionen

  • Generiert hochwertigen Frontend-Code
  • Konzentriert sich auf unverwechselbare ästhetische Ausrichtung
  • Vermeidet generische KI-Ästhetik
  • Bietet detaillierte Designrichtlinien
  • Unterstützt verschiedene Frontend-Technologien (HTML/CSS/JS, React, Vue)

Anwendungsfälle

  • Erstellung einzigartiger Webkomponenten mit spezifischen Designanforderungen
  • Erstellung polierter und einprägsamer Frontend-Seiten oder -Anwendungen
  • Wenn ein Projekt eine starke, intentionale ästhetische Vision über typische KI-Ausgaben hinaus erfordert
  • Generierung von Code, der Typografie, Farbe, Bewegung und räumliche Komposition betont

Nicht-Ziele

  • Generierung generischer oder klischeehafter KI-Designs
  • Erstellung von Code ohne eine kohärente ästhetische Haltung
  • Standardmäßige Verwendung gängiger oder überstrapazierter Designmuster und Schriftarten

Workflow

  1. Verstehen der Benutzeranforderungen (Komponente, Seite, Anwendung).
  2. Definition der konzeptionellen Richtung (Zweck, Ton, Einschränkungen, Differenzierung).
  3. Festlegung einer BOLDEN ästhetischen Richtung.
  4. Implementierung von funktionsfähigem Code (HTML/CSS/JS, React, Vue) mit Liebe zum Detail.
  5. Verfeinerung von Typografie, Farbe, Bewegung, räumlicher Komposition und visuellen Details.

Praktiken

  • Code-Generierung
  • Frontend-Entwicklung
  • UI/UX-Design
  • Ästhetische Verfeinerung

Installation

npx skills add digitalsamba/claude-code-video-toolkit

Führt das Vercel skills CLI (skills.sh) via npx aus — benötigt Node.js lokal und mindestens einen installierten skills-kompatiblen Agent (Claude Code, Cursor, Codex, …). Setzt voraus, dass das Repo dem agentskills.io-Format folgt.

Qualitätspunktzahl

Verifiziert
99 /100
Analysiert 2 days ago

Vertrauenssignale

Letzter Commit4 days ago
GitHub-Inhaber digitalsamba (opens in new tab)
Sterne1.1k
LizenzMIT
Status
Quellcode ansehen

Ähnliche Erweiterungen

Angular Developer

100

Generiert Angular-Code und bietet architektonische Anleitungen. Auslösen bei der Erstellung von Projekten, Komponenten oder Diensten oder für Best Practices zur Reaktionsfähigkeit (Signale, linkedSignal, Ressource), Formulare, Dependency Injection, Routing, SSR, Barrierefreiheit (ARIA), Animationen, Styling (Komponentenstile, Tailwind CSS), Tests oder CLI-Tools.

Skill
angular

Type Audit

100

Typography-only audit covering font selection, type scale, readability, hierarchy, performance

Skill
Aboudjem

Component Audit

100

Component consistency audit covering state coverage, hierarchy, patterns

Skill
Aboudjem

Ui Ux Pro Max

100

UI/UX design intelligence with searchable style, palette, typography, and chart databases. Use when designing UI components, choosing colors/fonts, reviewing code for UX issues, building landing pages, or implementing responsive layouts.

Skill
spartan-stratos

Layout Audit

100

Layout and spacing audit covering grid, spacing consistency, density, responsive behavior

Skill
Aboudjem

A11y Audit

100

Accessibility audit covering WCAG 2.2, contrast, focus, keyboard, screen reader, touch targets

Skill
Aboudjem