Vona

5.0(

2 ratings

)

Extension Tools49 users

Overview

在真实网页上实现类 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

5 out of 5
2 ratings
Learn more about results and reviews.

Details

Version
0.7.4
Updated
June 29, 2026
Flag concern
Offered by
Dee
Size
3.11MiB
Languages
中文（中国）
Developer
Email
leedee1990@gmail.com
Non-trader
This developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.

Privacy

Manage extensions and learn how they're being used in your organization

The developer has disclosed that it will not collect or use your data.

This developer declares that your data is

Not being sold to third parties, outside of the approved use cases
Not being used or transferred for purposes that are unrelated to the item's core functionality
Not being used or transferred to determine creditworthiness or for lending purposes

MarkUp: Annotate webpages, prompt AI agents

4.0

Annotate live webpages and export structured change requests to AI coding assistants. Draw your changes instead of describing them.

Modify - AI-Powered Website Modifier

5.0

Customize any website with AI. Remove ads, change colors, transform elements - just describe it. No coding required.

Website Modifier

0.0

Transform any webpage content with AI-generated text and images

Pagewise

0.0

使用当前网页上下文，与兼容 OpenAI 的 AI 助手对话。

PixelAudit 视觉走查助手

5.0

网页视觉走查工具：快速查看尺寸、字体、颜色与间距，记录问题并导出走查结果。

PageFlow AI - Landing Page Builder

0.0

AI landing page builder: generate, visually edit & inject pages to your marketing platform editor. Bring your own AI key (BYOK).

HTMLPacker - 一键打包网页，给 AI 编程参考

0.0

把网页一键打包成原型素材包，交给 AI 编程工具参考、复刻和改版。

Design Cursor

0.0

选中网页元素并复制为适合粘贴到 AI 对话中的结构化上下文。

AEM Editorial Toolbar

5.0

Helping editors navigate AEM sites.

Modify — AI Coding Visual CSS Editor for Designers and Developers

5.0

A visual CSS editor for designers and developers. Edit your live site, then your AI agent writes each change into real source code.

Liaison - AI 编程定位、网页样式编辑与批注

4.8

在任意网页上实现类似 Figma 的设计体验，调整元素样式、添加评论，并导出结构化 Prompt 给 AI 开发与协作。

Vibe Check

0.0

Real-time design feedback and vibe checks for your web apps using AI.