检查设计与代码
检查模式为开发者提供尺寸标注、间距测量、颜色与字体信息，以及生产可用的 CSS、HTML 与 SVG 代码，减少设计与开发之间的反复沟通。
进入检查模式
在工作区右侧栏切换到检查模式，或在查看模式中切换到检查面板（按 G 后按 H）。此时选中任意元素，右侧就会显示该元素的完整属性与代码片段；把鼠标移到其他元素上，还能实时看到两者之间的间距。
能获取哪些信息
- 精确的宽高、坐标与旋转角度
- 内外边距、元素间距与自动布局的 Flex 参数
- 填充、渐变、描边、阴影、模糊及其对应 CSS
- 字体家族、字号、行高、字重、字间距
- 圆角、透明度、裁剪等属性
- 元素引用的设计令牌名称
- 可直接复制的 CSS、HTML 与 SVG 代码
为什么代码质量高
希爱设计的弹性布局基于真实 CSS Flexbox 与 Web 标准，而不是私有的模拟布局。检查面板输出的 display:flex、gap、padding 等代码与设计的结构一致，组件化的图层结构也接近真实的 DOM 嵌套，开发者通常只需少量调整即可投入生产。
设计到开发的协作建议
- 设计师统一使用设计令牌命名颜色与间距
- 组件与弹性布局就位后再交付，避免大量绝对定位
- 开发者在检查面板中按令牌名对接主题变量
- 图标直接复制 SVG，位图资源通过导出面板按倍率切图
- 有疑问时在画布对应位置用评论沟通，上下文更清晰
只读也能检查
只读也能检查
检查模式是一种更安全的查看方式：研发同学即使没有文件编辑权限，也能通过只读链接查看所有标注与代码，源设计不会被意外修改。
实用提示
- 选中一个父容器复制代码，通常比逐个子元素复制更接近最终组件结构。
- 悬停测量时按住 Alt（macOS：⌥）可切换测量参考，方便读取复杂嵌套下的间距。