Vona

在真实网页上实现类 Figma 编辑体验，支持样式调整、评论与 AI 导出。

Vona 是一款面向网页设计验收与前端协作的可视化编辑插件。你可以在真实网页上直接选择元素、调整样式、查看图层、添加评论，并导出修改记录给 AI 或团队成员继续处理。 主要功能： 1.在真实网页上选择和检查元素 2. 可视化调整颜色、字体、间距、尺寸、圆角、边框等样式 3. 查看网页图层结构和元素属性 4. 支持 CSS 变量 / Design Token 识别与绑定 5. 支持评论模式，直接对页面元素标注意见 6. 支持修改历史、撤销 / 重做 7. 支持移动端画布预览 8. 支持导出修改记录，便于交给 AI 或开发者实现 9. 支持中英文界面切换 解决的场景： 1. 设计稿和线上页面不一致，难以准确描述修改点 2.产品、设计、前端之间来回截图沟通，效率低 3. 页面细节调整需要反复改代码、刷新、确认 4. AI 生成代码时缺少准确的元素位置和修改上下文 5. 设计验收记录分散，难以沉淀为清晰的修改清单 6. 复杂页面中难以快速定位元素、样式和层级关系 ______________________________________________________________________________________________ Vona is a visual editing extension for web design QA and frontend collaboration. It allows you to select elements directly on real web pages, adjust styles visually, inspect layers, add comments, and export change logs for AI or teammates. Key Features: 1. Select and inspect elements on real web pages 2. Visually adjust colors, typography, spacing, size, radius, borders, and more 3. View page layers and element properties 4. Detect and bind CSS variables / design tokens 5. Add comments directly to page elements 6.Track edit history with undo / redo support 7.Preview pages in a mobile canvas 8.Export change logs for AI or developers 9.Switch between English and Chinese UI Pain Points It Solves: 1.Hard to describe the exact differences between design and implementation 2.Too much back-and-forth communication through screenshot 3.Small UI adjustments require repeated code changes and refreshes 4.AI coding tools lack precise element context and change details 5.Design QA fe.Complex pages make it hard to locate elements, styles, and hierarchy