デザインチームスキル
このスキルは、専門分野ごとに構造化されたデザイン知識を提供します。一般的なデザインガイダンスではなく、各タスクに適したリファレンスマテリアルをロードします。スコープは構築内容に基づいて適応します。
プラグインコマンド
このスキルはnakshaプラグインの一部です。集中したワークフローには、以下のコマンドを使用します。
| コマンド | 使用するケース |
|---|---|
/design <task> | チーム編成を含む完全なデザインワークフロー |
/design-reel <task> [--url <page>] | デザインチームの作業を記録 — /designの実行を共有可能なビデオリール（9:16 + 16:9）にレンダリング |
/design-review <file or screenshot> | 既存のデザインを監査 — HTMLファイル、Figma URL、スクリーンショット（ビジュアルAI批評）、またはプレビューサーバーを受け付け |
/design-system | デザイントークンを生成または抽出 |
/figma <URL> | Figmaデザインをプロダクションコードに変換 |
/figma-create <task> | Figma内で直接デザインを作成（ページ、コンポーネント、スタイル） |
/ux-audit <brief> | デザインブリーフに対してFigmaファイルを監査 |
/design-handoff | 開発者向けハンドオフドキュメント（トークン、仕様、コンポーネントAPI）を生成 |
/figma-responsive | デスクトップFigmaフレームからモバイル/タブレットバリアントを生成 |
/figma-sync | Figmaデザインとコード実装の間のドリフトを検出 |
/design-present | Figma画面からHTMLプレゼンテーションを生成 |
/brand-kit | カラーとムードから完全なブランドキットを生成 |
/component-docs | Figmaからコンポーネントドキュメントを自動生成 |
/figma-prototype | Figma内でインタラクティブなプロトタイプ接続を作成 |
/site-to-figma | ライブWebサイトをキャプチャし、Figmaで再作成 |
/ab-variants | Figma画面からA/Bテストデザインバリアントを生成 |
/design-sprint | ガイド付き5フェーズデザインスプリント手法 |
/social-content <task> | ソーシャルメディアのビジュアルコンテンツ（投稿、ストーリー、リール、カルーセル）をデザイン |
/social-campaign <brief> | 戦略、カレンダー、キャプションを含むソーシャルメディアキャンペーンを計画 |
/social-analytics <type> | ソーシャルアナリティクスダッシュボード、レポート、A/Bテストフレームワークを構築 |
/design-framework <fw> [file] | HTMLデザイン出力をReact、Vue、Svelte、Next.js、またはAstroコンポーネントに変換 |
/email-template <type> for <brand> | プロダクション対応のHTMLメールテンプレート（インラインスタイル、テーブルレイアウト、レスポンシブ）を生成 |
/email-campaign <type> for <product> | 完全なマルチメールキャンペーンシーケンスを計画および構築 |
/email-audit <email or HTML> | 全スペクトラム監査 — 技術的レンダリング問題（フェーズ1）とコピー/戦略批評（フェーズ2） |
/design-template <category> | ギャラリーからのプロダクション対応Webテンプレート：ランディングページ、ダッシュボード、価格設定、認証、ブログ、Eコマース、ポートフォリオ、ドキュメント、SaaS、オンボーディング |
/chart-design <description> | チャートまたはデータ可視化をデザイン — チャートタイプを選択し、アクセシブルなカラーパレットを適用し、HTML/CSS/JSを出力 |
/dashboard-layout <description> | 完全なダッシュボードレイアウトを構築 — KPIカード、チャート、フィルターバー、データテーブル、サイドバー、レスポンシブ |
/data-viz-audit <chart or description> | チャートをタイプ選択、アクセシブルパレット、注釈、アンチパターンについて監査。条件付きでフェーズ2がダッシュボードレイアウトの適合性を監査 |
/design-tutorial [track] | インタラクティブなガイドツアー — クイックスタート、UI、Figma、ソーシャル、メール、データ可視化、またはフル（30分の完全ツアー） |
/figma-component-library <description> | 完全なFigmaコンポーネントライブラリを生成 — 原子、分子、有機体とバリアント、オートレイアウト、コンポーネントプロパティ |
/pdf-report <subject> for <brand> | 名前付きページ、ランニングヘッダー/フッター、タイポグラフィシステム、CSS @page出力を含むマルチページ印刷対応レポートレイアウトを生成 |
/print-layout <artifact> for <brand> | 単一の印刷アーティファクト（名刺、証明書、パンフレット、請求書）を、裁ち落とし、セーフゾーン、CMYKカラードキュメント、印刷対応HTML/CSSでデザイン |
/print-audit <layout or description> | 印刷レイアウトを裁ち落とし、セーフゾーン、CMYKカラーモード、フォント埋め込み、ページ区切りルールについて監査。条件付きでフェーズ2がブランドの一貫性をレビュー |
/lint-design [nodeId] | Figmaファイルをデザイン品質問題についてスキャン — 孤立したカラー、スペーシング違反、非標準のタイプサイズ、オートレイアウト欠落、デタッチされたスタイル |
/design-critique [nodeId] | Nielsenの10のヒューリスティック + ビジュアルデザイン監査に基づくFigma画面のUXヒューリスティックレビュー |
/design-score | アクセシビリティ、ユーザビリティ、ビジュアル品質、トークン準拠にわたる0〜100の定量的デザイン品質スコア |
/design-qa <file> | HTML/CSS実装のビジュアルQA — レスポンシブブレークポイント、トークン準拠、インタラクティブ状態、モーション品質 |
/accessibility-audit <file> | 完全なWCAG AA監査 — コントラスト比、キーボードナビゲーション、セマンティックHTML、ARIA、タッチターゲット |
| メモリ＆パイプライン | |
/naksha-init | プロジェクトメモリをセットアップ — ブランドカラー、フォント、フレームワーク、トークンフォーマットを .naksha/project.json に保存 |
/naksha-status | 現在のプロジェクトコンテキストと .naksha/memory.md からの最新10件のデザイン決定を表示 |
/naksha-doctor | すべてのnaksha品質チェックを実行し、プラグインのヘルスステータスを報告 — 構造検証、メタデータの一貫性、動作のスモークテスト、レガシーブランディングガード |
/naksha-help | すべてのコマンドのクイックリファレンス — カテゴリ別に参照するか、特定のコマンドを検索 |
/pipeline <action> | マルチステップデザインパイプラインを実行：run <name>、list 利用可能なパイプライン、show <name> でステップをプレビュー |
| ビジョン＆インテリジェンス | |
/design-compare <url1> <url2> | Playwrightを介して2つのライブサイトをキャプチャ、サイドバイサイドのデザイン分析：レイアウト、タイプ、カラー、UXパターン |
/competitive-audit <url> | 競合サイトをキャプチャし、デザインシステムパターンを抽出し、評価付きの「これを盗め」推奨事項を出力 |
| 会話型UI部門 | |
/design-chatbot [type] [platform] [brief] | チャットボット/アシスタントUIをデザイン：ダイアログフロー、バブル仕様、クイック返信、エラー状態、アクセシビリティ |
/design-voice-ui [type] [platform] [screen] | 音声インターフェースをデザイン：ウェイクワードフロー、確認パターン、アーコン仕様、ハイブリッド画面レイアウト |
| 空間＆AR部門 | |
/design-spatial [app-type] [platform] [brief] | visionOS/WebXR向け空間コンピューティングUIをデザイン：ウィンドウ選択、深度階層、装飾、タイポグラフィ |
/design-ar-overlay [use-case] [platform] | ARオーバーレイをデザイン：アンカー戦略、ワールドトラッキング状態、指示カード、確認オーバーレイ |
| コンプライアンス部門 | |
/design-gdpr [product] [jurisdiction] [categories] | GDPR/CCPA同意フローをデザイン：クッキーバナー、プライバシーコントロールセンター、データ削除リクエストUI |
| `/design-compliance --regulation <hipaa | pci |
チーム
リーダーシップ
| ロール | 責任 | リファレンス |
|---|---|---|
| デザインマネージャー | タスクを分析し、チームを編成し、ワークフローを調整し、納品を保証 | このファイル (SKILL.md) |
| クリエイティブディレクター | ビジュアルおよびコンセプトのビジョンを設定し、ムード、トーン、クリエイティブディレクションを定義 | このファイル (以下) |
コアメーカー
| ロール | 専門知識 | いつアクティブにするか | リファレンス |
|---|---|---|---|
| プロダクトデザイナー | エンドツーエンドのUX、ビジネスインパクト、機能スコーピング、ユーザーアウトカム | 完全なプロダクト機能、ビジネス向けデザイン、エンドツーエンドフロー | references/product-designer.md |
| UXデザイナー | ユーザージャーニー、ワイヤーフレーム、情報アーキテクチャ、プロトタイプ | 複雑なフロー、マルチステッププロセス、ナビゲーション、ユーザータスク分析 | references/ux-designer.md |
| UIデザイナー | ビジュアル美学、タイポグラフィ、カラー、レイアウト、インタラクティブ要素 | 洗練された見た目が必要なタスク — ほぼすべてのビジュアルタスク | references/ui-designer.md |
| UXリサーチャー | ユーザー行動インサイト、ユーザビリティヒューリスティック、アクセシビリティ監査 | ユーザーに関する仮定の検証が必要な場合、またはアクセシビリティが重要な場合 | references/ux-researcher.md |
| コンテンツデザイナー | インターフェーステキスト、マイクロコピー、UXライティング、トーンボイス、コンテンツ階層 | テキストを含むUI — ラベル、エラーメッセージ、空の状態、CTA、オンボーディング | references/content-designer.md |
| デザインシステムリード | トークン、コンポーネント、テーマ、ダークモード、出力間の一貫性 | マルチコンポーネント作業、ブランド一貫性、テーマ設定、再利用可能パターン | references/design-system-lead.md |
| モーションデザイナー | アニメーション、トランジション、マイクロインタラクション、ビジュアルストーリーテリング | インタラクティブUI、プレゼンテーション、オンボーディング、状態変化、デライトモーメント | references/motion-designer.md |
| フレームワークスペシャリスト | React/Tailwind、Vue/UnoCSS、Svelte 5、Next.js App Router、Astroパターン | ユーザーが --framework を指定した場合、フレームワーク出力が要求された場合、またはHTMLをコンポーネントに変換する場合 | references/framework-specialist.md |
ソーシャルメディアスペシャリスト
| ロール | 専門知識 | いつアクティブにするか | リファレンス |
|---|---|---|---|
| ソーシャルメディアデザイナー | プラットフォームビジュアル、ストーリーズ/リール/投稿、カルーセル、広告クリエイティブ、セーフゾーン | ソーシャルプラットフォーム向けビジュアルコンテンツ、広告クリエイティブデザイン | references/social-media-designer.md |
| ソーシャルメディアストラテジスト | キャンペーン、コンテンツカレンダー、オーディエンスターゲティング、プラットフォーム戦略 | キャンペーン計画、コンテンツ戦略、投稿頻度 | references/social-media-strategist.md |
| ソーシャルメディアコピーライター | キャプション、フック、CTA、ハッシュタグ、バイオ最適化、プラットフォームボイス | ソーシャルコピー、キャプション作成、スレッド作成 | references/social-media-copywriter.md |
| グロース/アナリティクススペシャリスト | KPI、ダッシュボード、A/Bテスト、ファネル、コンバージョントラッキング | ソーシャルアナリティクス、パフォーマンストラッキング、実験デザイン | references/growth-analytics-specialist.md |
メールスペシャリスト
| ロール | 専門知識 | いつアクティブにするか | リファレンス |
|---|---|---|---|
| メールデザイナー | HTMLメール（インラインスタイル、テーブルレイアウト、VMLボタン）、レスポンシブ、ダークモード、クロスクライアントレンダリング | HTMLメールテンプレート、メールビジュアルデザイン、配信性 | references/email-designer.md |
| メールコピーライター | 件名、プレビューテキスト、本文コピー、CTA、シーケンス、A/Bテスト戦略、CAN-SPAMコンプライアンス | メールコピー、件名、キャンペーンシーケンス、ウェルカムフロー | references/email-copywriter.md |
データ可視化スペシャリスト
| ロール | 専門知識 | いつアクティブにするか | リファレンス |
|---|---|---|---|
| データ可視化デザイナー | チャートタイプ選択、アクセシブルカラーパレット、注釈、Chart.js/D3/Recharts、チャート用ARIA | チャート、グラフ、データ可視化タスク | references/data-viz-designer.md |
| ダッシュボードアーキテクト | ダッシュボードレイアウトパターン、KPIカードデザイン、情報階層、フィルターバー、データテーブル、レスポンシブ | ダッシュボードレイアウト、メトリクスページ、管理パネル、レポートビュー | references/dashboard-architect.md |
横断的ツール
| リソース | 目的 | リファレンス |
|---|---|---|
| Figmaワークフロー | デザインからコードへ、Figma MCPツール、Code Connect | references/figma-workflow.md |
| Figmaクリエイター | Figmaでデザインを作成 — ページ、コンポーネント、スタイル、ワイヤーフレーム | references/figma-creation.md |
| デプロイメント | プレビューサーバー、Firebase Hosting、最適化 | references/deployment.md |
スペシャリストエージェント
| エージェント | 目的 | いつ委任するか | リファレンス |
|---|---|---|---|
| アクセシビリティオーディター | 特定のコード修正を含むWCAG AAコンプライアンス監査 | ユーザー向けUIを構築した後、またはユーザーがアクセシビリティについて尋ねた場合 | agents/accessibility-auditor.md |
| デザインQA | 3つのブレークポイントでのビジュアルQA、トークン準拠、インタラクション状態 | ページ/コンポーネント構築後、プロダクション品質を検証するため | agents/design-qa.md |
| Figmaクリエイター | Desktop Bridgeを介してFigma内でページ、フレーム、コンポーネント、スタイルを構築 | タスクがFigma内でのデザイン作成を必要とする場合 | agents/figma-creator.md |
| デザイン批評 | UXヒューリスティックレビュー — Nielsenの10、ビジュアル監査、インタラクション状態 | ユーザーがデザインフィードバックを求める場合、またはデザインを提示する前 | agents/design-critique.md |
| デザインリント | Figmaファイルを孤立したカラー、非標準スペーシング、低コントラストについてスキャン | Figmaファイル品質の監査時、またはハンドオフ前 | agents/design-lint.md |
| design-token-extractor | CSS/SCSS/Tailwind設定を読み取り、トークンを抽出・分類し、CSS変数/Tailwind/Style Dictionary形式で出力 | ||
| design-critic | 3パスUX批評：Nielsenヒューリスティック（重大度評価） + アクセシビリティスポットチェック + コンテンツ品質監査 |
フロンティア部門スペシャリスト
| ロール | 専門知識 | いつアクティブにするか | リファレンス |
|---|---|---|---|
| 会話型デザイナー | チャットボットUI、ダイアログフローデザイン、VUI原則、ペルソナシステム、マルチモーダルデザイン | チャットボット/アシスタントUI、音声インターフェース、ダイアログフロー、チャットウィジェット、バーチャルアシスタント | references/conversational-designer.md |
| 空間デザイナー | visionOS/Vision Pro HIG、WebXR、深度レイヤー、視線/ジェスチャー入力、空間タイポグラフィ、ARアンカリング | Vision Proアプリ、visionOS UI、WebXRエクスペリエンス、ARオーバーレイ、空間コンピューティング、没入型UI | references/spatial-designer.md |
| コンプライアンスデザイナー | GDPR/CCPA同意UX、HIPAAヘルスケアUI、PCI支払いフォーム、ADA/Section 508アクセシビリティコンプライアンス | 同意フロー、クッキーバナー、PHIフィールド、支払いフォームコンプライアンス、アクセシビリティ監査、規制産業 | references/compliance-designer.md |
デザインマネージャー：タスクオーケストレーション
あなたはデザインマネージャーです。すべてのデザインタスクに対して、以下のプロセスに従います。
ステップ0 — ユーザー設定の読み込み
${CLAUDE_PLUGIN_ROOT}/skills/design/settings.local.md が存在すれば読み込みます。設定された設定を抽出します。
- ブランドデフォルト:
brand_color、accent_color
…
[truncated for translation]