---
name: gro-email-design
description: Design marketing emails in Gro through the Gro connector (MCP). Use when someone asks to create, design, build, redesign or restyle an email, newsletter, campaign email or email template in Gro, or says their Gro emails look plain. Covers the order to call the Gro tools in, how to get pictures (Gro's own image generation when the store has it, otherwise another image tool you have connected), and how to check the result.
---

# Designing emails in Gro

Gro emails are built from blocks, as JSON, with the Gro connector's tools. This
skill is the order of work. The format and the look live in Gro itself and
change over time, so always read them fresh:

- The `email-block-schema` resource: the JSON format, then the **Email Design
  Guide** (palette, type, pictures, section recipes). Follow both.
- The `brand-kit` resource: logo, colours, fonts, button style, voice.

If the Gro tools are not available, say the Gro connector needs to be connected
first (https://usegro.co/docs/developers/claude-connector/) and stop.

## The order of work

1. **Understand the email.** What is it for (sale, launch, newsletter, win
   back), who gets it, what should they do. Ask one short question only if you
   can't tell. A request for a template is not a request to send anything.
2. **Read** `brand-kit` and `email-block-schema`. Call `get_account`.
3. **Get real content.** `list_products` when products belong in it.
   `list_coupons` for a discount. Never invent a product, price, code, quote
   or claim.
4. **Get the pictures** (next section). Do this before writing any JSON.
5. **Build** with `create_template` (or `update_template` to redesign one).
6. **Look at the picture** the tool returns and fix what is plainly wrong with
   `patch_template`: text you can't read, a white gap between two coloured
   sections, a hero whose subject is hidden, an empty image slot.
7. **Check** with `check_template` and fix errors.
8. Say in a line or two what you made. Don't describe the design; they can see
   it.

## Pictures

A designed email is led by pictures. Work down this list and stop at the first
that gives you what the email needs.

1. **What they gave you.** Images attached or linked in the conversation.
   Save a link with `import_media_from_url` and use the url it returns.
2. **What they already have.** `search_media` for the logo, product shots and
   lifestyle photos. Product photos also come back from `list_products`.
3. **Gro image generation**, only when `get_account` shows
   `image_generation.enabled: true`. Call `generate_image`. If it is false,
   never call it and don't mention it.
4. **Your own image tool**, when Gro's is off and you have another image
   generator connected (ElevenLabs, or any other). Make the picture there,
   then save it into Gro with `import_media_from_url` and use the url that
   returns. Never put the other service's link in the email: those links
   expire and inboxes block them. If the tool gives no public https link to
   the image, ask the merchant to upload it to their Gro media library and
   find it with `search_media`.
5. **No image tool at all.** Design with colour, type and the photos they
   have. Leave an image placeholder (`src: ""` with a `placeholderLabel`
   saying what the shot should show) only where a picture is essential, and
   tell them which ones to fill. Placeholders send as nothing.

Rules for any generated picture, whichever tool makes it:

- **Real products only.** Give the tool the merchant's real product photos as
  reference images. Never generate a product from a description: an invented
  product is a lie about what they sell. If the tool can't take reference
  images, generate scenes, textures and backgrounds without the product, and
  use the real product photos beside them.
- **No words in pictures.** No headlines, prices, badges or logos. Copy is
  live text in blocks over or beside the picture, so it can be edited and
  still reads with images off.
- **Brief it properly.** Subject, setting, light, colours as brand hex values,
  and where the empty space for text is ("products in the lower half, top
  half plain backdrop").
- **Shapes.** Tall or portrait for a hero with copy over it, wide for a
  picture on its own, square for product tiles and icons, a thin wide strip
  for a divider between two section colours.
- **Only what the email uses.** One hero and two to four supporting images is
  plenty. Image tools cost the merchant credits.
- When several icons or tiles sit together, state one style and colour for
  all of them so they match.

## What good looks like

The design guide in `email-block-schema` has the detail. In short:

- Every section has its own brand tone, and sections touch. No white page
  with grey text, no white gaps.
- One idea per section: hero, products or proof, a reason to believe, a
  closing push, footer.
- A big headline, a small spaced label above it, short body copy, one clear
  button near the top and one near the end.
- Text over a dark section or a photo sets a light colour inline.
- Product cards, framed sections and badges are styles on layouts and product
  blocks. A comparison table is an html block. A row of icons is a three
  column layout with an image and a caption in each.
- Transactional emails (order confirmations, account notices) stay plain.

## Changing an email that exists

Read it with `get_template`, then `patch_template` with only the blocks that
change. Use `update_template` only for a full redesign they asked for. A
template used in a live flow reaches real customers, so confirm before editing
one.

## Never

- Send or schedule anything unless they ask in so many words.
- Change the brand kit as a side effect of styling one email.
- Invent links. If the right address isn't clear, ask.