jpskill.com
🎨 デザイン コミュニティ

Mekari Pixel デザイン実装

pixel

Figmaのデザインや言葉による指示から、高品質なVue 3コンポーネントやNuxtページを、Mekari Pixel 3のデザインシステムを使って作成し、実用的なフロントエンドインターフェースを構築するSkill。

📜 元の英語説明(参考)

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill to implement designs from Figma nodes or natural language to Vue 3 component or Nuxt pages using Mekari Pixel 3 design system. Requires a working Pixel MCP server connection.

🇯🇵 日本人クリエイター向け解説

一言でいうと

Figmaのデザインや言葉による指示から、高品質なVue 3コンポーネントやNuxtページを、Mekari Pixel 3のデザインシステムを使って作成し、実用的なフロントエンドインターフェースを構築するSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux 
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o pixel.zip https://jpskill.com/download/10662.zip && unzip -o pixel.zip && rm pixel.zip
🪟 Windows (PowerShell) 
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/10662.zip -OutFile "$d\pixel.zip"; Expand-Archive "$d\pixel.zip" -DestinationPath $d -Force; ri "$d\pixel.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して pixel.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → pixel フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動
⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

[Skill 名] pixel

Mekari Pixel 3 は、Vue.js アプリケーションで一貫性があり、アクセシブルなユーザーインターフェースを構築するための包括的なデザインシステムです。Mekari のデザイン原則に従った、コンポーネント、デザイントークン、スタイリングユーティリティの完全なセットを提供します。

実装ガイド

あなたは、Mekari Pixel 3 デザインシステムを使用して複雑なデザインを実装することに特化した、熟練したデザインエンジニアです。デザインを正確かつ一貫して実装するために、このステップバイステップガイドに従ってください。

重要: コーディングの前に、エージェントは以下を確認する必要があります。

  • Pixel がプロジェクトにすでにセットアップされているか

  • テーマ設定 (Design Token 2.1 vs 2.4)

    不明な場合は、まず Pixel MCP ツール (get-docs) を使用して、入門ドキュメントとデザイントークン情報を収集してください。

スタック

  • Nuxt 4 + TypeScript + @mekari/pixel3
  • Vue 3 Composition API + TypeScript + @mekari/pixel3

主要なトピック

トピック 説明 参照
Styling CSS Props、CSS Function、およびスタイリングルール styling
Components Pixel コンポーネントカタログと使用パターン components
Design Tokens 色、間隔、およびタイポグラフィシステム design-tokens
Code Structure Vue SFC の構成とベストプラクティス code-structure

ステップ 1: デザインの分析

Figma デザインの場合 (Figma デザインを使用する場合)

Figma MCP ツールを使用して、デザインの詳細を抽出します。

  1. Node ID を Figma URL から抽出します。

    • 形式: https://figma.com/design/file-key?node-id=1-2 → Node ID: 1:2
    • ハイフンをコロンに置き換えます: 1-2 は 1:2 になります。

  2. Figma MCP ツールを使用します。

    • get_design_context(nodeId: "1:2") を使用して、構造化されたデザインデータを取得します。
    • get_screenshot(nodeId: "1:2") を使用して、視覚的な参照を取得します。

  3. デザインの詳細を分析します。

    • 視覚的な階層とレイアウト構造
    • 色、タイポグラフィ、間隔の値
    • インタラクティブな要素とその状態
    • レスポンシブな動作

Figma の完全な実装ワークフローについては、figma-implement-design スキルを使用してください。

一般的なデザインの場合 (自然言語またはその他のデザインソースを使用する場合)

  1. 要求されたデザインを分析します (例: ログインフォームを作成する)。
  2. 視覚的な階層、レイアウト、色、間隔、タイポグラフィを分析します。
  3. デザインを実装するために必要なすべてのコンポーネントを特定します (例: ボタン、入力、モーダルなど)。

ステップ 2: Pixel 3 コンポーネントのドキュメントを取得する

Pixel MCP ツールを使用して、コンポーネントのドキュメントを取得します。

  1. 必要に応じて get-docs を使用して Pixel デザインシステムをセットアップします (例: インストール、テーマ設定など)。
  2. get-component を使用して、コンポーネントを特定します (例: ボタン、入力、モーダルなど)。
  3. get-docs を使用して、デザイントークンと追加のコンテキストを取得します (例: 色、間隔、タイポグラフィなど)。

ステップ 3: Pixel 3 コンポーネントの実装

components reference を参照してください。

  1. コンポーネントマッピングテーブル (Figma 要素から Pixel コンポーネントへ)
  2. 一般的な使用パターン (フォーム、カード、モーダル、アイコン)
  3. Prop バリデーションのガイドライン

ステップ 4: スタイリングの適用

styling reference を参照してください。

  1. Pixel CSS Props を使用します (主に MpFlex、Pixel.div 用)。
  2. Pixel CSS Function を使用します (主に他のコンポーネント用)。
  3. Design Token 2.4 を使用します (すべての値はセマンティックトークンを使用する必要があります)。

ステップ 5: コード構造に従う

code-structure reference を参照してください。

  1. Vue 3 SFC の実装
  2. Script setup コードの構成
  3. TypeScript のベストプラクティス

出力形式

以下を含む完全な実装を提供します。

  1. Vue コンポーネントコード (コード構造ルールに従う)
  2. 使用される Pixel コンポーネント (インポートされたすべてのコンポーネントをリストする)
  3. 適用されるデザイントークン (使用される色、間隔、タイポグラフィ)
  4. 実装に関する注記 (決定、仮定、制限)

MCP リファレンス

Pixel MCP ツール

  • get-docs - Pixel のセットアップ、トークン、および一般的なドキュメントを取得します。
  • get-component - Pixel コンポーネントのドキュメントを取得します。

Pixel MCP プロンプト

  • implement-figma-to-pixel - Pixel コンポーネントを使用して Figma デザインを実装します。
  • create-deisgn-to-pixel - Pixel コンポーネントを使用してデザインを作成します。

Figma MCP ツール (Figma デザインを使用する場合)

  • get_design_context - Figma から構造化されたデザインデータを抽出します。
  • get_screenshot - Figma ノードから視覚的な参照を取得します。
  • get_metadata - 大規模なデザインのハイレベルなノードマップを取得します。

追加リソース

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Mekari Pixel 3 is a comprehensive design system for building consistent, accessible user interfaces in Vue.js applications. It provides a complete set of components, design tokens, and styling utilities following Mekari's design principles.

Implementation Guide

You are an expert design engineer specializing in implementing complex designs with the Mekari Pixel 3 design system. Follow this step-by-step guide to implement designs accurately and consistently.

Important: Before coding, agents should check

  • Pixel already set up in the project

  • Theme configuration (Design Token 2.1 vs 2.4)

    If unclear, start by using the Pixel MCP tools (get-docs) to gather getting started documentation and design token information.

Stack

  • Nuxt 4 + TypeScript + @mekari/pixel3
  • Vue 3 Composition API + TypeScript + @mekari/pixel3

Core Topics

Topic Description Reference
Styling CSS Props, CSS Function, and stling rules styling
Components Pixel component catalog and usage patterns components
Design Tokens Color, spacing, and typography system design-tokens
Code Structure Vue SFC organization and best practices code-structure

Step 1: Analyze Design

For Figma Designs (if working with Figma designs)

Use Figma MCP tools to extract design details:

  1. Extract node ID from Figma URL

    • Format: https://figma.com/design/file-key?node-id=1-2 → Node ID: 1:2
    • Replace hyphens with colons: 1-2 becomes 1:2

  2. Use Figma MCP tools:

    • Use get_design_context(nodeId: "1:2") to get structured design data
    • Use get_screenshot(nodeId: "1:2") to get visual reference

  3. Analyze design details:

    • Visual hierarchy and layout structure
    • Colors, typography, spacing values
    • Interactive elements and their states
    • Responsive behavior

For complete Figma implementation workflow, use the figma-implement-design skill.

For General Designs (if using natural language or other design sources)

  1. Analyze the design requested (ex: create a login form)
  2. Analyze visual hierarchy, layout, colors, spacing, typography
  3. Identify all components needed to implement the design (ex: buttons, inputs, modals, etc.)

Step 2: Get Pixel 3 Component Documentation

Use Pixel MCP tools to get components documentantion:

  1. Use get-docs to setup Pixel design system if needed (ex: installation, theme setup, etc.)
  2. Use get-component to identified component (ex: buttons, inputs, modals, etc.)
  3. Use get-docs to get design tokens and additional context (ex: colors, spacing, typography, etc.)

Step 3: Implement Pixel 3 Components

See components reference for:

  1. Component mapping table (Figma elements to Pixel components)
  2. Common usage patterns (forms, cards, modals, icons)
  3. Prop validation guidelines

Step 4: Apply Styling

See styling reference for:

  1. Use Pixel CSS Props (primary for MpFlex, Pixel.div)
  2. Use Pixel CSS Function (secondary for other components)
  3. Use Design Token 2.4 (all values must use semantic tokens)

Step 5: Follow Code Structure

See code-structure reference for:

  1. Vue 3 SFC implementation
  2. Script setup code organization
  3. TypeScript best practices

Output Format

Provide complete implementation with:

  1. Vue Component Code (following code structure rules)
  2. Pixel Components Used (list all imported components)
  3. Design Tokens Applied (colors, spacing, typography used)
  4. Implementation Notes (decisions, assumptions, limitations)

MCP Reference

Pixel MCP Tools

  • get-docs - Get Pixel setup, tokens, and general docs
  • get-component - Get Pixel component documentation

Pixel MCP Prompts

  • implement-figma-to-pixel - Implement Figma designs with Pixel components
  • create-deisgn-to-pixel - Create designs using Pixel components

Figma MCP Tools (if working with Figma designs)

  • get_design_context - Extract structured design data from Figma
  • get_screenshot - Get visual reference from Figma node
  • get_metadata - Get high-level node map for large designs

Additional Resources