“Vona”的产品徽标图片

Vona

5.0(

2 个评分

)
Vona的项目媒体 3(屏幕截图)
Vona的项目媒体 1(屏幕截图)
Vona的项目媒体 2(屏幕截图)
Vona的项目媒体 3(屏幕截图)
Vona的项目媒体 1(屏幕截图)
Vona的项目媒体 1(屏幕截图)
Vona的项目媒体 2(屏幕截图)
Vona的项目媒体 3(屏幕截图)

概述

在真实网页上实现类 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 星(5 星制)2 个评分

详细了解结果和评价。

详情

  • 版本
    0.7.4
  • 上次更新日期
    2026年6月29日
  • 提供方
    Dee
  • 大小
    3.11MiB
  • 语言
    中文(中国)
  • 开发者
    邮箱
    leedee1990@gmail.com
  • 非交易者
    该开发者尚未将自己标识为交易者。欧盟地区消费者须知:消费者权利可能不适用于您与该开发者达成的合约。

隐私权

管理扩展程序并了解它们在组织中的使用情况
该开发者已披露,此产品不会收集或使用您的数据。

该开发者已声明,您的数据:

  • 不会因未获批准的用途出售给第三方
  • 不会为实现与产品核心功能无关的目的而使用或转移
  • 不会为确定信用度或放贷目的而使用或转移

相关

Vibe Check

0.0

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

AI聊天的提示优化器 - 完美提示

5.0

使用AI聊天的提示优化器 - 完美提示来完善草稿,这是一款提示增强工具,可以重写、审查、保存和重复使用文本。

MarkUp: Annotate webpages, prompt AI agents

4.2

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.

页改笔 HTMLEdit

0.0

面向 HTML 页面的编辑与标注工具,支持本地页面修改保存、批注和跨页面汇总

htmlGenius

5.0

HTML在网页中实时编辑+精确批注修改意见+一键发送给Codex、Claude Code等Agent自动修改+团队共享批注

VisualEditor

5.0

通过DataTester(AB) VisualEditor让网站优化变得更轻松,支持任意网页可视化编辑,降低使用AB成本,助力科学决策。

Modify — Visual CSS Editor for AI Coding Agents

5.0

Edit live webpages with a visual CSS editor, then copy exact changes as a structured prompt for terminal AI coding agents.

Pointer — Visual Editor for AI-Built Sites

5.0

AI built your site 70% right. Fix the rest visually, then hand your edits to Cursor or Claude as a precise prompt.

WebSnatch

5.0

Extract design systems and generate AI prompts from any website.

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

4.8

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

Copyframe

5.0

将网页复制为可编辑 Figma 图层或独立 HTML,并可保存能打开、分享和继续开发的网页副本。

Vibe Check

0.0

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

AI聊天的提示优化器 - 完美提示

5.0

使用AI聊天的提示优化器 - 完美提示来完善草稿,这是一款提示增强工具,可以重写、审查、保存和重复使用文本。

MarkUp: Annotate webpages, prompt AI agents

4.2

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.

页改笔 HTMLEdit

0.0

面向 HTML 页面的编辑与标注工具,支持本地页面修改保存、批注和跨页面汇总

htmlGenius

5.0

HTML在网页中实时编辑+精确批注修改意见+一键发送给Codex、Claude Code等Agent自动修改+团队共享批注

VisualEditor

5.0

通过DataTester(AB) VisualEditor让网站优化变得更轻松,支持任意网页可视化编辑,降低使用AB成本,助力科学决策。

Modify — Visual CSS Editor for AI Coding Agents

5.0

Edit live webpages with a visual CSS editor, then copy exact changes as a structured prompt for terminal AI coding agents.

Google 应用