Media
5 items
Description
在任意网页上以 Figma 式面板可视化改稿，一键导出 AI 能精确定位的提示词 页面已经做出来了，但间距太挤、字号不对、圆角不统一、布局方向错了。你知道哪里不对，却很难用文字说清楚；打开 DevTools 一个个试值，调好的数字散落在各处，交给 AI 或开发时还要重新描述一遍，对方还得去代码里猜是哪个组件。 Visual Revise 把这条链路缩短成三步：在真实网页上可视化地改，改动自动累积成结构化记录，一键复制成提示词粘给 Claude Code、Cursor、Codex 等 AI 编程工具，AI 直接改代码。 【主要功能】 · Figma 式属性面板 点选页面上任意元素，旁边弹出属性面板。分区顺序、布局组织方式、尺寸模式（固定 / 贴合 / 填满）、九宫格对齐、填充与描边都对齐 Figma 的使用习惯，不用记 CSS 属性名也能上手。改动实时生效，所见即所得。 · 改动记录与撤销 每一处修改都自动记入改动列表，按元素分组，显示改动前后的值。可以点击回跳定位、单条撤销、整体撤销 / 重做，也可以导出成 JSON 交给开发逐项修改，或下次导入继续。 · 一键复制提示词 把全部改动整理成一段结构化提示词。每个元素给出多重定位锚点：选择器、标签、文本特征、DOM 路径、同级位置。即使项目用了 Tailwind、CSS Modules 这类会改写类名的方案，AI 也能通过文本特征直接搜到对应的组件文件，不用来回追问「你说的是哪个元素」。 · 评论标注与参考图 悬停上浮、点击变色这类 CSS 表达不了的交互需求，可以直接在元素上写评论。支持粘贴截图或拖入图片作为参考图，图片会内联插在句子里，AI 能知道「这张图指的是哪一处」。 · 拖拽重排与结构树 在 flex / grid 容器里直接拖动子元素调整顺序，或在结构树里拖行排序。一次拖拽记为一条改动，可整体撤销。 · 图片替换与共享元素联动 选中图片一键换成本地图片；开启共享元素联动后，改一张卡片，页面上所有同构卡片同步变化。 · 改动不会被前端框架清掉 React、Vue 重渲染替换 DOM 节点后，Visual Revise 会自动找回并重新绑定改动；认不准的会明确标注「元素已消失」，绝不猜错位置。 【使用方式】 1. 在任意网页点击扩展图标，或按 Alt+Shift+D（Mac 上为 Option+Shift+D）唤起工具条 2. 按 V 选择元素并在面板里调整，按 C 在元素上写评论，按 R 拖拽重排 3. 按 L 查看改动记录，按 P 一键复制提示词 4. 粘贴到 Claude Code / Cursor / Codex，让 AI 改代码 按 Tab 可临时隐藏编辑器，验证页面原生的 hover 和点击，再按 Tab 回来，改动全部保留。按 B 进入浏览模式，把页面完全交还给你。 【适合谁】 · 用 AI 编程工具做前端的开发者：不再手写「把那个按钮的 padding 改大一点」 · 需要验收前端实现的设计师和产品经理：把修改意见变成开发能直接照着做的清单 · 前端团队：用 JSON 导入导出在设计与开发之间传递改稿记录 【隐私】 扩展完全在本地运行，没有任何服务器，不收集、不存储、不传输任何数据。只有当你点击图标、使用右键菜单或按下快捷键时，才会在当前标签页注入编辑器。所有改动和批注只保存在当前标签页的内存里，只有你主动导出时才会通过浏览器下载保存到本机。 【关于】 Visual Revise 基于 Google Chrome Labs 的开源项目 VisBug（Apache-2.0）二次开发，在其网页可视化编辑能力之上新增了 Figma 式属性面板、改动记录、AI 提示词导出、评论与参考图、拖拽重排等功能。本项目与 Google 无隶属关系，也不是 VisBug 的官方版本。 源码与问题反馈：https://github.com/jieyingYY99/visual-revise