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 with its own `layers`.
   Don't put several rows into one call.
3. Keep the render IDs in order. For a single file, call `merge_renders` with
   those IDs; image renders become PDF pages.
4. Report what was produced. If an item failed, name it and give the reason
   instead of skipping it silently.

## Formats and sizes

- `png` for transparency (`"transparent": true`) and sharp text or graphics,
  `jpg` for photos, `webp` for the web.
- `pdf` for documents. For printing, add `"flatten": true`, and `"cmyk": true`
  when the printer asks for CMYK.
- `mp4` for video: `duration` in milliseconds (up to 90000), optional `fps`
  (1 to 60), and an optional `animation` object per layer with `in` (slide,
  fade, zoom or rotate), `loop` (spin or pulse) and `out`, all timed in
  milliseconds. Videos take longer to render than images.
- For one render at another size, pass `width` and `height` (100 to 5000
  pixels) to `create_render`, then check the result: a layout made for a
  square can crop or crowd at another ratio. For a size the user will reuse,
  add it as a page of a multi-size template (see `templated-design`).

Common sizes: Instagram post 1080x1080, story or reel 1080x1920, link preview
(Open Graph) 1200x630, YouTube thumbnail 1280x720, A4 landscape certificate
1754x1240, A4 portrait document 1240x1754.

## Multi-page and multi-size templates

- `get_template_pages` returns each page's name, size and layers. Layer names
  can differ between pages, for example with a `-copy` suffix on the second
  page.
- To give pages their own content, pass `pages` to `create_render`:
  `[{ "page": "<page name>", "layers": { ... } }]`. Only the listed pages are
  rendered. Use either `layers` or `pages` in one call.
- A multi-page render returns one file per page. Use `merge_renders` to
  combine them into one PDF.

## When Templated is not the right tool

- Artwork or photos generated from a text prompt with no template involved:
  Templated doesn't do this. Say so in one sentence.
- Editing an existing photo (background removal, retouching) or posting to
  social networks: not supported.
- When the user asked to use Templated or one of their templates, complete the
  request with Templated tools, because a picture made another way would not
  match their saved design.

## Errors and safety

- Read the error message. It names the problem, such as a missing template, a
  layer name the template doesn't have (with the valid names), or an image URL
  that can't be fetched. Correct the call and retry once.
- If the account has reached its render limit, say plainly that the Templated
  account can't render more right now and that the details are in the user's
  Templated account. Don't promote plans or upgrades.
- If a tool reports an authorization error, ask the user to reconnect the
  Templated plugin. Never ask for passwords or API keys in the chat.
- Delete templates, renders, uploads, fonts or folders only when the user
  explicitly asks, and confirm which items first.

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: "cover"` to fill the box.
- **Shape:** SVG markup in `html`, for example
  `<rect width="100%" height="100%" rx="24" fill="#1477FF"/>`.
- **Stacking:** later layers are drawn on top; `order` sets it explicitly.

Name layers by role, in lowercase: `headline`, `subtitle`, `photo`, `logo`,
`name`, `date`, `cta`. Fill text layers with realistic content from the brief,
and size each text box for the longest value it will receive.

For several sizes of one design (for example a post, a story and a banner),
pass `pages` instead of `layers`. Each page has a `page` name, its own `width`
and `height`, and `layers` keyed by layer name. When rendering, use
`get_template_pages` to read the exact layer names of each page.

## 4. Render and check

1. Render the new template once with `create_render`, using the real content
   from the brief.
2. If you can see the rendered image, check it before showing it:
   - Is the main message the first thing you notice?
   - Does any text overflow, get cut off, or run past the margins?
   - Do any layers overlap by accident?
   - Does the headline still read at thumbnail size?
   - Is any placeholder text left?
3. Fix what failed and render again. Two passes are normal. Then show the
   result and ask the user what to change.

For long or variable text, send `"autofit": "height"` with `min_font_size` and
`max_font_size` for that layer in `create_render`, and lower `max_font_size`
until the longest string fits. Don't send `font_size` together with autofit.

## 5. Edit an existing template

- `update_template` matches layers by their `layer` name: existing names are
  updated and new names are added. For every layer you change, send `layer`,
  `type`, both `x` and `y`, and every property you want to keep, because a
  missing coordinate is set to 0 and omitted properties can be reset.
- Leave `replaceLayers` off unless the user wants layers removed, because it
  deletes every layer missing from the request.
- Avoid changing `shape` layers with `update_template`, because a shape can
  lose its SVG content. If a shape must change, create a corrected copy with
  `create_template`, tell the user its name, and keep the original unless they
  ask to delete it.
- To add a size to a multi-size template, send a new page in `pages` with its
  own `width` and `height`. On multi-size templates, set sizes per page rather
  than at the top level.
- After an update, call `get_template_layers` to confirm the change, then
  render once to check it.
- For fine adjustments, the user can open the template in the Templated editor
  (app.templated.io) and keep rendering from the chat.

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