frontend-design
特徴的なフロントエンドインターフェースの作成
こちらからも入手できます: 92Bilal26,AdamAugustinsky,AgentWorkforce,AJV009,DennisLiuCk,anthropics,anthropics,YYH211,7Spade,1bertogit,7Spade,92Bilal26,1bertogit,CesarAugustusGroB,davila7,AI-Vibe-Prompts,Azeem-2
ユーザーは視覚的な個性に欠ける一般的な AI 生成フロントエンドコードに苦労しています。このスキルは、デザイン思考のガイダンスと美的原則を提供し、特徴的で記憶に残る視覚的アイデンティティを持つ本番グレードのインターフェースを作成するためのものです。
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「frontend-design」を使用しています。 大胆でモダンな美学を持つ SaaS 製品の価格ページを作成
期待される結果:
3 つのティアを備えた完全な価格ページ。グラデーションアクセントを特徴とするカスタム価格カード、読み込み時のスタッガードリビールアニメーション、ホバーマイクロインタラクション、月額/年額価格切り替えスイッチ、シャープなアクセントカラーを持つ特徴的なダークテーマ。タイポグラフィは、クリーンな本文フォントと組み合わせた太いディスプレイフォントを使用。
「frontend-design」を使用しています。 個性のあるログインフォームを構築
期待される結果:
特徴的なスプリットスクリーンレイアウトを持つアニメーションログインフォーム。左側にはグレインテクスチャを持つ抽象的な幾何学模様の背景を配置。右側にはフローティングラベルを備えたカスタムスタイルの入力フィールド、ホバーアニメーション付きの記憶に残る送信ボタン、スムーズなトランジションを備えたエラー状態を配置。
セキュリティ監査
安全All 16 static findings are false positives. The scanner incorrectly flagged 'weak cryptographic algorithm' on design guideline text (lines mentioning 'design', 'bold', 'retro-futuristic', 'art deco'). The 'system reconnaissance' flags on lines 7, 30, 34 refer to design context ('purpose', 'spatial composition'), not actual system scanning. This is a pure documentation skill with no scripts, network calls, filesystem access, environment access, or external commands. Safe to publish.
品質スコア
作れるもの
ランディングページを一から構築
大胆な美的方向性を持つスタートアップ製品用の視覚的に印象的なランディングページを作成
React コンポーネントライブラリの設計
一貫したデザイン言語を持つ調和のとれたスタイル付き React コンポーネントセットを開発
ワイヤーフレームを洗練された UI に変換
基本的な要件を受け取り、クリエイティブで本番環境対応のインターフェースに昇華
これらのプロンプトを試す
[ユースケース] 用の [コンポーネントタイプ] を作成してください。[スタイルの好み] で視覚的に特徴的で本番環境対応のものにしてください。
完全な [ページタイプ] ページを構築してください。[ブルータリスト/ミニマリスト/レトロフューチャリスティックなどの美的方向性] の美学を使用してください。[特定のセクション] を含めてください。
一貫した [特定の美学] を共有する関連する [コンポーネント名] のセットを作成してください。これらは [コンテキスト] アプリケーション内で連携して動作するべきです。
データ可視化、フィルター、インタラクティブ要素を備えた [ダッシュボックスタイプ] を構築してください。[業界/ユースケース] に適合する特徴的な視覚的アイデンティティを選択してください。
ベストプラクティス
- 1 つの明確な美的方向性を選択し完全にコミットする - 洗練されたミニマリズムと大胆なマキシマリズムのどちらも機能するが、意図が混在すると一般的な結果になる
- 特徴的なフォントの組み合わせを使用：Inter/Roboto/Arial を避け、代わりに洗練された本文タイプと組み合わせた記憶に残るディスプレイフォントを選択
- 散在するマイクロインタラクションよりも、少数の影響力の大きいアニメーションを優先 - 1 つのオーケストレーションされたリビールがより大きな喜びを生む
回避
- Space Grotesk、パープルのグラデーション、予測可能なコンポーネントパターンなど、一般的な AI の選択肢に収束すること
- シャープなアクセントを持つ支配的な色の代わりに、控えめで均等に配分されたカラーパレットを使用すること
- テクスチャ、奥行き、または文脈的な視覚的雰囲気のないソリッドな背景をデフォルトにすること