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

# Revisar um site publicado

> Verifique links, responsividade, acessibilidade e decisões de design em qualquer site publicado, onde quer que esteja hospedado.

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

Seu site está no ar e ninguém olhou para ele com atenção desde o lançamento. Faça uma
revisão sob quatro ângulos: links que não resolvem mais, layouts que quebram no celular,
problemas de acessibilidade e decisões de design que deixaram de servir à página. A
revisão parte da URL pública, então não importa o que construiu o site nem onde ele está
hospedado. Se o site for um projeto do Replit, o Agent pode aplicar as correções além de
encontrá-las.

## Ideal para

* Designers que são responsáveis por um site publicado e precisam de uma revisão acionável, não de uma nota.
* Gerentes de produto que precisam saber o que regrediu desde o lançamento, página por página.

## Conectores

<Connectors
  items={[
{
  id: "slack",
  name: "Slack",
  why: "Onde cada revisão recorrente chega",
},
{ id: "notion", name: "Notion", why: "Um registro dos achados e do que você corrigiu" },
]}
/>

<Note>
  Nenhum dos conectores é necessário para a revisão em si. Conecte-os para a
  versão em rotina em [Adapte ao seu caso](#adapte-ao-seu-caso).
</Note>

## Antes de começar

Tenha a URL pública e nomeie as páginas mais importantes. Decida o que você quer desta
rodada: uma lista de achados para entregar a quem cuida do código ou correções aplicadas
diretamente. Só a segunda opção exige o site aberto como um projeto do Replit.

## Dê o prompt ao agente

<AiPrompt>
  Revise meu site publicado \[URL], um ângulo por vez. Comece pelos links que não
  resolvem mais, depois o layout no celular, depois a acessibilidade e por fim
  as decisões de design. Para cada achado, diga a página, o que está errado e o
  que você mudaria.
</AiPrompt>

## O que esperar

O Agent percorre os ângulos na ordem que você indicou e informa o que cobriu: as páginas
que visitou e os links que resolveu. Cada ângulo volta como uma seção própria. Cada achado
indica a página, o problema e a mudança a fazer. A revisão termina com a correção que o
Agent faria primeiro.

## Adapte ao seu caso

<AiPrompt>
  Crie uma rotina que roda toda segunda-feira às 9h. Abra cada página de \[URL],
  verifique se todos os links ainda resolvem e informe tudo o que mudou desde a
  semana passada. Publique os achados no Slack e registre-os no Notion.
</AiPrompt>

<AiPrompt>
  Dê a cada achado um nível de importância: bloqueia o visitante, atrasa o
  visitante ou é cosmético. Liste primeiro os bloqueadores.
</AiPrompt>

## Solução de problemas

<AccordionGroup>
  <Accordion title="Links atrás de um checkout ou de um modal nunca foram verificados">
    Uma varredura alcança os links presentes na página renderizada. Qualquer
    coisa que só apareça depois de um formulário, um modal ou uma etapa de
    pagamento precisa de uma verificação própria.
  </Accordion>

  <Accordion title="Os achados de layout e acessibilidade parecem superficiais">
    Nomeie as páginas e a largura de viewport que você quer verificar, em vez de
    deixar a amostra a cargo do Agent. Comece pelas páginas que concentram sua
    tarefa principal.
  </Accordion>

  <Accordion title="O feedback de design é genérico">
    Diga para que serve a página e para quem ela é. Sem o objetivo, a crítica
    recai em conselhos de layout que servem para qualquer site.
  </Accordion>
</AccordionGroup>

## Relacionados

<CardGroup cols={2}>
  <Card href="/pt/use-cases/redesign-your-website">
    Quando a revisão indica que o problema é o próprio design.
  </Card>

  <Card href="/pt/use-cases/create-design-system">
    Coloque tudo em um único sistema quando a revisão encontrar desvios.
  </Card>

  <Card href="/pt/features/publishing/seo-agent">
    Para um app publicado do Replit, audite rastreabilidade, metadados e marcação
    com correções de um clique.
  </Card>
</CardGroup>