> ## 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 seu design system

> Extraia suas cores, tipografia e tokens para um design system salvo e coloque os apps existentes sob ele.

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>;
};

Sua marca está em uma pasta do Drive, em um arquivo do Figma ou em um design de que você
já gosta. Transforme isso em um design system salvo no seu workspace: cores por função,
uma escala tipográfica, tokens e alguns componentes de exemplo. O trabalho novo já começa
alinhado à marca, e você pode reconstruir os apps existentes sob o mesmo sistema. Aplicar
um sistema a um app que você já publicou é uma reconstrução de verdade, não uma troca de
folha de estilos.

## Ideal para

* Designers de produto que precisam de uma única fonte de verdade antes de projetar as próximas cinco páginas.
* Fundadores cujos apps foram se afastando uns dos outros e precisam deixar todos com o mesmo visual.

## Conectores

<Connectors
  items={[
{
  id: "google-drive",
  name: "Google Drive",
  why: "Logotipo, cores, tipografia e diretrizes da marca",
},
{ id: "figma", name: "Figma", why: "Um design existente do qual extrair" },
]}
/>

## Antes de começar

Reúna tudo o que define sua marca, onde quer que esteja hoje: arquivos da marca, um design
de que você já gosta, seu site ou um arquivo do Figma. Conecte o Drive se seu logotipo,
cores ou tipografia estiverem armazenados lá. Tenha em mãos uma URL do Figma, uma URL de
site ou um `DESIGN.md` existente, se você tiver um.

## Dê o prompt ao agente

<AiPrompt>
  Crie um design system para \[marca] a partir dos arquivos da marca nesta pasta
  do Google Drive \[link] e neste arquivo do Figma \[URL]. Extraia a paleta por
  função, a escala tipográfica e os tokens. Inclua o logotipo.
</AiPrompt>

## O que esperar

O Agent transforma a fonte que você forneceu em um [guia de estilo vivo](/pt/design/design-md): suas
cores com uma função para cada uma, uma escala tipográfica, os tokens que o restante do
sistema referencia, dois ou três componentes de exemplo e os recursos de marca que você
forneceu. Revise e selecione **Save design system** para mantê-lo no seu workspace. A
partir daí, o trabalho novo é gerado alinhado à marca desde o primeiro frame.

Para colocar um app que você já criou sob o sistema, selecione o destino e
[aplique o sistema](/pt/design/apply-design-system).

## Adapte ao seu caso

<AiPrompt>
  Amplie o design system com mais componentes de exemplo: botões, campos de
  formulário, navegação, cards, tabelas e estados vazios.
</AiPrompt>

<AiPrompt>
  Adicione um modo escuro ao sistema: os mesmos tokens, um segundo conjunto de
  valores de cor por função.
</AiPrompt>

## Solução de problemas

<AccordionGroup>
  <Accordion title="O sistema não parece com sua marca">
    Aponte para uma fonte em vez de descrevê-la. Uma pasta de marca no Drive,
    uma URL do Figma, um site publicado ou um `DESIGN.md` funcionam como
    entrada.
  </Accordion>

  <Accordion title="Aplicar o sistema está mais lento do que você esperava">
    Aplicar um sistema a um trabalho existente gera novamente a camada de
    estilo em vez de trocar uma folha de estilos. O aviso de tempo e créditos
    antes de começar é normal.
  </Accordion>

  <Accordion title="Novas edições voltam ao estilo antigo">
    As edições seguintes devem continuar usando o sistema. Quando notar o
    desvio, avise no chat e cite a tela.
  </Accordion>

  <Accordion title="Você não consegue reutilizar o sistema em outro projeto">
    Salve-o primeiro. Um guia de estilo não salvo permanece no projeto em que
    foi gerado.
  </Accordion>
</AccordionGroup>

## Relacionados

<CardGroup cols={2}>
  <Card title="Projetar uma landing page" href="/pt/use-cases/design-landing-page">
    Coloque o sistema salvo para trabalhar em uma página de lista de espera ou de lançamento.
  </Card>

  <Card title="Redesenhar seu site existente" href="/pt/use-cases/redesign-your-website">
    Extraia o sistema do site que você já tem.
  </Card>
</CardGroup>