# Design engine The AI in your chat designs websites, logos and banners itself and uses the design engine to check its work. 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 phone, tablet and desktop width, 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 example static files, a web hosting folder or a container) and starts each package once to make sure it runs. | | Render | For single pieces such as a logo or banner: renders an SVG or HTML file offline and returns a screenshot with measurements. | ## 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 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. - **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 - **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.