stitch-design-bridge

Stitch Design Bridge

UI/UX スキルシステムで Stitch レイヤーとしてこのスキルを使用します。Stitch は探索を加速するものであり、中心的な設計者でも、最終的なデザインの決定者でも、信頼できる唯一の情報源でもありません。

システム内での役割

大規模な UI プロジェクトでのデフォルトの順序：

task-plan-v2-orchestrator
-> ui-ux-llm-product-architect
-> seo-llm-site-architect when public discoverability matters
-> ui-ux-pro-max
-> stitch-design-bridge
-> senior-figma-orchestrator when Figma is involved
-> implementation specialist
-> validation
-> obsidian/wiki context capture for large projects

Stitch は ui-ux-pro-max の後に配置します。Pro Max が、プロダクトの種類、スタイル候補、色とタイポグラフィの方向性、UX リスク、アクセシビリティの優先事項、スタックに関するガイダンスなど、デザインに必要な情報を定義するためです。その後、Stitch がそれらの制約に沿って、ビジュアルや画面のバリエーションを探索します。

動作モード

• brief：プロジェクトの制約に基づき、Stitch 用のプロンプトを作成します。
• variant-plan：複数の Stitch 探索の方向性と成功基準を定義します。
• review-output：UX、SEO/LLM、アクセシビリティ、ブランド、実装上の制約に照らして Stitch の出力を評価します。
• figma-handoff：Stitch の出力を senior-figma-orchestrator に渡す準備をします。
• code-handoff：Stitch の出力をローカルで実装する準備をします。
• config-check：秘密情報を表示せずに、ローカルの Stitch API/MCP の準備状況を確認します。
• council：推奨事項が相反する場合に、上級 UI/UX/SEO/LLM 評議会での判断を実施するか、その準備をします。

必須ワークフロー

1. より広範なシステム内で Stitch をどのように連携させるかを決める前に、references/orchestration-contract.md を読みます。
2. プロンプトの作成または出力のレビューを行う場合は、references/prompt-quality-rubric.md を読みます。
3. API、MCP、認証情報、外部アップロードに関する判断を行う場合は、references/safety-and-api.md を読みます。
4. 利用可能な入力を確認します。
   • プロダクト/UX ブリーフ；
   • 公開ページが関係する場合は、SEO/LLM の制約；
   • ui-ux-pro-max の推奨事項；
   • ブランドの制約と避けるべき方向性；
   • 目標とする出力：Stitch プロンプト、バリエーション、Figma への引き継ぎ、コードへの引き継ぎ、またはレビュー。
5. 外部の Stitch サービスを利用する場合は、送信するデータを記録し、非公開のプロジェクトデータについて明示的な承認を得ます。
6. API キー、トークン、Cookie、非公開 URL、非公開のスクリーンショット、.env の内容を、プロンプト、レポート、Wiki ページ、タスク計画に含めてはいけません。
7. Stitch の出力は候補となる成果物として扱います。Figma、コード、または本番環境で使用する前に、必ずレビューしてください。

API と MCP の認証情報

環境変数を使用します。このスキルに認証情報を保存しないでください。

想定される変数：

STITCH_API_KEY

必要に応じて設定チェッカーを実行します。

python3 $CODEX_SKILLS_DIR/stitch-design-bridge/scripts/check_stitch_config.py

チェッカーが報告するのは、存在の有無、想定される形式、秘匿化されたメタデータのみです。キー全体を表示してはいけません。

判断ルール

Stitch が提案できるもの：

• ビジュアルの方向性；
• レイアウトのバリエーション；
• コンポーネントの配置；
• 画面単位のコンセプト；
• 利用可能な場合は、初期段階のコードまたはキャンバスのアイデア。

Stitch が覆してはならないもの：

• 目に見える事実とビジネス上の制約；
• SEO/LLM のコンテンツアーキテクチャ；
• アクセシビリティ要件；
• セマンティック HTML と決定論的なアクションラベル；
• セキュリティ/プライバシーの境界；
• レビューなしでの Figma デザインシステムのトークン；
• 最終的な実装の検証。

シニア評議会の起動条件

以下のいずれかに該当する場合は、council モードを使用します。

• UX ではコンテンツの簡素化を求めている一方、SEO／LLM では意味を伝えるコンテンツを表示する必要がある場合。
• SEO／LLM が求めるコンテンツの密度によって、理解やコンバージョンが損なわれる場合。
• Stitch の出力は視覚的に優れているものの、アクセシビリティ、事実の正確さ、または実装可能性に問題がある場合。
• Figma のデザインシステム上の制約と Stitch の出力が競合する場合。
• 大規模なプロジェクトで、1 つのワークフロー内で公開ページ、Figma、コード、SEO／LLM の成果物を変更する場合。

評議会の役割：

• UI/UX lead：ユーザージャーニー、IA、階層、アクセシビリティ、インタラクションの品質。
• SEO/LLM lead：クロール可能性、スキーマ、メタデータ、llms.txt、表示される事実情報。
• Figma lead：デザインシステムとの適合性、変数、コンポーネント、アセットのワークフロー。
• Implementation lead：フレームワークでの実現可能性、レスポンシブな動作、検証の証拠。
• Planning lead：タスク計画のゲート、ブロッカー、アラーム、証拠、ロールバック。

判断の優先順位：

1. セキュリティ、プライバシー、法的な正確さ、ユーザーの安全。
2. アクセシビリティと主要タスクの完了。
3. 真実に即した表示コンテンツと製品の事実。
4. セマンティック HTML、クロール可能性、LLM が読み取りやすい構造。
5. コンバージョンにつながる UX とユーザーの理解。
6. デザインシステムとの一貫性と、保守しやすい実装。
7. 視覚的な新しさ、トレンドとの適合性、Stitch の美しさ。

出力形式

Brief モード

assets/stitch-brief.template.md を使用します。

以下を返します。

• Stitch のプロンプト；
• 使用した入力制約；
• 除外した非公開データ；
• 依頼したバリエーション；
• 受け入れ基準；
• 必須のレビュー担当者。

Review モード

以下を返します。

• レビュー対象の出力；
• プロンプトに対する合格／不合格；
• UX の指摘事項；
• SEO／LLM の指摘事項；
• アクセシビリティの指摘事項；
• デザインシステム／Figma の指摘事項；
• 実装リスク；
• 推奨事項：承認、反復、Figma への引き継ぎ、ローカルでの実装、または却下。

Handoff モード

以下を返します。

• 選択した Stitch のバリエーション；
• 選択理由；
• 次の担当者となる Figma／コードの担当者；
• 必要なアセットまたはスクリーンショット；
• 維持すべきトークン／コンポーネント；
• 完了としてマークする前の確認事項。

検証

このスキルを編集した場合は、次を実行します。

python3 $CODEX_SKILLS_DIR/.system/skill-creator/scripts/quick_validate.py $CODEX_SKILLS_DIR/stitch-design-bridge
python3 $CODEX_SKILLS_DIR/senior-skill-architect/scripts/lint_production_skill.py $CODEX_SKILLS_DIR/stitch-design-bridge
python3 $CODEX_SKILLS_DIR/stitch-design-bridge/scripts/check_stitch_config.py
python3 -m json.tool $CODEX_SKILLS_DIR/stitch-design-bridge/evals/evals.json >/dev/null