# Conector Gradiently para Claude: design com MCP no Claude

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

O Claude pode buscar Marks, ler sua marca e criar designs reais e editáveis no seu espaço de trabalho. Há dois caminhos, um conector com login ou uma chave com escopo, e esta página cobre os dois.

## The short version

- O Gradiently mantém um servidor MCP hospedado para o Claude em https://gradiently.design/api/mcp.
- No app do Claude, o Gradiently é adicionado como conector personalizado com login por OAuth; no Claude Code, ele é adicionado com uma chave de API com escopo em Configurações › API e agentes.
- Uma chave de API nova já nasce com as permissões de que toda ferramenta de design precisa, e Reservar Marks fica desativado, a menos que você ative.
- Quando o Claude compõe um design com as ferramentas do Gradiently, não gasta nenhum crédito de IA do Gradiently, e todo design salvo abre no Studio.
- Uma chave só funciona no espaço de trabalho que a emitiu, age como o dono ou administrador que a criou e pode ser revogada na hora.

Para configurar o conector **Gradiently para Claude**, aponte o Claude para o servidor MCP hospedado do Gradiently em `https://gradiently.design/api/mcp`. No app do Claude, adicione-o como conector personalizado e entre no Gradiently. No Claude Code, adicione-o pelo terminal com uma chave de API com escopo. Nos dois casos, o Claude passa a buscar Marks, ler seu kit de marca e criar designs que ficam salvos no seu espaço de trabalho e abrem no Studio, com cada palavra ainda editável.

O MCP, o Model Context Protocol, é o padrão aberto que permite ao Claude usar ferramentas de verdade. [O que é MCP](https://gradiently.design/pt-br/guide/what-is-mcp) explica de forma simples, e o protocolo em si está documentado em [modelcontextprotocol.io](https://modelcontextprotocol.io).

## Qual caminho usar para conectar o Claude

| Onde você usa o Claude | Como ele se conecta | Login |
| --- | --- | --- |
| O app do Claude, na web ou no computador | Conector personalizado | OAuth: entre no Gradiently e escolha um espaço de trabalho |
| Claude Code no seu terminal | Servidor MCP remoto por HTTP | Uma chave de API com escopo no cabeçalho Authorization |
| Outros clientes MCP | Servidor remoto com cabeçalho personalizado | Uma chave de API com escopo |

Mesmo servidor, mesmas ferramentas, mesmas permissões. Só muda a forma como o Claude prova quem é.

Qualquer que seja o caminho, você precisa ser **dono ou administrador** do espaço de trabalho no Gradiently. Editores e leitores não podem conectar assistentes nem criar chaves.

## Conecte o app do Claude com um conector personalizado

1. **Abra as configurações de conectores do Claude** Adicione um conector personalizado. Quais planos do Claude permitem conectores personalizados é decisão da Anthropic, então consulte a ajuda do Claude se não encontrar a opção. [Conectores do Claude](https://gradiently.design/pt-br/guide/claude-connectors) explica o recurso.
2. **Cole o endereço do servidor** Chame de Gradiently e use `https://gradiently.design/api/mcp`. Escolha o login por OAuth.
3. **Entre e escolha um espaço de trabalho** Na janela do Gradiently, escolha o espaço de trabalho em que o Claude deve atuar e leia as permissões em **Permitir que este assistente possa**.
4. **Permita e confira** Escolha **Permitir conexão**. De volta ao Claude, peça que ele liste as ferramentas do Gradiently para confirmar.

O acesso se renova automaticamente por até 30 dias, depois dos quais você reconecta. Um conector personalizado já é seu para usar de imediato; uma vaga no diretório público do Claude é outra coisa e precisa da revisão da Anthropic.

## Conecte o Claude Code com uma chave de API com escopo

O Claude Code usa uma chave em vez de login. Crie uma no Gradiently em **Configurações › API e agentes**: escolha o espaço de trabalho, dê um nome que diga onde ela vai ficar (*Claude Code, notebook*), marque o que ela pode fazer e selecione **Criar chave**. A chave aparece uma única vez, então copie para o seu gerenciador de senhas na hora.

```bash
export GRADIENTLY_API_KEY="gr_live_…"

claude mcp add --transport http gradiently https://gradiently.design/api/mcp \
  --header "Authorization: Bearer $GRADIENTLY_API_KEY"
```

Guarde a chave numa variável de ambiente, para que ela nunca vá parar no histórico do shell nem num arquivo versionado. Inicie uma nova sessão e peça ao Claude que liste as ferramentas do Gradiently.

Outros clientes que leem um arquivo JSON costumam aceitar o mesmo servidor e o mesmo cabeçalho. As Configurações mostram um trecho pronto em **Conectar um cliente MCP**.

```json
{
  "mcpServers": {
    "gradiently": {
      "url": "https://gradiently.design/api/mcp",
      "headers": { "Authorization": "Bearer gr_live_…" }
    }
  }
}
```

O formato JSON que muitos clientes MCP aceitam. Confira a documentação do seu cliente para ver o formato exato.

## Como escolher as permissões da chave

Cada permissão é um escopo. Uma chave nova já vem com cinco que cobrem todas as ferramentas de design, então a maioria das pessoas não muda nada. Acrescente as outras só quando o Claude realmente precisar.

| Permissão nas Configurações | Ativada por padrão | O que permite |
| --- | --- | --- |
| Ler designs | Sim | Ler marcas, designs e uploads e renderizar designs |
| Criar e editar designs | Sim | Criar, alterar e redimensionar designs, enviar imagens, usar o Designer |
| Buscar Marks | Sim | Buscar no Mercado e ler qualquer Mark público |
| Ler o espaço de trabalho | Sim | Ler o espaço de trabalho e seus membros |
| Gerar marcas | Sim | Gerar direções de marca a partir de um nome e uma descrição |
| Editar marcas | Não | Alterar o perfil e o Mark de uma marca, criar marcas |
| Reservar Marks | Não | Reservar um Mark disponível para quem criou a chave |
| Convidar membros | Não | Enviar convites para entrar no espaço de trabalho |

Conceda só o que o trabalho exige. Os escopos de uma chave não podem ser alterados depois, então crie uma chave nova se o trabalho mudar.

## O que o Claude pode fazer depois de conectado

O Claude trabalha pelas mesmas ações que você tem no produto. Ele pode buscar no Mercado por nome, palavras de cor ou código; ler o perfil, a voz e as fontes da sua marca; desenhar um design original, olhar a imagem renderizada e refinar; preencher um dos templates do Gradiently; mudar as palavras de um design salvo; fazer cópias redimensionadas; e renderizar um design em PNG ou PDF. Quando o Claude compõe o design sozinho, o Gradiently **não cobra créditos de IA**. Se você pedir que ele passe o trabalho ao Designer do Gradiently, isso usa créditos como no Studio.

O Claude Code facilita um tipo específico de tarefa. Digamos que você mantém um blog e quer uma imagem de link para cada post. Peça: *“Para cada post em /content, faça uma prévia de link de 1200×630 na nossa marca com o título do post e depois renderize cada uma como PNG em /public/og.”* O Claude desenha cada imagem no Gradiently, confere e grava os arquivos onde o seu site espera. [Tamanho da imagem Open Graph](https://gradiently.design/pt-br/guide/open-graph-image-size) explica por que 1200×630.

Uma imagem larga de prévia de link de blog com o título de um artigo de engenharia sobre um fundo em gradiente

Uma prévia de link de 1200×630 desenhada pelo servidor MCP do Gradiently e renderizada direto na pasta de um site.

> **Permita chamadas de ferramenta longas** A maioria das ferramentas responde em segundos, mas renderizar e inspecionar um design pode levar até três minutos, e um trabalho passado ao Designer, cerca de cinco. Se o seu cliente tiver uma configuração de tempo limite para ferramentas, aumente.

## Prompts que funcionam bem com o Claude

- *“Leia o perfil da nossa marca e depois faça um post de LinkedIn e um post no X anunciando nosso novo escritório em Bristol.”*
- *“Encontre três Marks escuros com material acetinado, próximos de um verde-azulado profundo, e me dê os códigos.”*
- *“Pegue o anúncio de ontem e faça a partir dele um story e uma miniatura do YouTube.”*
- *“Mude a data do pôster do evento para 14 de novembro e renderize em PDF.”*

Quanto melhor o seu kit de marca, menos você precisa dizer em cada pedido; [voz da marca para IA](https://gradiently.design/pt-br/guide/brand-kit-voice) mostra o que preencher. Para mais ideias voltadas a posts de redes sociais, veja [Claude para redes sociais](https://gradiently.design/pt-br/guide/claude-social-media-posts) e, para um panorama maior, [design com o Claude](https://gradiently.design/pt-br/guide/design-with-claude).

## Como manter a conexão segura

### Uma chave pode

- Atuar no único espaço de trabalho que a emitiu
- Fazer o que o papel de quem a criou e seus escopos permitem
- Criar designs que pertencem ao espaço de trabalho
- Mostrar nas Configurações quando foi usada pela última vez

### Uma chave nunca pode

- Acessar outro espaço de trabalho, mesmo um do qual você faça parte
- Pagar nada nem acessar a cobrança
- Transferir, listar ou liberar um Mark
- Criar ou gerenciar outras chaves

Se uma chave vazar ou você deixar de usá-la, selecione **Revogar** ao lado dela em **Configurações › API e agentes** e ela para de funcionar na hora. As chaves também deixam de funcionar quando quem as criou sai do espaço de trabalho ou perde o papel de administrador. Usa o ChatGPT também? [Gradiently no ChatGPT](https://gradiently.design/pt-br/guide/design-with-chatgpt-app) tem a própria configuração, e a referência completa das ferramentas está na [documentação para desenvolvedores](https://gradiently.design/pt-br/developers/mcp).

## FAQ

### Qual é o endereço do servidor MCP do Gradiently para o Claude?

`https://gradiently.design/api/mcp`. No app do Claude, use como conector personalizado com OAuth; no Claude Code, adicione com a sua chave de API no cabeçalho Authorization.

### Preciso de uma chave de API para usar o Gradiently no Claude?

No app do Claude não, que entra com OAuth. O Claude Code e a maioria dos outros clientes MCP precisam de uma chave com escopo em Configurações › API e agentes.

### O Claude gasta meus créditos de IA do Gradiently?

Não quando ele compõe os designs sozinho com as ferramentas do Gradiently. Passar um trabalho ao Designer do Gradiently usa créditos.

### O Claude pode reservar um Mark para mim?

Só com uma chave que tenha a permissão Reservar Marks, que vem desativada por padrão. Qualquer reserva que exija pagamento ainda precisa ser concluída no Gradiently.

### Por que o Claude diz que não consegue autenticar?

A chave foi digitada errada ou revogada, ou quem a criou deixou de ser dono ou administrador do espaço de trabalho. Crie uma chave nova e atualize o seu cliente.