mcpField
E
edgespark-frontend-design

edgespark-frontend-design

github.com/edgesparkhqデザイン・UI1588 回インストール24 週間前に更新
リポジトリ

edgespark-frontend-design について

EdgeSpark Frontend Designは、レイアウト、ビジュアルの方向性、アクセシビリティ、レスポンシブ対応を扱うフロントエンド設計用のエージェントスキルです。手順と検証項目に沿って設計を進めます。

主な機能

  1. 01対象者、目標、ビジュアルの方向性を定める
  2. 02レイアウト、間隔、デザイントークンを適用
  3. 03タイポグラフィ、色、画像、モーションを指針化
  4. 04レスポンシブ対応とWCAG 2.1 AAのコントラストを確認
  5. 05アンチパターンに照らしてデザインを点検

活用シーン

  1. 01ランディングページのビジュアル方針を計画
  2. 02既存インターフェースを再設計
  3. 03レスポンシブ対応とアクセシビリティを検証
  4. 04デザインとインタラクションの方針を調整

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/edgesparkhq/agent-skills --skill edgespark-frontend-design

インストール後、Claude Code で/edgespark-frontend-designを入力して読み込まれたか確認します。

同梱ファイルreferences/design-principles.md

詳細

EdgeSpark フロントエンドデザイン

このスキルを使うと、無難で平均的な UI を、明確な階層構造、より鮮明なアートディレクション、質の高いコンテンツを備えた、意図的なビジュアルデザインへと仕上げられます。

設計方針、アセット戦略、実装の詳細、アンチパターンについては、design-principles.md を参照してください。タスクに関連するセクションを読み込んでください。

デザインスタック

曖昧に「モダンにする」だけで済ませず、レイヤーごとにデザイン基準を適用します。

  1. まず、基本となるウェブシステムを整えます。コンテキストを起点とした構成、12 列の構造、8 ポイントのスペーシング、セマンティックトークン、レスポンシブな動作、WCAG 2.1 AA のコントラストを適用します。
  2. 次に、美的な魅力を高めます。柔らかなニュートラルカラーや高級感のあるパレット、非対称な構成、メリハリのあるタイポグラフィ、ゆとりのある余白、洗練されたテクスチャ、より明確なモーションの方向性を取り入れます。
  3. リリース前に、リファレンスに記載された凡庸なデザインを避けるための禁止事項を徹底します。

このレイヤー構造によって、無難でも凡庸なフロントエンド出力に流れてしまうのを防ぎます。

ワークフロー

1. デザインの方向性を定める

コードに手を加える前に、次の項目を明確にします。

  • ユーザーの目標
  • 対象ユーザー
  • 主なタスク
  • 主要なコンテンツの種類
  • 成功指標
  • 感情的なトーン
  • 忘れられないビジュアル上の工夫を 1 つ
  • ビジュアルの主軸：ムード、素材感、エネルギーを説明する 1 文
  • コンテンツプラン：ランディングページやマーケティング向けの画面では、ヒーロー、補足、詳細、最後の CTA
  • インタラクションの主軸：ページの印象を変える、具体的なモーションのアイデアを 2～3 個

各セクションに、1 つの役割、支配的なビジュアルアイデア、そして主要なメッセージまたはアクションを 1 つずつ割り当てます。

曖昧な「モダン」ではなく、具体的な方向性を選びます。エディトリアル、ラグジュアリー、インダストリアル、遊び心のあるデザイン、オーガニック、ブルータリスト、レトロフューチャーなど、製品に合った極端な方向性を選びましょう。 ユーザージャーニーを最小限に整理し、レイアウト、階層構造、コピーに反映します。

2. 変更前に弱い UI を診断する

リデザインでは、現在の UI を確認し、次の問いに答えます。

  • 色使いが目に負担をかける、安っぽく見える、または鮮やかすぎる状態になっていないか
  • レイアウトが従来型に寄りすぎていないか、左右対称すぎないか、単調ではないか
  • 現代的なデザイン要素で不足しているものは何か
  • ページが静的に感じられ、動きを加えることで生き生きとするか
  • 現在のブランドポジショニングと、意図する感情的な体験は何か
3. 慣習ではなくリファレンスをもとに再構築する

design-principles.md から、必要なセクションだけを読み込みます。

  • Layout And Spacing
  • Typography
  • Color
  • Visual Treatments
  • Motion And Interaction
  • Landing Pages
  • Apps
  • Content Authenticity
  • Visual Asset Role
  • Utility Copy For Product UI
  • Responsive And Accessibility Baseline
  • Execution Style
  • Optimization Order
  • Anti-Patterns
  • Litmus Checks
4. 必須事項を守る
  • コンポーネントではなく、構成から始めます。
  • デフォルトでは CSS アニメーションを優先します。React では Motion または Framer Motion を使い、アニメーション用トークンを適用します。
  • スクロールに応じた表示には、場当たり的なスクロールリスナーではなく、Intersection Observer を使います。
  • ビジュアルを見せる画面では、実画像を積極的に検索することを基本とします。プレースホルダーの使用は、リファレンスに記載された限定的なケースに限ります。
  • 製品でライトモードとダークモードの両方が必要な場合は、トークンベースで対応します。
  • すべてのデザインを同じ無難なテンプレートに押し込めず、選んだ方向性に合わせて実装の複雑さを調整します。
5. 仕上がりを検証する
  • モバイルとデスクトップでの動作を確認します。
  • WCAG 2.1 AA のコントラストと、インタラクティブ要素の視認可能な状態を確認します。
  • モーション、タイポグラフィ、色、画像がすべて選んだ方向性に沿っていることを確認します。
  • リファレンスのアンチパターンチェックを通過していることを確認します。

EdgeSpark での使用

デザインレイヤーにはこのスキルを使います。EdgeSpark 固有の実装ガイダンスも必要なタスクでは、building-edgespark-apps と組み合わせてください。

コメント

Markdown 対応