腾讯悄悄做了个 Ardot：一句话，直接生成可编辑 UI

几乎所有 AI 设计工具都卡在同一个地方：它们很会生成，但不太会交付。

Midjourney、即梦、可灵，这些工具在过去两年里已经把画出一张好看的图这件事做到了相当高的水准。

你给它一句话，它给你一张能发朋友圈、能当封面、能拿去给老板看一眼的图。

但图到此为止。

如果你要的是继续往下走，把图变成界面、把界面交给开发、把开发跑上线，那这张图就帮不上忙了。

设计师还得从零开始：量尺寸、找字体、搭布局、拆图层、写标注。

AI 设计工具目前最大的缺口，不是生成不够好，而是生成之后没人管。

Ardot 想解决的，就是这个问题。

它是腾讯做的 AI 设计工作台。名字听起来像个新品牌，但产品形态非常熟悉，左侧图层、中间画布、右侧属性面板，用过 Figma 的人闭着眼睛都能上手。

官方文档也明确写了：兼容 Figma 文件，支持导入 .fig 并保留布局、样式和组件，提供矢量编辑、自动布局、多人协作、版本历史。

但真正值得测试的，是它在专业设计软件外壳之下加的那一层 AI 能力。

文生 UI，输入自然语言，直接生成界面。

图生 UI，上传一张截图，转成编辑设计稿。

网页转设计稿：把已有网页直接转成设计文件。

自然语言批量修改图层：用对话调颜色、改尺寸、挪图层。

这四块能力听起来都不复杂。但能不能真的跑通，得看实测。

先立一个判断标准：什么算真的能用

在开始测试之前，我们先约定一个标准。

因为现在市面上几乎所有AI 生成 UI的工具，都能在 30 秒内给你一张看起来像模像样的界面截图。光看出图效果，根本区分不出好坏。

所以我们不看图，我们看三件事。

第一，生成的是不是设计稿。意思是：文字能不能编辑、按钮能不能选中、颜色能不能改、图层能不能拆。如果是一张平面的 JPG，那它和 Midjourney 没有区别。

第二，局部修改会不会推翻全局。意思是：你让修改局部，它是只换局部，还是顺手把整个 APP 重新设计一遍。后者是目前绝大多数 AI 工具的通病。

第三，积分消耗到底能不能控住。意思是：做完一个真实的小项目，到底要花多少钱。

三个标准，逐一过。

一张草图出一个网站UI

第一轮，我们没有给 Ardot 一段完整的产品需求。

甚至连提示词都没认真写。

我们只拿出一张纸，随手画了一个 AI 工具收藏网站。

顶部是搜索框，左侧放工具分类，中间摆四张工具卡片，右上角是用户头像，最下面再放一个我的收藏。

大概长这样：

没有栅格，没有尺寸，没有字体规范。

卡片是歪的，间距靠感觉，图标也是随手画的。

严格来说，这甚至算不上一张产品原型，只能算是一个普通人把脑子里的想法画了出来。

我们把这张草图上传给 Ardot，只补充了一句话：

这是我手绘的一个 AI 工具收藏网站草图。请保留草图中的功能结构和信息层级，把它设计成一套年轻、简洁、有科技感的高保真网页 UI。不要擅自增加功能，也不要改变原来的布局逻辑。

Ardot没有直接照着草图描一遍。

它先识别出了页面里的几个核心区域：

搜索、工具分类、工具卡片、用户入口和收藏功能。

随后，它又询问了页面的视觉风格。

我们选择了它的推荐，暗色科技风。

几分钟后，一张完整的网站首页出现在画布上。

先说结论：

它确实看懂了。

草图顶部的搜索框被保留下来，右上角依然是用户头像，左侧的分类被整理成导航栏，中间四张歪歪扭扭的方框，也变成了真正的工具卡片。

每张卡片都补上了图标、工具名称、简介和收藏按钮。

页面最下方的我的收藏，则被重新处理成了更加合理的导航入口。

它没有机械地复刻草图里的每一根线，而是先理解这些线分别代表什么，再按照网页设计规范重新组织了一遍。

这两件事看起来很像，实际完全不同。

如果只是照着草图画，它得到的可能只是一张更加工整的草图。

而Ardot交出来的，已经是一份接近真实产品的高保真设计稿。

它有没有擅自发挥？

有，但不算严重。

比如草图里没有写具体的工具名称，也没有规定卡片里应该放多少文字。

Ardot自动补充了工具名称、简介和图标，还给不同分类增加了选中状态。

这些内容虽然不是我们明确要求的，但都属于让页面能够正常成立所必需的细节。

值得注意的是，它没有额外增加排行榜、会员中心、广告位之类的功能，也没有把原来的页面结构全部推翻。

整体仍然遵循了草图里的信息层级。

换句话说，它进行了设计上的补全，但没有擅自修改产品逻辑。

这个边界，目前控制得还不错。

生成的是图片，还是设计稿？

接下来才是这项测试真正重要的部分。

我们点开左侧的图层面板，尝试分别选中搜索框、分类导航、工具卡片和收藏按钮。

搜索框可以单独修改。

分类文字可以直接替换。

卡片中的图标、名称和简介也被拆成了不同图层。

即使是四张结构相似的工具卡片，也不是被合并成一张图片，而是由背景、图标、文字和按钮分别组成。

这意味着，我们可以继续修改任何一个元素，而不需要让AI重新生成整张页面。

从最终效果来看，它当然不是一份可以直接上线的成品。

部分文字尺寸、卡片间距和图标风格，还需要继续调整，一些由AI自动补充的内容，也未必符合真实产品需求。

但作为从草图到第一版设计稿的起点，它已经足够完整。

过去，这张草图的作用可能只是帮助设计师理解需求。

现在，Ardot直接把它变成了可以继续工作的设计文件。

这或许才是这项功能真正有价值的地方，它让一个还说不清楚的想法，先变成一件可以看、可以改，也可以继续讨论的东西。

第一轮判断：通过。

它没有把草图变成一张更漂亮的图片，而是把草图里的结构，重新组织成了一份可编辑的UI设计稿。

实测全部换个颜色，它会不会改乱

第一轮生成的页面虽然完成度不错，但整体采用暗色科技风，更像一个开发者工具。

如果想把它改得更轻、更适合普通用户，最直接的办法当然是：

让AI重新设计一遍。

但这一轮，我们偏不这么做。

我们给Ardot的要求是：

保留当前页面的内容、信息结构、卡片布局和所有功能不变，将整套页面改成白色、极简、明亮的视觉风格。使用浅灰背景、白色卡片和深灰文字，只保留一种清爽的绿色作为强调色。不要增加、删除或移动任何模块。

这个要求看起来只是换个颜色，实际上很考验AI。

因为很多AI理解的“换一种风格，往往等于重新设计。你让它把背景改成白色，它可能顺手把卡片、导航和按钮一起推翻。

几分钟后，整套页面完成了换装。

先说结论：

这次Ardot相当听话。

原来的深色背景变成了浅灰白色，四张工具卡片也统一换成白底，并通过轻微阴影和背景区分层级。

原本分散在页面里的蓝色和紫色，被收拢成了更加统一的绿色。左侧选中的分类、工具图标和收藏状态，都使用了同一套强调色。

它不是简单地把黑色换成白色。

因为如果只是颜色反转，原来适合深色背景的文字、边框和阴影，放在白色页面上很可能会直接消失。

Ardot重新调整了文字颜色、卡片阴影、图标底色和不同区域之间的对比度，让整套页面在明亮主题下依然保持了清晰的层级。

更重要的是，页面结构没有被改乱。

左侧分类、顶部搜索框、四张工具卡片和用户头像都还在原来的位置，工具名称、简介、图标和收藏状态也完整保留。

它做的确实只是换风格，没有借着换风格的机会重新设计整个页面。

当然，细节并不是完全没有问题。

页面右下角还保留了一团淡紫色光晕，和白色极简风格稍微有些不统一，部分辅助文字的颜色也偏浅，后续还可以继续提高对比度。

但这些都属于可以手动微调的视觉细节，并没有破坏页面结构。

这一次，它理解了甲方最重要的潜台词：

让你换风格，不是让你拆房子。

第二轮判断：通过。

Ardot不只是完成了颜色替换，还重新处理了明亮主题下的文字、卡片和视觉层级，同时保留了原来的内容与布局。对于真实工作中常见的换主题、改品牌色，这项能力已经具备实际价值。

实测不给参考图，它能不能凭空设计一个网站

前两轮测试，Ardot手里多少都有点东西。

第一轮有手绘草图，至少页面结构已经画出来了。

第二轮则更加简单，完整的设计稿都摆在那里，它只需要按照要求更换视觉风格。

所以第三轮，我们准备把这些参考全部拿走。

不给草图，不给截图，也不给它任何现成的页面。

只用一段普通人能够说出来的话，让它从零设计一个网站。

这次要做的，是一个和我自己有关的网站。

我平时会站在普通用户的角度，实测各种AI工具。所以我们给Ardot的要求是：

我是一名AI工具测评博主，名字叫Toby，平时会站在普通用户的角度，实测国内外各种AI工具。

请帮我设计一个个人网站首页，主要用来展示最新的AI工具测评、工具分类、热门文章和推荐清单，同时让读者可以订阅后续更新。

整体风格年轻、有科技感，但不要做得像企业官网，也不要堆太多信息。网站需要让第一次进入的读者马上知道我是做什么的，并且愿意继续浏览文章。

请设计桌面网页端，网站中的内容使用中文。

这段话里没有配色，没有布局，也没有任何专业设计术语。

我们甚至没有告诉它页面应该分成几部分。

因为这一轮真正想测试的，不是Ardot能不能执行一份写得非常详细的需求文档。

而是面对一个只有大概方向的想法，它能不能自己完成信息整理、页面规划和视觉设计。

换句话说：

前两轮是在考它会不会干活。

这一轮，开始考它会不会思考。

这次他问了我三个问题，第一个问题，首页的整体视觉风格。

第二个问题首屏希望读者第一眼看到什么。

第三个问题，需要放我的头像或照片么？

经过一段时间思考，它又跳出来一个问题。

这次可以多选。几分钟后，一张完整的网站首页铺在了画布上。

它没有只做一张首屏。

从顶部导航、个人介绍、最新测评，到工具分类、热门文章、邮件订阅和页脚，一个内容网站应该具备的主要区域，基本都被补齐了。

先看首屏。

Ardot给网站写了一句非常明确的介绍：

不打分、不恰饭，只说普通人用AI工具的真实体验。

下面还补充了一段身份说明，并放上看看最新测评和订阅每周更新两个按钮。

这意味着，第一次进入网站的用户，不需要继续往下翻，就能知道三个信息：

这是谁的网站、这里有什么内容，以及下一步可以做什么。

右侧则放了一篇重点测评，通过大图、标题、评分和阅读时间，将它处理成了首页推荐内容。

继续往下，是最新测评。

Ardot没有简单地堆文章标题，而是为每篇内容补上了分类、封面、简介、评分和预计阅读时间。

再往下，它把AI工具分成了写作与调色、图像与设计、视频与剪辑、办公与效率、学习辅助和生活娱乐六类，并写了一句：

按你想做的事，挑工具。

这句话看似简单，其实比直接写工具分类更加符合普通用户的使用习惯。

大部分人并不关心某款AI采用了什么模型，也不知道应该去哪个分类里找。

他只知道自己想写文章、做图片、剪视频或者提高办公效率。

Ardot至少理解了这一点。

随后是热门文章和邮件订阅。

页面最后再次用一个醒目的订阅模块收口，把看文章自然引导到留下邮箱。

从信息顺序来看，它遵循的是一套相对完整的内容网站逻辑。

先告诉用户我是谁，再展示我写了什么；接着帮助用户寻找内容，最后引导用户订阅。

这已经不只是把几个模块摆得好看。

它确实在尝试理解，一个AI工具测评网站应该如何组织内容。

它有自己的想法。

这一次，Ardot的发挥比前两轮更明显。

甚至连简介、文章标题、评分、阅读时间和历史文章，都帮我们一起编好了。

页面确实因此显得更加完整，但这些内容显然不能直接使用。

尤其是工具评分、测评结论和文章数据，都需要重新核对。否则AI设计稿做得越像真的，虚构内容反而越容易被忽略。

这也暴露了纯文生网站的一个问题：

当你提供的信息不够完整时，AI会主动补全空白。

这种补全在视觉设计上很有帮助，却不能被当成真实内容。

它可以替你规划网站，却不能替你决定事实。

好在这些文字、卡片和按钮都可以继续编辑。名字不对，可以换，文章是编的，可以删，分类不合理，也可以重新调整。

这正是可编辑设计稿和普通AI图片之间最大的区别。

如果这是一张生成图片，发现名字错了，可能只能重新抽一次。

第三轮判断：通过。

最后

三轮实测结束，Ardot做了三件完全不同的事。

第一轮，我们给它一张随手画的草图。

它看懂了搜索框、分类、工具卡片和收藏入口，并把一张鬼画符重新组织成了高保真设计稿。

第二轮，我们让它把暗色科技风改成白色极简风。

它重新处理了背景、卡片、文字和强调色，同时保留了原来的页面结构。

第三轮，我们拿走了所有视觉参考，只给它一段关于AI测评博主的文字。

它不仅设计出了页面，还主动规划了最新测评、工具分类、热门文章和订阅入口。

这三轮测试，分别对应三个问题，它能不能理解一个模糊的想法？它能不能只修改指定的内容？它能不能从零规划一个完整页面？至少从这次的结果来看，答案都是可以。

而且需要强调的是，这次生成的依然是设计稿，不是一个已经上线的网站。

真正要让它运行起来，后面还有响应式适配、交互、代码、数据和部署等工作。这些环节，我们这次没有测试。

所以Ardot现在更像一个能力很强的设计搭档。

过去，一个完全不懂设计的人想做网站，首先面对的是一张空白画布。

不知道页面应该分成几块，不知道按钮放在哪里，也不知道自己的想法应该怎么表达。

现在，他可以先画一张草图，或者干脆说一段话。

Ardot负责把这个模糊的想法，变成一件可以看见、可以讨论，也可以继续修改的东西。

这也是它和普通AI生图工具最本质的区别，生图工具给你的是结果，Ardot给你的，是一个起点。

它并没有让所有人一夜之间变成设计师。

但它至少让更多普通人，第一次拥有了把想法做成设计稿的能力。

文章来自于"毒AI"，作者 "元一"。