mcpField
D
design-frontend

design-frontend

github.com/kensaurusデザイン・UI938 回インストール1 週間前に更新
リポジトリ

design-frontend について

design-frontendは、フロントエンド開発者向けのスキルです。画面を作る前にデザインシステムを調べて再利用し、アクセシビリティと視覚品質も確認します。

主な機能

  1. 01デザイントークンと禁止パターンの確認
  2. 02既存コンポーネントの優先的な拡張
  3. 03文字サイズとタッチ領域の要件順守
  4. 04キーボードフォーカスと動きの抑制の確認
  5. 05よくある画一的なビジュアルの回避

活用シーン

  1. 01既存デザインシステムに沿った画面の構築
  2. 02重複を避けたフロントエンドコンポーネントの改善
  3. 03アクセシビリティと視覚的一貫性の確認

インストール

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

$npx skills add https://github.com/kensaurus/skills --skill design-frontend

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

詳細

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

自由度：混合。 ビジュアル構成は［自由度：高］、デザインシステムの調査は［自由度：低 — 指示どおりに実行］です。

デザインシステムを調査し、既存のパターンを尊重して、美しいインターフェースを作成します。

考え方

  1. 調査 — トークン、components/ui、禁止パターン
  2. 再利用 — 既存のコンポーネントを拡張します。2つ目の Button を新たに作成しないでください
  3. 構成 — それらのトークンを使って新しいサーフェスを作成します
  4. 確認 — 文字サイズの最小値、44px のターゲット、モーションの低減、「汎用的なデザインを避ける」リストに挙げられたデフォルトがないこと

実例

調査： components/ui/button.tsx と globals.css のトークンを確認。文字サイズの最小値は text-xs、角丸は rounded-sm。 再利用： 設定行では既存の Button / Input を使用。新しいプリミティブは作成しない。 構成： 新しい /settings ページ — トークンに基づくスペーシング、本文は text-sm、保存ボタンは 44px。 確認： 「汎用的なデザインを避ける」リストに該当なし（Inter、白地に紫、ピル型ボタンは使用しない）。スピナーには prefers-reduced-motion を適用。

報告前の自己批評

  • 調査内容を明示 — JSX を書く前に、トークンファイル、角丸、禁止リストについて説明した
  • まず再利用 — components/ui の隣に重複したプリミティブを作っていない
  • 最小値を遵守 — 読みやすい文字サイズは text-xs 以上、タップターゲットは 44px 以上
  • 適切な担当 — 既存画面の磨き込み → enhance-web-ui、ランディングページ → enhance-web-landing、既存画面の再設計 → enhance-web-redesign

フェーズ 1：デザインシステムの調査 ［自由度：低 — 指示どおりに実行］

フロントエンドのコードを書く前に、必ず次の作業を行ってください。

1.1 デザインシステムのファイルを探す
Glob: **/*design-system*.{md,ts,css}
Glob: **/tokens*.{ts,json}
Glob: **/components/ui/**
Glob: **/_*README*
1.2 トークンを抽出して記録する
カテゴリー確認項目例
タイポグラフィサイズ、ウェイトtext-xs、font-medium
スペーシングパディング、間隔p-4、gap-2
色パレット、セマンティックカラーbg-emerald-50
境界線角丸、スタイルrounded-sm
アニメーション所要時間duration-200
1.3 禁止パターンを探す
grep -r "NEVER\|FORBIDDEN\|❌" docs/ README*
1.4 検証内容の宣言（必須）
"Design System Discovery:
├─ Found: [design system path]
├─ Typography min: [e.g., text-xs]
├─ Radius standard: [e.g., rounded-sm]
├─ Forbidden: [list patterns]
└─ Reusing: [existing components]"

フェーズ 2：実装基準 ［自由度：高］

タイポグラフィの最小サイズ
コンテキスト最小サイズ用途
本文text-sm（14px）主なコンテンツ
キャプションtext-xs（12px）ラベル、ヒント
コンパクトtext-[10px]情報量の多いダッシュボードのみ

読みやすいコンテンツに text-[8px] や text-[9px] を決して使わないでください。

アクセシビリティ要件
確認項目要件
タッチターゲット≥44×44px
コントラストテキストは 4.5:1、UI は 3:1
キーボードtabIndex、フォーカススタイル
モーションprefers-reduced-motion
クイックリファレンス
Typography: text-xs=12px, text-sm=14px, text-base=16px
Spacing: 1=4px, 2=8px, 3=12px, 4=16px, 6=24px, 8=32px

フェーズ 3：品質チェックリスト ［自由度：低 — 省略しない］

[ ] Uses design system tokens (no hardcoded values)
[ ] Extends existing components (no duplicates)
[ ] Typography ≥ text-xs for readable content
[ ] Touch targets ≥ 44px
[ ] Focus states visible
[ ] prefers-reduced-motion respected
よくある修正
問題修正
文字が小さすぎるtext-[9px] → text-xs
ウェイトが太すぎるfont-bold → font-medium
角丸が大きすぎるrounded-lg → rounded-sm
回転アニメーションanimate-spin → animate-pulse

汎用的なデザインを避けるためのチェックリスト

方向性のない初稿は、いつも同じようなデフォルトに行き着きます。具体的に確認するには、項目を明示する必要があります。

  • ディスプレイ用または本文用フォントに Inter / Roboto / Arial を使っている
  • 白地に紫（バイオレット／インディゴ）のグラデーションを使っている
  • クリーム色／オフホワイトをページ背景に使っている
  • 見出し内のアクセント語をイタリック体にしている
  • セクションラベルに「01 / 02 / 03」の番号を使っている
  • コード製品ではないのに、アイブロウラベルに等幅フォントを使っている
  • 基本のボタンとしてピル型（完全な角丸）ボタンを使っている
  • セクションの標準レイアウトとして、同じ幅のカードを3つ横並びにしている

初稿で別のパターンを使った場合は、その項目もこのリストに追加してください。

忘れないでください： 真実の基準となるのは、コードベースのデザインシステムです。作成する前に検索し、再発明する前に再利用してください。

コメント

Markdown 対応