HTML 元件重構
何時應用
- 使用者提供現有 HTML 並要求改善。
- 使用者要求檢查元件的響應式、無障礙性、效能。
- 使用者要求添加動畫、更改排版、增強視覺效果。
流程
- 取得元件的目前 HTML。
- 取得使用者指定的改善清單。若無指定清單，則依下方優先級處理。
- 保留現有結構 — 不要從零重寫。
- 回傳更新後的 HTML + 必要的 CSS/JS（如有需要）。
改善優先級（依重要性）
1. 排版
- 標題：
font-heading font-black tracking-tight，尺寸text-4xl md:text-6xl - 文字：
leading-relaxed text-slate-600 - 避免「孤行」— 在必要處使用
text-balance - 檢查對比度：深色文字在淺色背景上，淺色文字在深色背景上
2. 微動畫
- 滾動出現：
section-reveal類別（模板中已存在） - 卡片懸停：
hover:-translate-y-1 hover:shadow-xl transition-all - 按鈕懸停：
hover:-translate-y-0.5 transition - 圖示懸停：
group-hover:scale-110 transition-transform
3. 響應式
- 檢查 360px：無水平滾動，所有元素可容納
- 檢查 768px：網格重新排列為 2 欄
- 檢查 1440px：內容寬度不超過
max-w-7xl - 必要時使用
clamp()設定字體大小
4. 無障礙性 (a11y)
- 使用語義化標籤而非
<div> - 圖示按鈕添加
aria-label - 焦點樣式：
focus:ring-2 focus:ring-industrial-orange focus:outline-none - 所有圖片需有
alt，裝飾性圖示需有aria-hidden="true"
5. 效能
- 移除未使用的 Tailwind 類別
- 確保所有圖片都有
loading="lazy" - 為圖片添加
width和height（防止 CLS） - 不重複 CSS — 使用 Tailwind 工具類別
回覆格式
按以下順序回傳：
- HTML 區塊 — 更新後的元件程式碼（包在 ```html 中，方便複製）
- 變更清單 — 簡短列出 3–5 項具體改善內容
- 額外的 CSS/JS — 若有添加，獨立區塊並標明放置位置
呼叫範例
使用者：
改善 Hero 元件：排版更強勢、子彈點出現動畫、360px 響應式。程式碼：[HTML]
你：
<section>...更新後的程式碼...</section>變更內容：
- 標題：加強為
text-5xl md:text-7xl font-black tracking-tight- 為子彈點添加
section-reveal，透過style="animation-delay: Xms"設定延遲- 重新設計子彈點網格為
grid-cols-1 sm:grid-cols-2 md:grid-cols-4- 已檢查 360px 下無滾動條
- 為 CTA 按鈕添加
aria-label額外 CSS（放於
src/styles/custom.css）：.hero-bullet { animation: reveal .8s ease-out both; }