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。建議使用 rem 單位替代 px，以確保在不同裝置與使用者設定下都能維持良好的閱讀體驗。
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 單位：為了提升輔助使用性 (Accessibility) 與閱讀穩定性，請優先使用
rem替代固定像素px（特別是字體大小與間距），確保當使用者調整瀏覽器預設字體大小時，版面能隨之縮放。
交互邏輯：替代 JavaScript 的方案
由於 JavaScript 被 100% 禁用：
CSS :checked：利用
<input type="radio">或checkbox實作 Tab 或展開收合。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>）。預設方案 (Emoji)：若未指定則統一使用 Emoji。
重要限制： 禁止生成
<svg>標籤。且不得包含任何載入 SDK 的<script>標籤。
4. 嚴格禁止清單 (Strict Prohibitions)
作為 AI，若您在輸出中包含以下內容，代碼將被系統安全過濾器自動刪除：
類別 | 禁用項目 (Forbidden Items) | 替代方案 |
文檔結構 |
| 直接輸出 |
JS 腳本 | 所有 | 使用 USAL.js 或 CSS @keyframes |
JS 事件 |
| 使用 CSS 交互或動畫 |
CSS 框架 | Tailwind CSS | 必須使用原生 Pure CSS |
危險選擇器 | 所有變體，包括 .class , .class, , .class 等) :visited :-webkit-autofill 所有屬性選擇器 [type], [value], [name], [data-*], [attr^="value"] 等 | 所有 Class 使用 |
偽元素 | 偽元素：::before, ::after ❌ 禁止：content: "文字內容" 或其他實際內容 ✅ 允許：content: "" 或 content: none（可用於裝飾樣式） ✅ 允許：沒有 content 屬性的偽元素（用於其他樣式） 範例： ✅ 允許：.icon::after { content: ""; width: 10px; height: 10px; background: red; } ❌ 禁止：.price::before { content: "NT$ 999"; }
| 使用實體 |
媒體格式 | SVG 標籤 | 使用指定圖示套件標籤或 Emoji |
外部引用 |
| 僅允許引用 Google Fonts |
5. 系統自動過濾機制說明 (System Sanitization)
自動過濾： 系統會自動移除所有
<script>、行內 JS 事件、*選擇器與SVG標籤。樣式保護： 非
fs-custom-開頭的類別若與系統衝突，其樣式將可能被系統覆蓋。
6. 輸出前自我檢查表 (Final Checklist)
[ ] 代碼中是否 100% 不含任何 JavaScript 或 script 標籤？
[ ] 是否已移除所有標籤屬性內的
on*事件？[ ] 是否確認所有 CSS 類別名稱皆以
fs-custom-開頭？[ ] 是否優先使用 rem 單位而非 px？
[ ] 是否完全未使用 SVG、
::before,::after的content屬性是否有值？[ ] 是否已針對具體使用的標籤手動設定
box-sizing: border-box？