mcpField
P
pixel

pixel

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

pixel について

pixel は、Vue/Nuxt の UI 開発で Pixel 3 コンポーネントとデザイントークンを使うためのデザインシステムスキルです。Figma のデザインをコンポーネントに対応させ、プロパティやスタイルを確認して実行可能なコードを作成します。

主な機能

  1. 01UI の要件を Pixel コンポーネントに対応
  2. 02プロパティ、スロット、イベントの確認
  3. 03デザイントークンと CSS Props の使用
  4. 04Figma デザインから UI を生成
  5. 05実行可能な Vue/Nuxt コードの出力

活用シーン

  1. 01テキストの要件からフォームや UI を作成
  2. 02Figma デザインを Vue コンポーネントに変換
  3. 03コンポーネントのプロパティやスタイル規則を確認

MCP 対応

Pixel MCP でドキュメント、コンポーネント、アイコン、パターン、テンプレートを参照し、Figma MCP でデザインコンテキストやスクリーンショットを取得します。

インストール

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

$npx skills add https://github.com/ahmadzakiy/skills --skill pixel

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

同梱ファイル

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

agents/
openai.yaml
references/
code-structure.md
components.md
design-tokens.md
setup.md
styling.md

詳細

Pixel Design System

ノイズの少ないワークフローで Pixel 3 UI を構築します。セットアップを確認し、UI をマッピングし、props を検証し、トークンに準拠したスタイルを適用して、実行可能な Vue/Nuxt コードを作成します。

基本ルール

  1. UI は @mekari/pixel3 からインポートします。
  2. 生の HTML に相当する要素より、Pixel のプリミティブを優先して使用します。
  3. 検証済みのフィールドは MpFormControl でラップします。
  4. 推測する前に、Pixel MCP の get-component で props を確認します。
  5. 色、余白、タイポグラフィには、生の値よりデザイントークンを優先します。
  6. MpFlex、MpScrollbar、MpSkeleton、Pixel.* には CSS Props を使用し、CSS Props が利用できない場合にのみ css() を使用します。
  7. 2.1 と 2.4 を場当たり的に混在させず、プロジェクトで有効なトークンモードを維持します。

例

テキストのリクエスト → コンポーネントの出力

入力：「メールアドレスとパスワードのフィールド、および送信ボタンがあるフォームを作成してください」 期待される出力： MpInput コンポーネントをラップする MpFormControl、variant="primary" の MpButton、@mekari/pixel3 からの適切なインポート、余白へのトークンの使用。

Figma → コード

入力： ページネーション付きデータテーブルの Figma ノード 期待される出力： ノード ID を取得 → get_design_context を呼び出す → MpTable と MpPagination にマッピングする → get-component で props を検証する → 実行可能な SFC を出力する。

ワークフロー

1. セットアップを確認する

パッケージのセットアップ、プラグインの登録、またはトークンモードが不明な場合は、references/setup.md を読みます。

2. リクエストを分析する
  • Figma を扱う場合：ノード ID を抽出し、Figma MCP の get_design_context と get_screenshot を使用します。
  • テキストでのリクエストの場合：UI をセクション、状態、インタラクション、レスポンシブ動作に分解します。
  • コーディングの前に、コンポーネントの簡潔な計画を作成します。
3. UI を Pixel コンポーネントにマッピングする

references/components.md を読み、不確かなコンポーネントは Pixel MCP の get-component で検証します。

4. 安全にスタイルを適用する
5. 最終コードを作成する

最終的な Vue/Nuxt コンポーネントを書く前に、references/code-structure.md を読みます。

MCP の使用方法

Pixel MCP
  • get-docs - Pixel のセットアップ、テーマの有効化、デザイントークン、実装ガイド
  • get-component - コンポーネントの例、props、スロット、イベント
  • get-icon-name - アイコン名と使用方法
  • get-pattern - Pixel の UI パターンとコード例
  • get-template - Pixel のテンプレートとコード例

利用可能なプロンプト：

  • implement-figma-to-pixel - Figma デザインを Pixel 3 コンポーネントに変換する実装ガイドを生成します
  • create-design-to-pixel - 自然言語による UI の説明から Vue コンポーネントのコードを生成します

セットアップやトークンモードが不明な場合は、まず get-docs を使用します。次に、コンポーネント API には get-component、再利用可能な UI パターンには get-pattern、スターターレイアウトには get-template を使用します。

Figma MCP
  • 構造、アセット、コードのヒントには get_design_context
  • 視覚的な確認には get_screenshot
  • 大きなノードのナビゲーションに限り get_metadata

出力要件

常に以下を作成します。

  1. 実行可能な完全な Vue/Nuxt コード
  2. 必要なインポート
  3. 使用するコンポーネント
  4. トークンとスタイルに関する判断
  5. 前提、情報の不足、未解決の API に関する疑問

QA チェックリスト

  • セットアップとトークンモードを確認するか、明示的に記載している
  • 不確かな点があった場合、Pixel のドキュメントに照らして props を検証している
  • レイアウトと余白が意図した階層に合っている
  • 該当する場合、ホバー、無効、エラー、読み込みの各状態に対応している
  • 不要なインラインスタイルや生の値が残っていない

リファレンスの読み込みガイド

  • プロジェクトの準備状況が不明な場合は、コーディング前に setup.md を読みます。
  • UI のマッピングや prop の問題の解決には、components.md を読みます。
  • トークンや余白のスケールを選ぶ際は、design-tokens.md を読みます。
  • レイアウトやカスタムの視覚ルールを追加する際は、styling.md を読みます。
  • 最終コードを生成する直前に、code-structure.md を読みます。

コメント

Markdown 対応