Design engine

The AI in your chat designs websites, logos and banners itself and uses the design engine to check its work.

The AI does the design work itself; the toolkit builds, shows and checks what it made, and the AI's own reading of the screenshots drives the fix loop.

Diagram as text

You type /design followed by what you want. The design engine must be enabled for your account and the chat needs a container.
The AI in your chat designs it itself. Nothing is handed to a separate background model.
For a single piece such as a logo or banner, it renders the SVG or HTML file offline and gets a screenshot with measurements.
For a website, it sets up a project: a checked structure, your colours and fonts as tokens and a start page per page.
Build installs, type-checks, lints and builds the site and opens every page. Errors come back with file and line, and the AI fixes them and builds again.
Look opens the running site in a real browser at 360, 768 and 1440 px, measures overflow, contrast, line length, tap targets and layout, and hands the screenshots to the AI. It judges them, fixes what it sees and builds again.
Security checks code and dependencies, headers, leaked secrets and, with a backend, who can reach which data.
Export packages the site for Docker, static hosting, Vercel, Netlify, Cloudflare Pages, a web hosting folder or ZeroLog, and starts each package once.
Everything shows in the preview panel, with Preview, Code, Versions and Files.

With /design, the AI in your chat does the design work itself. It writes the layout, text and code, and uses the design engine as its toolkit to build, look at and check what it made. Nothing is handed to a separate background model.

Type /design followed by what you want, for example /design logo for a joinery in Baden or /design website for a café, three pages. A preview opens on the right of the chat as soon as the AI starts, and it shows the current state after every build. A logo, banner or single page is drawn live while the AI writes it, then saved to the chat's container.

What the toolkit does

Step	What happens
Project	Sets up a website project in your chat's container: a checked starting structure, your colours and fonts as design tokens, and a start page for each page you asked for. Colour pairs that fall below WCAG AA contrast are raised automatically.
Build	Installs, type-checks, lints and builds the site, then starts it and opens every page. Problems come back with the file and line, so the AI can fix them and build again.
Look	Opens the running site in a real browser at 360, 768 and 1440 px wide, measures overflow, contrast, line length, tap targets and layout, and hands the screenshots to the AI to judge.
Security	Checks the code and dependencies for known risks, the required security headers, leaked secrets and, if the site has a backend, who can reach which data.
Export	Packages the finished site for Docker, static hosting, Vercel, Netlify, Cloudflare Pages, a web hosting folder or ZeroLog, and starts each package once to make sure it runs. It runs only after the build and the security check are green.
Render	For single pieces such as a logo or banner: renders an SVG or HTML file offline and returns a screenshot with measurements. For a CSS animation it returns one sheet with up to four moments side by side.
Recipes	Before building motion, an animated icon or an image layout, the AI fetches a short card of tested values. A video or clip export is a Remotion project in your container.

Designs as files you can change

Any AI model you choose in ZeroLog can design. Every SVG, HTML, JSX or TSX file the AI writes in your workspace becomes a design in the panel and renders at once. Ask for logos, icons, interface mockups, landing pages, diagrams, animations or React components.

Preview, Code, Versions, Files. Each file keeps its history: every change is a new version you can view or restore. Variants are separate files side by side.
Open any design again. Under each file the AI wrote, Preview and Code reopen the panel, even after you closed it. On the Files page, click a file to see it rendered or as source; React files render there too.
Phone, tablet, desktop. Switch the preview width with one click.
Point at what to change. Choose Select element, click a part of the design and write what should change. The AI gets the file, the line and the element, and changes only that part.
React without setup. A component with export default renders directly. React is built in; other packages show a placeholder in the preview.
No network in the preview. Designs run sealed off: they cannot load anything from the internet and cannot reach your ZeroLog session. Fonts and images belong in the file itself.

Good to know

It is enabled per account. Without it, /design has no toolkit to call.
Your chat needs a container. The work happens in it, so you can open, change and download every file.
The AI judges the screenshots itself. That needs a model that can read images. With a text-only model the AI gets the measurements, but not the pictures.
No model costs for the tools. Building, looking and checking run in your container and on our servers. You pay only for the AI's own messages, as in any chat.
Code only. Designs use HTML, CSS and inline SVG. The design engine does not generate images or reuse images from your gallery.
Fonts are served locally. No font is loaded from a third-party service, so visitors' addresses are not passed on.

For a website that should be built without you watching, /site still starts the unattended builder. See Website builder.

Something missing or wrong here? Say so. The documentation is part of the product, not an afterthought. All topics · Security · Status · X · Legal & privacy · Home