骨架屏生成器

骨架屏生成器面向前端开发者，粘贴一段页面 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 选择器（多个用英文逗号分隔），匹配的元素及其子元素会从结果中移除。