Introduction

Clate is a design tool for the user interfaces of embedded devices. It is built on three ideas: Design as Craft, Embedded First and AI Native.

Welcome to Clate!, the example project that ships with Clate. Every element is a plain shape.

Design as Craft

People look at a device screen up close, every day, often for years. Small things matter: an edge that is one pixel off, a shadow that is too soft, a label that is not quite aligned. Clate is made for that level of care.

• Exact values. You type every position, size, radius, color, and font setting in the property editor, which shows only the controls that fit your selection.
• Precise arrangement. Snapping, alignment, and distribution keep layouts tidy. You place and rotate every object with pixel-perfect precision.
• Depth and finish from plain shapes. Gradients, rounded corners, rings, and layered shadow shapes let you build polished controls without images. The Welcome to Clate! example shows what is possible.
• Clear structure. Pages, page groups, and the Layers panel keep a growing design in order.

Embedded First

Clate is built for user interfaces that run on devices with Qt.

• What you design is what appears on screen. Frames, shapes, text, and images are Qt Quick items. Nobody has to rebuild your design from a picture later.
• See it live. Preview shows one layer of your design running in its own window.
• Hand over QML, not mockups. Export to QML writes plain QML files for Qt 6.12, one file per layer, ready for developers to load into their application.
• Your work is safe. Clate saves your project continuously. There is no Save command, and no work gets lost. See Projects and saving.

AI Native

AI in Clate is part of the workspace, not an add-on.

• Ask in your own words. The AI Assistant is a panel next to your design. Describe what you want, watch it work, and see the changes on the canvas right away.
• You stay in control. Every change the AI makes is a step in the undo history, so you can take back anything you do not want.
• Use your own AI tool. Besides the built-in assistant, any AI tool that supports MCP can connect to Clate's MCP server and work with your design. Claude powers the built-in assistant today, and Clate plans to support more AI providers.

The Clate workspace: the Hierarchy panel on the left, the canvas in the middle, the property editor on the right.

What you can do with Clate

• Draw frames, rectangles, ellipses, polygons, stars, text, and images on an infinite canvas. See Drawing tools.
• Select objects, then move, resize, rotate, align, and distribute them. See Selecting objects.
• Style every object in the property editor: fill and stroke with colors or gradients, corner radii, arcs, and typography.
• Organize your design in pages, page groups, and layers. See Pages and layers.
• Use your own images as assets. See Assets.
• Preview and export your design as QML. See Preview and Export.
• Work with AI, in the built-in assistant or in your own AI tool. See AI Assistant and MCP.

Who Clate is for

• UI designers who create the different screens of a user interface and want their design to be the real thing, not a picture of it.
• Teams that build with Qt, who want designs that arrive as QML instead of a specification to re-create.
• Designers who like to work with AI: the assistant handles repetitive edits, and you make the decisions.

Start here

New to Clate? Take a tour of the workspace, create your first project, and explore the Welcome to Clate! example project. When you are ready, follow the tutorials.

The sidebar groups the documentation into sections:

Section	What it covers
Getting Started	A tour of the workspace, your first project, the example project, and projects and saving
Key Concepts	How a project is organized into pages and layers, and the objects a design is made of
Working in Clate	The canvas, drawing tools, selection, the property editor, pages, layers, and assets
Preview and Export	Seeing your design running, and exporting it
AI Assistant and MCP	The built-in assistant and connecting other AI tools
Tutorials	Step-by-step walkthroughs from a first design to a control panel
Reference	Keyboard shortcuts, menus, a glossary, and an FAQ
Release Notes	What is new in each version

Beta

Clate 0.6 is a beta. This documentation is growing together with the product, and some sections are still being written. Component support is still missing. See Known limitations.

Conventions

Convention	Meaning
Bold	Labels you see in Clate, like Import Project
Code	Keys, file names, and values
A › B	A menu path, like Settings › Enable MCP Server

The shortcuts in these docs are for Windows. In Clate, each menu command shows its shortcut.