mcpField
M
muapi-ui-design

muapi-ui-design

github.com/samuraigptデザイン・UI252.8k 回インストール4 週間前に更新
リポジトリ

muapi-ui-design について

muapi-ui-designは、製品要件をインターフェースのモックアップ、ワイヤーフレーム、デザインシステムの仕様に変換するAIエージェント用スキルです。コンポーネント階層、モバイルとWebのレイアウト、デザイントークン、ユーザビリティ原則を扱います。

主な機能

  1. 01アトミックデザインによる階層構成
  2. 02モバイルとWebのレイアウト設計
  3. 03書体・間隔・色のトークン指定
  4. 04ユーザビリティ原則の適用支援

活用シーン

  1. 01製品要件からモックアップのブリーフを作成
  2. 02モバイルとWebのレスポンシブ配置を計画
  3. 03一貫性のあるインターフェース用トークンを定義

インストール

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

$npx skills add https://github.com/samuraigpt/generative-media-skills --skill muapi-ui-design

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

詳細

🎨 UI/UX デザインモックアップスキル

高精細なデジタルインターフェースを設計する、AI エージェント向けの専門スキルです。 UI/UX デザインスキルは、製品要件を高精細なモックアップ、ワイヤーフレーム、デザインシステム向けの技術設計仕様に変換します。

中核となる能力

  1. アトミックデザインのオーケストレーション：アトム（ボタン）からオーガニズム（ヘッダー）までインターフェースを構成し、システムの一貫性を保ちます。
  2. プラットフォーム固有のレイアウト：モバイル（iOS/Android）と Web（SaaS/Eコマース）に対応するレスポンシブなブレークポイントを設計します。
  3. デザインシステムの統合：タイポグラフィのスケール、スペーシングトークン、カラーパレット（Hex/HSL）を指定します。
  4. ヒューリスティックへの配慮：確立されたユーザビリティ原則（Nielsenの10ヒューリスティックス）に従ったデザインにします。

🏗️ 技術仕様

1. 意図のマッピング表
クリエイティブな意図スタイルレイアウトパターン重視する点
エンタープライズ SaaSモダン／クリーンダッシュボード／グリッドデータ密度
コンシューマーアプリグラスモーフィズムFパターン／カード視覚的な魅力
EコマースミニマリストZパターン／商品グリッドコンバージョン
ポートフォリオブルータリスト非対称アイデンティティ
ユーティリティ／ツールニューモーフィズムコントロールパネル触覚的なフィードバック
2. デザイントークンと変数
  • Typography：テクノロジー向けにはジオメトリックサンセリフ（Inter/Roboto）、高級感の演出にはセリフ体（Playfair）。
  • Spacing：一貫性のあるリズミカルなスペーシングを実現する8ptグリッドシステム。
  • Color：コントラストが高く、アクセシビリティに配慮したパレット（WCAG 2.1準拠）。
  • Elevation：シャドウによる奥行きと、フラットデザインのレイヤーを使い分けます。

🧠 プロンプト最適化プロトコル（エージェントへの指示）

スクリプトを呼び出す前に、エージェントはユーザーの要件をデザイン仕様に展開する必要があります。

  1. アトミック構造：具体的なコンポーネント（アトム）を挙げます：グラスモーフィズムのボタン、角丸半径4pxの入力フィールド、アイコニックなサイドバー。
  2. 階層：レイアウトパターンを使います：コンテンツ量の多いサイトにはFパターン、ランディングページにはZパターン、グリッドベースのダッシュボード。
  3. タイポグラフィとトークン：デザイントークンを組み込みます：Interサンセリフ、8ptスペーシングシステム、WCAG準拠の高コントラストカラー。
  4. スキューモーフィズムの禁止：「画面の写真」のような結果を避けるため、プロンプトでフラットデザインまたはグラスモーフィズムを必ず指定します。

🚀 プロトコル：UI Designer の使用方法

ステップ1：製品概要を定義する

エージェントに機能一覧とターゲットユーザーを提示します。

ステップ2：スクリプトを呼び出す

generate-mockup.shスクリプトは、デザインシステムに関する内部知識を使って概要を展開します。

# Designing a Fintech Mobile App
bash scripts/generate-mockup.sh \
  --desc "crypto wallet home with price charts" \
  --platform mobile \
  --theme dark \
  --style glassmorphism

⚠️ 制約とガードレール

  • デバイスのリアリティ：必須 — 手、実物のスマートフォン、机は表示しないでください。純粋なUI/UXモックアップのみを生成します。
  • アクセシビリティ：明るい背景にコントラストの低いテキストを配置しないでください。
  • 複雑さ：1回のページ生成では「アトム」の一貫性を保ってください。
  • テキストのレンダリング：読みやすい見出しにはFluxを使用し、小さな本文にはプレースホルダーテキストを指定してください。

⚙️ 実装の詳細

このスキルは、高水準のDESCRIPTIONを、core/media/generate-image.shプリミティブ向けにレイアウトパターン、デザイントークン、美的制約を指定するUX_BRIEFに変換します。

コメント

Markdown 対応