design-engineer: どのジョブにどのデザインスキルを使うか
~/.claude/skills/ 配下の専門スキルはすべて、ライブの上流リポジトリへの薄いポインターです。どのスキルもコピーをベンダリングしません。各スキルは、アクションを実行する前に最新版を取得する方法を説明しています。共通のフェッチャーは以下の通りです:
bash ~/.claude/skills/design-engineer/scripts/upstream.sh <name> # クローンまたは更新し、PATH=<dir> を出力
スキル名: impeccable ui-ux-pro-max blender-mcp img2threejs video-shotcraft hyperframes penpot remotion lemo-opuscar diagram-design。オフラインの場合は --no-update を追加してください。
ルーティングテーブル
| ユーザーの要望 | スキル | 理由 |
|---|---|---|
| 新製品・新ページ向けのスタイル方向性、パレット、フォント、完全なデザインシステム | ui-ux-pro-max | 79スタイル / 192プロダクトタイプを検索し、システムを出力 |
| 既存UIの改善、レビュー、ポリッシュ、デスロップ化、大胆・控えめに変更 | impeccable | 24のステアリング/レビュー/フィニッシュコマンド + 62ルール検出器 |
| UI変更を出荷する前にAIスロップを検出 | impeccable detect | 決定論的、LLM不使用 |
| アーキテクチャ、フロー、シーケンス、ER、ガント、組織図、あらゆるダイアグラム | diagram-design | ブランド化された1つのHTML+SVGファイル、45タイプ |
| 製品UI内部のチャート（スタンドアロンダイアグラムではない） | dataviz（組み込み）→ impeccable | チャートシステムにはdataviz、周辺UIにはimpeccable |
| 実際のWebサイトやアプリのプロモーション動画 | video-shotcraft | 実際のページをキャプチャ、ショットカード、Remotionレンダリング |
| HTML/CSSからの動画、Figmaのブランドトークン、既存動画の逆再生、スライドショー | hyperframes | HTMLからMP4、450ブロック、/figma サブスキル |
| Reactでの動画、または既存のRemotionリポジトリ | remotion | 公式Remotionスキル |
| 絵画的またはドキュメンタリースタイルのナレーション付き短編映画・解説動画（映像素材なし） | lemo-opuscar | 60以上のコードのみの映画スタイル（スコア + TTS） |
| 参照画像からコードのみのThree.jsモデルへ | img2threejs | プロシージャル、アニメーション対応 |
| 実際の3Dモデリング、シーン、マテリアル、レンダリング、アセットインポート | blender-mcp | MCP経由でライブのBlenderを操作 |
| Penpotデザインファイルの読み取りまたは編集 | penpot | 公式Penpot MCP |
| UI作業のためのFigmaファイルの読み取り（トークン、フレーム、コンポーネント） | 公式Figma MCP（claude mcp add figma -t http https://mcp.figma.com/mcp） | このセットではカバーされません。HyperFramesの figma サブスキルは動画専用です |
| Figmaのブランドアセットを動画に取り込む | hyperframes figmaサブスキル | HyperFramesモーションを構築するためだけにFigmaを読み取ります |
意思決定ルール
- 既存UI vs 新規UI。 既存: 狭いターゲットに対して
impeccable critiqueから始める。デザインシステムがない新規: 最初にui-ux-pro-maxを実行し、DESIGN.mdに永続化、ビルド、そしてimpeccableでレビュー。出荷されたUIではレビューステップを決してスキップしない。 - 動画: ソース素材で選択。
- 実際のプロダクトページ →
video-shotcraft。 - HTML/CSSスキル、ブランドアセット、Figma →
hyperframes。 - Reactでコードを書いているチーム / リポジトリがすでにRemotionを使用 →
remotion。 - ストーリーやトピックのフィルム、コードで描画 →
lemo-opuscar。 移植でない限り、1つのプロジェクトで2つの動画フレームワークを混在させないでください（HyperFramesにはremotion-to-hyperframesがあります）。
- 実際のプロダクトページ →
- 3D: コードかDCCか。 出力がコードで構築されたWebアセットである必要がある →
img2threejs。実際のモデリングツール、レンダリング、ダウンロードしたアセットが必要なもの →blender-mcp。どちらもユーザーがホストのセットアップ（インストーラーまたはBlenderアドオン）を確認する必要があります。ユーザーが何をすべきかを伝えてください。 - ダイアグラムはチャートではない。 システムのダイアグラム →
diagram-design。アプリ内のデータチャート →dataviz。動画内のチャート → 動画スキルのチャートブロック。 - デザインファイル。 Penpot →
penpot。UIのためのFigma → 公式Figma MCP。動画のためのFigma →hyperframesfigmaサブスキル。トークンを一度取得し、DESIGN.mdに書き込んで、他のすべてのスキルが再利用できるようにします。 - MCPバックエンドスキル（
blender-mcp、penpot）は実行中のホストアプリが必要です。最初にclaude mcp listを確認してください。存在しない場合は、インストールと接続手順をユーザーに伝え、確認があるまで停止してください。
一般的なチェーン
- 新規ランディングページ:
ui-ux-pro-max（システム）→ ビルド →impeccable detect+critique→polish。 - ローンチキット:
ui-ux-pro-maxトークン → サイト →video-shotcraftプロモーション →diagram-designドキュメント用アーキテクチャ、すべて同じトークン上で。 - デザインハンドオフ:
penpotトークン/フレーム →DESIGN.md→ ビルド →impeccable audit。 - ダイアグラム付き解説フィルム:
diagram-design静止画 →hyperframesまたはlemo-opuscarで動きをつける。 - ヒーロー3Dオブジェクト: 製品写真から
img2threejs→ 埋め込み → インタラクション用にimpeccable overdrive。
デザインタスクを開始する前に
- テーブルからスキルを選択します。2つ該当する場合は意思決定ルールに従います。それでも不明な場合は、1つ質問してください。
upstream.sh <name>で最新版を取得し、スキルが指定するエントリファイルを読みます。現在のステップに必要なものだけを読んでください。- プロジェクト内に既存の
DESIGN.md、PRODUCT.md、.diagram-design、またはトークンファイルがないか確認し、それらを再利用します。 - どのスキルを選んだか、その理由を1行で述べてから、作業を実行します。
メンテナンス
upstream.shは~/.cache/design-skills/にスキルごとにシャロークローンを保持します。リセットするにはそのフォルダを削除してください。- スキルを追加するには:
scripts/upstream.shにケースを追加し、ポインターSKILL.mdを作成し、上記のテーブルに行を追加します。 - 上流がプラグインまたは
npx skills addパスを提供している場合、実際のプロジェクト内ではそちらを優先します。ポインタースキルは常に利用可能なフォールバックです。