mcpField
F
frontend-design

frontend-design

github.com/b-open-ioデザイン・UI1647 回インストール4 週間前に更新
リポジトリ

frontend-design について

コーディングエージェント向けのフロントエンドデザインスキルです。タイポグラフィ、配色、構図、モーション、アクセシビリティを含む、個性あるUIの設計と実装を支援します。

主な機能

  1. 01個性ある書体の選び方
  2. 02意図的なカラーパレット設計
  3. 03非対称な空間構成
  4. 04目的に沿ったモーション
  5. 05本番品質とアクセシビリティの確認

活用シーン

  1. 01独自のUIビジュアル方針の策定
  2. 02アニメーション付きレスポンシブコンポーネントの構築
  3. 03UIのアクセシビリティと性能の改善

インストール

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

$npx skills add https://github.com/b-open-io/prompts --skill frontend-design

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

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
color-animation-patterns.md
color-systems.md
production-patterns.md
typography-examples.md
typography-resources.md

詳細

フロントエンドデザインスキル

汎用的なAI生成インターフェースとは一線を画す、個性的で本番環境に対応できるUIを作成します。

公式プラグインが利用可能です：フロントエンドのタスクで自動的に呼び出されるよう、Anthropic マーケットプレイスから frontend-design@claude-code-plugins をインストールしてください。このスキルでは、公式バージョンを超える詳しいガイダンスを提供します。

基本理念

AIが生成するUIの多くは「AIっぽさ」が目立ちます。技術的には正しくても、見た目が平凡です。このスキルでは、大胆な美的選択によってインターフェースに独自の個性を与え、そのパターンを打ち破る方法を紹介します。

5つの柱

1. 個性のあるタイポグラフィ

避けるもの： Inter、Arial、Roboto、system-ui（AIが選びがちなデフォルトの書体）

代わりに： プロジェクトのトーンに合わせて、個性的なフォントスタックを選びましょう。

  • ディスプレイ：Clash Display、Cabinet Grotesk、Satoshi、General Sans、Syne、Archivo
  • 本文：Outfit、Plus Jakarta Sans、Switzer、Geist
  • 等幅：JetBrains Mono、Geist Mono、IBM Plex Mono

重要な原則： プロジェクトごとに必ず異なるフォントを使用してください。デザインごとに、本当に違う印象を持たせる必要があります。

2. 意図的なカラーパレット

避けるもの： Tailwindのデフォルトカラー、一般的な青いボタン、グレーの背景

次の要素を使って、印象に残るパレットを作りましょう。

  • セマンティックトークン（primary、accent、neutral、surface）
  • 調整しやすいHSL
  • ニュートラルカラーに微妙な色相の変化をつける（温かみのある石色、涼しげなスレート色）
  • メインカラーとしてのグラデーション
3. 大胆な空間構成

避けるもの： すべてを中央揃えにする、左右対称にする、グリッドに固定する

意図的にグリッドを崩しましょう。

  • ネガティブスペースをデザイン要素として使う
  • 要素を重ねて奥行きを生み出す
  • 整列のルールを意図的に崩す
  • 可変タイポグラフィには clamp() を使う
4. 個性を生み出すモーション

避けるもの： アニメーションを使わない、汎用的なフェードイン

意図のあるモーションを取り入れましょう。

  • バネの物理特性（線形イージングではないもの）
  • 時間差をつけた登場
  • さりげないぼかしのトランジション
  • 操作に応じたホバー状態
  • prefers-reduced-motion を尊重する
5. 本番環境に対応できる実装

要件：

  • 適切な型を備えたTypeScript
  • アクセシビリティ（フォーカス状態、ARIA、キーボード操作）
  • 読み込み状態
  • エラーバウンダリ
  • レスポンシブデザイン
  • パフォーマンスの最適化

ビジョンに合わせて複雑さを調整する

  • マキシマリストなデザイン： 複雑なコード、大規模なアニメーション、重ね合わせたエフェクト
  • ミニマリストなデザイン： 控えめな表現、正確さ、余白への細やかな配慮

ワークフロー

  1. デザインの方向性を定める - 感情、対象ユーザー、カラーパレット、タイポグラフィを決める
  2. コンポーネントのアーキテクチャを作成する - コンポジションを取り入れたアトミックデザインシステム
  3. 視覚的な個性を加える - 独自の選択、意図的な関係性、目的のある非対称性
  4. モーションを実装する - 登場時のアニメーション、インタラクション、トランジション
  5. 本番環境に向けて堅牢化する - すべてに型を付け、エッジケースに対応し、最適化する

避けるべきアンチパターン

  • デフォルトのフォントとしてInterやRobotoを使う
  • プロジェクト間で同じフォントを使う
  • グレーと白を基調に青いボタンを使う
  • すべてを中央揃えにして左右対称にする
  • アニメーションを使わない、または汎用的なフェードだけを使う
  • ダークモードを無視する
  • 読み込み状態やエラー状態を忘れる
  • アクセシビリティを省略する

追加リソース

詳しい実装ガイダンスについては、referencesディレクトリを参照してください。

  • references/typography-examples.md - トーン別のフォントスタック、可変フォント、レスポンシブなスケール
  • references/color-animation-patterns.md - 高度なパレット、グラデーション、ダークモード、アニメーションのパターン
  • references/production-patterns.md - 完全なコンポーネント例、エラーバウンダリ、パフォーマンスの最適化、ツールの推奨事項

クイックリファレンス

# Distinctive font stacks (vary these per project!)
font-display: 'Clash Display', 'Cabinet Grotesk', 'Satoshi', 'General Sans'
font-body: 'Outfit', 'Plus Jakarta Sans', 'Switzer', 'Geist'
font-mono: 'JetBrains Mono', 'Geist Mono', 'IBM Plex Mono'

# Tailwind config pattern
theme: {
  extend: {
    colors: { /* HSL tokens */ },
    fontFamily: { /* Variable fonts */ },
    animation: { /* Spring-based */ },
  }
}

デザインスペシャリストエージェントとの連携

次の用途には、このスキルを使います。

  • 個性的なビジュアルアイデンティティ
  • 独創的なタイポグラフィと色の選択
  • 大胆な空間構成
  • 本番環境に対応できるアニメーション付きコンポーネント

次の用途には、デザイナーエージェントを使います。

  • 包括的なUI/UXレビュー
  • アクセシビリティ監査
  • デザインシステムのアーキテクチャ
  • コンポーネントライブラリのセットアップ

コメント

Markdown 対応