# Design com o Claude: visuais da sua marca com o Gradiently

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

O Claude entende bem o que você quer dizer. Conectado ao Gradiently, ele também faz: designs reais e editáveis da sua marca, esperando no Studio pelo seu toque final.

## The short version

- O Claude faz designs de verdade quando está conectado a uma ferramenta de design por MCP, em vez de só descrever como um design deveria ser.
- Conectado ao Gradiently, o Claude pode buscar Marks, ler a sua marca, criar e editar designs, fazer cópias em outros tamanhos e gerar opções de marca.
- Os designs que o Claude faz no Gradiently são designs editáveis comuns que abrem no Studio, então você pode refiná-los à mão.
- A conexão usa uma chave de API com escopo criada nas Configurações do Gradiently, então o Claude só pode o que essa chave permite, e a chave pode ser revogada a qualquer momento.
- Os melhores resultados vêm de um kit de marca preenchido e de pedidos específicos que citam o formato, a mensagem e o público.

O trabalho de **design com o Claude** muda quando ele pode usar uma ferramenta de design de verdade. Sozinho, o Claude sugere títulos e descreve um layout. Conectado ao Gradiently por MCP, ele faz o próprio design: escolhe um Mark, diagrama as suas palavras na sua marca, produz os tamanhos de que você precisa e entrega um link para um design editável no Studio. Você descreve; ele monta; você finaliza.

Este guia mostra como isso funciona na prática, o que pedir e como manter a conexão segura. Se o MCP é novidade para você, comece por [o que é MCP](https://gradiently.design/pt-br/guide/what-is-mcp).

## O que o Claude faz no Gradiently

Depois de conectado, o Claude enxerga as ferramentas do Gradiently e escolhe a certa para cada pedido. Você fala normalmente; ele traduz as suas palavras em ações.

| Você pede | O que acontece |
| --- | --- |
| “Ache Marks calmos em verde-azulado profundo” | O Claude busca no Mercado e mostra os Marks mais próximos, com os códigos deles |
| “Faça um story avisando que abrimos até mais tarde às sextas” | O designer do Gradiently lê o perfil da sua marca e o Mark, diagrama o story e o salva; você recebe um link do Studio |
| “Agora faça um post quadrado e um cabeçalho do X a partir dele” | As cópias são redistribuídas para cada tamanho, não esticadas |
| “Troque o título para Aberto até meia-noite” | O texto muda e o layout continua |
| “Somos uma padaria nova chamada Hart & Hollow: mostre opções de marca” | São geradas candidatas de marca a partir da sua descrição, e você escolhe uma para adotar |
| “Crie um Mark como a primeira luz sobre papel osso” | Uma nova receita de Mark é criada e pode ser salva como seu rascunho privado |

Todo design é salvo no seu workspace e abre no Studio, onde você pode alterar qualquer coisa à mão.

Nos bastidores, os pedidos de design vão para o Designer, a IA do próprio Gradiently, que lê o perfil da sua marca e o seu Mark antes de compor e depois revisa o próprio layout quanto a margens, colisões e contraste. [Trabalhar com o Designer](https://gradiently.design/pt-br/guide/designer-ai-guide) mostra o que ele pode e não pode fazer.

## Como conectar o Claude ao Gradiently

1. **Crie uma chave** No Gradiently, abra Configurações e depois API e agentes. Dê à chave o nome de onde vai usá-la, como Claude Code, e escolha o que ela pode fazer. Só proprietários e administradores do workspace podem criar chaves.
2. **Copie uma vez** A chave é mostrada uma única vez. Salve-a num gerenciador de senhas.
3. **Adicione o servidor ao Claude** Aponte o seu cliente do Claude para `https://gradiently.design/api/mcp`, enviando a chave como token Bearer. O lugar exato para adicioná-lo muda entre os apps do Claude; [a documentação para desenvolvedores](https://gradiently.design/pt-br/developers/mcp) cobre cada um.
4. **Peça algo pequeno** Experimente “liste os meus designs” ou “ache um Mark em laranja quente” para confirmar a conexão antes de pedidos maiores.

```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"
```

No Claude Code, um comando adiciona a conexão. Outros clientes usam o mesmo endereço e o mesmo cabeçalho nas suas próprias configurações.

[Conectar um assistente de IA](https://gradiently.design/pt-br/guide/connect-ai-assistant) traz uma configuração em linguagem simples também para outros clientes MCP.

## Um passo a passo: um anúncio, três formatos

Digamos que você tem um barzinho e quer avisar que vai abrir até mais tarde. Eis o trabalho todo como uma conversa. Primeiro: “Faça um story de Instagram avisando que abrimos até meia-noite às sextas, a partir desta semana. Calmo, sem gritaria.” O Claude pergunta ao designer do Gradiently, que lê a sua marca, usa o seu Mark e devolve um link. Você abre e gosta, mas quer outra linha, então diz: “Troque a linha pequena para Cozinha aberta até as onze.” Depois: “Faça um post quadrado e um cabeçalho do X a partir dele.”

Um story vertical anunciando Aberto até meia-noite às sextas sobre um fundo de gradiente

O story que o Claude pediu, no Mark da própria marca…

Um cabeçalho largo do X com o mesmo anúncio sobre um gradiente

…e a cópia do cabeçalho do X, redistribuída para o formato largo em vez de esticada.

Três formatos, um só visual, alguns minutos. Cada um é um design normal no seu workspace, então você pode ajustar um título ou trocar uma foto no Studio antes de exportar. [Um visual, todos os tamanhos](https://gradiently.design/pt-br/guide/one-look-every-size) explica como as cópias são diagramadas para cada formato.

## Como pedir designs melhores ao Claude

### Vago

- Faça um post sobre o nosso evento
- Algo que chame a atenção
- Use cores bonitas

### Específico

- Um story anunciando a nossa festa de solstício no terraço, 21 de junho, do pôr do sol ao nascer do sol
- Calmo e confiante; a data deve ser a segunda coisa que as pessoas leem
- Use o Mark da nossa marca; mantenha as palavras na nossa voz

- **Preencha antes o kit de marca.** Logotipos, cores, fontes, para quem a marca é e como ela soa. O designer o lê antes de cada design. Veja [como configurar o kit de marca](https://gradiently.design/pt-br/guide/brand-kit-setup).
- **Diga o formato.** Story, post quadrado, cabeçalho do X, miniatura do YouTube. Cada um é diagramado de um jeito.
- **Dê as palavras reais.** Datas, preços e nomes, exatamente como devem aparecer.
- **Diga a ordem.** O que as pessoas devem ler primeiro, em segundo e em terceiro.
- **Edite, não recomece.** Peça uma mudança de cada vez num design de que você já gosta em boa parte.

## Como manter a conexão segura

O Claude só pode o que a chave dele permite. Escolha o menor conjunto de permissões para o que você quer: ler e criar designs e buscar Marks cobre a maior parte do trabalho de design. Deixe a reserva desligada, a menos que queira especificamente que o Claude reserve Marks por você. Publicar um link de compartilhamento é sempre um passo explícito, e os designs que você não compartilhou continuam privados. Uma chave nunca transfere a propriedade de um Mark para ninguém.

> **Trate a chave como uma senha** Quem tiver a chave pode agir no seu workspace dentro das permissões dela. Mantenha-a fora de arquivos compartilhados e capturas de tela e revogue-a em Configurações na hora se ela vazar. Chaves revogadas param de funcionar imediatamente.

O Claude e o Gradiently fazem cada um o que sabem fazer: o Claude entende o que você quer dizer, o Gradiently guarda a sua marca e faz o layout cuidadoso, e você dá a palavra final. Para uma visão maior de trabalhar assim, leia [um fluxo de identidade de marca com IA](https://gradiently.design/pt-br/guide/ai-brand-identity).

## FAQ

### O Claude consegue fazer designs?

Sim, quando está conectado a uma ferramenta de design por MCP. Conectado ao Gradiently, ele cria e edita designs reais que abrem no Studio, em vez de só descrevê-los.

### Como conecto o Claude ao Gradiently?

Crie uma chave em Configurações do Gradiently, em API e agentes, e depois adicione https://gradiently.design/api/mcp ao seu cliente do Claude com a chave como token Bearer. No Claude Code, um comando claude mcp add faz isso.

### Os designs do Claude combinam com a minha marca?

O designer do Gradiently lê o perfil da sua marca e o Mark antes de cada design, então preencher o kit de marca, com cores, fontes e voz, faz os resultados combinarem bem mais.

### O Claude pode reservar Marks ou compartilhar os meus designs sem pedir?

Só se a chave dele tiver essa permissão. Reservar exige uma permissão separada que você pode deixar desligada, e um link de compartilhamento só é publicado quando se pede explicitamente a uma ferramenta que publique um.

### Posso editar o que o Claude faz?

Pode. Todo design é um design editável comum no seu workspace, então você pode alterar texto, layout, fotos e tamanhos no Studio.