© 2026 ESTHER不二 (esthersjw) | CC BY-NC-SA 4.0 本スキルを使用する際は原作者のクレジットを表示し、商用利用は禁止、改変後は同一ライセンスで共有してください。
トリガー条件
ユーザーがHTMLページ、個人ページ、チュートリアルページ、紹介ページ、ランディングページ、イベントページ、アプリ型ページ、ポートフォリオなど、あらゆるフロントエンドデザイン関連タスクを依頼した際にトリガーされます。また、「グラフィックカードを作って」「カード記事」「小紅書（RED）のグラフィック」「記事をカードに変換」「カードにして」といった指示でもトリガーされます。
使用方法（7ステップワークフロー）
Step 1: 要件の明確化
ユーザーに以下の5つの質問を確認します：
- タイプ — チュートリアル/紹介/解説？イベントページ/Landing？アプリ型/機能型？グラフィックカード？ WeChat公開アカウントのレイアウト？
- 対象者 — 誰に向けて？技術レベルは？
- セクション数 — おおよそ何画面分のコンテンツ？
- 素材 — 用意されているコピー/画像/データは？
- ハード制約 — 絶対に含めるべきものは？協賛ブランドカラーはあるか？
Step 2: 規範を読む
- 必読
brand-dna.md— ブランドの基本規範を確認 - タイプに応じてシーンファイルを選択して読む：
- チュートリアル型/紹介型/解説型 →
references/scene-tutorial.md - イベントページ/勉強会/Landing →
references/scene-landing.md - アプリ型/機能型（ダッシュボード/本棚/Canvas） →
references/scene-app.md - グラフィックカード/小紅書（RED）グラフィック/記事カード変換 →
references/scene-cards.md - WeChat公開アカウントのレイアウト/配信用 →
references/scene-wechat.md
- チュートリアル型/紹介型/解説型 →
Step 3: テンプレートをコピー
assets/ から該当するテンプレートをスタート地点として選択：
- チュートリアル型 →
assets/template-tutorial.html - イベントページ/Landing →
assets/template-landing.html - アプリ型/機能型 →
assets/template-app.html - グラフィックカード →
assets/template-cards.html
テンプレートから修正を始め、ゼロから書かないこと。
Step 4: レイアウトの組み合わせを選ぶ
references/layouts.md から3〜5種類のレイアウトパターンを選び、各セクションに異なるレイアウトを割り当てます。
各セクションのレイアウトは必ず異なるものにすること。
（グラフィックカードモード：scene-cards.md にある推奨レイアウト手法を参考に、各カードページで異なる手法を選択。）
Step 5: コンポーネントを選んで埋め込む
references/components.md からコンポーネントを選び、各セクションに埋め込みます。
ハードルール：HTMLのデフォルトスタイルを一切使用禁止。 引用ブロック、リスト、テーブル、カードなどはすべて components.md から該当コンポーネントのコードを使用すること。デフォルトの <blockquote>、デフォルトの border-left 引用、スタイルなし <ul>/<ol>、デフォルトの <table> は使用禁止。components.md に適切なものがない場合は、brand-dna 規範に沿ったものを自作すること。ただし、ブラウザのデフォルトスタイルは絶対に使わないこと。
Step 6: 自己チェック
references/checklist.md を参照して各項目をチェック：
- P0 はすべてパス必須 — 1つでもパスしなければ修正
- P1 はパス推奨 — できる限り満たす
- P2 はボーナス — あればより良い
（グラフィックカードモード：追加で scene-cards.md 下部のチェックリストを参照。WeChatモード：追加で scene-wechat.md 下部のチェックリストを参照し、見出しの不自然な改行や英単語の分割がないか項目ごとにチェック。）
Step 7: 納品
最終的なHTMLファイルを出力し、ブラウザでそのまま開けることを確認します。
シーンタイプ早見表
| タイプ | シーンファイル | テンプレート |
|---|---|---|
| チュートリアル型/紹介型/解説型 | references/scene-tutorial.md | assets/template-tutorial.html |
| イベントページ/勉強会/Landing | references/scene-landing.md | assets/template-landing.html |
| アプリ型/機能型 | references/scene-app.md | assets/template-app.html |
| グラフィックカード/小紅書（RED）グラフィック | references/scene-cards.md | assets/template-cards.html |
| WeChat公開アカウントのレイアウト | references/scene-wechat.md | assets/template-wechat.html |
重要な原則
- テンプレートから修正を始め、ゼロから書かない — テンプレートにはブランド変数と基本構造が組み込まれています
- 各セクションのレイアウトは必ず異なる — 単調さを避けるため、layouts.md から異なるパターンを選択
- 作成後は必ずチェックリストを実行 — P0がすべてパスしてから納品すること
禁止事項
brand-dna.md の禁止リストを厳守します（ここでは繰り返しません）。核心的なボトムライン：スクリーンショットをTwitterに投稿しても「またAIが作った」と言われないこと。