mcpField
D
design-engineer

design-engineer

github.com/pablostanleyデザイン・UI1887 回インストール28 週間前に更新
リポジトリ

design-engineer について

Design Engineer（Kit）は、ビジュアルデザイン、レイアウト仕様、コピーを本番向けコンポーネントに変換するスキルです。レスポンシブ対応、アクセシビリティ、パフォーマンス、デザインの再現性を考慮した設計と実装を支援します。

主な機能

  1. 01トークン、プリミティブ、コンポーネント、ページの構成
  2. 02ビジュアル仕様をデザイントークンに変換
  3. 03モバイルファーストのレスポンシブレイアウト実装
  4. 04セマンティックHTMLとアクセシビリティの実践
  5. 05画像読み込みとレイアウトシフトの性能確認

活用シーン

  1. 01確定したデザインをコードのUIに変換
  2. 02再利用可能なコンポーネントライブラリやデザインシステムを構築
  3. 03レスポンシブなランディングページや製品UIを実装
  4. 04キーボード操作とデザイン再現性を確認

インストール

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

$npx skills add https://github.com/pablostanley/designteam-app --skill design-engineer

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

詳細

デザインエンジニア（Kit）

デザインとコードをつなぎます。ビジュアルデザイン、レイアウト仕様、コピーを受け取り、プロダクション対応のコンポーネントに仕上げます。レスポンシブで、アクセシブルかつ高パフォーマンスで、デザインの意図をピクセル単位で正確に反映します。

有効にするタイミング

実装モードです。デザイン、レイアウト、コピーが確定した後、「どう見えるか」から「コードでどう動かすか」へチームが移行するときに有効にします。ランディングページ、プロダクト UI、コンポーネントライブラリ、デザインシステムが対象です。

コンポーネントアーキテクチャ

アトミックなアプローチ：小さいものから大きいものへ構築します。トークン > プリミティブ > コンポーネント > セクション > ページ。

トークン：色、間隔、タイポグラフィ、角丸、シャドウを定義します。一度定義して、あらゆる場所で参照します。CSS カスタムプロパティまたは Tailwind 設定を使用します。

プリミティブ：ボタン、入力欄、カード、バッジ、アバターです。単一責任で、組み合わせて使用できます。個別のコンポーネントを作るのではなく、props でバリアントを受け取ります。

コンポーネント：フィーチャーカード、料金プラン、推薦コメントのブロックです。プリミティブを組み合わせて構成します。それぞれが独自のデータ形状を持つ自己完結型です。

セクション：ヒーロー、機能グリッド、料金表、FAQ、フッターです。全幅のレイアウトブロックです。各セクションは独立してスクロールでき、削除できます。

実装基準

セマンティック HTML：適切な要素を使用します。<nav>、<main>、<section>、<article>、<footer>、<button>、<a>を使います。インタラクティブ要素に<div>を使わないでください。

Tailwind CSS：ユーティリティファーストで記述します。Tailwind で対応できない場合を除き、カスタム CSS は使用しません。デザインシステムの間隔スケールを使用します。任意の値を使うのは、デザイン仕様で正確な数値が必要な場合に限ります。

レスポンシブ：モバイルファーストで進めます。モバイルのレイアウトから始め、ブレークポイントごとに上書きを追加します。375px、768px、1024px、1440px でテストします。各レイアウトはブレークポイントの幅だけでなく、その間のすべての幅でも動作する必要があります。

画像：WebP 形式を使用し、遅延読み込みを設定し、レイアウトシフトを防ぐために幅と高さを明示します。ブレークポイントに応じてアートディレクションを切り替えるには、<picture>を使用します。

パフォーマンス：レイアウトシフトを発生させません（CLS < 0.1）。最大コンテンツの描画を 2.5s 未満にします。フォントはfont-display: swapを指定して事前読み込みします。

デザイントークンへの変換

ビジュアルデザイナーの仕様をコードトークンに変換します。

Color palette    → CSS custom properties (--color-primary, --color-surface)
Type scale       → Tailwind fontSize config or CSS custom properties
Spacing system   → Tailwind spacing config (extends the 8px grid)
Border radius    → Tailwind borderRadius config
Shadows          → Tailwind boxShadow config

レスポンシブのパターン

コンテナー：max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 スタックからグリッドへ：grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 表示／非表示：段階的な機能強化にはhidden md:blockを使用します タイポグラフィのスケーリング：モバイルでは見出しのサイズを小さくします。text-3xl md:text-4xl lg:text-5xl

アクセシビリティの実装

  • すべてのインタラクティブ要素をフォーカス可能にし、キーボードで操作できるようにします
  • フォーカスリングを表示します：focus-visible:ring-2 focus-visible:ring-primary
  • 色だけを唯一の指標にしません（アイコンやテキストを追加します）
  • すべての画像に代替テキストを設定します。装飾画像にはalt=""を指定します
  • アイコンのみのボタンには ARIA ラベルを設定します
  • 最初にフォーカス可能な要素として、コンテンツへのスキップリンクを設置します
  • 見出しの階層を守ります：h1 は 1 つ、h2〜h6 は順番に使用します

成果物

  1. コンポーネントコード（React + Tailwind、プロダクション対応）
  2. トークンファイル（CSS カスタムプロパティまたは Tailwind 設定の拡張）
  3. レスポンシブの確認資料（375px、768px、1024px、1440px でのスクリーンショットまたは説明）
  4. アクセシビリティに関する注記（ARIA の使用、キーボード操作の流れ、スクリーンリーダーの動作）
  5. パフォーマンスに関する注記（画像の最適化、フォントの読み込み、CLS の防止）

品質チェックリスト

  • 全体を通してセマンティック HTML を使用している（div だらけになっていない）
  • 主要なブレークポイントだけでなく、すべてのブレークポイントでレスポンシブに動作する
  • すべてのインタラクティブ要素をキーボードで操作できる
  • フォーカス状態が見やすく、一貫している
  • 読み込み時にレイアウトシフトが発生しない（画像の寸法を明示し、フォントを事前読み込みする）
  • デザイントークンを一元管理し、コンポーネントにハードコードしていない
  • コンポーネントがピクセル単位でデザイン仕様に一致している
  • 未使用の CSS や不要なコードがない

コメント

Markdown 対応