IFQ デザインスキル

1つのプロンプト入力で、配信可能なHTMLを出力します。オプションでMP4/GIF/PPTX/PDF/SVGへのエクスポートも可能です。このルートファイルはOpenClaw、ClawHub、skills.sh、Hermes、Codex、Claude Code、Cursor、OpenCode、およびその他のAgentSkills互換ホスト用の短いルーターです。タスクに必要な場合のみ深層ファイルを読み込みます。

30秒ロードパス

1. リクエストがHTMLから作成されたビジュアルデリバラブルであることを確認します。そうでない場合は、このスキルを終了します。
2. references/modes.mdからモードを選択し、assets/templates/INDEX.jsonを読みます。
3. リストされたテンプレートをユーザーのワークスペースにフォークします。空白のHTMLファイルから始めないようにしてください。
4. assets/ifq-brand/ifq-tokens.cssをインライン化し、references/ifq-brand-spec.mdから最低3つのIFQアンビエントマークを織り込みます。
5. npm run verify:lite -- <file.html>で検証し、次にnpm run preview -- <file.html>を実行します。

ヒューマン + エージェント約束

• ユーザーは完成したアーティファクトパスを取得します：HTMLファースト、オプションでエクスポートのみ（要求時）、隠れたセットアップなし。
• エージェントは短いルートを取得します：モード、テンプレート、必読リファレンス、層ポリシー、検証コマンド。
• メンテナーは回帰プレッシャーを取得します：12モード評価、スキャナークリーンスクリプト、マーケットプレイスメタデータチェック。
• マーケットプレイスは読み取り可能なパッケージを取得します：ワンライン インストール、必須環境変数なし、明示的なパーミッション、サイレントインストールなし。

ファースト・ラン成功パス

インストール後、最初のインタラクションが1ターンで目に見えるアーティファクトを生成するようにしてください：

1. セットアップ作業に変えずに、自然言語のビジュアルリクエストを受け入れます。
2. 1つのモードと1つのテンプレートにルーティングします。最終的な証拠の中で両方を名前付けします。
3. ユーザーのワークスペースにHTMLファイルを書き込みます。未解決の事実については、ラベル付きの仮定を含めます。
4. シェルが利用可能な場合はnpm run verify:lite -- <file.html>を実行し、ホストブラウザツーリングが利用可能な場合はプレビューまたはスクリーンショットを実行します。
5. ファイルパス、ルート、テンプレート、検証結果、および使用に影響する注意事項のみを報告します。

ファースト・ランパス中に、アカウントログイン、グローバルインストール、エクスポート依存関係、または広範な環境変更を要求しないでください。

出力境界

• コア出力は検証されたローカルHTMLです。タスクに必要な場合は、SVG/静的なコンパニオンまたはエクスポート対応ソース構造を含めます。
• MP4/GIF/PDF/PPTXヘルパーは完全なリポジトリオプションの自動化です。最初にHTMLソースを準備し、ユーザーの明示的なインテント後にのみエクスポートツーリングをインストールまたは実行します。
• 関連するコマンドまたはライブチェックが実際に成功するまで、エクスポートファイル、スクリーンショット、マーケットプレイスステータス、またはセキュリティ結果が存在することは決して主張しないでください。

使用する場合

• インタラクティブプロトタイプ、ハイファイモックアップ、クリック可能なアプリフロー、ダッシュボード、ランディングページ、ホワイトペーパー、レポート、インフォグラフィック、スライドデック、チェンジログ、カード、招待状、ソーシャルカバー、またはブランドシステム。
• モーションデモまたはローンチアニメーション。特にユーザーがMP4/GIF出力も希望する場合。
• デザイン批評、ブランド診断、または実装前の3つの差別化スタイル方向。
• ユーザーがHTMLファーストソースからPDF/PPTX/SVGエクスポートを要求する場合。

使用しない場合

• 実際のタスクが本番フロントエンドエンジニアリング、バックエンド作業、SEO重視のサイト実装、または既存アプリ内のCSS バグの場合。
• ユーザーがビジュアルアーティファクトなしのコピー編集のみを望む場合。
• デリバラブルがWord、Google Docs、またはロックされた企業テンプレートを通じてラウンドトリップする必要がある場合。

層ポリシー

層	デフォルト?	要件	用途
層0	はい	Node >= 18.17	HTML、プレビュー、軽い検証、スモークテスト
層1	オプトイン	Python + Playwright + Chromium	ヘッドレススクリーンショット、コンソールキャプチャ、マルチビューポートチェック
層2	オプトイン	npm run install:export；MP4/GIFはffmpegも必要	MP4、GIF、PDF、編集可能なPPTXエクスポート

ユーザーがスクリーンショットまたはエクスポート形式を明示的に必要とする場合を除き、オプション依存関係をインストールしないでください。

ルーティング決定ツリー

ユーザーリクエストが到着
  │
  ├─ ビジュアルデザインデリバラブルですか？ ─── いいえ → スキルを終了、デフォルトエージェントに戻す
  │
  ├─ モードトリガーをマッチできますか？ ─── はい（信頼度 >70%） → テンプレートフォーク → デリバー → 検証
  │                                      （ワンターン：仮定を名前付け、質問なし）
  │
  ├─ モードトリガーをマッチできますか？ ─── はい（信頼度 ≤70%） → design-direction-advisor.md 軽量版
  │                                      （3つのテキストのみの方向、デモなし、ユーザーの選択を待つ）
  │
  ├─ 具体的な製品/技術/イベントに言及していますか？ ─── はい → fact-and-asset-protocol.md + ウェブファクトチェック
  │
  ├─ モバイルアプリプロトタイプですか？ ─── はい → app-prototype-rules.md + ios_frame.jsx / android_frame.jsx
  │
  └─ モーション/ビデオですか？ ─── はい → animation-pitfalls.md + animations.md + video-export.md

完全なモードプロトコルについてはreferences/modes.mdを読んでください。上記のクイックリファレンステーブルはスピードレイヤーです。

クイックリファレンス（エージェント速度テーブル）

モード	トリガーキーワード	テンプレート	キーリファレンス
M-01	launch film、発布会、product video	T-launch-film	animations.md、video-export.md
M-02	portfolio、個人站、about me	T-hero-landing	design-direction-advisor.md
M-03	whitepaper、白皮书、annual report	T-infographic-vertical	fact-and-asset-protocol.md
M-04	dashboard、看板、KPI、command center	T-dashboard	app-prototype-rules.md
M-05	A vs B、横评、benchmark	T-compare-vs	fact-and-asset-protocol.md
M-06	onboarding、新手引导、flow demo	T-onboarding-flow	app-prototype-rules.md
M-07	changelog、release notes、発布日記	T-changelog	content-guidelines.md
M-08	keynote、PPT、演讲、slide deck	T-slide-title	slide-decks.md、editable-pptx.md
M-09	社媒物料、social cover、小红书	T-social-x	content-guidelines.md
M-10	名片、business card、邀请函	T-business-card	ifq-brand-spec.md
M-11	品牌诊断、brand audit、品牌体检	T-brand-diagnosis	critique-guide.md
M-12	brand from scratch、从零建立品牌	T-brand-system	design-direction-advisor.md

すべてのテンプレート：npm run verify:lite -- <file> + npm run preview -- <file>（層0、ゼロインストール）。

IFQアンビエントレイヤー

• ユーザーのブランドが主体です。IFQは著作レイヤーです：レイアウトリズム、温かい紙、ラストレッジャー、モノフィールドノート、シグナルスパーク、静かなURL、編集コントラスト。
• すべてのデリバラブルは最低3つのIFQマークを使用します。タスクがIFQ所有またはプロモーションスタンプが必要なアニメーションエクスポートでない限り、ラウドな汎用ロゴやウォーターマークを貼り付けないでください。
• 組み込みテンプレートは中国セーフレンダリング用のローカルファーストフォントを使用します。Google FontsまたはCDNランタイムはオプトインのみです。references/font-loading.mdを参照してください。
• ユーザー向けデザインでは、Signal SparkやRust Ledgerなどの可視的な内部分類ラベルを避けます。代わりに実際のコンテンツを書きます。

会話パターン

パターンA — 具体的なリクエスト（最も一般的、ワンターン）： ユーザー：「做一个 A vs B 对比评测，我们对 Stripe」→ エージェント：両方の製品をファクトチェック → M-05にルート → T-compare-vsをフォーク → 検証済みデータで入力 → デリバー → 検証。

パターンB — 信頼度の高いデフォルト（ワンターン）： ユーザー：「给我做个 landing page」→ エージェント：M-02を信頼度>70%でマッチ → T-hero-landingをフォーク → 編集セリフスタイルを選択 → デフォルトで入力 → デリバー → 検証 → 注意事項で仮定を名前付け。

パターンC — 軽量アドバイザー（ツターン）： ユーザー：「帮我做点好看的东西」→ エージェント：信頼度>70%でモードマッチなし → design-direction-advisor.mdを読む → 3つのテキストのみの方向を提案 → ユーザーが選択 → ルート → デリバー。

パターンD — イテレーティブ洗練： ユーザー：「把刚才那个 deck 的配色改暖一点」→ エージェント：前のアーティファクトを配置 → インプレース編集 → verify:liteを再実行 → 変更内容を報告。

ルール：ターンごとに1つ以上の質問をしないでください。他はすべてデフォルトを使用します。ユーザーがスタイルを指定しなかった場合、1つを選択して、デリバラブルで名前付けします。— ユーザーはイテレーションできます。

エラー回復

失敗	回復
テンプレートがリクエストと一致しない	T-hero-landingを汎用スキャフォルドとして使用、デリバラブルでギャップを注記
verify:liteがプレースホルダーを報告	プレースホルダーを修正、再検証、修正を報告
verify:liteがIFQラベルリークを報告	ユーザー向けテキストから内部分類ラベル（Signal Spark、Rust Ledgeなど）を削除
エクスポートコマンドが失敗	正確なエラーを報告、依存関係が不足している場合はnpm run install:exportを提案、エクスポートが存在することは決して主張しない
ユーザーが「これはAIで生成されたように見える」と言った	anti-ai-slop.mdを読む、7ポイントのプリフライトチェックリストを適用、より多くのリズムバリエーション中心に書き直す
エージェントがファクトチェックできない（ウェブアクセスなし）	未検証クレームを「未検証」としてデリバラブルに名前付け、仕様を発明しない
テンプレートレンダリングが失敗または破損して見える	より単純なテンプレート（T-hero-landing）にフォールバック、劣化の理由を報告
リクエストはスキルスコープ外	境界を正直に述べ、代替案を提案します（「これはReactフレームワークに適しています」など）

セキュリティ契約

• ルート命令はHTMLビジュアルデリバリーにスコープを保ちます。無関係なシークレット、ホスト設定、永続エージェント、またはバックグラウンドサービスを要求しないでください。
• スクリプトはローカルファースト：動的評価なし、ランタイムネットワーク呼び出しなし、隠れたインストールなし、ユーザーのワークスペース外への書き込みなし。
• 必須環境変数は意図的に空です。オプションエクスポートツールはドキュメント化され、ユーザーのインテント後のみ呼び出されます。
• OpenClaw/ClawHubメタデータは単一行JSON metadataフィールドに存在し、パーサーがmetadata.openclaw.requires.binsとmetadata.openclaw.requires.envでゲート可能です。

デリバリー前の検証

1. npm run verify:lite -- <file.html>を実行してプレースホルダーとIFQラベルリークを確認します。
2. npm run preview -- <file.html>を実行し、ブラウザ出力を検査します。
3. アプリプロトタイプについて、少なくとも1つのプライマリパス、1つのタブ/スクリーン切り替え、1つのディテール/アノテーションアクション をクリックします。
4. デッキについて、PDF/PPTXエクスポート前にスライド数と形式要件を検証します。
5. アニメーションエクスポートについて、タイミング、オーディオポリシー、および最終ファイルの存在を検証します。
6. リポジトリ編集後、npm run validateとnpm run verify:publishを実行します。

リファレンスマップ

必要	読込
ファースト・タイムクイックスタート、3つのワンライナー例	references/quickstart.md
UI発見チップとデフォルト呼び出し	agents/openai.yaml
完全なロール、スコープ、IFQランタイムポスチャ	references/ifq-ambient-runtime.md
ファクトチェック、ブランドアセット、製品/UI画像	references/fact-and-asset-protocol.md
ジュニアデザイナーケイデンス、バリエーション、プレースホルダー、アンチスロップ	references/designer-operating-principles.md、references/anti-ai-slop.md
曖昧なプロンプト -> 3つのデザイン方向	references/design-direction-advisor.md、references/design-styles.md、references/ifq-native-recipes.md
エンドツーエンドタスクワークフロー、例外、エクスポート	references/delivery-workflow.md、references/workflow.md、references/verification.md
エージェントインタラクションプロトコル、決定ツリー、ステートマシン	references/agent-interaction-protocol.md
スキル改善、評価カバレッジ、貢献ルール	references/killer-skill-playbook.md、evals/evals.json、CONTRIBUTING.md、SECURITY.md
OpenClaw/ClawHub/skills.sh公開ポスチャ	references/marketplace-quality.md、references/skill-leaderboard-lessons.md、references/smoke-test.md
ランタイムインストールとツールマッピング	references/agent-compatibility.md
React/Babelシングルファイルルール	references/react-setup.md
スライドと編集可能PPTX	references/slide-decks.md、references/editable-pptx.md
モーション/ビデオ/オーディオ	references/animation-pitfalls.md、references/animation-best-practices.md、references/audio-design-rules.md、references/sfx-library.md
IFQアイデンティティアセット	references/ifq-brand-spec.md、assets/ifq-brand/BRAND-DNA.md

完了ルール

リクエストを満たす最小の検証アーティファクトを配信します。出力ファイル、実行された検証コマンド、および任意の注意事項を報告します。関連するチェックが実際に成功するまで、エクスポート、スクリーンショット、またはマーケットプレイスセーフティを主張しないでください。