AIはHTMLの生成が得意ですが、デフォルトの出力では多くの場合、入れ子になった <div> とユーティリティクラスが絡み合い、深いコンテナツリーに変換されてしまいます。いくつかのプロンプトルールでそれを修正できます。
セマンティックHTMLを依頼する
モデルに実際のタグを使用するよう指示します。見出しには <h1>–<h3>、テキストには <p>、行動を促す要素には <button> または <a class="button">、リストには <ul> を使います。ネイティブタグはネイティブウィジェットに対応します。
ネストを制限する
次を追加します： 「DOMを浅く保つ — セクションごとに1つのラッパー、冗長なネストは無し。」 これにより、変換後に得られるコンテナレイヤーの数が直接削減されます。
インラインスタイルまたは単一のスタイルブロックを優先する
外部フレームワークではなく、インラインスタイルまたは1つの <style> ブロックを依頼します。コンバーターは計算済みスタイルを読み取るため、自己完結型のCSSが最も適切に変換されます。
スタータープロンプト
「[トピック]のレスポンシブHTMLセクションを生成して。セマンティックタグ（h2, p, button, ul）を使い、ブロックごとに1つのラッパーでDOMを浅く保ち、すべてのCSSを単一のスタイルブロックにまとめ、アイコンにはFont Awesomeのアイコンクラスを使用して（例：<i class=”fas fa-check”>、インラインSVGやBase64ではない）。外部スクリプトやフォントは使用しない。」
結果をコンバーターに貼り付け、ネイティブコンポーネントモードに切り替え、構造マップを確認します。コンテナが大幅に減り、ほとんどが緑色の「直接変換」行になっているはずです。