HTML Design Coder

作成したいイメージ命令の例： (より具体的なほど良いものに近づきます)

例：

• 要望：雰囲気・スタイル・色・UI構成など（自由記述）
• 内容：（システム・世界観・キャラクター詳細・画像URLなど）

Gemini Pro 2.5 / 3.1 または Sonnet 4.5 / 4.6 推奨 （高品質なHTML生成に向いています） 右上部の縦三つのドットをタップ → コピーしてください。

⚠ 注意事項 ・出力が途中で途切れた場合は『続行』と入力してください。 ・修正・変更したい場合は、要望を書き直して再生成（リロール）してください。 ・「余白、改行は削除し、一行でタグ出力してください」 と一言記載があるとより安定して出力できます。

タグの確認はこちらのサイトから確認できます。 トグル切替でスマホから見たイメージも確認できるので活用してください。 ただし、使用しているアニメーションやエフェクトは確認することはできかねます。

https://benri-tools.jp/html-preview

🛠 作成したいイメージ命令の例 （具体的なほど、完成度が高くなります）

【入力テンプレ】

• 出力：サンプル / 例 / デモ（いずれか1つ）
• 要望：雰囲気・スタイル・色・UI構成など（自由記述）
• 内容：表示したい情報やステータス 例：📍{現在地}｜🕐{時間}｜📅{日付}｜🎈状況：{現在逃走中}

Gemini Pro 2.5 / 3.1 または Sonnet 4.5 / 4.6 推奨 （高品質なHTML生成に向いています） 右上部の縦三つのドットをタップ → コピーしてください。

⚠ 注意事項 ・出力が途中で途切れた場合は「続行」と入力してください。 ・修正・変更したい場合は、要望を書き直して再生成（リロール）してください。

※「ざっくりした要望」でもOKです。デザイン案は3パターン出力されます。

【Page Builder Mode｜ページビルダー】

どちらのページを作成しますか？

A. クリエイターページ 自己紹介・作品一覧・お知らせ・リンク集など → 装飾・アニメーション使用可、個性的なページに

B. 世界観ページ 舞台設定・ルール・雰囲気説明 → 5,000トークン制限対応、コンパクト＆魅力的に

────────────────

A または B で選択してください。 作りたい内容を直接教えていただいてもOKです。

Gemini Pro 2.5 / 3.1 または Sonnet 4.5 / 4.6 推奨 （高品質なHTML生成に向いています） 右上部の縦三つのドットをタップ → コピーしてください。

──────────────── ■Tips ・要望を伝えるときは細かく伝えたほうがアシスタントが迷わずに設計できます。配色コードを指示してもOK（#f9aeb5を使って等） ・タグが途中で途切れた場合は→チャットに**『続行』と入力してください。途切れた部分から最後まで出力します。 ・紹介文が長すぎてチャットルームの1,500字以内に収まらない→ユーザーノートを活用しましょう。チャットルーム+ユーザーノートで計3,000字。ウイング1個消費して拡張すれば最大で4,500字入ります。※その際、『続きの文章はユーザーノートに記載されてます』**と記載してアシスタントに指示してください。

────────────────

タグの確認はこちらのサイトから確認できます。 トグル切替でスマホから見たイメージも確認できるので活用してください。 ただし、使用しているアニメーションやエフェクトは確認することはできかねます。

https://benri-tools.jp/html-preview