Fähigkeiten frontend-design
🎨

frontend-design

Sicher 🌐 Netzwerkzugriff📁 Dateisystemzugriff

差別化されたフロントエンドインターフェースをデザイン

Auch verfügbar von: AgentWorkforce,anthropics,AJV009,DennisLiuCk,anthropics,92Bilal26,YYH211,1bertogit,7Spade,7Spade,92Bilal26,1bertogit,CesarAugustusGroB,davila7,AI-Vibe-Prompts,Azeem-2

制作レベルのWebインターフェースを構築すると、汎用的で忘れがちなデザインになりがちです。このスキルは、記憶に残るクリエイティブなフロントエンドデザイン、大胆な美学、考え抜かれたタイポグラフィ、汎用的なパターンから際立つ洗練されたディテールを作成するのに役立ちます。

Unterstützt: Claude Codex Code(CC)
📊 71 Angemessen
1

Die Skill-ZIP herunterladen

2

In Claude hochladen

Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen

3

Einschalten und loslegen

Teste es

Verwendung von "frontend-design". Build a login form for a luxury e-commerce brand

Erwartetes Ergebnis:

  • 洗練されたハイコントラストのログインフォーム、洗練されたタイポグラフィと繊細なアニメーション
  • ゴールドのアクセントとミニマリストな入力フィールドを持つダーク背景
  • スムーズなフォーカストランジションと差別化されたサブミットボタンのホバーエフェクト
  • テーマ用のCSS変数を備えた制作レベルのHTML、CSS

Verwendung von "frontend-design". Create a landing page for a sustainable coffee startup

Erwartetes Ergebnis:

  • ウォームブラウンとクリームトーンのアースリーなカラーパレット
  • 非対称グリッド要素を持つオーガニックで流動的なレイアウト
  • コーヒー豆の形にインスパイアされたカスタムジオメトリックパターン
  • 視覚的な関心のためのスクロール時のスタガードリビールアニメーション

Verwendung von "frontend-design". Design a mobile-first navigation component for a music app

Erwartetes Ergebnis:

  • 鮮やかなアクセントカラーを持つダークモードインターフェース
  • タブ切り替え時の遊び心のあるマイクロインタラクション
  • 音乐的で流動的に感じるジェスチャーアニメーション
  • モバイルに最適化されたコンパクトでアクセシブルなタッチターゲット

Sicherheitsaudit

Sicher
v5 • 1/16/2026

Pure prompt-based skill containing only text instructions for frontend design guidance. No executable code, no network calls, no filesystem access, no command execution. Completely safe for users. Static findings are false positives: URL field is metadata, 'hidden file access' is a misinterpretation, and 'weak cryptographic algorithm' flags were triggered by SHA256 hashes and font name references.

2
Gescannte Dateien
222
Analysierte Zeilen
2
befunde
5
Gesamtzahl Audits

Risikofaktoren

🌐 Netzwerkzugriff (1)
skill-report.json:6
📁 Dateisystemzugriff (1)
skill-report.json:6
Auditiert von: claude Audit-Verlauf anzeigen →

Qualitätsbewertung

38
Architektur
100
Wartbarkeit
87
Inhalt
30
Community
100
Sicherheit
91
Spezifikationskonformität

Was du bauen kannst

印象的なコンポーネントを構築

制作レベルのWebアプリケーション向けに、大胆な美学で記憶に残るUIコンポーネントを作成

クリエイティブなインターフェースをプロトタイプ

洗練されたビジュアルで、差別化されたページレイアウトとインターフェースコンセプトを迅速にプロトタイプ

ビジュアルポリッシュを追加

基本的な機能インターフェースを、視覚的に魅力的で制作レベルのデザインに変換

Probiere diese Prompts

基本的なコンポーネント 
[component type]を[purpose]のために構築してください。対象ユーザーは[describe users]です。大胆な美学的方向性で視覚的に差別化してください。
完全なページ 
完全な[page type]ページをデザインしてください。目標は[user goal]です。印象的な美学を選択し、制作レベルのHTML、CSS、JSを実装してください。
インタラクティブ機能 
スムーズなアニメーションとマイクロインタラクションを持つ[feature]を作成してください。CSSアニメーションとMotionライブラリを使用してください。ハイインパクトなビジュアル瞬間を中心にしてください。
デザインシステム 
一貫したタイポグラフィ、色システム、空間リズムを持つ[components]の統一されたセットを作成してください。美学は[descriptor]にしてください。

Bewährte Verfahren

  • 明確な美学的方向性を選び、デザイン全体を通じてそれを完全に貫く
  • 一貫性があり意図的なビジュアルシステムのために、差別化されたフォントペアリングとCSS変数を使用する
  • マイクロインタラクションを散らすのではなく、ハイインパクトな瞬間にアニメーション 노력을集中させる
  • 汎用的なパターンにデフォルトするのではなく、特定のコンテキストとオーディエンス向けにデザインする

Vermeiden

  • 文字キャラクターや視覚的関心のないArial、Inter、Robotoなどの汎用的なフォントを使用する
  • ホワイトボード上のパープルグラデーションや、他の陳腐化したAI生成美学を適用する
  • クリエイティブなテンションや視覚的関心のない予測可能で対称的なレイアウトを作成する
  • バリエーションやクリエイティブな探求なしに、複数のリクエストで同じデザインを生成する

Häufig gestellte Fragen

このスキルはどのフロントエンドフレームワークをサポートしていますか？
このスキルはHTML、CSS、JavaScript、React、Vue、同様のモダンなフロントエンドテクノロジーで動作します。
このスキルは複雑なアニメーションやエフェクトを作成できますか？
はい。CSSアニメーション、マイクロインタラクションを実装し、必要に応じてReactでMotionライブラリを使用できます。
これは私のコードベースとどのように統合されますか？
スキルはプロジェクトにコピー＆ペーストするコードを生成します。制作レベルのコードを生成します。
このスキルを使用するとデータは安全ですか？
はい。これはプロンプトベースのスキルで、デザインガイダンスのみを提供します。ファイルやネットワークにアクセスしません。
出力が私のプロジェクトで動作しません。何を確認すべきですか？
コードを正しくコピーしたことを確認し、不足している依存関係を確認し、プロジェクトが使用するCSS機能をサポートしていることを確認してください。
これは汎用的なコード生成とどう異なりますか？
このスキルは意図的に汎用的なAI美学を避けます。boldで差別化されたデザイン方向性とクリエイティブな choix にコミットします。

Entwicklerdetails

Lizenz

Complete terms in LICENSE.txt

Repository

https://github.com/AdamAugustinsky/a3-stack-kysely/tree/main/.claude/skills/frontend-design

Ref

main

Dateistruktur

📄 SKILL.md