背景
VeryGoodGraphics（VGG）是一种新型跨平台 UI 开发工具，倡导 Design as Code 的理念，支持无代码将设计稿变为 UI。VGG 底层的运行时是一个开源的矢量图形引擎，支持将 UI 设计稿嵌入任意应用中 ，并将其精确渲染为可交互的用户界面。
VGG 运行时的硬核能力我们将拆分为系列文向大家介绍，本文将重点介绍 VGG 对静态视觉效果的高质量还原。该系列文章包括：
line-height: 1.5em;text-align: center;">使用 Figma 做设计
Figma 设计中会包含复杂的矢量图形，他们可以在任何级别缩放而没有马赛克。而且还有许多高级视觉效果，例如支持多重阴影和平滑圆角等特性。这里我们拿使用了这两个特性的 VGG 首页的设计稿来举例说明。
![]()
logo.cn/mmbiz_png/nyudcQrUaS1apXU3KAqIGogVy4KfibDyRxRaF4ibbdG8J5XzfTxjRkxMZmaGslPrfg4OFrtjvjTbmp8tm5IUITEg/0?wx_fmt=png&from=appmsg" data-cropx1="0" data-cropx2="2000" data-cropy1="89.96539792387544" data-cropy2="1031.141868512111" data-imgfileid="100000100" data-ratio="0.4703703703703704" data-src="https://cdn.10100.com/content/20251218/b9d5cc55-2d71-4b82-a251-3fe51dd069b2.png" data-type="jpeg" data-w="1080" style="width: 100%;height: auto !important;" src="https://cdn.10100.com/content/20251218/b9d5cc55-2d71-4b82-a251-3fe51dd069b2.png">VGG 首页的 Figma 设计稿
由 Figma 的 SmoothShadow 插件实现的光滑阴影，包含了 8 重阴影
使用平滑圆角特性实现的“苹果圆”按钮
传统低代码实现思路
鉴于这样的设计，如果开发人员想要使用 HTML 和 CSS 开发这些视觉效果，可能会很棘手、耗时，而且最终实现的效果性能较差。比如说上述的“苹果圆”按钮，其实在 CSS 没有好的办法实现。在这里我们就不展开基于代码实现的讨论。
传统低代码也是解决思路之一。我们可以利用低代码工具将这个设计快速发布为网站。例如：使用流行的低代码网站构建器 Framer，Framer 提供 Figma 插件，允许用户将 Figma 设计导入到 Framer 的工作区。
使用 Figma-to-HTML-with-Framer 插件
基于这个插件，我们可以通过复制粘贴在 Framer 工作区中得到与 Figma 中相同的设计。然后借助 Framer 的发布能力，我们可以立即获得一个可公开访问的网站。
Framer 工作空间
![]()
DTCK9kR4sSfQ/0?wx_fmt=png&from=appmsg" data-cropx1="0" data-cropx2="1965.3979238754325" data-cropy1="100.3460207612457" data-cropy2="1027.6816608996542" data-imgfileid="100000105" data-ratio="0.47129629629629627" data-src="https://cdn.10100.com/content/20251218/6475d478-26a9-49b1-abfe-129cc4496b53.png" data-type="jpeg" data-w="1080" style="width: 100%;height: auto !important;" src="https://cdn.10100.com/content/20251218/6475d478-26a9-49b1-abfe-129cc4496b53.png">
使用 Framer 发布的网站
但，在这里您是否注意到页面上奇怪的视觉效果？
首先是第一眼就能看出来的问题：大部分文本位置都不正确；一些边框有一些讨厌的黑色；VGG Logo 周围有奇怪、并且被截断的灰色区域。
如果进一步观察，会发现更多的问题，例如：缺少平滑圆角功能、文本布局的宽度不正确等等。
详细视觉效果对比
从设计师的角度来看，Framer 无法满足他最初的设计意图。而且在大多数情况下，设计师也会因为各种原因向开发者妥协，得到一个哭笑不得的应用或者网站。
使用 VGG 精准还原
得益于 VGG 的跨平台渲染引擎，无论是设计师还是开发者，都能够以更快的速度实现更精准的视觉效果还原。欢迎观看我们第一个面向开发者的视频教程《如何在 6 分钟内开发和修改 VGG 落地页》：
vatar="http://mmbiz.qpic.cn/mmbiz_png/9gYq0FHZpd0YyuQ2ZWFlMiat21cmISmjSnWJiaz3xS5HzoeXRGQndzm1VgwmiaZHuE1ibaBTzUGMjiaYWpYWU3bBtRw/640?wx_fmt=png&wxfrom=200" data-miniprogram-title="VeryGoodGraphics" data-miniprogram-imageurl="http://mmbiz.qpic.cn/mmbiz_jpg/nyudcQrUaS1rNGcIiaIfOVZhUmvK2aRU2YocXebJdXzlU700YwXCibTqRFZ9F0BdY2EOspVU0HvZWh26ia6ziazZyA/0?wx_fmt=jpeg" data-miniprogram-type="card" data-miniprogram-servicetype="0" data-pluginname="insertminiprogram" data-miniprogram-appid="wx7564fd5313d24844" data-miniprogram-imageurlback="http%3A%2F%2Fmmbiz.qpic.cn%2Fmmbiz_jpg%2FnyudcQrUaS1rNGcIiaIfOVZhUmvK2aRU2rNxaAXckKrZB1btiaebwrEibX6Vh5SAYFnn0AXk8cdGTxBRULpyxGdvw%2F0%3Fwx_fmt%3Djpeg" data-miniprogram-cropperinfo="%7B%22c%22%3A%7B%22x%22%3A23%2C%22y%22%3A0%2C%22x2%22%3A204.25%2C%22y2%22%3A145%2C%22w%22%3A181.25%2C%22h%22%3A145%7D%7D" data-miniprogram-path="pages/video/video?__preload_=17137650896415&__key_=17137650896416&avid=1552426130">
在这个视频当中，我们以 VGG 主页为例，演示了 VGG 实现的高质量静态渲染效果。下面是使用 VGG 构建的最终网站的样子
但这只是冰山一角。VGG 拥有完整的矢量图形规范，它是流行设计格式的超集，包括 Figma、Sketch 和 Adobe Illustrator。VGG 社区正在不断将这些视觉效果实现并集成到 VGG 运行时当中。后续我们也会有一系列的文章干货，向大家详细阐述 VGG 的每一个特性，以及相比之下 SVG 会存在的问题。
总结
本软文主要简单介绍了设计工具中的复杂视觉效果，低代码工具的无能为力，以及 VGG 对这种静态视觉效果的精确还原能力。
在接下来的文章中，我们将继续发表一些软文章，介绍 VGG 对动态交互的还原能力与跨平台能力，敬请期待。
VGG 运行时引擎现已开源，欢迎大家一起参与 VGG 开源社区共建。
👏扫码添加小助手进交流群，欢迎社区小伙伴参与共建
关于 VGG
VGG（VeryGoodGraphics）是新一代跨平台应用开发解决方案。VGG 倡导 Design-as-Code 的理念，让开发者可直接基于设计稿编程，快速将设计原型交付为可交互的应用。
特性一：无代码完美还原设计稿
VGG 自研的开源图形引擎能渲染出高保真设计稿中的任意细节，可直接将设计稿作为用户界面，省去前端与客户端开发者使用代码去复原设计稿的开发工作，降低他们与设计师之间的沟通摩擦成本。
特性二：原生跨平台、嵌入式支持已有开发框架
VGG 通过完全或者部分嵌入的方式，支持在任意一种已有的 APP 基础上进行增量式开发，主持主流平台与框架。
特性三：脚本与 WebAssembly 支持
VGG 还同时支持平台无关的 JS 脚本与 WebAssembly 模块，在提供快速业务逻辑开发能力的同时支持高性能计算。
特性四：高度的生态兼容性
VGG 提供的 SaaS 服务目前已实现对主流设计生态的兼容（Figma/Sketch/Adobe Illustrator），并提供 Figma 插件帮助设计稿快速同步。将来还计划为开发者提供开发辅助工具，打通从应用 UI 设计到应用研发的完整流程。
-
GitHub：https://github.com/verygoodgraphics
-
官网：https://verygoodgraphics.com/
-
博客：https://blog.verygoodgraphics.com/
