Ardot

Editor Review

To move an existing interface, import the fig file and the layout, styles, and components stay. New work can start from text or a reference image, and an icon set can be generated from an example in one pass. The canvas still supports the pen, Boolean operations, grid, and percentage positioning for vector editing, and components, colors, and text styles stay in sync. Product, design, and engineering can see each other's cursors, assign comments, and compare version history. Dev mode shows specs and component variants, copies CSS, iOS, or Android code, and can send the file to Codebuddy through MCP. The web app needs no install, desktop apps cover macOS and Windows, and mobile is mainly for viewing and comments. It fits product teams that already have a design system and want the file closer to code.

AI Tools Navigator Editorial TeamUpdated: 2026-10-09

What is Ardot

Ardot is an interface design tool from Tencent Design. It runs in the browser and also has desktop apps. On one canvas it combines vector editing and auto layout, and it can generate UI, illustrations, posters, and matching icon sets from text or a reference image, including layouts that follow a team component library. Imports include SVG, Figma fig files, and CoDesign share links. Exports include PNG, JPG, SVG, and PDF. Several people can edit, comment, and compare versions, and the docs cover permissions, activity logs, and handover when someone leaves. Developers can inspect specs, copy CSS, iOS, and Android code, or send a file through MCP to Codebuddy for front-end code. New accounts receive a starting credit balance, can buy credit packs when it runs out, or keep working by connecting a local model through MCP.

Ardot Key Features

UI from text or a reference

Describe an interface in plain language or upload a reference to generate a first draft, or generate a screen that follows the team component library.

Matching vector icon sets

From text or an example image, it generates a matching set of vector icons that can be exported, edited, and saved as a style template.

Vector edit and auto layout

It includes the pen, Boolean operations, 3D rotation, and enhanced shapes, plus grid, percentage positioning, and auto layout.

Import files and libraries

SVG, Figma fig files, and CoDesign share links can be imported, and team libraries, variables, and themes can be published.

Specs, comments, and code handoff

Several people can edit and comment live. Developers can copy CSS, iOS, and Android code, or send the file to Codebuddy through MCP.

Ardot Key Advantages

Text or a reference image can generate UI, including screens that follow the team component library

A fig file can be imported with its layout, styles, and components kept

Pen, Boolean operations, grid, and auto layout stay on the same canvas

Developers can read specs, copy multi-platform code, or send the file to Codebuddy through MCP

Ardot Use Cases

A designer imports an existing file

A designer imports a Figma fig file into Ardot, keeps the layout, styles, and components, and continues editing or adds a matching icon set.

Product comments on the file

A product manager opens the share link, comments on the canvas, assigns a teammate, and checks version differences without a separate meeting note.

Engineering copies code from specs

An engineer inspects size and component variants in dev mode, copies CSS or mobile code, or sends the file to Codebuddy through MCP.

Frequently Asked Questions

▶Can files already in Figma be opened?

Tencent Design's docs say a fig file can be imported with its layout, styles, and components kept. SVG and CoDesign share links can also be imported. Exports include PNG, JPG, SVG, and PDF. Shortcuts for select, rectangle, text, and pen match common design tools. The docs say an official public component library is still planned, so current components need to live locally or come from an imported library.

▶How does a design file reach engineering?

Dev mode shows size, spacing, styles, and component variants, and copies CSS, iOS, and Android code. The docs also mention React, Vue, and mini-program code. Through MCP, a design file can be read or changed from a terminal, or sent to Codebuddy to generate front-end code. In collaboration, comments can assign people, and version history is available. Mobile is mainly for viewing and comments.

Ardot

Editor Review

What is Ardot

Basic Info

Best For

Ardot Key Features

Ardot Key Advantages

Ardot Use Cases

Frequently Asked Questions

Latest News

User Reviews

绘蛙

稿定AI

星流AI

墨刀AI

Pic Copilot

美图设计室

Recraft AI

Figma AI

Ardot

Editor Review

What is Ardot

Basic Info

Best For

Ardot Key Features

Ardot Key Advantages

Ardot Use Cases

Frequently Asked Questions

Latest News

User Reviews

Related Tools

绘蛙

稿定AI

星流AI

墨刀AI

Pic Copilot

美图设计室

Recraft AI

Figma AI