mcpField
D
design-lab

design-lab

github.com/podoデザイン・UI30164 回インストール4 日前に更新
リポジトリ

design-lab について

design-labは、既存のWebプロジェクトでUIの方向性を探るスキルです。動作するコンポーネント案を生成してブラウザーで比較し、フィードバックを反映しながら設計案と実装計画をまとめます。

主な機能

  1. 01デザイン面談とデザインシステムの推定
  2. 02異なるUIコンポーネント案の生成
  3. 03ブラウザーでの案の並列比較
  4. 04要素単位のフィードバック
  5. 05設計の反復と実装計画の作成
  6. 06一時的なデザインファイルの削除

活用シーン

  1. 01Webコンポーネントのデザイン案を検討
  2. 02実装前にUIの方向性を比較
  3. 03ブラウザーのフィードバックを基に設計を反復

インストール

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

$npx skills add https://github.com/podo/design-agent-skills --skill design-lab

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

同梱ファイルstub.yaml

詳細

design-lab

カタログの概要 — スキル全体：0xdesign/design-plugin

判断ツリー

  1. スキル全体はすでにインストールされていますか？

    • グローバル：f=~/.agents/skills/design-lab/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • プロジェクト：f=.agents/skills/design-lab/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • installed → スキルは design-lab としてインストールされています。これを呼び出して続行します
    • pointer → ステップ 2 に進みます

  2. スコープを検出してからインストールします。

    [ -e ~/.agents/skills/design-lab ] && echo "global" || echo "project"

    グローバル：

    npx skills add 0xdesign/design-plugin --skill design-lab -g -y

    プロジェクト：

    npx skills add 0xdesign/design-plugin --skill design-lab -y

    Claude Code： 会話を離れずにコマンドを実行するには、! で始まるコマンドをチャットメッセージとして送信します。

Claude Code プラグイン経由：

/plugin marketplace add 0xdesign/design-plugin
/plugin install design-and-refine@design-plugins

注意事項

  • 必要条件： 開発サーバーが起動しているウェブプロジェクト（各バリエーションはブラウザーでプレビューされます）
  • ライセンス： 上流リポジトリに LICENSE ファイルはありません

インストール後の呼び出し

  • スキル名：design-lab
  • トリガーフレーズ：「design lab」、「design exploration」、「design variants」、「iterative design」
  • プラグイン経由のみ：/design-and-refine:start コマンド（必要に応じてコンポーネント名を指定）

機能

ユーザー自身のコードベースで、インタラクティブなデザイン探索セッションを実行します。まず簡単なデザインについてのヒアリングを行い、既存のデザインシステムを推測してから、一時的な design-lab ルートに、実際に動作するコンポーネントとして複数の個性的な UI バリエーションを生成します。ブラウザーでそれらを並べて比較し、オーバーレイを通じて要素単位のフィードバックを残すと、スキルが改善版を合成します。方向性が確定するまで、このプロセスを繰り返します。最後に実装計画を作成し、一時ファイルを削除します。

このスキルのテキストは、スキルディレクトリの外にある、プラグインの templates フォルダー内の FeedbackOverlay テンプレートを参照します。npx によるインストールではスキルのみがコピーされるため、エージェントはスキルの説明をもとにオーバーレイを再作成します。上流で想定された完全なセットアップを利用するには、上記の Claude Code プラグイン経由の方法を使用してください。

使用しない場合

  • 比較を繰り返さずにデザインを一度だけ仕上げる場合 → design-consultation または plan-design-review を使用します
  • 既存のインターフェースを磨き上げたり、整理したりする場合 → baseline-ui を使用します
  • コードベースの外でビジュアルを生成し、反復改善する場合 → design-catalogue を使用してデザイン生成スキルを選択します

コメント

Markdown 対応