腾讯设计 Ardot - AI UI设计工具，文生UI、原型生成与设计稿转代码

Ardot是什么

腾讯设计 Ardot 是腾讯推出的AI智能设计平台，面向UI设计师、产品经理和研发团队，支持文生UI、图片转设计稿、AI图像生成、矢量编辑、设计系统管理及设计稿转代码，覆盖从产品原型、视觉设计到研发交付的完整流程。

Ardot核心功能

1. AI文生UI

通过自然语言描述产品需求，自动生成页面布局、界面组件和可编辑UI设计稿。

2. AI图片转设计稿

上传界面截图或参考图片，自动识别并转换为可编辑的分层设计文件。

3. AI图像生成

根据文字描述生成插画、配图、运营海报及其他视觉素材。

4. AI矢量图标生成

根据文字或参考图片批量生成统一风格的矢量图标，支持编辑和导出。

5. AI智能编辑

通过自然语言修改设计元素，支持框选局部区域进行定向调整。

6. AI设计助手

提供智能命名、文案生成、设计说明、AI搜索和图片处理等辅助能力。

7. AI批量处理

利用AI批量处理设计素材，提高重复性设计任务的执行效率。

8. Figma文件导入

支持直接导入.fig文件，保留原有布局、样式和组件，方便迁移设计项目。

9. 矢量图形编辑

提供钢笔、路径编辑、布尔运算、3D旋转及增强形状等专业矢量设计能力。

10. 自动布局

支持Auto Layout、Grid布局、百分比定位和真实比例约束，提升多尺寸界面适配效率。

11. 组件管理

支持创建、复用和管理组件，通过组件变体与属性统一管理界面元素。

12. 设计变量管理

支持颜色、数值和文本等设计变量，提供多主题模式切换能力。

13. 团队组件库

支持读取和调用团队共享组件库，让AI生成的界面遵循统一的设计规范。

14. 交互原型设计

通过页面组件和原型交互设置，构建产品界面及交互演示方案。

15. 动效设计

支持设计动效相关能力，并持续完善AI动效生成与交付工作流。

16. 多人实时协作

支持多人在线编辑、评论、标注和设计评审，方便产品、设计与研发团队共同参与。

17. 设计版本管理

支持版本历史、命名版本及历史版本恢复，方便追踪和管理设计变更。

18. 设计标注

自动展示界面尺寸、间距、颜色、字体及组件属性，方便开发人员查看设计规范。

19. 设计稿转代码

通过MCP与CodeBuddy等AI编程工具衔接，将设计稿转换为React、Vue及小程序等前端代码。

20. 多端代码导出

支持复制CSS、iOS、Android等代码及相关设计属性，辅助开发实现。

21. MCP智能体集成

提供MCP Server，允许AI编程助手读取、创建和修改设计文件，将设计能力接入自动化工作流。

22. AI技能管理

支持自定义Skill，将团队设计规范和工作流程沉淀为可复用的AI技能。

23. 开发者模式

提供设计标注、组件变体查看、资源下载及代码片段复制等研发协作能力。

24. 企业权限管理

支持角色权限分配、操作日志追溯、设计资产管理和离职人员权限回收。

Ardot产品优势

1. AI与专业设计深度融合

不仅能够生成设计稿，还提供完整的矢量编辑、组件管理和自动布局能力。

2. 设计稿真正可编辑

支持将图片和文字转化为结构化设计元素，避免传统AI生成图片难以二次修改的问题。

3. 设计研发一体化

通过MCP、CodeBuddy和多端代码能力，缩短设计稿到前端开发的交付链路。

4. 支持Figma生态迁移

可以直接导入.fig文件，降低团队迁移现有设计资产的成本。

5. 企业级设计系统管理

支持团队组件库、设计变量、权限控制和操作审计，适合规范化设计团队。

6. 国产化AI设计平台

由腾讯自主研发，提供中文界面、国产AI模型适配及本土团队协作能力。

Ardot应用场景

1. UI界面设计

快速生成网站、APP、小程序和后台管理系统界面。

2. 产品原型设计

根据产品需求生成页面原型，辅助产品经理验证业务流程和交互方案。

3. 运营视觉设计

制作活动海报、宣传图片、产品插画及社交媒体素材。

4. 设计系统建设

统一管理组件、颜色、字体和设计变量，建立团队标准化设计规范。

5. 设计稿还原开发

将设计稿转换为前端代码，辅助React、Vue及小程序项目开发。

6. Figma项目迁移

导入现有Figma文件，继续开展设计编辑和团队协作。

7. 企业产品研发

连接产品、设计和研发团队，实现需求、原型、设计与代码的协同交付。

8. AI辅助设计工作流

通过MCP连接AI编程助手，自动执行设计文件创建、修改和代码生成任务。

Ardot使用教程

第一步：注册账号

访问腾讯设计 Ardot 官网，通过微信、手机号或邮箱注册账号。

第二步：创建设计项目

进入工作台，新建项目和设计文件，选择空白画布或已有设计文件。

第三步：选择AI设计方式

可以输入文字描述生成UI，也可以上传参考图片转换为可编辑设计稿。

第四步：生成设计内容

描述页面结构、功能模块、视觉风格和布局要求，等待AI生成设计方案。

第五步：编辑设计稿

使用图层、组件、矢量工具和自动布局功能调整设计细节。

第六步：建立设计规范

配置颜色、字体、组件及变量，或者调用团队共享组件库。

第七步：团队协作

邀请产品、设计和研发人员参与设计评审，通过评论和标注反馈修改意见。

第八步：交付研发

进入开发者模式查看尺寸、间距和组件属性，复制CSS、iOS或Android代码。

第九步：接入AI编程工具

配置MCP Server，将Ardot连接到CodeBuddy等AI编程工具，实现设计文件与代码工作流协同。

Ardot收费标准

Ardot 采用免费版与专业订阅相结合的模式，提供Starter、Pro、Team和Enterprise四种方案。

<text color=”secondary” size=”xs”>官网当前显示Pro、Team套餐限时免费开放，具体优惠及恢复收费时间以官方页面为准。</text>

套餐	价格	AI Credits
Starter	免费	首月1000
Pro	限时免费	1000/设计席位/月
Team	限时免费	1500设计+500开发/人/月
Enterprise	联系官方	3500设计+500开发/人/月

1. Starter个人免费版

1个设计席位
首月1000 AI Credits
每个文件最多3个页面
30天版本历史
1个项目，包含3个文件
不限团队成员数量
基础设计编辑能力
本地组件库

2. Pro个人专业版

设计席位目前限时免费
每月1000 AI Credits
不限页面数量
不限版本历史
支持命名版本
支持历史版本恢复
不限本地变量
支持2套变量模式

3. Team团队版

设计席位目前限时免费
开发席位目前限时免费
每位设计人员每月1500 AI Credits
每位开发人员每月500 AI Credits
不限设计席位购买数量
不限项目及项目内文件数量
支持20套变量模式
支持发布和更新团队组件库
支持共享字体
提供开发标注、设计变量和代码片段
支持协作工作流与设计评审
提供团队AI积分管理

4. Enterprise企业版

采用定制报价
每位设计人员每月3500 AI Credits
每位开发人员每月500 AI Credits
支持多个组织及团队管理
企业管理后台
不限变量模式
企业级字体库
SSO单点登录
SCIM自动入离职管理
离职资产接管
团队人员访问控制
文档链接访问控制

收费说明：

AI Credits是Ardot使用AI功能的统一计量单位。
AI图像生成、风格迁移、智能编辑和UI智能预览等功能会消耗积分。
设计席位面向设计师和产品经理，开发席位面向研发人员。
新注册用户在限时免费期间可获得1000 AI Credits。
Pro和Team目前限时免费开放相关权益，正式价格以官网后续公布为准。
Enterprise支持申请产品演示和POC试用。

Ardot常见问题（FAQ）

1. Ardot是什么工具？

Ardot是腾讯推出的AI智能设计平台，支持UI设计生成、图片转设计稿、矢量编辑、设计系统管理和设计研发协作。

2. Ardot可以免费使用吗？

可以。Starter个人版免费使用，注册用户在限时活动期间可获得1000 AI Credits，Pro和Team也提供限时免费权益。

3. Ardot支持Figma文件导入吗？

支持，可以直接导入.fig文件，并保留原有布局、样式和组件。

4. Ardot可以根据文字生成UI吗？

可以。通过自然语言描述页面需求，AI能够自动生成布局和组件，形成可编辑的UI设计稿。

5. Ardot可以将截图转换为设计稿吗？

可以。上传图片后，AI能够识别界面元素并转换为可编辑的分层设计内容。

6. Ardot支持哪些代码输出？

支持CSS、iOS、Android等代码查看与复制，并可通过MCP和CodeBuddy衔接React、Vue及小程序等开发工作流。

7. Ardot支持团队协作吗？

支持多人实时协作、评论、标注、设计评审和团队组件库共享。

8. Ardot支持MCP吗？

支持。提供MCP Server，AI编程助手可以通过协议读取、创建和修改设计文件。

9. Ardot支持Windows吗？

支持。目前提供Windows、macOS客户端以及网页端。

10. Ardot适合哪些用户？

适合UI/UX设计师、产品经理、前端工程师、软件研发团队及需要统一设计规范的企业组织。

Ardot