乐于分享
好东西不私藏

腾讯新出了个免费AI设计工具,产品经理和开发者都能用,手把手教你上手

腾讯新出了个免费AI设计工具,产品经理和开发者都能用,手把手教你上手

做过产品的人都知道一个痛苦:

产品经理出了需求,设计师画了稿,开发说"还原不了"。

来来回回三方扯皮,一个页面改三轮。

腾讯刚公测的这个工具,想解决的就是这个问题。


Ardot 是什么?

Ardot(读作 "ahr-dot")是腾讯推出的 AI 驱动设计工具,官网地址:ardot.tencent.com

它的定位不是"给设计师用的画图软件",而是打通产品、设计、开发三个角色的协作平台。核心能力一句话概括:

用一句话描述需求 → AI 生成可编辑设计稿 → 一键转成代码

现在是公测阶段,注册即可获得 1000 Credits 免费额度,不需要付费。

支持平台:网页端 + macOS 客户端。(Windows 暂无桌面端,但网页端可用。)


注册和进入

第一步:访问官网 ardot.tencent.com,点击「免费使用」或「立即体验」。

第二步:用手机号或企业微信登录,填写基本信息后进入工作台。

第三步(可选):如果是团队使用,可以创建「团队空间」,邀请成员进入,所有设计稿共享在团队资产库里。


核心功能一:一句话生成设计稿

这是 Ardot 最直接的功能。

操作步骤

  1. 进入工作台后,点击「新建项目
  2. 选择项目类型(移动端 App / 网页端 / 海报 / 小程序等)
  3. 进入编辑器后,点击左侧「AI 生成」入口
  4. 在输入框中填写你的需求,点击「生成」

关键:怎么写提示词效果最好?

用这个公式:产品类型 + 页面模块 + 风格调性 + 适配端

举个例子:

简约风电商App首页,包含顶部搜索栏、轮播Banner、商品卡片列表、底部导航栏,白色主色调蓝色辅助,移动端适配 

或者更简单:

企业官网首页,科技感,深色风格,PC端 

AI 会在 3 秒内生成多套初稿,每套布局稍有不同,你选一个最合适的继续调整。

生成的设计稿不是一张图片,而是每个元素都有独立图层、可以单独选中修改的可编辑稿。


核心功能二:导入 Figma 文件

如果你已经有 Figma 里的设计稿,不需要重新画。

操作步骤

  1. 在 Figma 里导出文件(支持 .fig 格式)
  2. 在 Ardot 工作台点击「导入 Figma 文件」
  3. 上传后,原有的布局、样式、组件全部保留,可以直接在 Ardot 里继续编辑

这个功能对已经有 Figma 积累的团队特别有价值——迁移成本极低,不需要推倒重做。


核心功能三:调用自有组件库

如果你的团队已经有了一套设计规范或组件库,Ardot 可以让 AI 直接调用它生成符合规范的设计稿,而不是给你生成一个"看起来差不多"的东西。

怎么操作

  1. 将团队的设计元素(按钮、卡片、导航栏等)在 Ardot 中保存为「组件
  2. 设置颜色、字体、间距等全局样式
  3. 之后每次使用 AI 生成时,AI 会优先调用已有组件,生成符合你们规范的初稿

还可以用 AI 搜索来找组件:在搜索框输入"蓝色圆角按钮"或"移动端导航栏",AI 直接帮你找到并插入。


核心功能四:一键转代码

设计稿定稿之后,如何交付给开发?

传统方式:设计师截图标注 → 开发对着图手写代码 → 来回沟通细节 → N 轮还原修改。

Ardot 方式

  1. 设计定稿后,点击顶部「开发交付」按钮,进入交付模式
  2. 页面自动显示所有元素的尺寸、间距、颜色、字体等标注信息
  3. 选中任意元素或页面 → 右侧「代码导出」→ 选择代码类型
  4. 点击「复制代码」,直接粘贴到开发工具里

支持导出的代码类型:CSS、iOS、Android。

官方说还原度可以达到 98%,不用再靠"眼睛估"了。


进阶功能:接入 CodeBuddy / Cursor / Claude Code

这是 Ardot 真正打开了"设计到代码全自动"的功能——MCP 接入

如果你用 CodeBuddy(腾讯自己的 AI 编程工具)或者 Cursor、Claude Code,可以通过 MCP 协议让 AI 直接在 Ardot 的画布上生成设计稿,然后无缝转成前端代码,全程基本不需要手动操作。

配置步骤

第一步:下载 Ardot macOS 桌面端(MCP 功能优先支持桌面端)

第二步:在 Ardot 中打开「MCP 集成」面板

第三步:选择你用的工具(CodeBuddy / Cursor / Claude Code / Gemini CLI 等),点击一键连接即可

如果你的工具不在列表里,也可以手动配置,把这段 JSON 加到工具的 MCP 配置文件里:

{   "ardot": {     "url": "http://127.0.0.1:50501/api/v1/mcp"   } } 

配置完之后能干什么?

你只需要对 AI 说一句话,比如:

使用 Ardot MCP 生成一个知识分享平台的 UI 设计,科技感深色风格, 包含:顶部导航栏、内容卡片列表、侧边 AI 助手面板。 

AI 会自动在 Ardot 画布上绘制设计稿,同时生成 Design Tokens,再自动输出 React + Tailwind 代码,设计稿和代码保持同步,改一处,两边都变。

这套链路完全跑通后,从"一句需求"到"可以运行的前端页面",整个过程不需要人工介入。


多人协作功能

Ardot 支持多人在线实时协作,产品、设计、开发都能进同一个文件。

几个实用的功能点:

  • 实时评论
    :直接在设计稿上点击位置留评论,不用再截图发微信
  • 标注反馈
    :标注哪里不对、要改成什么,所有人都能看到
  • 版本对比
    :修改前后的版本可以直接对比,哪里改了一目了然
  • 权限分级
    :管理者 / 可编辑 / 仅查看,外部合作方可以给「访客权限」,只看不动
  • 操作日志
    :所有修改有记录,支持回溯,防止改乱了找不到原版

哪些人适合用?

角色
适合场景
产品经理
自己用 AI 出个低保真原型,不用等设计师
UI 设计师
加速初稿生成,节省重复劳动
前端开发
直接拿代码还原,告别"像素对齐"焦虑
独立开发者
一个人做产品,兼顾设计和开发
创业团队
小团队快速出产品原型,验证想法

总结

一句话评价:Ardot 要解决的不是"设计好不好看",而是"设计稿怎么从想法变成代码,中间少扯皮"。

对于普通用户,最实用的用法是:用一句话生成设计稿初稿,再自己调整细节——省去了从零画布局的时间。

对于开发者,最值得试的是:MCP 接入 + 一键转代码——让 AI 帮你完成设计这一步,你专注写逻辑。

现在公测免费,注册就有 1000 Credits,去 ardot.tencent.com 试试。

内容根据腾讯官方信息及公开体验报告整理,功能以官网最新版本为准。