骨架屏生成器

骨架屏生成器面向前端開發者，粘貼一段頁面 HTML（或上傳 HTML 文件），工具會在隔離預覽中渲染並測量真實佈局，自動生成可直接使用的 Skeleton 加載佔位代碼。無需手寫骨架結構和樣式，即可爲頁面加上加載骨架屏，減少白屏等待感與數據返回時的佈局跳動。

核心功能

• 兩種生成結果：自適應骨架保留原頁面的 DOM、Flex、Grid 和媒體查詢，文字隨容器寬度重新換行，適合直接嵌入響應式頁面；首屏貼圖按當前預覽寬高提取可見色塊，生成固定比例佈局，適合固定尺寸的首屏佔位。
• 隱私優先模式：默認只輸出按實測行寬生成的純骨條，結果中不包含原文，同時清除描述、關鍵詞等元信息；也可切換"精準排版"保留不可見原文，以獲得更接近原頁面的換行效果。
• 元素整體骨架化：圖片、按鈕、輸入框、視頻等元素會整體變爲骨架色塊，純色塊和背景圖元素同樣自動識別處理。
• 豐富的外觀設置：骨架色與頁面底色自由取色，動畫可選柔和掃光、呼吸閃爍或無動畫，圓角支持跟隨原元素、統一大小（0～24px 可調）或不使用。
• 忽略選擇器：用逗號分隔的 CSS 選擇器排除不需要生成骨架的元素（如廣告、懸浮按鈕），停止輸入約半秒後自動更新預覽。
• 多設備預覽：手機、平板、電腦預設尺寸及自定義寬高（280～1920px），並排對比原頁面與骨架效果。
• 三種代碼輸出：自適應完整代碼、可多頁共用的公共 CSS、首屏貼圖代碼，一鍵複製或下載爲 HTML 文件。
• 內置示例：提供文章詳情、卡片列表、商品詳情三個示例，快速上手體驗。

適用場景

• 爲內容頁、列表頁、詳情頁添加加載骨架屏，提升首屏體驗。
• 快速還原現有頁面的佈局結構，省去手寫骨架的工作量。
• 爲固定尺寸的首屏佔位圖生成輕量色塊方案。
• 設計評審時演示加載態效果。

使用方法

1. 粘貼頁面 HTML 源碼（建議同時包含頁面的關鍵 CSS），或點擊"上傳 HTML"選擇文件。
2. 點擊"生成骨架屏"，左右對照查看原頁面預覽與骨架預覽。
3. 展開"生成設置"調整設備尺寸、顏色、文字處理方式、動畫、圓角與忽略選擇器，改動會自動重新生成。
4. 在"自適應代碼 / 公共樣式 / 首屏貼圖"三個標籤間切換，複製或下載需要的代碼。

什麼是骨架屏

骨架屏（Skeleton Screen）是頁面數據加載期間展示的灰色佔位界面，按內容實際佈局擺放色塊和骨條。相比轉圈 Loading，它提前告訴用戶"內容會出現在哪裏、長什麼樣"，加載完成後替換爲真實內容，視覺上更平滑，也能有效緩解佈局跳動。

常見問題（FAQ）

Q：這個工具免費嗎？

A：免費使用，無需註冊，解析和生成全部在你的瀏覽器本地完成，頁面源碼不會發送到服務器。

Q：生成的骨架會保留我的頁面文字嗎？

A：默認的"隱私優先"模式不會保留原文，只按實際行寬輸出骨條；若需要更精確的換行效果，可切換"精準排版"模式，它會以不可見方式保留原文。

Q：爲什麼建議連同 CSS 一起粘貼？

A：工具依賴頁面的實際佈局測量尺寸，包含頁面關鍵樣式（內聯 style 標籤或外部樣式）能讓骨架的位置和大小更準確。

Q：自適應和首屏貼圖應該選哪個？

A：嵌入響應式頁面、希望骨架在不同寬度下正常重排時選自適應；只需要一個固定比例的首屏佔位圖時選首屏貼圖。

Q：能排除某些元素不生成骨架嗎？

A：可以。在"不生成骨架的選擇器"中填寫 CSS 選擇器（多個用英文逗號分隔），匹配的元素及其子元素會從結果中移除。