verlay

这是什么？适合谁？

Verlay（daaaayuuuu/verlay）是一个面向真实 Web 应用的 AI 可视化编辑器：元素选取、自然语言修改、代码智能体协作，源码实时更新，提供 Chrome / VSCode 双扩展。

核心价值：把「可视化编辑」与「代码 Agent」协同起来——直接在真实网页上点选元素、用自然语言改，改完源码同步更新，而不是在截图或 mock 上做无意义的修改。

适合人群：

• 想在真实页面上直接改 UI 的前端开发者
• 用自然语言调样式/布局的设计师与产品
• 关注可视化 + Agent 协同的前端工具探索者

使用前提：Chrome 或 VSCode 扩展；一个要编辑的真实 Web 应用。

准备工作

1. 浏览器扩展：装 Chrome 扩展（或 VSCode 扩展）。
2. 目标应用：准备一个要编辑的真实 Web 应用。
3. Node 环境：项目 TypeScript 编写。
4. 成本：MIT 开源免费；接 LLM 按模型计费。
5. 时间预算：安装 + 第一次自然语言改样式约 15 分钟。

快速上手（3 步）

第一步：安装扩展

git clone https://github.com/daaaayuuuu/verlay
cd verlay
npm install   # 并按 README 安装 Chrome / VSCode 扩展

第二步：选取页面元素

在真实网页上点选要修改的元素。

第三步：自然语言修改

用自然语言描述修改，Agent 改代码并实时更新。

成功判定：在真实网页上点选一个元素，用一句话完成样式/布局修改并看到源码同步更新。

初级用法

元素选取

直接在页面上点选元素，免去定位 DOM 的麻烦。

自然语言修改

用一句话描述想要的修改。

源码实时更新

修改直接落回源码，不是一次性截图。

高级玩法

代码 Agent 协作

与代码智能体协作，做更复杂的改动。

Chrome + VSCode 联动

浏览器改、编辑器看，双端协同。

组件级编辑

针对组件做结构化修改。

小技巧

1. 先在测试环境改：真实页面改错了要能回滚。
2. 改动小步走：一次改一点，便于验证。
3. 源码要可控：确认修改落回哪个文件。
4. 自然语言要具体：模糊描述容易改偏。
5. 保留 diff：改完看 diff 再提交。

常见踩坑

踩坑 1：改错元素

• 现象：修改落到了错误的位置。
• 原因：元素选取不准或描述模糊。
• 解决：点选时确认目标，修改后立即看 diff。

踩坑 2：源码污染

• 现象：改动落到不该改的文件。
• 原因：Agent 对项目结构理解偏差。
• 解决：限定修改范围，改完检查 diff。

踩坑 3：复杂布局改不动

• 现象：自然语言改不了复杂布局。
• 原因：视觉编辑器对复杂结构支持有限。
• 解决：复杂改动回退到手动编码。

踩坑 4：扩展兼容问题

• 现象：扩展在部分页面失效。
• 原因：页面结构或浏览器版本差异。
• 解决：更新扩展，必要时用 VSCode 端。

踩坑 5：项目较新

• 现象：功能覆盖有限。
• 原因：项目 2026-08 创建。
• 解决：以 README 为准。

常见问题 FAQ

Q1: 和普通可视化编辑器有什么区别？

A: 它面向真实 Web 应用、直接改源码，并与代码 Agent 协同。

Q2: 支持哪些浏览器？

A: 提供 Chrome 扩展，另有 VSCode 扩展，具体见 README。

Q3: 免费吗？

A: MIT 开源免费；接 LLM 按模型计费。

Q4: 改完能提交吗？

A: 源码实时更新，建议改完看 diff 后再提交。

Q5: 适合生产项目吗？

A: 建议先在测试环境验证，项目较新需谨慎。

进阶学习建议

掌握基础后，建议深入：

1. 把 Verlay 与代码 Agent 的协作流程沉淀为团队标准。
2. 在测试环境练熟元素选取与自然语言指令的搭配。
3. 结合组件化改造，做更结构化的前端编辑。

参考链接

• 官方仓库

最后更新：2026-08-29 · 作者：MagicNetWorld · 基于公开资料整理，关键数据经 GitHub API 独立实测核验，AI 辅助生成