Ardot

What is Ardot?

Ardot is a collaborative design platform developed by Tencent Cloud's CodeBuddy team, currently in open beta. It bridges the gap between product managers, designers, and developers by letting users generate fully editable UI design files from text descriptions — not static images, but layered, component-based design documents. Built on a professional vector editing engine comparable to Figma, Ardot adds AI generation, dynamic layout systems, design system management, and one-click code export. It also supports MCP protocol integration with AI coding agents like CodeBuddy, Cursor, and Claude, enabling a closed-loop workflow from design to frontend code.

Key Features

• Text-to-UI Generation

  Describe an interface in natural language and Ardot streams a fully editable design draft in real time — with separate layers, replaceable components, editable text, and adjustable colors, not a flattened image.

• Image-to-Design Conversion

  Upload any image — a hand-drawn sketch, a competitor screenshot, or a product poster — and Ardot intelligently parses it into a structured, editable design file with proper layering.

• Professional Vector Editing

  Full-featured vector editor supporting skewing, 3D rotation, enhanced shape tools, Grid layout, percentage-based positioning, and real-ratio locking for responsive design across screen sizes.

• One-Click Code Export & MCP Integration

  Generate CSS, iOS, and Android code directly from design specs, or connect via MCP protocol to let AI coding agents like CodeBuddy and Cursor read and operate on design files directly.

• Design System Management

  Components, color styles, and text styles sync globally across the project. Teams can build reusable component libraries and generate new UI designs based on their own business component standards.

• Team Collaboration & Enterprise Security

  Real-time multi-user collaboration with inline comments, version comparison, granular permission controls, full operation audit logs, and automatic permission revocation for departed team members.

Use Cases

• Rapid UI Prototyping : Product managers and designers can go from a written brief to a complete, editable interface draft in minutes, dramatically reducing the time spent on initial wireframing and mockups.
• Design-to-Code Handoff : Development teams can inspect annotated specs and copy production-ready CSS, iOS, or Android code directly from design files, eliminating the back-and-forth typically required during implementation.
• Migrating from Figma : Teams currently using Figma can import .fig files with full fidelity — preserving layouts, styles, and components — and switch to Ardot without rebuilding existing work.
• Brand-Consistent Asset Generation : Design teams can generate full sets of style-matched vector icons and UI components by referencing their existing component library, ensuring outputs match team standards rather than generic templates.
• Agentic Design Workflows : Engineering teams using AI coding agents can connect Ardot via MCP to enable bidirectional design-code sync, letting agents read design files and generate frontend code autonomously.

FAQs