frontend-design
本番品質のフロントエンドインターフェースを設計
也可從以下取得: 1bertogit,7Spade,sickn33,1bertogit,7Spade,anthropics,92Bilal26,pbakaus,DennisLiuCk,davila7,AdamAugustinsky,AgentWorkforce,am-will,92Bilal26,YYH211,ZhanlinCui,Azeem-2,AJV009,anthropics,AI-Vibe-Prompts
洗練された美的表現で際立つWebコンポーネントとページを構築します。汎用的なAI生成ビジュアルを避け、記憶に残る高品質なユーザーインターフェースを制作します。
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「frontend-design」。 独自の美観を持つログインページを作成してください
預期結果:
- カスタムのフォントペアリング（見出し＋本文）を備えた洗練されたログインフォーム
- アクセントカラーと微妙なグラデーションを用いたダークテーマ
- 滑らかなフォーカス遷移と入力バリデーションアニメーション
- あらゆる画面サイズで機能するレスポンシブレイアウト
- アクセシブルなフォームラベルとキーボードナビゲーション
正在使用「frontend-design」。 モダンなスタイルの料金カードセクションを設計してください
預期結果:
- 大胆な視覚的階層を備えた3つの料金プラン
- 選択されたカードを強調するホバー効果
- 滑らかなスケールアニメーションとボーダー遷移
- 特徴的なディスプレイフォントを用いたクリーンなタイポグラフィ
- 画面サイズに適応するレスポンシブなグリッドレイアウト
正在使用「frontend-design」。 創造的なインタラクションを備えたナビゲーションメニューを構築してください
預期結果:
- 段階的なリビールアニメーションを持つ水平メニュー
- カスタムの下線効果を備えたホバーステート
- スライドアニメーション付きのモバイル対応ハンバーガーメニュー
- 滑らかな遷移を持つアクティブ状態インジケーター
- アクセシブルなキーボードナビゲーション対応
安全審計
安全This is a pure documentation skill containing only design guidance and metadata. No executable code, scripts, network calls, filesystem access, or external command execution capabilities exist. All static findings are false positives from documentation files being incorrectly scanned for code patterns.
風險因素
🌐 網路存取 (2)
📁 檔案系統存取 (1)
品質評分
你能建構什麼
洗練されたUIコンポーネントを構築
洗練された美観と滑らかなアニメーションを備えた独自のReactまたはVueコンポーネントを作成します。
ビジュアルコンセプトをプロトタイプ化
大胆で記憶に残るビジュアル方向性を持つデザインコンセプトを動作するコードに変換します。
統一感のあるインターフェースを設計
一貫したタイポグラフィ、カラーテーマ、モーションデザインを備えた完全なフロントエンドページを構築します。
試試這些提示
独自のスタイリング、ホバー効果、滑らかなトランジションを備えた特徴的なボタンコンポーネントを作成してください。
大胆な美的方向性、カスタムタイポグラフィ、段階的なリビールアニメーションを備えたランディングページを設計してください。
ブルータリズムのデザイン美学を用いて、チャート、フィルター、滑らかな状態遷移を備えたダッシュボードインターフェースを構築してください。
ナビゲーション、フォーム、データテーブル、モーダルダイアログを含み、モーション効果を備えた統一感のあるラグジュアリーデザイン言語で包括的なSaaSインターフェースを作成してください。
最佳實務
- コーディング前に大胆な美的方向性を選び、徹底的にコミットする
- コンポーネント間の一貫したテーマ設定にCSS変数を使用する
- 散発的なマイクロインタラクションよりもインパクトのあるアニメーションを優先する
避免
- すべてのプロジェクトでArial、Inter、Robotoのような汎用フォントを使用する
- パープル系グラデーションや予測可能な配色に安易に頼る
- 明確なコンセプトビジョンやデザイン意図のないレイアウトを作成する