Ctrl K
骨架屏生成器 · 使用说明
粘贴 HTML 或 JSX，实时生成骨架屏代码：文本变成按字数估宽的灰条，图片 / 视频变成灰块，按钮链接变成圆角块；原 class 与内联样式保留，你的 CSS 会按真实布局摆放骨架，script 与事件属性自动剥离。shimmer / pulse 动画可切换，预览支持原始 / 骨架 / 并排对比，可导出 HTML+CSS 或 React / Vue 组件，全部本地完成。
示例
输入
<div class="card"><img src="a.jpg"><h3>标题</h3><p>描述文字</p></div>
输出
img→灰块 · h3/p→灰条 · 保留 .card 布局类
如何使用
- 粘贴 HTML / JSX 片段（或从页面复制 outerHTML）
- 选动画档位与预览模式
- 复制骨架 HTML 与配套 CSS 到项目
- 需要框架封装时复制 React / Vue 版本
小贴士
- 骨架保真度取决于原类名在你的 CSS 里真实存在
- 灰条宽度按文本长度估算，关键行可手动改成固定宽度
- 列表页只需取一条列表项生成，外层用循环渲染
- 结构超过 800 个节点会自动截断并提示，避免卡顿