open-design-game-ui-concept

Open Design ゲーム UI コンセプト

Open Design を、共有可能で検査可能なデザインワークスペースとして使用します。デザイン生成とランタイム実装は別々のフェーズとして維持してください。レンダリングされたコンセプトをレビューして承認するまで、ランタイム UI の編集は許可されません。

このスキルは、次のより厳格なワークフローを統括します。

• 生成前に open-design-game-ui-handoff を使用して、現在のアイデンティティ、モーション、ソースアンカー、コンポーネントごとの権限を preservation-contract.json に記録します。
• オーナーの承認後に限り open-design-game-ui-takeover を使用して、ランタイムが所有する動作を損なわずに承認済みの軸を統合します。

docs/hard-rules/ui-adaptation-upgrade-only-contract.md を読んでください。Open Design で省略されている要素は、常に unspecified-preserve-runtime を意味します。既存のアニメーションを削除したり、静的なプレースホルダーに置き換えたりすることを意味することはありません。

必須ワークフロー

1. 何よりも先に darkbone-visual-language.md を読み、ブラウザーで exemplar-craft.html を開いてください。これらは、クラフトの基準（実際のパレット、素材のレシピ、ゲームフィールのチェックリスト）を定めています。その後、関連する機能ドキュメント、現在のオーバーレイのソース、デザイントークンを読んでください。各画面がプレイヤーにどのような役割を果たすのかを明示してください。生成の目標は、エグザンプラーと同等のクラフトレベルを備えた、見事なゲームアーティファクトです。保持契約はその範囲を定めますが、目標を定めるものではありません。

2. レイアウトを提案する前に、稼働中のランタイムをキャプチャしてください。

   node .agents/skills/open-design-game-ui-concept/scripts/capture_meta_ui_design_audit.mjs \
     --base-url=http://127.0.0.1:5173 \
     --out-dir=.omc/artifacts/open-design-meta-ui-audit/<run>
   

   これは、できる限りのギャラリーではなく、ソースの完全性を示す証拠として扱ってください。ページやコンソールのエラー、レンダリングされた画像の破損、ロケールの不一致、ビューポートのはみ出し、主要なサーフェスの欠落、または表示されるアクションがゼロの場合、キャプチャは停止します。ネストされた Shadow DOM も走査し、デフォルト実行では想定される 5 つすべてのキャラクターリグを抽出する必要があります。

3. 実際の表示サイズで代表的なキャプチャをレビューしてください。第一印象での理解しやすさ、プレイヤーのファンタジー、階層、空間の活用、コンポーネント間の関係、操作距離、細部の仕上がりを評価します。meta-ui-design-contract.md を読んでください。 新しい Steam タイトルシェルには、別個の steam-title プロファイルを使用し、steam-title-design-contract.md を読んでください。6 画面のデフォルトを変更したり、6 画面のアーティファクト名を再利用したりしないでください。

4. open-design-game-ui-handoff を実行してください。.handoff/<timestamp>-<feature>/ の下に、完全な引き継ぎフォルダーを 1 つ作成します。README.md、brief.md、DESIGN.md、preservation-contract.json、source-manifest.json、スクリーンショットマニフェスト、現在の状態の WebP スクリーンショット、タイムスタンプ付き WebP キーフレームを含むモーション WebM/MP4、選択した実アセット、関連ドキュメント、現在の UI を所有するソースファイルを含めてください。

5. 検証して zip 化します。

   node .agents/skills/open-design-game-ui-concept/scripts/package_open_design_handoff.mjs \
     --dir=.handoff/<timestamp>-<feature>
   

   パッケージャーは、絶対参照または親ディレクトリへの参照を拒否します。マニフェストで宣言された各スクリーンショット、ソースファイル、設定、キャラクターアセット、マップ／マスクアセットのディレクトリ、主要アーティファクトは、引き継ぎフォルダー内で参照先が解決でき、生成される zip に含まれている必要があります。

6. フォルダーを Open Design にインポートし、Codex の実行を開始してください。最初に open-design-control.md を読んでください。このワークフローでは Codex gpt-5.6-sol と ultra 推論が必須です。別のモデル、低い推論ティア、またはリクエスト単位のオーバーライドは受け入れないでください。

7. 実行 ID が返されたら、すぐに生成エビデンスのキャプチャを開始してください。稼働中の子プロセスを監視し、成功した結果パッケージを不変のアーティファクトリビジョンに紐付ける必要があります。

   node .agents/skills/open-design-game-ui-concept/scripts/capture_open_design_generation_evidence.mjs \
     --run=<run-id> \
     --artifact=<artifact.html> \
     --out=.omc/artifacts/open-design-generation-evidence/<run-id>.json
   

   実際のプロセスコマンドに gpt-5.6-sol のモデルオーバーライドのみが含まれ、推論オーバーライドに model_reasoning_effort=ultra のみが含まれていない場合、エビデンスは無効です。長時間の思考は失敗ではありません。数分かかるという理由だけで、正常な実行をキャンセルしないでください。リスナーはデフォルトで最大 2 時間待機します。ドキュメント化された実行に異なる上限が必要な場合に限り、--timeout-ms=<milliseconds> を使用してください。

8. Open Design のプレビュー URL から生成されたアーティファクトを解決し、キャプチャしてください。

   node .agents/skills/open-design-game-ui-concept/scripts/capture_open_design_preview.mjs \
     --preview-url=<immutable-preview-url> \
     --contract-profile=<meta-ui|steam-title> \
     --contract=.handoff/<timestamp>-<feature>/preservation-contract.json \
     --generation-evidence=.omc/artifacts/open-design-generation-evidence/<run-id>.json \
     --out-dir=.omc/artifacts/open-design-preview/<run>
   

   デフォルトの --scenario-set=full は受け入れゲートです。--scenario-set=defaults はスモークテストのみです。full マトリクスでは、デフォルトの 40 件のロケール／ビューポート／画面レンダリングに加えて、詳細、ロック、リソース不足、読み込み、確認、結果、完了の各状態と、 キーボード、コントローラー、ホバー、Escape/B、モーダルのフォーカストラップ、視差効果を減らす設定のプローブが追加されます。

   manifest.ok !== true はデザイン実行の失敗として扱います。キャプチャゲートでは、要求された画面／ロケール／状態／レスポンシブモードを、表示中の DOM センチネルとローカライズ済みの主要アクションに照らして個別に確認し、その後、すべてのビューポートでページ／コンソールのエラー、画像の読み込み、ドキュメントのオーバーフロー、祖先要素によるクリッピング、ラベルのクリッピング、操作可能な要素の重なりを確認します。Phone と iPad ではさらに、表示中の操作可能なターゲットすべてが少なくとも 44x44 CSS px であることが求められます。

   Full モードでは、ロケール／画面／ビューポートの絞り込み、変更可能な URL、保持要件を網羅しない状態セット、またはプロジェクト、リビジョン、ファイル、アーティファクトの SHA-256 が完全一致しない生成証拠は受け付けません。不変の projectId、プレビューの revisionId、アーティファクトの SHA-256、コントラクトの SHA-256、生成証拠の SHA-256、スクリーンショットごとの SHA-256、プレビューのマニフェストを保持してください。引き継ぎ承認はこれらの正確な値に紐づける必要があります。変更可能な URL やファイル名だけでは不十分です。

9. screenshot-review-artifact を使って、中国語のオーナーレビュー HTML を生成します。Open Design の GUI プロジェクトとレビュー HTML の両方を開きます。独立した／ブラインドレビューの採点では、匿名化したラベルを用いて codex exec -m gpt-5.6-sol -c model_reasoning_effort=high を使用します。モーションを含むアーティファクトは、静止画だけでなく、候補ごとのパリティを確認しながら、再生動画／ライブの証拠に基づいて採点します（open-design-control.md Review Loop を参照してください）。

10. 同じ Open Design プロジェクト内で反復してください。最終マニフェストには、プロジェクト、会話、実行、アーティファクトファイル、引き継ぎ zip、モデル、推論、レビューの各パスを記載してください。

引き継ぎルール

• すべての引き継ぎフォルダーには darkbone-visual-language.md と exemplar-craft.html（このスキルのリファレンスからコピーしたもの）が含まれている必要があります。また、DESIGN.md は、制約に関する説明よりも先に、クリエイティブディレクション（アイデンティティ、クラフトの基準、「エグザンプラーに合わせる」）を先頭に掲げる必要があります。最初のページが制約から始まるブリーフでは、意欲に欠けるウェブダッシュボードのような出力になります。まず目指す姿を示し、次に境界を示してください。
• ソースコードからの推測ではなく、実際にレンダリングしたスクリーンショットを使用してください。
• 7つすべての品質軸、すなわちアイデンティティ、構成、情報、操作性、モーション、マテリアル、読みやすさを維持または向上させてください。技術的なマトリクスを根拠に、目に見える美的な劣化を正当化してはなりません。
• レイアウト、アイデンティティ、モーション、操作性、コピー、データの各コンポーネントについて、権限の所在を割り当ててください。デフォルトではランタイムが権限を持ち、データはランタイムが所有し続けます。
• このタスクでレイアウトのみを変更する場合、スタンドアロン版にアニメーションが描かれていなくても、現在のアニメーション実装とタイミングをそのまま維持してください。
• モーションが重要なサーフェスでは、ベースライン動画と、タイムスタンプ付きのキーフレームを少なくとも3つ、引き継ぎ資料に含めてください。
• スマートフォンの横向き、iPadの横向き、1440デスクトップ、1920x1080 Steamは、単なる拡大縮小版ではなく、それぞれ異なる構成として扱ってください。
• zh と en を含めてください。各レンダリングは単一ロケールにしてください。
• 該当する場合は、ホバー、キーボードフォーカス、コントローラーフォーカス、タッチ、モーション軽減、読み込み中、空、ロック中、リソース不足、破壊的操作の確認に対する挙動を含めてください。
• Darkboneのファラオ風ストーンゴシックのアイデンティティを維持してください。メタUIをありきたりなウェブダッシュボードに変えてはなりません。
• 各画面の主役となるビジュアルシグナルには、その画面を象徴するキャラクターアート、マップアート、マスク、または進行オブジェクトを使用してください。
• デザインコントラクトで定義したレビューAPIを備えた、6つの画面を切り替えられる自己完結型HTML成果物を1つ必須とします。
• steam-title プロファイルだけは、6画面の成果物形式の例外です。このプロファイルはスタンドアロンの bone-halls-steam-title-concept.html を返し、6つのメタサーフェスすべてをコントラクトのみの凍結コンテキストとして保持し、タイトル状態 x ロケール x 5つのビューポートのマトリクス全体をキャプチャします。デフォルトのプロファイルは引き続き6画面です。
• デザインフェーズでランタイムソースの編集をOpen Designに依頼してはなりません。

品質ゲート

次のいずれかに該当する場合、コンセプトを却下するか、再実行してください。

• ひと目で判別するテストに失敗する：darkbone-visual-language.md §6-§7で定義された、骨に刻まれた金箔＋魂のティールによる祭壇の表現ではなく、いずれかのサーフェスが、ありきたりなウェブ／SaaSダッシュボード（平坦で角丸のカード、Bootstrap風の色合い、左揃えの見出しだけ、単色の #fff テキスト）に見える。
• ひと目で画面の目的や主要なアクションがわからない。
• デスクトップでビューポートの大部分が使われていない、またはスマートフォンの余白をただ拡大しただけになっている。
• 重要なアイコン、キャラクター、マップ、ノード、マスクが、デスクトップでもスマートフォン向けのサイズのままになっている。
• 主要ボタンが、デスクトップに適したコマンド表現ではなく、非常に長いテキストバーになっている。
• ビューポートやロケールによってコントロールが衝突、移動、またはグループ化の崩れを起こす。
• コンセプトにゲーム固有のシグネチャー、レスポンシブな状態モデル、またはコントローラー／フォーカスモデルがない。
• ランタイムのシグネチャーがありきたりなものになる（例：Wedjatの目が円になる）、またはライブアニメーションが静的なプレースホルダーになる。
• 現行版とコンセプトの比較エビデンスが、ビューポート、状態、アニメーションのタイミングで揃っていない。
• 成果物をレンダリングして、独立したスクリーンショットテストを実施できない。
• タッチターゲットが 44x44 未満、ビューポートからのはみ出し、ページエラー、画像の未読み込み、独立したDOMセンチネルの不一致、入力プローブの失敗、操作可能なラベルのクリッピング、操作可能なコントロールの重なりなど、キャプチャに関するアサーションのいずれかが失敗する。

このスキルの成果物は、オーナーがレビューできるデザイン成果物とエビデンス一式です。ランタイムへの引き継ぎは後続タスクです。