Templates

Templates are the layouts your brand publishes over and over: social posts and stories, email headers, ads, web pages, app screens, slides and documents. Agents are told to start from a template whenever one fits, so a request for "an Instagram story about our launch" comes back in your layout instead of a new one.

How a template is built#

A template has a name, a type and one or more frames. Each frame is HTML and CSS drawn at a fixed size, such as 1080×1920 for a story. Colors and type are written as your Foundations tokens, so they follow every change you make there.

The parts that change from one use to the next are slots. A slot can be bound to your logo, a library photo, a token, an artifact or a line of text. Bindings are stored as references, so when you replace your logo, every template that shows it updates.

Types and formats#

Templates are sorted into four tabs. Each tab only appears once it has something in it.

Every format uses the platform's published size. Use the Format menu above the grid to show only one format, such as LinkedIn · Carousel.

Add a template#

Press Add. The Add template drawer has four tabs:

• Marketplace: ready-made templates, already drawn in your colors, type, logo and photos. Switch type and platform at the top, tick the ones you want, and add them.
• Prompt: describe the template in a sentence, for example "A story ad for one product, with three USPs and a clear Buy button. In Danish." Press Design and Claude designs it from your tokens, voice, logo and photos. The drawer shows roughly how many credits it uses, and closing it doesn't stop the design.
• Blank: pick a type, a name and a format, then press Add template.
• Import: drop a .fig file (in Figma, use File → Save local copy). The Import from Figma page opens, where you tick the frames to bring in, name the template, choose its type and press Import.

Templates from the marketplace or an import are ordinary templates afterwards, and you can edit everything about them.

A template's page#

Click a template to open it. Its frames sit on an infinite canvas: drag to pan, use ⌘ with the scroll wheel to zoom, and turn on Inspect to see each element's box model. A strip of thumbnails shows every frame: click one to open it, drag to reorder, or press + at the end to add a frame.

The panel on the right has four tabs.

Design#

Select an element on the canvas or in the layers list to change it in the inspector. You can drag and resize elements, and double-click copy to retype it in place, in your typeface. The Design tab is available on desktop.

With an element selected, the inspector offers to turn it into a slot:

• Make this a slot (or Use a brand image for a picture, Make this editable for text).
• Make this the content area: marks the part of a screen or page that changes with every use, such as the body of an app screen inside its top bar and sidebar. Designs made from the template put their own content there and keep everything around it as drawn.

Then bind the slot. The picker lists your Logos, Images, Artifacts and Tokens, plus Content area and Leave as drawn. Type to search, or type copy and choose to use it as the text. Tick Apply to every frame to bind the same slot on every frame at once. A slot whose logo, image, artifact or token was deleted shows as Missing.

Select a picture to set how it sits in its box with Fit in the inspector: Fill covers the box and crops the rest, Fit shows the whole picture inside it, Crop lets you set the Zoom and Focus, and Tile repeats it at a Tile size. A bound photo fills its slot unless the frame's CSS says otherwise, and a bound logo is drawn whole.

Details#

The template's Description (when to reach for it), Type, Format, Frames, Handle, Source and dates. The handle is the name agents fetch the template by.

Code and Comments#

Code shows each frame's HTML and CSS; press Edit code to change them. Comments is a thread on the template, with @mentions.

Changes on the Design, Details and Code tabs are held until you press Save. Cancel puts everything back.

Page libraries#

A Files template with 7 or more fillable frames works as a page library, such as a brochure with many page types. Instead of filling every frame, Claude picks the pages each use needs, in the order it needs them.

Ask Claude for a change#

Press Edit in the header to describe a change to the template. Claude proposes changes frame by frame, and you apply or discard them. Nothing changes until you apply. Each request uses AI credits. See AI credits.

Use a template#

Press Use template to make a design from it: Claude fills the text and photo slots for one piece of work, and the result is saved as a design. Save or cancel your edits first. See Designs.

How agents use templates#

Agents get an index of your templates with each one's name, handle, type, and frames with their sizes and slot counts. Asking for one handle returns the finished markup with every binding resolved, so the logo, photos and colors are your real ones, plus a list of the slots meant to change. An agent that binds a photo to a slot can also set how it fits, the same as the Fit menu. When several templates fit and you haven't picked one, agents are told to ask you which to start from.

Only templates that are Complete or have no status are served. See Item states.

Next steps#