Feversocialエディター：AI生成HTML/CSS 中核開発ガイドライン

⚡ クイックプロンプト：以下の指示文をそのままAIに提示してください

あなたはFeversocialプラットフォームに精通したフロントエンド開発の専門家です。以下のURL内のウェブ開発規範を読んでください：
https://help.feversocial.com/zh-TW/articles/10076987-%E7%B7%A8%E8%BC%AF%E5%99%A8-ai-%E7%94%9F%E6%88%90-html-css-%E6%A0%B8%E5%BF%83%E9%96%8B%E7%99%BC%E8%A6%8F%E7%AF%84 。
読んだ後、規範に従って内容を構成し、私がエディターにコピーできるウェブページコードを生成してください。以下のルールを厳密に遵守してください：
1. JavaScript禁止：<script>タグやいかなるインラインイベント属性も絶対に出力しないこと。
2. スニペットのみ：html/bodyタグを含めず、直接コンテンツのみを出力すること。
3. 命名規範と分離：すべてのカスタムClass名は fs-custom- で始めること。
4. Pure CSSとレイアウト：Tailwindの使用禁止。異なるデバイスやユーザー設定でも読みやすさを保つため、px単位ではなくrem単位の使用を推奨。
5. アイコンと装飾：iconは指定されたパッケージを優先使用すること。contentに値を持つ擬似要素の使用禁止、SVGの使用禁止。
6. フォント：Google Fontsの参照は可能。linkは最初に配置すること。
7. アニメーション対応可：USAL.js & CSS @keyframes

（以下にコンテンツの指示を記載）

規範の解説

1. コード構造とフォーマット規範（Architectural Standards）

スニペットのみ（Snippet Only）

完全なHTML文書構造の生成は禁止です。

絶対禁止のタグ： <!DOCTYPE>, <html>, <head>, <body>。
出力形式： <style>タグとコンテンツの<div>ブロックのみを出力し、文書レベルの宣言は一切含めないこと。

スタイルの分離と命名規範（Style Isolation & Naming Convention）

エディターのシステムスタイルとの衝突を防ぐため、すべてのカスタムCSSクラスは厳格な命名規則に従う必要があります。

命名の原則：すべてのカスタムClass名は fs-custom- を接頭辞として付ける必要があります。
正しい例： .fs-custom-container, .fs-custom-title, .fs-custom-button。

ボックスモデルのリセット（Box-sizing）

グローバルな*セレクタの使用は禁止です。コード内で実際に使用しているタグに対して、個別にリストで定義する必要があります。

正しい方法：

.fs-custom-wrapper,  .fs-custom-wrapper div,  .fs-custom-wrapper p,  .fs-custom-wrapper span, .fs-custom-wrapper h2, .fs-custom-wrapper img {     box-sizing: border-box; }

2. CSS記述とレイアウト規範（CSS & Layout Standards）

ネイティブCSSの使用が必須（Pure CSS Only）

本エディター環境はTailwind CSSに対応していません。

必須要件： すべてのスタイルは標準的なネイティブCSSで記述する必要があります。すべてのカスタムClass名はfs-custom-で始める必要があります。

レスポンシブレイアウトと単位の規範（Responsive & Units）

レスポンシブ要件： ネイティブCSSのMedia Queriesを使用して、各デバイスへの対応を実現する必要があります。
rem単位の使用を推奨：アクセシビリティと閲覧の安定性を高めるため、固定ピクセルpxではなくrem単位を優先して使用してください（特にフォントサイズや余白）。ユーザーがブラウザのデフォルトフォントサイズを調整した際にも、レイアウトが連動して拡縮できるようにするためです。

インタラクションロジック：JavaScriptの代替案

JavaScriptが100%禁止されているため：

CSS :checked：<input type="radio">やcheckboxを利用してタブや開閉の実装を行います。
CSS :hover / :active：ボタンやリンクのフィードバック効果を処理します。

3. メディアとスタイルの規約（Media & Styles）

A. アニメーション対応：USAL.js & CSS @keyframes

USAL.jsの使用を優先：エディター内蔵で対応しています。登場アニメーションの実装にはdata-usal属性の使用を優先してください。
ネイティブCSS @keyframesにも対応：カスタムアニメーションが必要な場合、名前は一意である必要があります（@keyframes fs-custom-fadeinなど）。

B. 外部フォント：Google Fonts（対応）

エディターはGoogle Fontsの参照に対応しています。<link>タグはコードの一番上に配置してください。

C. アイコン方式（Icons）

ユーザー指定のパッケージ：アイコンライブラリ（Lucideなど）が指定されている場合は、そのタグを生成してください（<i data-lucide="check"></i>など）。
デフォルト方式（絵文字）：指定がない場合は絵文字を統一して使用してください。

重要な制限： <svg>タグの生成は禁止です。また、SDKを読み込む<script>タグも一切含めてはいけません。

4. 厳格な禁止事項リスト（Strict Prohibitions）

AIとして、以下の内容を出力に含めた場合、そのコードはシステムのセキュリティフィルタによって自動的に削除されます：

カテゴリ	禁止項目（Forbidden Items）	代替案
文書構造	`<html>`, `<head>`, `<body>`, `meta`	直接`<div>`コンテンツを出力
JSスクリプト	すべての`<script>`タグ	USAL.jsまたはCSS @keyframesを使用
JSイベント	`onclick`, `onload`などすべての`on-`属性	CSSのインタラクションやアニメーションを使用
CSSフレームワーク	Tailwind CSS	ネイティブのPure CSSを使用する必要があります
危険なセレクタ	すべてのバリエーション（.class , .class, , .class など）を含む :visited :-webkit-autofill すべての属性セレクタ [type], [value], [name], [data-*], [attr^="value"] など	すべてのClassは`fs-custom-`で開始
擬似要素	擬似要素：::before, ::after ❌ 禁止：content: "テキスト内容" などの実際のコンテンツ ✅ 許可：content: "" または content: none（装飾スタイルに使用可） ✅ 許可：content属性を持たない擬似要素（その他のスタイルに使用）例： ✅ 許可：.icon::after { content: ""; width: 10px; height: 10px; background: red; } ❌ 禁止：.price::before { content: "NT$ 999"; }	実体のある`<span>`や`<div>`で装飾する
メディア形式	SVGタグ	指定されたアイコンパッケージのタグまたは絵文字を使用
外部参照	`url()`, `@import`, `<link>`	Google Fontsの参照のみ許可

5. システム自動フィルタリング機構の説明（System Sanitization）

自動フィルタリング： システムはすべての<script>、インラインJSイベント、*セレクタ、SVGタグを自動的に除去します。
スタイル保護： fs-custom-で始まらないクラスがシステムと衝突する場合、そのスタイルはシステムによって上書きされる可能性があります。

6. 出力前のセルフチェックリスト（Final Checklist）

[ ] コードにJavaScriptやscriptタグが100%含まれていないか？
[ ] すべてのタグ属性内のon*イベントを削除したか？
[ ] すべてのCSSクラス名がfs-custom-で始まっていることを確認したか？
[ ] pxではなくrem単位を優先して使用したか？
[ ] SVG、::before, ::afterのcontent属性に値を持たせていないか、完全に確認したか？
[ ] 実際に使用しているタグに対してbox-sizing: border-boxを手動で設定したか？

カスタムビジュアルのCSSとアニメーション実装方法