安装 Google Chrome 扩展
- 解压“映证-Verlay-Chrome扩展.zip”。
- 在 Chrome 地址栏打开 chrome://extensions/。
- 开启“开发者模式”，选择“加载已解压的扩展程序”。
- 选择刚刚解压得到的扩展文件夹。
目前仅支持
VS Code的
Codex
在本地网页上 直接把 UI 改进源码
点选页面元素，像 Figma 一样调整间距、字体、填充、描边、圆角和阴影， 元素确认修改后，安全写回本地源码，并自动验证修改结果。
开始使用
先安装 Google Chrome 与 VS Code 扩展，再从 VS Code 启动映证。
安装说明
按照以下步骤分别安装 Google Chrome 与 VS Code 扩展。
安装 VS Code 扩展
- 打开 VS Code 的扩展页面。
- 点击右上角“…”菜单，选择“从 VSIX 安装…”。
- 选择“映证-Verlay-VSCode扩展.vsix”。
- 安装完成后按提示重新加载 VS Code。
常见问题
把限制和能力一起说清楚。
不需要。映证运行在现有 Dev Server 前面，通过本地代理和 Overlay 连接真实页面，不要求你迁移项目或重做一份在线副本。
首版聚焦间距、字体、填充、描边、圆角和阴影六类高频属性，支持在页面中即时预览，确认后再写回源码。
映证会结合 DOM、组件边界和开发构建中的源码线索，把选中元素映射回文件与代码行，并在写入前告诉你它准备改哪里。
映证会在 Apply 前说明修改的属性、目标文件与预计作用范围。公共组件或全局 Token 可能影响多个实例时，界面会先给出风险提示。
写回后，映证会在 HMR 或刷新后的真实页面里重新读取 Computed Style，同时检查构建状态、新增控制台错误和声明的修改范围。
映证默认仅监听本机地址，并在写入前校验项目路径、文件基线和 Diff 范围。它不会把“本地”等同于绝对安全，所以高风险变更仍需要你确认。
系统会展示失败证据，并允许一次携带证据的自动修复。如果仍不通过，只反向应用本次工具产生的 Patch，不重置仓库，也不清理你原有的未提交修改。
映证的页面连接、变更记录和验证过程默认在 localhost 运行。Codex 请求则沿用你已配置的账号、凭证和服务提供方策略。