mcpField
F
frontend-design-systems

frontend-design-systems

github.com/composio-communityデザイン・UI14142 回インストール23 週間前に更新
リポジトリ

frontend-design-systems について

frontend-design-systemsは、Claude向けにReact、Tailwind CSS、shadcn/uiを使ったフロントエンド制作を案内するスキルです。レスポンシブレイアウトや再利用可能なコンポーネント、余白、視覚的な階層に重点を置いています。

主な機能

  1. 01React、Tailwind CSS、shadcn/uiのガイド
  2. 02レスポンシブレイアウトの設計
  3. 03再利用可能なコンポーネント構成
  4. 04余白と視覚的階層
  5. 05フロントエンド検証チェックリスト

活用シーン

  1. 01SaaSダッシュボードや管理画面の構築
  2. 02レスポンシブなランディングページの作成
  3. 03デザイン参考を再利用可能なUIに変換
  4. 04フロントエンドコンポーネントの一貫性向上

インストール

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

$npx skills add https://github.com/composio-community/opencode-skills --skill frontend-design-systems

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

詳細

フロントエンドデザインシステム

概要

このスキルを使うと、Claude は以下を用いて高品質なフロントエンドインターフェースを生成できます。

  • React
  • Tailwind CSS
  • shadcn/ui
  • モダンなレイアウトシステム
  • 本番環境対応のコンポーネントアーキテクチャ

ワークフローでは、以下を重視します。

  • 余白の一貫性
  • 視覚的な階層
  • 正確な配置
  • レスポンシブレイアウト
  • 整理されたコンポーネント構成
  • ありきたりな「AI 生成」デザインパターンの回避

目指すのは、自動生成されたような印象や視覚的なノイズではなく、洗練され、意図が明確で、プロがデザインしたように感じられるインターフェースです。

セットアップ

開始する前に：

  1. Node.js をインストールします。 https://nodejs.org

  2. Next.js プロジェクトを作成します。

npx create-next-app@latest
  1. Tailwind CSS をインストールします。
npm install tailwindcss @tailwindcss/postcss postcss
  1. shadcn/ui をインストールします。
npx shadcn@latest init
  1. 開発サーバーを起動します。
npm run dev

推奨ツール：

  • VS Code
  • Tailwind CSS
  • shadcn/ui
  • React DevTools
  • Figma の参考資料（任意）

推奨拡張機能：

  • Tailwind CSS IntelliSense
  • ES7 React snippets
  • Prettier
  • Error Lens

必要な入力

  • UI 要件
  • レイアウトの目標
  • ブランディングの方向性
  • 対象プラットフォーム：
    • SaaS ダッシュボード
    • ランディングページ
    • 管理画面
    • モバイルファースト UI
    • スタートアップのウェブサイト

任意：

  • デザインの参考資料
  • 既存のデザインシステム
  • ブランドカラー
  • タイポグラフィの好み

このスキルを使う場面

以下の場合にこのスキルを使います。

  • React インターフェースを構築するとき
  • SaaS ダッシュボードをデザインするとき
  • ランディングページを作成するとき
  • 再利用可能な UI システムを生成するとき
  • フロントエンドの仕上がりを改善するとき
  • レスポンシブレイアウトをデザインするとき
  • 本番環境に対応したフロントエンド体験を構築するとき

使用しない場面

以下の場合は、このスキルを使用しないでください。

  • バックエンドのみのシステム
  • デザイン要件のない、素の HTML によるプロトタイプ
  • React 以外のフロントエンドスタック
  • 純粋に実験的なビジュアルアートプロジェクト

使用例

React、Tailwind、shadcn/ui を使って、モダンな AI スタートアップのランディングページを作成してください。

Claude は以下を行います。

  1. 整理されたレイアウト階層を作成する
  2. 適切な余白システムを使う
  3. 再利用可能な UI セクションを構築する
  4. 視覚的な一貫性を保つ
  5. ごちゃついたレイアウトを避ける
  6. レスポンシブデザインのパターンを使う
  7. 洗練された本番環境対応のコードを生成する

最終的な成果物は、以下を満たす必要があります。

  • モダンで、意図が明確に感じられる
  • ありきたりな AI 生成レイアウトを避けている
  • 高い可読性を保っている
  • レスポンシブな動作に対応している
  • 拡張性と保守性を備えている

フロントエンドデザインの基本原則

1. 余白と配置を優先する

優れたフロントエンドデザインは、余白の一貫性に大きく左右されます。

Claude は以下を重視します。

  • 予測しやすい余白システム
  • 整った配置
  • 視覚的なゆとり
  • バランスの取れたレイアウト

余白の質は、以下に大きく影響します。

  • プロフェッショナルな印象
  • 可読性
  • 使いやすさ
  • 視覚的な洗練度

以下は避けてください。

  • 窮屈なレイアウト
  • 一貫性のないパディング
  • 不均等な余白
  • 視覚的にノイズの多いセクション

2. 明確な視覚的階層を構築する

インターフェースでは、以下を明確に伝える必要があります。

  • 何が最も重要か
  • どこに注目すべきか
  • コンテンツがどのようにグループ化されているか

以下を使って階層を表現します。

  • タイポグラフィのスケール
  • 余白
  • レイアウト構造
  • コントラスト
  • コンポーネントのサイズ

優れた階層は、以下を改善します。

  • 可読性
  • ナビゲーション
  • 使いやすさ

3. 「AI っぽい」デザインを避ける

生成された UI は、以下の理由でありきたりな印象になりがちです。

  • グラデーションを多用する
  • レイアウトに要素を詰め込みすぎる
  • 影を不適切に使う
  • 余白の規律がない
  • 構造より装飾を優先する

Claude は以下を優先します。

  • 控えめな表現
  • 整った構成
  • 意図的な余白
  • 読みやすいレイアウト
  • さりげない視覚的な洗練

プロフェッショナルなインターフェースは、通常、以下のように感じられます。

  • 落ち着いている
  • 構造化されている
  • バランスが取れている
  • 意図が明確である

4. コンポーネントを再利用可能に保つ

UI システムは、以下を備えている必要があります。

  • モジュール性
  • 組み合わせやすさ
  • 拡張性
  • 保守性

推奨される構成：

components/
  ui/
  layout/
  sections/

再利用可能なシステムは、以下を改善します。

  • 開発速度
  • 一貫性
  • 拡張性

5. Tailwind を正しく使う

Tailwind は明瞭さを高めるために使い、クラスを混乱させないようにします。

推奨するワークフロー：

  • 一貫したスペーシングスケール
  • 再利用可能なパターン
  • グループ化されたユーティリティ構造

避けること：

  • 過度に複雑なインライン記述
  • 読みにくいユーティリティの連鎖
  • 一貫性のないサイズ体系

Tailwind を適切に使うと、次の点が向上します：

  • 保守性
  • 反復の速度
  • デザインの一貫性

6. shadcn/ui を基盤として使う

shadcn/ui は次の要素を提供します：

  • アクセシブルなプリミティブ
  • 拡張性のあるコンポーネント構成
  • 明確なインタラクションシステム

Claude は次の点に留意する必要があります：

  • 意図を持ってレイアウトをカスタマイズする
  • デフォルトのテンプレートのような見た目を避ける
  • コンポーネントを慎重に拡張する

目指すのは次のとおりです：

  • 洗練されたカスタマイズ
  • 汎用的なコピー＆ペーストのインターフェースではないもの

ワークフロー

1. レイアウト構造を定義する

まず、次の項目を特定します：

  • ページの階層
  • コンテンツのセクション
  • ナビゲーションの流れ
  • レスポンシブな動作

例：

  • ヒーロー
  • 特長
  • お客様の声
  • 料金
  • CTA

次の点に注目します：

  • 明瞭さ
  • スペーシングのリズム
  • 視覚的な流れ

2. コアとなるレイアウトシステムを構築する

次の要素を作成します：

  • コンテナー
  • スペーシングシステム
  • レスポンシブグリッド
  • 再利用可能なラッパー

次の点を維持します：

  • 一貫した最大幅
  • 予測可能なスペーシング
  • レスポンシブなスケーリング

避けること：

  • 一貫性のないブレークポイント
  • 場当たり的なスペーシング値
  • 密度が高すぎるセクション

3. 再利用可能なコンポーネントを生成する

次の要素を作成します：

  • ボタン
  • カード
  • ナビゲーションバー
  • フォーム
  • モーダル
  • 料金セクション

コンポーネントには次の性質が必要です：

  • 組み合わせ可能である
  • 再利用に対応する
  • 視覚的な一貫性を保つ

4. タイポグラフィとスペーシングを調整する

次の要素を調整します：

  • フォントスケール
  • セクション間のスペーシング
  • 行の高さ
  • 配置
  • 余白

タイポグラフィは次の点を向上させる必要があります：

  • 読みやすさ
  • 階層
  • プロフェッショナルな印象

スペーシングでは次の要素を実現します：

  • ゆとり
  • すっきりとしたリズム
  • バランスの取れた構成

5. レスポンシブ対応を改善する

次の項目を検証します：

  • モバイルのレイアウト
  • タブレットでの動作
  • デスクトップでのスケーリング
  • ナビゲーションの使いやすさ

レスポンシブレイアウトには次の性質が必要です：

  • 自然に適応する
  • 階層を維持する
  • 適切なスペーシングを保つ

避けること：

  • 窮屈なモバイルレイアウト
  • 広すぎるデスクトップのスペーシング
  • コンポーネントの配置崩れ

6. 見た目を仕上げる

次の要素を使います：

  • 控えめなシャドウ
  • 節度のあるグラデーション
  • ホバー時のトランジション
  • すっきりとした境界線
  • バランスの取れたコントラスト

見た目の仕上げでは次の点を支えます：

  • 明瞭さ
  • 使いやすさ
  • プロフェッショナルな印象

避けること：

  • 過度なエフェクト
  • 雑然としたビジュアル
  • 統一感のないカラーパレット

7. 最終検証

リリース前に、次の項目を検証します：

  • スペーシングの一貫性
  • レスポンシブな動作
  • 配置の正確さ
  • 読みやすさ
  • アクセシビリティ
  • コンポーネントの一貫性

次の点を確認します：

  • インターフェースに意図が感じられる
  • レイアウトがすっきりと保たれている
  • セクションが自然につながっている

出力への期待

最終的な出力には次の要素を含めます：

  • 本番品質のフロントエンドコード
  • 再利用可能な React コンポーネント
  • 整理された Tailwind の構造
  • 洗練された UI システム
  • レスポンシブなレイアウト
  • プロフェッショナルな視覚的階層

ワークフロー自体は次の性質を保つ必要があります：

  • 拡張性がある
  • 保守しやすい
  • 読みやすい
  • コンポーネント駆動である
  • 本番環境で使える

実行戦略（AI エージェント向け）

エージェントは次の点に従う必要があります：

  1. まずスペーシングと配置を優先する
  2. 明確な視覚的階層を構築する
  3. AI が生成したようなありきたりなデザインパターンを避ける
  4. 再利用可能なコンポーネントシステムを生成する
  5. レスポンシブ対応の一貫性を保つ
  6. 読みやすさと保守性を最適化する

ワークフローでは次の点を最適化する必要があります：

  • 見た目の洗練度
  • フロントエンドの品質
  • 拡張性
  • 読みやすさ
  • プロフェッショナルな UI の一貫性

ベストプラクティス

  • スペーシングを一貫して使う
  • 見た目に落ち着きのあるレイアウトを保つ
  • 装飾よりも読みやすさを優先する
  • UI パターンを再利用する
  • 早い段階でレスポンシブ対応を検証する
  • Tailwind のユーティリティを整理しておく
  • カスタマイズ可能な基盤として shadcn/ui を使う

注記

  • スペーシングの質は、フロントエンドの品質に対する印象を大きく左右します
  • 適切な配置により、視覚的なプロフェッショナルさが高まります
  • シンプルなレイアウトは、複雑すぎるレイアウトより優れていることが多いです
  • 優れたフロントエンドシステムでは、装飾より一貫性を優先します
  • 適切に構成された UI システムは、長期的に大幅な拡張性を発揮します

コメント

Markdown 対応