jpskill.com
💬 コミュニケーション コミュニティ

bmad-create-ux-design

ユーザーが「UXデザインを作成したい」と言った際に、UXパターンを計画し、デザイン仕様をまとめることで、より使いやすいユーザー体験を設計するSkill。

📜 元の英語説明(参考)

Plan UX patterns and design specifications. Use when the user says "lets create UX design" or "create UX specifications" or "help me plan the UX"

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

一言でいうと

ユーザーが「UXデザインを作成したい」と言った際に、UXパターンを計画し、デザイン仕様をまとめることで、より使いやすいユーザー体験を設計するSkill。

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

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

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

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

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

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して bmad-create-ux-design.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → bmad-create-ux-design フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動

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

🎯 この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 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

UXデザインワークフローの作成

目標: プロダクトのステークホルダーと協力するUXファシリテーターとして、共同での視覚的探索と情報に基づいた意思決定を通じて、包括的なUXデザイン仕様を作成することです。

規約

  • ベアパス(例: steps/step-01-init.md)は、スキルルートから解決されます。
  • {skill-root} は、このスキルのインストールディレクトリ(customize.toml が存在する場所)に解決されます。
  • {project-root} で始まるパスは、プロジェクトの作業ディレクトリから解決されます。
  • {skill-name} は、スキルディレクトリのベース名に解決されます。

ワークフローアーキテクチャ

これは、規律ある実行のためにマイクロファイルアーキテクチャを使用しています。

  • 各ステップは、埋め込みルールを持つ自己完結型のファイルです。
  • 各ステップでユーザー制御を伴う順次進行です。
  • ドキュメントの状態はフロントマターで追跡されます。
  • 会話を通じてドキュメントを追記のみで構築します。

アクティベーション時

ステップ1: ワークフローブロックの解決

実行: python3 {project-root}/_bmad/scripts/resolve_customization.py --skill {skill-root} --key workflow

スクリプトが失敗した場合は、リゾルバーと同じ構造マージルールを適用して、ベース → チーム → ユーザーの順で以下の3つのファイルを読み込み、workflow ブロックを自分で解決してください。

  1. {skill-root}/customize.toml — デフォルト
  2. {project-root}/_bmad/custom/{skill-name}.toml — チームのオーバーライド
  3. {project-root}/_bmad/custom/{skill-name}.user.toml — 個人のオーバーライド

ファイルが欠落している場合はスキップされます。スカラーはオーバーライドし、テーブルはディープマージされ、code または id でキー付けされたテーブルの配列は一致するエントリを置き換え、新しいエントリを追加し、その他のすべての配列は追加されます。

ステップ2: 前置ステップの実行

{workflow.activation_steps_prepend} の各エントリを順に実行してから続行します。

ステップ3: 永続的な事実の読み込み

{workflow.persistent_facts} のすべてのエントリを、ワークフローの残りの実行期間中保持する基礎的なコンテキストとして扱います。file: で始まるエントリは、{project-root} 下のパスまたはグロブです。参照されるコンテンツを事実として読み込みます。その他のすべてのエントリは、そのままの事実です。

ステップ4: 設定の読み込み

{project-root}/_bmad/bmm/config.yaml から設定を読み込み、解決します。

  • 挨拶には {user_name} を使用します。
  • すべてのコミュニケーションには {communication_language} を使用します。
  • 出力ドキュメントには {document_output_language} を使用します。
  • 出力場所と成果物スキャンには {planning_artifacts} を使用します。
  • 追加のコンテキストスキャンには {project_knowledge} を使用します。

ステップ5: ユーザーへの挨拶

{user_name} に、{communication_language} で挨拶します。

ステップ6: 後置ステップの実行

{workflow.activation_steps_append} の各エントリを順に実行します。

アクティベーションが完了しました。以下のワークフローを開始します。

パス

  • default_output_file = {planning_artifacts}/ux-design-specification.md

実行

  • ✅ エージェントのコミュニケーションスタイルで、設定された {communication_language} で常に出力してください。
  • ✅ すべての成果物とドキュメントのコンテンツは、常に {document_output_language} で記述してください。
  • UXデザインワークフローを開始するには、./steps/step-01-init.md を完全に読み、それに従ってください。
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Create UX Design Workflow

Goal: Create comprehensive UX design specifications through collaborative visual exploration and informed decision-making where you act as a UX facilitator working with a product stakeholder.

Conventions

  • Bare paths (e.g. steps/step-01-init.md) resolve from the skill root.
  • {skill-root} resolves to this skill's installed directory (where customize.toml lives).
  • {project-root}-prefixed paths resolve from the project working directory.
  • {skill-name} resolves to the skill directory's basename.

WORKFLOW ARCHITECTURE

This uses micro-file architecture for disciplined execution:

  • Each step is a self-contained file with embedded rules
  • Sequential progression with user control at each step
  • Document state tracked in frontmatter
  • Append-only document building through conversation

On Activation

Step 1: Resolve the Workflow Block

Run: python3 {project-root}/_bmad/scripts/resolve_customization.py --skill {skill-root} --key workflow

If the script fails, resolve the workflow block yourself by reading these three files in base → team → user order and applying the same structural merge rules as the resolver:

  1. {skill-root}/customize.toml — defaults
  2. {project-root}/_bmad/custom/{skill-name}.toml — team overrides
  3. {project-root}/_bmad/custom/{skill-name}.user.toml — personal overrides

Any missing file is skipped. Scalars override, tables deep-merge, arrays of tables keyed by code or id replace matching entries and append new entries, and all other arrays append.

Step 2: Execute Prepend Steps

Execute each entry in {workflow.activation_steps_prepend} in order before proceeding.

Step 3: Load Persistent Facts

Treat every entry in {workflow.persistent_facts} as foundational context you carry for the rest of the workflow run. Entries prefixed file: are paths or globs under {project-root} — load the referenced contents as facts. All other entries are facts verbatim.

Step 4: Load Config

Load config from {project-root}/_bmad/bmm/config.yaml and resolve:

  • Use {user_name} for greeting
  • Use {communication_language} for all communications
  • Use {document_output_language} for output documents
  • Use {planning_artifacts} for output location and artifact scanning
  • Use {project_knowledge} for additional context scanning

Step 5: Greet the User

Greet {user_name}, speaking in {communication_language}.

Step 6: Execute Append Steps

Execute each entry in {workflow.activation_steps_append} in order.

Activation is complete. Begin the workflow below.

Paths

  • default_output_file = {planning_artifacts}/ux-design-specification.md

EXECUTION

  • ✅ YOU MUST ALWAYS SPEAK OUTPUT In your Agent communication style with the config {communication_language}
  • ✅ YOU MUST ALWAYS WRITE all artifact and document content in {document_output_language}
  • Read fully and follow: ./steps/step-01-init.md to begin the UX design workflow.