用 GPT-6 Astra 打磨 Vecsy:我的浏览器 SVG 编辑器进化记

发布于 · 1,731 字 · 约 4 分钟#OpenAI#创业原文链接
用 GPT-6 Astra 打磨 Vecsy:我的浏览器 SVG 编辑器进化记 封面图
  • GPT-6 Astra 发布当天完成 Vecsy 一轮迭代:画布框选多选、选择/平移工具、线段端点样式与箭头图层、Alt 间距参考线、分组整体拖拽等功能全部落地
  • 20 刀 Plus 套餐下「轻度」推理的 Token 消耗与 GPT-5.6 Terra +「高」推理强度接近,整轮开发花掉 2 个 5 小时额度还剩 10%
  • 需求理解是最大亮点:GLM-5.3 反复沟通仍未实现到位的需求,交给 GPT-6 一次搞定
  • 大多数任务 1 分钟内响应,回复简洁,配合「先起本地服务确认设计再实现」的协作方式,开发思路基本不被打断
  • Vecsy 亮点功能:SVG 图层编辑、454 个内置高清 icon、动画 SVG、多格式导入导出与本地历史保存

GPT-6 Astra 今天正式发布,刚好我用 Astra 来打磨了一下我的 Vecsy 项目,实现了几个以前一直想做而没有实现的功能。

OpenAI 发布 GPT-6 Astra 的公告推文
OpenAI 发布 GPT-6 Astra 的公告推文

GPT-6 Astra 和以前的 GPT 系列模型一样,推理强度有多个档位可供选择,最高 Ultra,最低 Light。

GPT-6 Astra 推理强度选择界面
GPT-6 Astra 推理强度选择界面

OpenAI 官网为了给到团队压力,每晚发布一天送用户一次重置次数,这几天我都攒到了 3 次免费重置卡,真香,他晚一两天发布其实我一点都不介意的。

攒到的 3 张免费重置卡
攒到的 3 张免费重置卡

Vecsy 是什么

Vecsy 是我开发的一个运行在浏览器中的 SVG 编辑器,支持拖入 SVG 文件后实时查看、选择和调整内部图层。

可以认为是极其轻量版本的在线版 Figma,部分功能没有 Figma 完善,部分功能已经超越 Figma。

在线体验地址:https://vecsy.top/ ,首页的效果如下图。

vecsy.top 首页效果
vecsy.top 首页效果

GPT-6 Astra 使用体验

这次基于 GPT-6 Astra 添加了下面的新功能和 bug 修复。

新增功能如下

  • 画布框选多选与选择(V)/ 平移(H)工具
  • 线段端点样式:端帽与多种箭头装饰,两端独立配置;新增箭头图层
  • 按住 Alt 查看 hover 图层与当前选区的间距参考线
  • 分组与多选包围盒内整体拖拽;缩放手柄扩展至四角(Shift 等比)

最后我更新了默认的 SVG 演示图,左边是旧的,右边是最新版本。

默认 SVG 演示图:左为旧版,右为最新版
默认 SVG 演示图:左为旧版,右为最新版

先确认设计,再动手实现

他先是启动了一个本地服务拿新版本的设计效果和我确认了一下,确认后再进行实现,这种交互最近 Codex 在推广,最近很多项目都遇到类似的交互。

Vecsy 内打开可点击预览窗查看新设计效果
Vecsy 内打开可点击预览窗查看新设计效果
GPT-6 Astra 启动本地服务展示新版本设计效果
GPT-6 Astra 启动本地服务展示新版本设计效果

Token 消耗与使用体感

Token 消耗情况,我使用的是「GPT-6 Astra」模型,推理使用「轻度」,上面的这些功能完全够用。

下面几点是开发下来一些真实的感受。

Token 消耗。GPT 20 刀的 Plus 套餐,GPT-6 Astra +「轻度」推理强度 Token 消耗和 GPT-5.6 Terra +「高」推理强度接近,一个简短的对话 2% 左右,大一点任务看任务复杂度,我这边大概 10% 左右。

开发额度。上面这些功能开发完成,差不多花了我 2 个 5 小时额度,还剩 10%。

回复风格。新版本的回复很简洁,没有太多啰嗦的话,简洁到甚至有时候连代码修改的 diff 都隐藏了,最开始我一度以为是不是没有修改代码,后面检查代码确实有修改,就是没有在聊天记录里面显示而已,给大家看看效果。

GPT-6 Astra 简洁的回复风格示例
GPT-6 Astra 简洁的回复风格示例

需求理解。还有需求的理解,这个模型也比其他模型强不少了,这里有一些小需求我让 GLM-5.3 来开发,有个需求一直没有理解到,或者理解到实现不好,后面我把这个需求交给 GPT-6 一下搞定,这也是让我感到惊讶的地方。

需求理解示例对话
需求理解示例对话

就下面的这个效果,左边是 GLM-5.3 实现的有问题的版本,右边是 GPT-6 更新的最终的版本。

左为 GLM-5.3 实现有问题的版本,右为 GPT-6 最终版本
左为 GLM-5.3 实现有问题的版本,右为 GPT-6 最终版本

推理速度。这个版本的模型,在我几十轮对话测试下来,整体响应速度都比较快,大多数 1 分钟以内,最慢的一次任务 5 分钟左右,这个速度可以接受了,不会打断你的思路。

Vecsy 亮点功能讲解

图层查看与编辑

  1. 导入一个 SVG 将其识别成子图层,每个图层可以单独进行编辑,显示隐藏、复制等操作,实时预览保存。
导入 SVG 识别为子图层并单独编辑
导入 SVG 识别为子图层并单独编辑
  1. SVG 的图层支持连续多选和非连续多选,也支持拉选框批量多选,方便打包进行移动和删掉等操作。
图层连续多选与非连续多选
图层连续多选与非连续多选

圈选批量选择多个图层演示。

圈选批量选择多个图层演示
圈选批量选择多个图层演示
  1. 支持 SVG 预览和源码查看,可以单独查看某一个图层的元素和代码,支持文本和直线等元素级修改。
SVG 预览与源码查看,支持元素级修改
SVG 预览与源码查看,支持元素级修改
  1. 支持查看 SVG 子图层类型分布,颜色 token 分布和调用次数信息。
SVG 子图层类型分布与颜色 token 统计
SVG 子图层类型分布与颜色 token 统计
  1. 单次的图层操作也支持历史记录功能,支持撤销和重做功能,减少误操作,方便高效编辑,误删也没有任何心理负担。
图层操作历史记录与撤销重做
图层操作历史记录与撤销重做

素材与创作

  1. SVG 图片支持添加预设的各种矢量图片和 icon,方便进行作品创作,内置了 454 个高清 SVG icon。
Vecsy 预设矢量素材库
Vecsy 预设矢量素材库
Vecsy 内置高清 SVG icon 列表
Vecsy 内置高清 SVG icon 列表
  1. 支持添加带动画的 SVG 元素,没错你没听错,SVG 是支持动画的,只是很多人不知道而已。
带动画的 SVG 元素演示
带动画的 SVG 元素演示
  1. SVG 支持添加 jpg 和 png 图片图层,解锁更多使用场景,但是一般情况下推荐全部使用矢量素材。
添加 jpg 和 png 图片图层
添加 jpg 和 png 图片图层
  1. 支持添加自定义的 SVG 到收藏夹中,方便下次使用,需要经常使用的品牌素材可以先收藏下次就能直接使用了。
自定义 SVG 收藏夹
自定义 SVG 收藏夹

导入与导出

  1. SVG 支持拖拽直接导入,也支持剪贴板直接粘贴自动导入,支持快捷键一键导出,也支持选择指定格式先预览确认再导出。
拖拽导入与快捷键导出演示
拖拽导入与快捷键导出演示
  1. 支持多种格式的导出,例如 svg、jpg、png,并且在导出前支持每种类型的图片大小和视觉预览。
导出前各格式图片大小与视觉预览
导出前各格式图片大小与视觉预览
选择指定格式预览确认后导出
选择指定格式预览确认后导出

保存与效率

  1. 支持 SVG 历史记录保存,编辑过的 SVG 默认将永久保存到你的本地电脑中,下次回来可以继续编辑和查看。
SVG 历史记录本地保存
SVG 历史记录本地保存
  1. 常用功能支持快捷键,可以大大提高 SVG 的编辑效率,具体的快捷键可以查看快捷键介绍页面,可以按?号键唤起。
快捷键介绍页面
快捷键介绍页面

总结一下

整体来看,GPT-6 Astra 是一款「发布当天就能直接上手干正事」的模型。这轮 Vecsy 迭代里,积攒已久的几批功能需求——框选多选、线段端点样式、Alt 间距参考线、分组整体拖拽——全部顺利落地,全程几乎没有因为理解偏差而返工。需求理解是它最让我惊讶的地方:同样的需求,其他模型反复沟通仍然实现不到位,交给 GPT-6 一次就搞定。

成本和体验也都在可接受范围内:20 刀 Plus 套餐下,「轻度」推理的 Token 消耗与 GPT-5.6 Terra +「高」推理强度接近,这轮功能开发共花掉 2 个 5 小时额度、还剩 10%;大多数任务 1 分钟内响应,回复简洁不啰嗦,配合「先起本地服务确认设计、确认后再实现」的协作方式,开发思路基本不被打断。

如果你也有一批「一直想做但没动手」的功能,不妨趁着发布期的免费重置额度,交给 GPT-6 Astra 推进一轮。Vecsy 的这轮更新已全部上线,欢迎到 vecsy.top 在线体验。

评论互动

© 2026 王若风的技术博客 · Powered by Astro