frontend-design
大胆なデザインで個性的なフロントエンドインターフェースを作成
또한 다음에서 사용할 수 있습니다: anthropics,AI-Vibe-Prompts,Azeem-2,92Bilal26,AdamAugustinsky,1bertogit,7Spade,pbakaus,sickn33,7Spade,ZhanlinCui,AgentWorkforce,AJV009,YYH211,anthropics,am-will,92Bilal26,davila7,CesarAugustusGroB,DennisLiuCk
このスキルは、記憶に残る美観を備えたプロダクション品質のWebインターフェース構築を支援します。タイポグラフィ、色、モーション、レイアウトの創造的な選択を導き、一般的なAI生成デザインを避けます。
스킬 ZIP 다운로드
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
토글을 켜고 사용 시작
테스트해 보기
"frontend-design" 사용 중입니다. Create a settings panel with dark mode toggle
예상 결과:
- アニメーション付きトグルスイッチを備えた完全なReactコンポーネント
- CSSカスタムプロパティを用いた滑らかなテーマ移行
- キーボード操作とスクリーンリーダー向けのアクセシビリティ属性
- ローカルストレージを用いた設定の永続化
- モバイルとデスクトップ向けのレスポンシブレイアウト
"frontend-design" 사용 중입니다. Build a hero section for a tech startup landing page
예상 결과:
- 個性的なフォントの組み合わせによる大胆なタイポグラフィ
- 微細な動きを持つアニメーション付きグラデーション背景
- ページ読み込み時の段階的なテキスト表示
- ホバー効果付きのCTAボタン
- 創造的な非対称性を備えたレスポンシブグリッドレイアウト
"frontend-design" 사용 중입니다. Design a card component for a product gallery
예상 결과:
- 画像、タイトル、説明、価格を備えたカードレイアウト
- 影のリフトとスケール効果を伴うホバーアニメーション
- カスタムスタイルの色分けタグ
- 状態間の滑らかなトランジション
- レスポンシブなギャラリーレイアウト用グリッドシステム
보안 감사
안전This is a prompt-based skill containing design guidelines and documentation. Static analysis flagged 66 findings, all of which are false positives from pattern matching in documentation text. The JavaScript plugin file contains only basic logging template code with no network, filesystem, or command execution capabilities. No actual security risks identified.
위험 요인
⚙️ 외부 명령어 (1)
🌐 네트워크 접근 (2)
📁 파일 시스템 액세스 (1)
품질 점수
만들 수 있는 것
プロダクションUIコンポーネントを素早く構築
個性的な美観、アニメーション、完全なアクセシビリティ対応を備えた洗練されたReactまたはVueコンポーネントを生成
ビジュアルコンセプトを素早くプロトタイプ化
大胆なデザイン方向性とインタラクティブ要素を備えた高忠実度プロトタイプを作成してアイデアを検証
ランディングページとインターフェースを作成
自然言語の説明から、レスポンシブレイアウトを備えた完全なランディングページやアプリケーションインターフェースを構築
이 프롬프트를 사용해 보세요
Create a button component with hover animation, focus states, and ripple effect on click
Build a landing page for a sustainable coffee shop with warm earth tones, smooth scroll animations, and organic shapes
Create a dark-mode analytics dashboard with animated charts, real-time data filters, hover tooltips, and staggered reveal animations
Build a music streaming player with album art carousel, playback controls, playlist management, drag-and-drop sorting, and synchronized animations matching audio playback
모범 사례
- より良いデザイン判断のために、目的、対象ユーザー、技術的制約の明確な文脈を提供する
- ミニマリスト、ブルータリスト、レトロ、オーガニック、ラグジュアリーなど、望む美的方向性を指定する
- 最適化されたコード出力を得るため、ReactやVueなどの具体的なフレームワークと必要なライブラリを挙げる
피하기
- デザイン方向性やブランドパーソナリティを指定せずに汎用的なコンポーネントを依頼する
- 性能影響を考慮せずに多数のアニメーションを含む過度に複雑なデザインを要求する
- フォーム、ボタン、ナビゲーションなどのインタラクティブ要素に対するアクセシビリティ要件を省略する