스킬 frontend-aesthetics
🎨
frontend-aesthetics
안전 ⚙️
외부 명령어🌐
네트워크 접근
際立ったフロントエンドデザインを作成
또한 다음에서 사용할 수 있습니다: Crossbill-Highlights
AIはしばしば汎用的で使い古されたデザインパターンに偏り、インターフェースが機械生成だと一目で分かるものになりがちです。このスキルは、タイポグラフィ、色、モーション、奥行きに関する具体的な代替案を提供し、プロフェッショナルでブランド性のあるインターフェースを実現します。
지원: Claude Codex Code(CC)
1
스킬 ZIP 다운로드
2
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
3
토글을 켜고 사용 시작
테스트해 보기
"frontend-aesthetics" 사용 중입니다. Design a submit button with hover effects
예상 결과:
- 単一のブランドアクセントカラーを使用してソリッド塗りにする
- スケール変換（hover:scale-105）とシャドウグローを追加する
- 200msのdurationで滑らかなease-outトランジションを適用する
- グラデーション、複数の主要ボタン、バウンスアニメーションは避ける
"frontend-aesthetics" 사용 중입니다. Create a dark mode card component
예상 결과:
- gray-900ではなく、真のダークとしてneutral-950背景を使用する
- 立体感のために控えめなwhite/5のボーダーを追加する
- 不透明度を抑えたブランドカラーのアクセントを含める
- ブランドカラーを使ってホバーボーダーのグローを適用する
"frontend-aesthetics" 사용 중입니다. Design a staggered list animation
예상 결과:
- 100ms刻みのCSS animation-delayを使用する
- フェードインと下からのスライドインアニメーションを組み合わせる
- 滑らかな表示のために500msのdurationを適用する
- reduced-motionのアクセシビリティ設定を考慮する
보안 감사
안전v5 • 1/16/2026
Pure documentation skill containing design guidelines and code examples. Static scanner flagged 209 false positives: 121 markdown code block delimiters misidentified as Ruby backtick execution, 80 CSS patterns misidentified as weak cryptographic algorithms, and 18 UI design terms misidentified as system reconnaissance. No executable code, network calls, file system access, or external commands present.
4
스캔된 파일
1,271
분석된 줄 수
2
발견 사항
5
총 감사 수
위험 요인
⚙️ 외부 명령어 (121)
anti-patterns.md:8-14 anti-patterns.md:14-17 anti-patterns.md:17-25 anti-patterns.md:25-28 anti-patterns.md:28-38 anti-patterns.md:38-43 anti-patterns.md:43-53 anti-patterns.md:53-56 anti-patterns.md:56-65 anti-patterns.md:65-68 anti-patterns.md:68-80 anti-patterns.md:80-83 anti-patterns.md:83-91 anti-patterns.md:91-96 anti-patterns.md:96-108 anti-patterns.md:108-111 anti-patterns.md:111-125 anti-patterns.md:125-128 anti-patterns.md:128-148 anti-patterns.md:148-153 anti-patterns.md:153-163 anti-patterns.md:163-166 anti-patterns.md:166-174 anti-patterns.md:174-177 anti-patterns.md:177-185 anti-patterns.md:185-190 anti-patterns.md:190-200 anti-patterns.md:200-203 anti-patterns.md:203-210 anti-patterns.md:210-213 anti-patterns.md:213-223 anti-patterns.md:223-228 anti-patterns.md:228-241 anti-patterns.md:241-244 anti-patterns.md:244-257 anti-patterns.md:257-262 anti-patterns.md:262-272 anti-patterns.md:272-275 anti-patterns.md:275-289 anti-patterns.md:289-294 anti-patterns.md:294-303 anti-patterns.md:303-306 anti-patterns.md:306-314 anti-patterns.md:314-321 anti-patterns.md:321 anti-patterns.md:321 anti-patterns.md:321-323 anti-patterns.md:323 anti-patterns.md:323 motion-patterns.md:14-25 motion-patterns.md:25-30 motion-patterns.md:30-40 motion-patterns.md:40-43 motion-patterns.md:43-54 motion-patterns.md:54-57 motion-patterns.md:57-68 motion-patterns.md:68-71 motion-patterns.md:71-81 motion-patterns.md:81-84 motion-patterns.md:84-96 motion-patterns.md:96-100 motion-patterns.md:100-102 motion-patterns.md:102-120 motion-patterns.md:120-123 motion-patterns.md:123-129 motion-patterns.md:129-134 motion-patterns.md:134-139 motion-patterns.md:139-161 motion-patterns.md:161-164 motion-patterns.md:164-192 motion-patterns.md:192-195 motion-patterns.md:195-246 motion-patterns.md:246-249 motion-patterns.md:249-278 motion-patterns.md:278-281 motion-patterns.md:281-299 motion-patterns.md:299-302 motion-patterns.md:302-332 motion-patterns.md:332-337 motion-patterns.md:337-354 motion-patterns.md:354-357 motion-patterns.md:357-376 motion-patterns.md:376-379 motion-patterns.md:379-402 motion-patterns.md:402-407 motion-patterns.md:407-415 motion-patterns.md:415-418 motion-patterns.md:418-421 motion-patterns.md:421-424 motion-patterns.md:424-430 motion-patterns.md:430-433 motion-patterns.md:433-442 SKILL.md:48-62 SKILL.md:62-65 SKILL.md:65-73 SKILL.md:73-76 SKILL.md:76-85 SKILL.md:85-96 SKILL.md:96-118 SKILL.md:118-129 SKILL.md:129-142 SKILL.md:142-145 SKILL.md:145-170 SKILL.md:170-177 SKILL.md:177-201 SKILL.md:201-210 SKILL.md:210 SKILL.md:210-221 SKILL.md:221-235 SKILL.md:235-238 SKILL.md:238-253 SKILL.md:253-256 SKILL.md:256-276 SKILL.md:276-292 SKILL.md:292-293 SKILL.md:293-294 SKILL.md:294-299 SKILL.md:299-300 SKILL.md:300 SKILL.md:300 SKILL.md:300
감사자: claude 감사 이력 보기 →
품질 점수
38
아키텍처
100
유지보수성
87
콘텐츠
20
커뮤니티
100
보안
91
사양 준수
만들 수 있는 것
プロフェッショナルなダッシュボードUI
適切なタイポグラフィ階層、ブランドのアクセントカラー、状態変化のための控えめなモーションで、データ密度の高いダッシュボードを構築します。
ブランド化されたランディングページ
際立った視覚的アイデンティティ、雰囲気のある背景、意図的なマイクロインタラクションを備えたランディングページを作成します。
一貫性のあるデザインシステム
アプリケーション全体で一貫したデザイントークン、コンポーネントパターン、モーション標準を確立します。
이 프롬프트를 사용해 보세요
基本デザイン依頼
Use the frontend-aesthetics skill to design a button component with proper hover states, shadow effects, and consistent brand styling.
ダッシュボードデザイン
Apply frontend-aesthetics principles to create a professional dashboard card showing system metrics with proper typography, accent colors, and subtle animations.
ランディングページ
Following frontend-aesthetics guidelines, design a landing page hero section with atmospheric depth, distinctive typography, and staggered reveal animations.
デザイン監査
Review the following UI code using frontend-aesthetics anti-patterns. Identify all violations and suggest specific improvements with corrected code examples.
모범 사례
- ブランドのアクセントカラーを1つ選び、すべてのインタラクティブ要素で一貫して使用する
- gray系の代わりに真のダーク背景（neutral-950）を使用する
- 100ms刻みのanimation-delayを使ってリストに段階的なリビールを適用する
- アクセシビリティ遵守のためにreduced-motion設定をテストする
피하기
- 主要フォントにInter/Robotoを使うと、汎用的でAI生成の印象になる
- 紫/青のグラデーションと灰色の背景はAI生成デザインを示唆する
- モーションが一切ない静的なページは無機質でプロらしくない
- 複数の主要ボタンやカラフルなアイコンは視覚的階層を崩す
자주 묻는 질문
このスキルに対応しているAIツールは何ですか？
このスキルはフロントエンドデザインのガイダンスとしてClaude、Codex、Claude Codeで利用できます。
推奨されるフォントファミリーは何ですか？
Plus Jakarta Sans、Bricolage Grotesque、Space Grotesk、JetBrains Monoは、個性的でプロフェッショナルなタイポグラフィを作り出します。
このスキルはコードを生成しますか？
いいえ。実装のためのデザインパターンとガイドラインを提供するだけです。実際のコードはAIが書く必要があります。
このスキルを使うときに私のデータは安全ですか？
はい。このスキルはドキュメントとプロンプトのみを含みます。ファイル、ネットワーク、またはシステムリソースにアクセスしません。
これはデフォルトのAIの挙動とどう違いますか？
Claudeは安全で一般的なパターンにデフォルトします。このスキルは、際立ったブランド化されたインターフェースを作るための具体的な代替案を提供します。
どのアニメーションライブラリに対応していますか？
CSSトランジションとFramer Motionパターンの両方をカバーしています。シンプルな操作にはCSSを、演出されたアニメーションにはFramer Motionを推奨します。
개발자 세부 정보
라이선스
MIT
참조
main
파일 구조