# Claude design: making on-brand visuals with Gradiently

[Canonical HTML page](https://gradiently.design/guide/design-with-claude)

Claude is good at understanding what you mean. Connected to Gradiently, it can also make it: real, editable designs in your brand, waiting in the Studio for your final touch.

## The short version

- Claude can make real designs when it is connected to a design tool through MCP, instead of only describing what a design should look like.
- Connected to Gradiently, Claude can search Marks, read your brand, create and edit designs, make copies at other sizes and generate brand options.
- Designs Claude makes in Gradiently are ordinary editable designs that open in the Studio, so you can refine them by hand.
- The connection uses a scoped API key created in Gradiently's Settings, so Claude can do only what that key allows, and the key can be revoked at any time.
- The best results come from a filled-in brand kit and specific requests that name the format, the message and the audience.

**Claude design** work changes when Claude can use a real design tool. On its own, Claude can suggest headlines and describe a layout. Connected to Gradiently through MCP, it can make the design itself: pick a Mark, lay out your words in your brand, produce the sizes you need and hand you a link to an editable design in the Studio. You describe; it builds; you finish.

This guide walks through what that looks like in practice, what to ask for and how to keep the connection safe. If MCP is new to you, start with [what is MCP](https://gradiently.design/guide/what-is-mcp).

## What Claude can do in Gradiently

Once connected, Claude sees Gradiently's tools and chooses the right one for each request. You talk normally; it translates your words into actions.

| You ask | What happens |
| --- | --- |
| "Find calm Marks in deep teal" | Claude searches the Market and shows you the closest Marks with their codes |
| "Make a story announcing we open late on Fridays" | Gradiently's designer reads your brand profile and Mark, lays out the story and saves it; you get a Studio link |
| "Now make a square post and an X header from it" | Copies are laid out again for each size, not stretched |
| "Change the headline to Open until midnight" | The text changes and the layout stays |
| "We're a new bakery called Hart & Hollow: show me brand options" | Brand candidates are generated from your description, and you choose one to adopt |
| "Forge a Mark like early light on bone paper" | A new Mark recipe is made and can be saved as your private draft |

Every design is saved in your workspace and opens in the Studio, where you can change anything by hand.

Behind the scenes, requests to design go to the Designer, Gradiently's own AI, which reads your brand profile and your Mark before it composes, then reviews its own layout for margins, collisions and contrast. [Working with the Designer](https://gradiently.design/guide/designer-ai-guide) covers what it can and can't do.

## How to connect Claude to Gradiently

1. **Create a key** In Gradiently, open Settings, then API and agents. Name the key after where you'll use it, such as Claude Code, and choose what it can do. Only workspace owners and admins can create keys.
2. **Copy it once** The key is shown a single time. Save it in a password manager.
3. **Add the server to Claude** Point your Claude client at `https://gradiently.design/api/mcp`, sending the key as a Bearer token. The exact place to add it differs between Claude apps; [the developer docs](https://gradiently.design/developers/mcp) cover each.
4. **Ask for something small** Try "list my designs" or "find a Mark in warm orange" to confirm the connection before bigger requests.

```bash
# Claude Code: add Gradiently as a remote MCP server
# (set GRADIENTLY_API_KEY in your environment first; don't paste the key into shared files)
claude mcp add --transport http gradiently https://gradiently.design/api/mcp \
  --header "Authorization: Bearer $GRADIENTLY_API_KEY"
```

In Claude Code, one command adds the connection. Other clients take the same address and header in their own settings.

[Connecting an AI assistant](https://gradiently.design/guide/connect-ai-assistant) has plain-language setup for other MCP clients too.

## A walkthrough: one announcement, three formats

Say you run a small bar and want to announce late openings. Here is the whole job as a conversation. First: "Make an Instagram story announcing that we're open until midnight on Fridays, starting this week. Keep it calm, not shouty." Claude asks Gradiently's designer, which reads your brand, uses your Mark and returns a link. You open it and like it, but want a different line, so you say: "Change the small line to Kitchen open until eleven." Then: "Make a square post and an X header from it."

A vertical story announcing Open until midnight on Fridays on a gradient background

The story Claude asked for, in the brand's own Mark…

A wide X header with the same announcement set across a gradient

…and the X header copy, laid out again for its wide shape rather than stretched.

Three formats, one look, a few minutes. Each is a normal design in your workspace, so you can nudge a heading or swap a photo in the Studio before exporting. [One look, every size](https://gradiently.design/guide/one-look-every-size) explains how copies are laid out for each format.

## How to ask Claude for better designs

### Vague

- Make a post about our event
- Something eye-catching
- Use nice colours

### Specific

- A story announcing our rooftop solstice party, 21 June, sunset to sunrise
- Calm and confident; the date should be the second thing people read
- Use our brand Mark; keep the words in our voice

- **Fill in your brand kit first.** Logos, colours, fonts, who the brand is for and how it sounds. The designer reads it before every design. See [setting up your brand kit](https://gradiently.design/guide/brand-kit-setup).
- **Name the format.** Story, square post, X header, YouTube thumbnail. Each is laid out differently.
- **Give the real words.** Dates, prices and names, exactly as they should appear.
- **Say the order.** What should people read first, second and third.
- **Edit, don't restart.** Ask for one change at a time to a design you mostly like.

## Keeping the connection safe

Claude can do only what its key allows. Choose the smallest set of permissions for what you want: reading and creating designs and searching Marks covers most design work. Leave claiming off unless you specifically want Claude to claim Marks for you. Publishing a share link is always an explicit step, and designs you haven't shared stay private. A key never transfers a Mark's ownership to anyone.

> **Treat the key like a password** Anyone with the key can act in your workspace within its permissions. Keep it out of shared files and screenshots, and revoke it in Settings straight away if it leaks. Revoked keys stop working immediately.

Claude and Gradiently each do what they are good at: Claude understands what you mean, Gradiently holds your brand and does the careful layout, and you make the final call. For the bigger picture of working this way, read [an AI brand identity workflow](https://gradiently.design/guide/ai-brand-identity).

## FAQ

### Can Claude make designs?

Yes, when it is connected to a design tool through MCP. Connected to Gradiently, it can create and edit real designs that open in the Studio, rather than only describing them.

### How do I connect Claude to Gradiently?

Create a key in Gradiently's Settings under API and agents, then add https://gradiently.design/api/mcp to your Claude client with the key as a Bearer token. In Claude Code, one claude mcp add command does it.

### Will Claude's designs match my brand?

Gradiently's designer reads your brand profile and Mark before every design, so filling in your brand kit, including colours, fonts and voice, makes the results match much more closely.

### Can Claude claim Marks or share my designs without asking?

Only if its key has that permission. Claiming needs a separate permission you can leave off, and a share link is only published when a tool is explicitly asked to publish one.

### Can I edit what Claude makes?

Yes. Every design is an ordinary editable design in your workspace, so you can change text, layout, photos and sizes in the Studio.