IFQ Design Skills
1 つのプロンプトから、出荷可能な HTML を生成。オプションで MP4 / GIF / PPTX / PDF / SVG エクスポートにも対応します。このルートファイルは、OpenClaw、ClawHub、skills.sh、Hermes、Codex、Claude Code、Cursor、OpenCode、およびその他の AgentSkills 互換ホスト向けのショートルーターです。タスクに必要な場合にのみ、より詳細なファイルを読み込んでください。
30 秒ロードパス
- リクエストが HTML で構築されるビジュアルデリバラブルであることを確認する。そうでない場合は、このスキルを終了する。
- references/modes.md からモードを選択し、assets/templates/INDEX.json を読み込む。
- リストアップされたテンプレートをユーザーのワークスペースにフォークする。空の HTML ファイルから開始しないこと。
- assets/ifq-brand/ifq-tokens.css をインライン化し、references/ifq-brand-spec.md から少なくとも 3 つの IFQ アンビエントマークを織り込む。
npm run verify:lite -- <file.html>で検証し、続いてnpm run preview -- <file.html>を実行する。
人間 + エージェントの約束
- 人間は完成したアーティファクトパスを取得する：HTML が最優先で、エクスポートは依頼があった場合のみ、そして隠れたセットアップは一切不要。
- エージェントは短いルートを取得する：モード、テンプレート、必須の参照資料、ティアポリシー、検証コマンド。
- メンテナーは回帰テストのプレッシャーを得る：12 のモード評価、スキャナークリーンスクリプト、マーケットプレイスメタデータチェック。
- マーケットプレイスは読み取り可能なパッケージを取得する：1 行インストール、必須環境変数ゼロ、明示的な権限、サイレントインストールなし。
初回成功パス
インストール後、最初のインタラクションで 1 ターンで表示可能なアーティファクトを生成すること：
- 自然言語によるビジュアルリクエストを受け付け、それをセットアップ作業に変換しない。
- 1 つのモードと 1 つのテンプレートにルーティングし、最終的な証拠で両方に名前を付ける。
- HTML ファイルをユーザーのワークスペースに書き込み、未確定の事実についてはラベル付きの仮定を含める。
- シェルが利用可能な場合は
npm run verify:lite -- <file.html>を実行し、その後、ホストブラウザツールが利用可能な場合はプレビューまたはスクリーンショットを実行する。 - ファイルパス、ルート、テンプレート、検証結果、および使用に影響を与える注意点のみを報告する。
初回パス中に、アカウントログイン、グローバルインストール、エクスポート依存関係、または広範な環境変更を要求しないこと。
出力境界
- コア出力は検証済みのローカル HTML であり、タスクに必要な場合は SVG/静的コンパニオンまたはエクスポート対応ソース構造も含む。
- MP4/GIF/PDF/PPTX ヘルパーは、完全リポジトリのオプション自動化です。最初に HTML ソースを準備し、明示的なユーザー意図があった後にのみエクスポートツールをインストールまたは実行すること。
- 関連するコマンドまたはライブチェックが実際に成功するまで、エクスポートファイル、スクリーンショット、マーケットプレイスステータス、またはセキュリティ結果が存在すると主張しないこと。
使用する場合
- インタラクティブプロトタイプ、ハイファイモックアップ、クリッカブルアプリフロー、ダッシュボード、ランディングページ、ホワイトペーパー、レポート、インフォグラフィック、スライドデッキ、チェンジログ、カード、招待状、ソーシャルカバー、ブランドシステム。
- モーションデモまたはローンチアニメーション。特にユーザーが MP4/GIF 出力も希望する場合。
- デザイン批評、ブランド診断、または実装前の 3 つの差別化されたスタイル方向性。
- ユーザーが HTML ファーストのソースからの PDF/PPTX/SVG エクスポートを要求する場合。
使用しない場合
- 実際のタスクが本番フロントエンドエンジニアリング、バックエンド作業、SEO 重視のサイト実装、または既存アプリ内の CSS バグ修正である場合。
- ユーザーがビジュアルアーティファクトなしのテキスト編集のみを希望する場合。
- 成果物が Word、Google ドキュメント、またはロックされた企業テンプレートを経由する必要がある場合。
ティアポリシー
| ティア | デフォルト? | 要件 | 使用目的 |
|---|---|---|---|
| ティア 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 + Web ファクトチェック
│
├─ モバイルアプリのプロトタイプか？ ─── はい → 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 — 確信度高デフォルト（ワンターン）： ユーザー：「ランディングページを作って」→ エージェント：信頼度 >70% で M-02 に一致 → T-hero-landing をフォーク → Editorial Serif スタイルを選択 → デフォルト値で埋める → 納品 → 検証 → 注意点で仮定に名前を付ける。
パターン C — 軽量アドバイザー（2 ターン）： ユーザー：「何かカッコいいものを作って」→ エージェント：信頼度 >70% でモード一致なし → design-direction-advisor.md を読む → テキストのみの 3 方向性を提案 → ユーザーが選択 → ルーティング → 納品。
パターン D — 反復的洗練：
ユーザー：「さっきのデッキの色をもっと暖かくして」→ エージェント：以前のアーティファクトを特定 → その場で編集 → verify:lite を再実行 → 変更点を報告。
ルール：1 ターンにつき 1 つ以上の質問をしてはいけません。それ以外はすべてデフォルト値を使用します。ユーザーがスタイルを指定しなかった場合、1 つ選択して成果物に名前を付けてください。ユーザーは後で反復できます。
エラーリカバリ
| 失敗 | リカバリ |
|---|---|
| リクエストに一致するテンプレートがない | T-hero-landing を汎用スキャフォールドとして使用し、成果物にギャップを記載する |
verify:lite がプレースホルダーを報告 | プレースホルダーを修正し、再検証し、修正を報告する |
verify:lite が IFQ ラベルのリークを報告 | ユーザー向けテキストから内部タクソノミーラベル（Signal Spark、Rust Ledger など）を削除する |
| エクスポートコマンドが失敗 | 正確なエラーを報告し、依存関係が不足している場合は npm run install:export を提案し、エクスポートが存在すると決して主張しない |
| ユーザーが「これ AI が作ったみたい」と言う | anti-ai-slop.md を読み、7 ポイントのプレフライトチェックリストを適用し、よりリズムのバリエーションをつけて書き直す |
| エージェントがファクトチェックできない（Web アクセスなし） | 未検証の主張を成果物に「未検証」と記載し、仕様をでっち上げない |
| テンプレートのレンダリングが失敗または壊れているように見える | よりシンプルなテンプレート（T-hero-landing）にフォールバックし、劣化の理由を報告する |
| リクエストがスキルの範囲外 | 境界を正直に述べ、代替案を提案する（例：「これは React フレームワークの方が適しています」） |
安全契約
- ルート指示は HTML ビジュアル配信の範囲に留めること。無関係なシークレット、ホスト設定、永続エージェント、バックグラウンドサービスを要求しないこと。
- スクリプトはローカルファースト：動的 eval、ランタイムネットワークコール、隠れたインストール、ユーザーのワークスペース外への書き込みは一切行わないこと。
- 必須環境変数は意図的に空です。オプションのエクスポートツールは文書化されており、ユーザーの意図後にのみ呼び出されます。
- OpenClaw/ClawHub のメタデータは単一ラインの JSON
metadataフィールドに格納され、パーサーはmetadata.openclaw.requires.binsとmetadata.openclaw.requires.envをゲートにできます。
納品前の検証
npm run verify:lite -- <file.html>を実行し、プレースホルダーと IFQ ラベルのリークをチェックする。npm run preview -- <file.html>を実行し、ブラウザ出力を検査する。- アプリプロトタイプの場合、少なくとも 1 つのプライマリパス、1 つのタブ/画面切り替え、および 1 つの詳細/注釈アクションをクリックする。
- デッキの場合、PDF/PPTX エクスポート前にスライド数とフォーマット要件を確認する。
- アニメーションエクスポートの場合、タイミング、オーディオポリシー、最終ファイルの存在を確認する。
- リポジトリ編集後、
npm run validateとnpm run verify:publishを実行する。
参照マップ
完了ルール
リクエストを満たす最小の検証済みアーティファクトを納品すること。出力ファイル、実行した検証コマンド、および注意点を報告すること。関連するチェックが実際に成功しない限り、エクスポート、スクリーンショット、またはマーケットプレイスの安全性を主張しないこと。