> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Crie ícones e banners para redes sociais

> A partir do seu site e do Drive, gere ícones de perfil e banners de capa para cada rede, no tamanho certo.

export const Connectors = ({items}) => <div style={{
  margin: "8px 0 20px"
}}>
    <style>{`
      .connectors-list, .connectors-list * { margin-top: 0 !important; margin-bottom: 0 !important; }
      .connectors-row {
        display: flex !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 4px 0 !important;
        min-height: 0 !important;
        height: auto !important;
      }
      .connectors-row img {
        width: 20px !important;
        height: 20px !important;
        max-width: 20px !important;
        max-height: 20px !important;
        margin: 2px 0 0 !important;
        display: block !important;
      }
    `}</style>
    <div className="connectors-list">
      {items.map((item, i) => <div key={item.id} className="connectors-row" style={{
  borderTop: i === 0 ? "none" : "1px solid rgba(130,130,130,0.22)"
}}>
          <img src={`/images/connectors/${item.id}.svg`} alt="" width={20} height={20} />
          <div style={{
  minWidth: 0
}}>
            <div>
              <strong>{item.name}</strong>
              {item.why ? <span style={{
  opacity: 0.72
}}> · {item.why}</span> : null}
            </div>
            {item.auth === "api-key" ? <div style={{
  fontSize: "11.5px",
  lineHeight: 1.35,
  color: "#F26207",
  marginTop: "2px"
}}>
                Not a native connector. Agent will ask for your API key.
              </div> : null}
          </div>
        </div>)}
    </div>
  </div>;

export const AiPrompt = ({children}) => {
  return <CodeBlock className="relative block max-w-full overflow-x-hidden font-sans !whitespace-pre-wrap !break-words" style={{
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
      <div className="pr-7" style={{
    whiteSpace: "pre-wrap",
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
        {children}
      </div>
    </CodeBlock>;
};

A partir do seu site e dos arquivos de marca no Google Drive, gere ícones de perfil e banners
de capa para X, LinkedIn, Instagram, Facebook, TikTok e outras redes que você indicar. O
Agent usa os tamanhos e as áreas seguras atuais de cada plataforma, para que rostos,
logotipos e textos não sejam cortados no perfil publicado. Mantenha um único sistema visual e
exporte em PNG. Se uma rede precisar de um corte diferente, crie uma prancheta dedicada, sem
esticar a imagem.

## Ideal para

* Designers de marca que precisam de materiais de perfil e capa para várias redes de uma só vez.
* Profissionais de marketing que precisam de ícones e banners prontos para exportação, a partir de um logotipo e site já existentes.

## Conectores

<Connectors
  items={[
{
  id: "google-drive",
  name: "Google Drive",
  why: "Logotipo, cores e materiais de marca existentes",
},
]}
/>

## Antes de começar

Tenha a URL do site e um logotipo (ou pasta de marca) no Drive. Diga quais redes você precisa.
Se o logotipo for um wordmark (tipográfico), diga se o ícone deve ser um símbolo, uma letra
ou os dois.

## Prompt para o agente

<AiPrompt>
  A partir deste site \[URL] e dos arquivos de marca no Google Drive, crie um
  kit para redes sociais no Replit Design: ícones de perfil e banners de
  capa para X, LinkedIn, Instagram, Facebook e TikTok. Use os tamanhos
  oficiais atuais e as áreas seguras de cada rede, para que rostos,
  logotipos e textos não sejam cortados. Mantenha um único sistema visual.
  Exporte em PNG. Se uma rede precisar de um corte diferente, crie uma
  prancheta dedicada, sem esticar a imagem.
</AiPrompt>

## O que esperar

O Agent lê o site e os materiais do Drive, e depois cria uma prancheta por material, no
tamanho de pixel correto. Conjunto típico:

* **X:** perfil 400×400, cabeçalho 1500×500
* **LinkedIn:** perfil 400×400, banner 1584×396
* **Instagram:** perfil 320×320 (mais 1080×1080 e 1080×1920 se você quiser capas para posts e stories)
* **Facebook:** perfil 320×320, capa 820×312 (ou 1640×624 em 2×)
* **TikTok:** perfil 200×200, capa 1080×1920

Revise os cortes em um perfil redondo e em um banner largo antes de fazer o upload. Exporte
um ícone e um banner, coloque-os em um avatar redondo e em um cabeçalho largo, e verifique o
espaçamento em tamanho pequeno.

## Adapte ao seu caso

<AiPrompt>
  Adicione o YouTube (perfil 800×800, banner 2560×1440 com área segura de
  1546×423) e o Pinterest (perfil 165×165, pins de 1000×1500).
</AiPrompt>

<AiPrompt>
  Crie versões claras e escuras de cada ícone. Mantenha os banners na cor
  primária do site.
</AiPrompt>

## Solução de problemas

* **Logotipos ou rostos estão cortados:** revise cada material em um perfil redondo e em um banner largo. Peça ao Agent para respeitar as áreas seguras e criar uma prancheta dedicada para um corte diferente. Não estique a imagem.
* **Os tamanhos não correspondem à rede:** indique as redes que você precisa e peça ao Agent para usar os tamanhos oficiais atuais de cada uma. Confira novamente antes de fazer o upload; as redes mudam esses tamanhos com frequência.

## Relacionados

<CardGroup cols={2}>
  <Card title="Crie o design de uma landing page" href="/pt/use-cases/design-landing-page">
    Os mesmos arquivos de marca do Google Drive para uma página de lista de espera ou de lançamento.
  </Card>

  <Card title="Criar um pitch deck para investidores" href="/pt/use-cases/pitch-deck-from-website">
    Os mesmos arquivos de marca do Google Drive para slides.
  </Card>
</CardGroup>