Templated

View saved version →

---
name: setup
description: "First-run setup for Templated: check the connected account's templates, offer to design one from a short brief when there are none, and produce the user's first render. Use when the user runs setup for Templated, has just connected it, or asks how to get started with Templated."
---

# Get started with Templated

Goal: by the end of this conversation the user has a finished design rendered
from a template and knows how to make the next one.

If the plugin was installed in the middle of another task, continue that task
first and use these steps only where they help.

1. **Check the account.** Call `list_templates` with `limit` set to 10.
   Sign-in is handled by the plugin connection. If a tool reports an
   authorization error, ask the user to reconnect Templated. Never ask for a
   password or an API key.
2. **If the account has templates:** show up to five by name and size, say in
   one short line what each could be used for (based on its name), and ask
   which one to fill or what they want to make.
3. **If the account has no templates:** explain in one sentence that Templated
   fills a saved design with new text and images and returns a PNG, JPG, PDF
   or MP4. Then offer three starting points and ask for the text to use:
   - an Instagram post (1080x1080) for an announcement or event
   - certificates for a list of names, combined into one PDF
   - a link preview image (1200x630) for a blog post or page

   Any other idea is welcome too.
4. **Make the first render.**
   - Existing template: call `get_template_layers`, then `create_render` with
     the user's content in the matching layers.
   - New template: follow the `templated-design` skill to create it with
     `create_template`, then render it with `create_render`.
   - Certificates or other lists: render the first item, show it, and render
     the rest after the user confirms. Then offer to merge them with
     `merge_renders`.

   Keep questions to a minimum. If the user gave a topic but no exact wording,
   write short copy from the topic and say it can be changed.
5. **Show the result and iterate once.** Share the render (the preview card or
   the file URL) and ask for one change. Apply it and render again.
6. **Close with next steps in two or three sentences.** They can ask for this
   again at any time by mentioning Templated. The same template can produce
   many versions, for example one per name in a list or a new post every week.
   The template can be fine-tuned in the Templated editor at app.templated.io.
   Don't mention plans, pricing or upgrades.

Referenced files: 1 — file references are metadata, not package contents.

View saved version →

---
name: templated
description: "Render images (PNG, JPG, WebP), PDFs and MP4 videos from the user's Templated templates, such as social media posts, banners, Open Graph images, certificates, invoices and menus, one at a time or as a batch from a list. Use when the user mentions Templated or one of their templates, or asks to fill a saved design with new text, images or colors, to make one version per name or row, to merge PDFs, or to render a design at another size."
---

# Render designs with Templated

Templated fills a saved template (a design with named layers) with the exact
text, images and colors it is given, and returns the finished file. The output
always follows the template's layout. Templated renders templates; it does not
generate pictures from a text prompt.

Explicit instructions from the user take priority over the guidance in this
skill.

## Tools at a glance

| Goal | Tool |
|---|---|
| Find a template | `list_templates` (filter with `query`, `width`, `height`) |
| See what can be changed | `get_template_layers`; for multi-page or multi-size templates, `get_template_pages` |
| Produce the file | `create_render` |
| Check a render again or find its URL | `get_render`, `list_renders` |
| Combine renders into one PDF | `merge_renders` |
| No template fits | Design one with the `templated-design` skill (`create_template`) |

## Render flow

1. **Find the template.** Call `list_templates`. If the user named a template,
   match it by name. If several could fit, list the candidates by name and size
   and ask which one to use. If none fits or the account has no templates,
   offer to design one (see `templated-design`) instead of stopping.
2. **Read its layers.** Call `get_template_layers` with the template ID. The
   layer names it returns are the only keys `create_render` accepts in
   `layers`. For a template with several pages or sizes, call
   `get_template_pages`.
3. **Map the content to layers.** Put each value in the layer that plays that
   role: the title in the headline layer, the person's name in the name layer,
   a photo URL in the image layer. A layer that still shows placeholder copy
   and has no value from the user gets either real content or `"hide": true`,
   so no placeholder text ends up in the result. When the layer names don't
   clearly match the content, state the mapping in one line before rendering.
4. **Render once.** Call `create_render` with `template`, `layers` and the
   `format` the user asked for (`jpg` is the default).
5. **Show the result.** Share the render (the preview card or the file URL) and
   ask whether anything should change. Apply changes and render again.

Layer values are objects keyed by layer name:

```json
{
  "headline": { "text": "Grand Opening" },
  "date": { "text": "Saturday, May 9", "color": "#FFD166" },
  "photo": { "image_url": "https://example.com/storefront.jpg" },
  "badge": { "hide": true }
}
```

## Text that has to fit

- On a text layer that uses autofit, send `text` alone. An explicit
  `font_size` cancels autofit, and long text can then overflow its box.
- To keep long text inside its box, send `"autofit": "height"` with
  `min_font_size` and `max_font_size` (numbers, in pixels). If the text still
  overflows, lower `max_font_size` and render again.
- In a batch, test the longest value first, not a typical one.

## Images

- `image_url` must be a public HTTPS link to a JPG, PNG, WebP or SVG file.
- If the user only has a file in the chat and no link, explain that Templated
  needs a public link to the image. They can also upload it in the Templated
  web app (app.templated.io), after which `list_uploads` returns its URL.
- Don't make up image URLs.

## Batches: one design per name or row

1. Render the first item alone and show it. Check that every value appears in
   the right place. Ask the user to confirm the first result before rendering
   the rest, unless they already said to go ahead.
2. Call `create_render` once per remaining item, each 

Preview of the first 4,000 characters. Read full instructions →

Referenced files: 1 — file references are metadata, not package contents.

View saved version →

---
name: templated-design
description: "Design a new Templated template from a short brief, or fix the layout of an existing one, with create_template and update_template: Instagram posts and stories, Open Graph link previews, banners, certificates, invoices, menus, quote cards and multi-size templates. Use when no existing template fits, the account has no templates yet, the user asks to design or redesign a template, or a render shows text that overflows, overlaps or is hard to read."
---

# Design a Templated template

A template is a canvas (width, height, background) with named layers. The
layer names become the keys used later in `create_render`, so name each layer
by its role.

Explicit instructions from the user about layout, colors, fonts or wording
take priority over the defaults below.

## 1. Gather the brief

You need what the piece is for, its size, the text it carries, and any brand
colors, fonts or image URLs. Use what the user already said. Ask one short
question only when the purpose or the main text is missing. Otherwise choose
sensible defaults and say which ones you chose.

| Piece | Size (px) | Keep clear |
|---|---|---|
| Instagram post | 1080x1080 | 64 px on every side |
| Story or reel | 1080x1920 | top 250 px and bottom 320 px, covered by app controls |
| Link preview (Open Graph) | 1200x630 | keep text inside the central 1000x500 |
| YouTube thumbnail | 1280x720 | the bottom-right corner, where the duration badge sits |
| Certificate, A4 landscape | 1754x1240 | 120 px margins |
| Invoice, menu or flyer, A4 portrait | 1240x1754 | 120 px margins |

## 2. Compose before placing layers

- **One message.** Write the one sentence the viewer should take away. Leave
  out anything that doesn't serve it.
- **One dominant element.** The main text is at least twice the size of the
  next largest text.
- **Two font families at most.** One display face for the headline, one text
  face for the rest. Vary weight, size, letter spacing and color instead of
  adding fonts. Widely available families such as Inter, Montserrat, Poppins,
  Roboto, Playfair Display and Archivo Black work well. `list_fonts` shows the
  fonts uploaded to the account, such as brand fonts.
- **Color 60-30-10.** One surface color for most of the canvas, a neutral
  family for the text, and one accent used at most three times.
- **One margin, one alignment edge.** Inset content by about 8% of the shorter
  side (about 90 px on 1080) and align every layer to the same left edge or the
  same center.
- **No text directly on a photo.** Put a full-canvas `shape` layer between the
  photo and the text, for example
  `<rect width="100%" height="100%" fill="#0B0E13" opacity="0.8"/>`, with an
  opacity that keeps the smallest text readable.
- **Images.** Use only image URLs the user gave you or that are already in the
  account (`list_uploads`). Without one, design with color and shapes, and keep
  an image layer only if the user plans to add a photo.

Vary the structure across a series so consecutive pieces don't look the same:

| Piece | Structure |
|---|---|
| Announcement, event | Full-bleed photo, dark overlay, text block low on the left |
| Quote, testimonial | Flat color, no photo, large centered text, thin rule above |
| Product, offer | Canvas split in two: image on one half, text on the other |
| Stat, result | One oversized number as the dominant element, label under it |
| Certificate | Centered stack: title, recipient name (largest), reason, then date and issuer at the bottom |

## 3. Create the template

Call `create_template` with `name`, `width`, `height`, an optional
`background`, and `layers`. Each layer needs a unique `layer` name, a `type`
(`text`, `image`, `shape` or `rating`) and its position (`x`, `y`, `width`,
`height`).

- **Text:** `text`, `font_family`, `font_size` (for example `"72px"`),
  `font_weight`, `color`, `horizontal_align`, `vertical_align`, `line_height`,
  `letter_spacing`.
- **Image:** `image_url`, and `object_fit

Preview of the first 4,000 characters. Read full instructions →

Referenced files: 1 — file references are metadata, not package contents.