스킬 frontend-aesthetics
🎨

frontend-aesthetics

안전 🌐 네트워크 접근📁 파일 시스템 액세스

Gestalten Sie unverwechselbare Frontends mit ästhetischer Anleitung

또한 다음에서 사용할 수 있습니다: Barnhardt-Enterprises-Inc

KI-Assistenten erzeugen oft generische, visuell langweilige Frontends, die Nutzer als 'KI-Einheitsbrei' bezeichnen. Diese Skill bietet Designanleitung für Typografie, Farbschemata, Bewegung und Hintergründe, um unverwechselbare, ausgefeilte Oberflächen zu schaffen, die herausstechen.

지원: Claude Codex Code(CC)
⚠️ 68 나쁨
1

스킬 ZIP 다운로드

2

Claude에서 업로드

설정 → 기능 → 스킬 → 스킬 업로드로 이동

3

토글을 켜고 사용 시작

테스트해 보기

"frontend-aesthetics" 사용 중입니다. Design a login page for a productivity app

예상 결과:

  • Typografie: Verwenden Sie eine charaktervolle Serifenschrift wie Playfair Display für Überschriften, kombiniert mit einer klaren Sans-Serif für Fließtext
  • Farbe: Dunkle Türkisbasis mit korallenfarbenen Akzent-Buttons, Vermeidung des klischeehaften Lila-Verlaufs auf Weiß
  • Hintergrund: Subtiler Mesh-Verlauf, der Tiefe hinzufügt, ohne abzulenken
  • Bewegung: Gestaffelte Einblendung für Formularelemente, sanfter Button-Hover-Effekt

"frontend-aesthetics" 사용 중입니다. Create a dashboard interface for a data visualization tool

예상 결과:

  • Typografie: Space Grotesk für Überschriften, Inter für Datentabellen - erzeugt ein technisches, aber zugängliches Gefühl
  • Farbe: Dunkles Theme mit elektrisch blauen Akzenten, hoher Kontrast für Datenlesbarkeit
  • Hintergrund: Radialer Verlauf hinter dem Hauptinhaltsbereich fügt Tiefe hinzu, ohne mit Diagrammen zu konkurrieren
  • Bewegung: Sanfte Diagramm-Ladeanimationen, subtile Hover-Zustände auf Datenkarten

보안 감사

안전
v5 • 1/16/2026

This is a pure prompt-based skill containing only design guidance instructions. All 54 static findings are false positives: hash identifiers (SHA256) were misclassified as weak cryptographic algorithms, and generic words describing design patterns (converge, orchestrated, distributed) were misidentified as C2 keywords and reconnaissance activity. The skill has no executable code, network access, file system access, or command execution capabilities.

2
스캔된 파일
195
분석된 줄 수
2
발견 사항
5
총 감사 수

위험 요인

🌐 네트워크 접근 (1)
skill-report.json:6
📁 파일 시스템 액세스 (1)
skill-report.json:6
감사자: claude 감사 이력 보기 →

품질 점수

38
아키텍처
100
유지보수성
87
콘텐츠
19
커뮤니티
100
보안
83
사양 준수

만들 수 있는 것

Verbesserung des visuellen App-Designs

Verwandeln Sie einfache Oberflächen in ausgefeilte, unverwechselbare Frontends mit durchdachter Typografie und Bewegung

Schnelle Design-Iterationen

Erstellen Sie designorientierte Frontend-Mockups mit kreativen ästhetischen Entscheidungen und konsistentem Theming

Verbesserung der UI-Konsistenz

Wenden Sie professionelle Designprinzipien an, um eine stimmige visuelle Sprache über alle Komponenten hinweg sicherzustellen

이 프롬프트를 사용해 보세요

Grundlegende Frontend-Verfeinerung 
Design a frontend for [describe your application]. Focus on distinctive typography, a cohesive color palette with strong accents, and purposeful animations.
Theme-Erstellung 
Create a frontend design for [use case] with a [specific aesthetic, e.g., retro terminal, modern minimal, brutalist] theme. Include CSS variables for colors and font choices.
Fokus auf Animation 
Design a frontend with an emphasis on motion. Include page load animations, staggered reveals, and micro-interactions. Prefer CSS-only solutions.
Atmosphärische Hintergründe 
Design a frontend with atmospheric backgrounds for [context]. Use layered gradients, geometric patterns, or contextual effects that match the overall aesthetic.

모범 사례

  • Wählen Sie Schriftarten bewusst - unverwechselbare Entscheidungen wie Space Grotesk oder charaktervolle Serifenschriften übertreffen generische Standards
  • Verpflichten Sie sich zu stimmigen Themes mit dominanten Farben und scharfen Akzenten anstelle zurückhaltender, gleichmäßig verteilter Paletten
  • Konzentrieren Sie Animationen auf wirkungsvolle Momente wie Seitenlade-Sequenzen statt auf verstreute Mikro-Interaktionen

피하기

  • Verwendung überstrapazierter Schriftarten wie Inter, Roboto, Arial oder Systemschriften ohne absichtsvolles Styling
  • Standardmäßige Verwendung von Lila-Verläufen auf weißen Hintergründen oder anderen klischeehaften KI-generierten Ästhetiken
  • Erstellung vorhersehbarer, schablonenhafter Layouts, denen kontextspezifischer Charakter oder kreative Vision fehlt

자주 묻는 질문

Welche Plattformen unterstützen diese Skill?
Diese Skill funktioniert mit Claude Code. Sie könnte auch mit anderen Claude-basierten Produkten funktionieren, die benutzerdefinierte Skills unterstützen.
Schreibt diese Skill tatsächlichen Code?
Nein. Diese Skill bietet Designanleitung und Empfehlungen. Die KI schlägt Ansätze vor, während Sie den Implementierungscode schreiben.
Welche Schriftempfehlungen gibt sie?
Die Skill vermeidet generische Schriftarten wie Arial und Inter. Sie empfiehlt unverwechselbare Auswahlmöglichkeiten wie Playfair Display, Space Grotesk oder andere charaktervolle Schriftarten.
Sind mein Code und meine Designdaten sicher?
Ja. Diese prompt-basierte Skill hat keinen Dateisystemzugriff, keine Netzwerkanrufe und keine Codeausführungsfähigkeiten. Sie bietet nur Designanleitung.
Warum sehen meine KI-generierten Frontends generisch aus?
KI-Assistenten konvergieren auf gemeinsame, sichere Entscheidungen. Diese Skill wirkt dieser Tendenz entgegen, indem sie kreative, unverwechselbare ästhetische Entscheidungen fördert.
Wie unterscheidet sich diese von anderen Design-Skills?
Diese Skill zielt speziell auf 'KI-Einheitsbrei'-Ästhetik ab, indem sie bewusste kreative Entscheidungen anstelle von Standardmustern erfordert.

개발자 세부 정보

라이선스

MIT

리포지토리

https://github.com/Crossbill-Highlights/crossbill-web/tree/main/.claude/skills/frontend-aesthetics

참조

main

파일 구조

📄 SKILL.md