DocsAI

Design pages with Design mode

Design mode designs a whole page from a description: it plans the art direction, builds the page, looks at it at every screen size and refines it — all with native, editable elements.

Turn on the Design switch under the assistant’s text box, describe the page, and choose how it should be designed. Design mode is for creating or redesigning a whole page; for changes to an existing page, the normal assistant is faster.

How it works#

It plansA design brief: what the page is for and who it’s for, the art direction (type, color, density, imagery, motion), and each section with its layout on desktop, tablet and phone.
It buildsThe brief becomes native elements styled with your design system.
It looksThe builder renders the page and the AI studies screenshots at each screen size, naming the elements that need work.
It refinesIt fixes what it found, then runs the same checks as every AI change.

A card shows each stage live, with the brief and the critiques; click an issue to select that element on the canvas.

Choose the mode#

Mode	What happens
Fast	One strong model plans and builds; checked by the validator, no visual review.
Quality	Plans, builds, then looks at the rendered page on desktop and mobile and refines it once. The default.
Maximum	Team mode: the plan is reviewed by a second role, then two rounds of visual critique on desktop, tablet and mobile.

Quality and Maximum use more credits. Designing the demo homepage with Claude Opus 5.5 used about 600 credits.

Art direction#

Leave any of these on Auto and the AI decides:

Control	Choices
Complexity	Simple, Polished, Advanced, Experimental
Style	Minimal, Modern, Editorial, Luxury, Corporate, Tech, Playful, Brutalist, Futuristic
Density	Airy, Balanced, Dense
Corners	Sharp, Slight, Rounded, Highly rounded
Visual energy	Conservative, Balanced, Bold
Layout	Conventional, Asymmetric, Experimental
Typography	Neutral, Editorial, Bold, Technical, Luxury, Playful

Add up to four reference images (PNG, JPEG or WebP) — a site or a mood you like — and the design takes cues from them.

Where the design goes#

On an empty page, into that page.
On a page with content, into a new draft page, leaving the page as it is — unless you tick Redesign this page (replaces its content).

Compare models#

Open Compare models and tick 2–3 models: each designs its own draft page from identical inputs, so you can pick the best. Each design uses its own credits.

The design direction stays with the page#

The brief is saved with the page — see Page settings → Design direction. The AI keeps later changes consistent with it, so “make this section more energetic” doesn’t lose the page’s visual language. Refine with AI starts from it; you can also forget the stored direction (the design itself stays).