字体、标尺、间距、吸管、带注释的屏幕截图、网站样式指南、图像和 SVG、屏幕预览 - 用于网页布局。
✨ Tilda School Helper 是一套用于在页面上检查、复制和捕获网页布局的大型工具。方便使用 Tilda 和任何网站。
🧰 工具
🔤 字体。将鼠标悬停在任何文本上即可查看其字体、大小、粗细、行高和颜色。单击即可复制字体系列。 “Font”行显示文件中的真实字体名称（如 Fonts Ninja） - 例如“Graphik LC Web Medium”，而不是 Tilda 分配的内部别名：扩展程序提取 @font-face 规则（包括来自第三方样式表）并读取嵌入在实际字体文件中的该粗细的名称。 “许可证”行暗示了来源：绿色 — 免费（系统、Google 字体或免费网络字体），橙色 — 付费。著名的商业字体（Adderley、Circular、Gilroy、Proxima Nova、Futura、Gotham 等）通过名称即可识别，对于它们来说，它建议使用接近的免费 Google Fonts 替代品。 Alt+单击（⌥ Option+单击在 Mac 上）打开 Google 字体页面，Shift+单击复制指向字体文件的直接链接（如果可用）。
📏 统治者。三种模式：“Box”——元素尺寸； “自由”——不依赖于元素的拖出式测量框架； “锚点→目标”——两个元素之间的距离。
🎨 吸管和颜色。抓取任何像素的颜色或收集页面上实际使用的颜色的调色板。单击即可复制十六进制。
📐 指南。顶部和左侧的标尺，就像 Figma 中一样：拖动参考线、读取坐标、选择线条颜色以匹配站点。吸附将线条磁化到元素边缘和中心，“粘性”模式在滚动时将它们固定在屏幕上的适当位置。按住 Shift 键可查看相邻线之间的像素距离，按住 Shift 键并单击可放置锚点以测量任意线对。
🧱 线框。显示没有“噪音”的页面结构：按类型（容器、文本、媒体、控件）勾勒出元素的轮廓，可以将页面饱和度降低为黑白，并用灰色块替换图像 - 判断网格、节奏和层次结构，而不会被颜色和内容分散注意力。轮廓覆盖切换：所有元素、仅 Tilda 块或关闭。页面标记中未写入任何内容。
← › 元素 → CSS。单击页面上的任何元素，侧面板会收集其干净的 CSS（仅有意义的属性：字体、颜色、背景、边框、半径、阴影、弹性布局、间距），准备作为一个块进行复制。再加上 Tilda 上下文：块 ID (#rec…)、块类型（数字 T 级或零块 T396）、对于零块 — 原子类型及其在画板上的位置，对于经典网格 — 列号。一种从其他网站引用样式或仔细检查您自己的布局的快速方法。
📸 带注释的屏幕截图。捕获窗口、选定区域或整个页面。窗口捕获可以隐藏滚动条、固定菜单和带有小部件的 cookie 横幅。区域屏幕截图 - 在捕获之前通过手柄（裁剪）进行精确的边缘调整。全页捕获滚动和缝合帧，动画冻结。内置编辑器：矩形、椭圆形、线条、箭头、画笔、标记、文本、编号标签、模糊、裁剪、颜色选择器、社交媒体背景、保存为 PNG、JPEG 或 WebP（具有质量选择）或复制到剪贴板。
🎥 屏幕录制（测试版）。将选项卡、单个窗口或整个屏幕（或仅选定的页面区域）的视频录制到 WebM 或 MP4 文件。麦克风（带有设备选择）、选项卡音频和录音上方的摄像头气泡，Loom 风格：气泡可拖动并最终出现在最终视频中。录音时 — 带有计时器的 REC 板，可暂停和停止。完成的文件通过“另存为”保存，并且 Finder/Explorer 可以选择立即在其文件夹中显示它。一切都记录并保存在本地，没有任何内容上传。测试版工具 - 请参阅下面的“测试版模式”了解如何启用它。
🖼️ 图像和 SVG。收集页面上的每个图像（包括背景和内联 SVG），查看大小和源 URL，删除重复项。按类型、像素大小和权重滑块进行过滤 - 以过滤掉图标和跟踪像素等小内容。逐个下载、批量下载或作为单个 ZIP 存档下载。
⚡ 图像优化。页面重量审核：对于每个光栅图像，您可以看到其屏幕尺寸与实际文件尺寸及其重量，标记为“超大×N”（加载的图像比显示的尺寸大 - 浪费的像素超出 2× 视网膜）、“重”（≥300 KB）、“放大”（自然尺寸小于显示的尺寸 - 模糊）和“PNG → WebP”。顶部总结：总重量、有多少图像尺寸过大以及大致可以节省多少。按钮复制报告。帮助解释页面加载缓慢的原因。
🎯 设计叠加。将 PNG/JPG 模型拖放到实时页面顶部，并将其与布局逐像素对齐：不透明度、比例（包括“适合宽度”）、用鼠标拖动并用箭头键微调（1px、10px 和 Shift）。 “差异”模式将匹配像素变成黑色 - 立即显示布局与设计的偏差。 “点击”按钮使模型对鼠标透明，以便您可以使用下面的页面。
📖 网站风格指南。单击一下，您即可获得打开页面的设计系统：带有角色（背景、文本、边框）和阴影分组的调色板、WCAG 2.1 对比度检查、渐变、具有真实样式的实时按钮示例、具有字体许可证检测和实时示例的排版、间距比例、品牌角半径和阴影、网站自己的 CSS 变量。单击字体、按钮、对比度对、间距值或圆角半径会突出显示页面上具有该值的每个位置（箭头翻阅查找内容）——轻松发现奇怪的位置； Alt+单击复制该值，其他所有内容只需单击即可复制。导出：CSS 变量（：带有令牌的根）、Figma 令牌 (Tokens Studio)、Tailwind 配置片段、JSON、可共享的 PNG 卡、要导入到 Tilda 的 .tildastyles 文件（选择其中的颜色、字体和按钮）并打印为 PDF。历史记录保留最近 10 次分析，比较模式显示两个站点的共同点和不同点。非常适合拆开参考文献。
📱💻 屏幕预览。在设备框架中打开网站 - 移动设备（iPhone、Pixel、iPad）和桌面设备（1366、1440、1680、全高清 1920、2K 2560）。桌面画布以实际宽度呈现，如果窗口较小，则缩小以适应窗口 - 在笔记本电脑上，您可以看到网站在大显示器上的外观。 “响应式”模式 - 通过边缘和角自由拖动视口大小，或设置精确的宽度和高度，以捕获“破坏”宽度。 “参考线”按钮可在预览中打开标尺和参考线 - 像 Figma 中一样检查网格和间距。
↔️ 间距（手动）。检查块之间的垂直间隙是否相等：单击两个块，然后显示间隙。测量多个间隙：匹配的间隙以绿色突出显示，异常值以像素差异突出显示为红色。参考是自动选取的（最常见的间隙）或手动设置 - 通过单击所需的间隙带。
🧪 测试版模式。一些工具——元素 → CSS、设计叠加、图像优化和屏幕录制——仍处于测试版设置中：它们正在被完善，并在菜单中带有“测试版”标签。通过 Stable | 启用它们贝塔流行 | Beta 侧边开关位于内置帮助的右上角（弹出标题中的“？”按钮）。 Beta 弹出窗口还在页面上显示了一个浮动工具菜单（如 VisBug 面板）：您可以拖动它，将其折叠成贴纸气泡并依次切换工具，而无需打开弹出窗口。 Beta 版会在 Chrome 侧面板中打开页面旁边的相同菜单，并且该面板在您工作时保持打开状态。稳定是没有测试版工具的常规菜单。
⌨️ 所有工具都在页面顶部运行。使用 Esc 键退出其中任何一个。明亮的“？”弹出标题中的 按钮可打开内置帮助，“↻”按钮可清除缓存并重新加载页面 - 完全重新加载，无需过时的缓存，适用于未拾取新布局编辑的情况。常用工具可以通过键盘快捷键触发：区域屏幕截图 — Ctrl/⌘+Shift+U、字体 — Ctrl/⌘+Shift+F、标尺 — Ctrl/⌘+Shift+L、参考线 — Ctrl/⌘+Shift+Y，并且您可以指定自己的屏幕预览键（所有这些都可以在 chrome://extensions/shortcuts 进行配置）。
🔒 该扩展程序不收集或传输任何数据：一切都在浏览器本地运行。
🎓 Tilda School (tilda.school) 的免费工具。
