> ## 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.

# Criar ativos

> Crie ativos de imagem, vídeo, gráficos vetoriais, animação e áudio, e siga os guias oficiais para cada fluxo de trabalho.

export const CreateAssetsCover = () => <div className="chat-mkt" role="img" aria-label="A creative canvas with image, video, vector, and audio elements" style={{
  margin: "28px 0 42px",
  borderTop: 0,
  paddingTop: 0
}}>
    <div className="chat-use-case-visual" style={{
  aspectRatio: "auto",
  minHeight: "clamp(220px, 34vw, 320px)",
  overflow: "hidden",
  background: "radial-gradient(circle at 50% -16%, rgba(255,255,255,.82), transparent 43%), radial-gradient(circle at 4% 96%, rgba(255,184,146,.48), transparent 38%), linear-gradient(140deg, #ff764d, #ff3c00 60%, #c92d00)"
}}>
      <div aria-hidden="true" style={{
  position: "absolute",
  inset: 0,
  background: "linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 49%, rgba(111,24,0,.2))"
}} />
      <div aria-hidden="true" style={{
  position: "relative",
  zIndex: 1,
  display: "grid",
  width: "100%",
  minHeight: "inherit",
  placeItems: "center",
  padding: "clamp(14px, 3vw, 28px)",
  boxSizing: "border-box"
}}>
        <div style={{
  position: "absolute",
  left: "clamp(14px, 9%, 88px)",
  top: "22%",
  width: "clamp(44px, 9vw, 72px)",
  height: "clamp(38px, 8vw, 62px)",
  padding: 7,
  border: "1px solid rgba(255,255,255,.56)",
  borderRadius: 14,
  background: "rgba(255,255,255,.16)",
  boxShadow: "0 12px 24px rgba(55,27,18,.15)",
  backdropFilter: "blur(5px)",
  boxSizing: "border-box"
}}>
          <span style={{
  position: "absolute",
  top: "24%",
  right: "21%",
  width: 5,
  height: 5,
  borderRadius: 999,
  background: "rgba(255,255,255,.86)"
}} />
          <span style={{
  position: "absolute",
  left: "-5%",
  right: "-5%",
  bottom: "-16%",
  height: "68%",
  transform: "rotate(27deg)",
  borderTop: "1px solid rgba(255,255,255,.68)",
  background: "rgba(255,255,255,.18)"
}} />
        </div>
        <div style={{
  position: "absolute",
  right: "clamp(14px, 9%, 88px)",
  top: "22%",
  display: "grid",
  width: "clamp(44px, 9vw, 72px)",
  height: "clamp(38px, 8vw, 62px)",
  placeItems: "center",
  border: "1px solid rgba(255,255,255,.56)",
  borderRadius: 14,
  background: "rgba(255,255,255,.16)",
  boxShadow: "0 12px 24px rgba(55,27,18,.15)",
  backdropFilter: "blur(5px)"
}}>
          <span style={{
  width: 0,
  height: 0,
  marginLeft: 4,
  borderTop: "10px solid transparent",
  borderBottom: "10px solid transparent",
  borderLeft: "15px solid rgba(255,255,255,.86)"
}} />
        </div>
        <div style={{
  position: "absolute",
  left: "clamp(22px, 14%, 128px)",
  bottom: "clamp(18px, 10%, 46px)",
  display: "grid",
  width: "clamp(38px, 7vw, 58px)",
  height: "clamp(38px, 7vw, 58px)",
  placeItems: "center",
  border: "1px solid rgba(255,255,255,.52)",
  borderRadius: 15,
  background: "rgba(255,255,255,.15)",
  boxShadow: "0 12px 24px rgba(55,27,18,.13)",
  backdropFilter: "blur(5px)"
}}>
          <svg viewBox="0 0 24 24" width="56%" fill="none" stroke="rgba(255,255,255,.86)" strokeWidth="1.6">
            <path d="M5 19 12 4l7 15H5Z" />
            <circle cx="12" cy="12" r="2.2" fill="rgba(255,255,255,.26)" />
          </svg>
        </div>
        <div style={{
  position: "absolute",
  right: "clamp(22px, 14%, 128px)",
  bottom: "clamp(18px, 10%, 46px)",
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  gap: 3,
  width: "clamp(40px, 8vw, 62px)",
  height: "clamp(38px, 7vw, 58px)",
  border: "1px solid rgba(255,255,255,.52)",
  borderRadius: 15,
  background: "rgba(255,255,255,.15)",
  boxShadow: "0 12px 24px rgba(55,27,18,.13)",
  backdropFilter: "blur(5px)"
}}>
          {[10, 20, 14, 25, 12].map((height, index) => <span key={index} style={{
  width: 3,
  height,
  borderRadius: 999,
  background: index === 3 ? "rgba(255,255,255,.88)" : "rgba(255,255,255,.52)"
}} />)}
        </div>
        <div style={{
  position: "relative",
  display: "grid",
  width: "clamp(174px, 34vw, 280px)",
  minWidth: "min(54%, 250px)",
  minHeight: "clamp(154px, 26vw, 212px)",
  padding: "clamp(12px, 2vw, 18px)",
  border: "1px solid rgba(255,255,255,.66)",
  borderRadius: 22,
  background: "linear-gradient(145deg, rgba(255,255,255,.42), rgba(255,255,255,.12))",
  boxShadow: "0 22px 42px rgba(65,21,7,.24)",
  backdropFilter: "blur(8px)",
  boxSizing: "border-box"
}}>
          <div style={{
  display: "flex",
  alignItems: "center",
  gap: 6
}}>
            {[0, 1, 2].map(dot => <span key={dot} style={{
  width: 7,
  height: 7,
  borderRadius: 999,
  background: dot === 0 ? "rgba(255,255,255,.9)" : "rgba(255,255,255,.36)"
}} />)}
          </div>
          <div style={{
  display: "grid",
  gridTemplateColumns: "1.16fr .84fr",
  gap: 8,
  minHeight: "clamp(105px, 18vw, 150px)",
  marginTop: "clamp(13px, 2.3vw, 19px)"
}}>
            <div style={{
  position: "relative",
  overflow: "hidden",
  border: "1px solid rgba(255,255,255,.48)",
  borderRadius: 10,
  background: "linear-gradient(145deg, rgba(255,255,255,.24), rgba(255,255,255,.08))"
}}>
              <span style={{
  position: "absolute",
  left: "12%",
  bottom: "12%",
  width: "76%",
  height: "54%",
  transform: "skewY(-27deg)",
  borderTop: "1px solid rgba(255,255,255,.68)",
  background: "rgba(255,255,255,.16)"
}} />
            </div>
            <div style={{
  display: "grid",
  gap: 8
}}>
              <span style={{
  border: "1px solid rgba(255,255,255,.42)",
  borderRadius: 9,
  background: "rgba(255,255,255,.16)"
}} />
              <span style={{
  border: "1px solid rgba(255,255,255,.32)",
  borderRadius: 9,
  background: "rgba(255,255,255,.08)"
}} />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>;

<CreateAssetsCover />

Peça ao Replit para criar a mídia de que seu trabalho precisa e depois refine o resultado na Conversa ou na superfície do produto responsável por esse fluxo de trabalho. Escolha o caminho de ativo que corresponde ao resultado pretendido.

## Escolha um tipo de ativo

<section className="chat-mkt chat-workflow-grid has-visuals catalog-three-up">
  <a className="chat-example has-visual" href="/pt/features/agent/image-generation">
    <div className="chat-use-case-visual palette-blush">
      <div className="chat-use-case-window">
        <i />

        <i />

        <i />

        <b />

        <b />

        <b />
      </div>

      <em>
        <Icon icon="image" size={24} color="#ffffff" />
      </em>
    </div>

    <span>
      <Icon icon="image" size={19} />
    </span>

    <div className="chat-card-title">Gerar imagens</div>

    <p>
      Crie imagens, ilustrações, planos de fundo, ícones e outros conteúdos
      visuais personalizados para um Project.
    </p>

    <div className="chat-card-link">Abrir Image Generation →</div>
  </a>

  <a className="chat-example has-visual" href="/pt/design/toolbar#generate">
    <div className="chat-use-case-visual palette-stone">
      <div className="chat-use-case-window">
        <i />

        <i />

        <i />

        <b />

        <b />

        <b />
      </div>

      <em>
        <Icon icon="photo-film" size={24} color="#ffffff" />
      </em>
    </div>

    <span>
      <Icon icon="photo-film" size={19} />
    </span>

    <div className="chat-card-title">Gerar clipes de vídeo</div>

    <p>
      Crie clipes de movimento curtos e animações com as ferramentas de Gerar
      mídia do Replit Design.
    </p>

    <div className="chat-card-link">Abrir o guia de Design →</div>
  </a>

  <a className="chat-example has-visual" href="/pt/design/toolbar#generate">
    <div className="chat-use-case-visual palette-orange">
      <div className="chat-use-case-window">
        <i />

        <i />

        <i />

        <b />

        <b />

        <b />
      </div>

      <em>
        <Icon icon="bezier-curve" size={24} color="#ffffff" />
      </em>
    </div>

    <span>
      <Icon icon="bezier-curve" size={19} />
    </span>

    <div className="chat-card-title">Gerar gráficos vetoriais</div>

    <p>
      Crie ícones SVG, logotipos, diagramas e ilustrações estilizadas no Replit
      Design.
    </p>

    <div className="chat-card-link">Abrir o guia de Design →</div>
  </a>

  <a className="chat-example has-visual" href="/pt/features/artifact-types/animated-videos">
    <div className="chat-use-case-visual palette-ink">
      <div className="chat-use-case-window">
        <i />

        <i />

        <i />

        <b />

        <b />

        <b />
      </div>

      <em>
        <Icon icon="film" size={24} color="#ffffff" />
      </em>
    </div>

    <span>
      <Icon icon="film" size={19} />
    </span>

    <div className="chat-card-title">Criar um vídeo animado</div>

    <p>
      Construa motion graphics programáticos por meio de uma Conversa e exporte
      o resultado como vídeo.
    </p>

    <div className="chat-card-link">Abrir Animated Videos →</div>
  </a>

  <a className="chat-example has-visual" href="/pt/features/agent/audio-generation">
    <div className="chat-use-case-visual palette-blush">
      <div className="chat-use-case-window">
        <i />

        <i />

        <i />

        <b />

        <b />

        <b />
      </div>

      <em>
        <Icon icon="waveform" size={24} color="#ffffff" />
      </em>
    </div>

    <span>
      <Icon icon="waveform" size={19} />
    </span>

    <div className="chat-card-title">Gerar áudio</div>
    <p>Crie música, efeitos sonoros ou narração falada para um app.</p>
    <div className="chat-card-link">Abrir Audio Generation →</div>
  </a>
</section>

A criação de ativos produz um resultado imediato. Para trabalhos que devem se repetir em uma agenda, continue para [Executar tarefas de rotina](/pt/chat/routines).

Clipes de vídeo gerados e Animated Videos usam fluxos de trabalho diferentes. Os Animated Videos são motion graphics programáticos que você pode exportar como MP4. Para um exemplo de ativos visuais, veja [Crie sua primeira tela](/pt/design/design-your-first-screen).

## Traga informações atualizadas

O Web Search não cria um ativo. Use-o quando uma imagem, clipe de áudio, vídeo ou gráfico precisar ser embasado por informações atuais e, em seguida, peça ao Replit para criar o ativo apropriado a partir dessa direção.

<section className="chat-mkt chat-workflow-grid has-visuals">
  <a className="chat-example has-visual" href="/pt/features/agent/web-search">
    <div className="chat-use-case-visual palette-stone">
      <div className="chat-use-case-window">
        <i />

        <i />

        <i />

        <b />

        <b />

        <b />
      </div>

      <em>
        <Icon icon="globe" size={24} color="#ffffff" />
      </em>
    </div>

    <span>
      <Icon icon="globe" size={19} />
    </span>

    <div className="chat-card-title">Pesquisar na web</div>

    <p>
      Reúna informações atuais e fontes citadas antes de criar um ativo.
    </p>

    <div className="chat-card-link">Abrir Web Search →</div>
  </a>
</section>