Pachat.ai
Na primeira tarefa com o Claude Code, escolha algo com um resultado claro: corrigir o link About me na página inicial de um portfólio. O exercício usa apenas dois arquivos HTML e não exige publicar um site. As diferenças nos arquivos e o resultado dos cliques mostram se a alteração está correta.
As mensagens abaixo são instruções de prática que você pode copiar; as imagens mostram o site do exercício. As respostas do modelo podem variar, então avalie os arquivos salvos e o resultado dos cliques.
1. Instale, faça login e abra a pasta
Se o Claude Code já estiver instalado, pule para a verificação de versão. Caso contrário, execute no terminal o comando do seu sistema. Os dois métodos vêm do guia oficial da Anthropic.
macOS, Linux ou WSL:
curl -fsSL https://claude.ai/install.sh | bash
Windows PowerShell:
irm https://claude.ai/install.ps1 | iex
Execute o comando do Windows no PowerShell, não no CMD. Quando a instalação terminar, abra um novo terminal e execute:
claude --version
Resultado esperado: um número de versão do Claude Code. Se o comando não for encontrado, consulte primeiro a solução de problemas de instalação no guia oficial.
Crie uma pasta chamada claude-code-link-exercise no gerenciador de arquivos. No terminal, digite cd seguido do caminho completo da pasta; use aspas duplas se houver espaços. Substitua o caminho do exemplo pelo seu:
cd "/path/to/claude-code-link-exercise" claude
Na primeira execução, siga as instruções do navegador para entrar com uma conta que tenha acesso ao Claude Code. Se o navegador não abrir, copie o link conforme as instruções do terminal; veja o guia de autenticação. Confira se o diretório de trabalho da sessão é a pasta do exercício.
2. Crie as duas páginas e reproduza o problema
Com um editor de texto simples ou de código, crie os dois arquivos abaixo dentro da pasta. Eles devem se chamar exatamente index.html e about.html, sem .txt no final. Copie cada bloco completo para o arquivo correspondente e salve.
index.html:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Alex — Thoughtful design</title> <style> :root { color-scheme: light; --ink: #202722; --paper: #f5f3eb; --muted: #62695f; --line: #d8dcd0; } * { box-sizing: border-box; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: Arial, sans-serif; line-height: 1.6; } .wrap { max-width: 1060px; margin: auto; padding: 0 32px; } header { display: flex; justify-content: space-between; gap: 16px; padding: 28px 0; border-bottom: 1px solid var(--line); } .label { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .muted { color: var(--muted); } .hero { display: grid; grid-template-columns: 1.5fr 1fr; gap: 64px; align-items: center; padding: 76px 0; } h1 { margin: 14px 0 24px; font-size: clamp(42px, 6vw, 70px); line-height: 1.04; font-weight: 500; letter-spacing: -.05em; } .intro { max-width: 420px; font-size: 18px; } a { display: inline-block; margin-top: 12px; padding: 12px 24px; background: var(--ink); color: white; border-radius: 30px; text-decoration: none; font-weight: 700; } a:hover { background: #3d5340; } a:focus-visible { outline: 3px solid #717f38; outline-offset: 5px; } .note { padding: 32px; border-radius: 24px; background: #dfe7c9; transform: rotate(3deg); } .symbol { margin: 20px 0; font-size: 100px; line-height: 1; } .note p:last-child { margin-bottom: 0; font-size: 20px; } .work { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 22px 0 54px; } article { padding: 28px; border: 1px solid var(--line); border-radius: 18px; } h2 { margin: 12px 0 4px; font-size: 24px; font-weight: 500; } article p:last-child { margin-bottom: 0; } footer { padding: 22px 0; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); } @media (max-width: 650px) { .wrap { padding: 0 22px; } .hero { grid-template-columns: 1fr; gap: 36px; padding: 44px 0; } .work { grid-template-columns: 1fr; } .symbol { font-size: 72px; } } </style> </head> <body> <div class="wrap"> <header><span class="label">Alex / Product designer</span><span class="label muted">Fictional portfolio</span></header> <main> <section class="hero" aria-labelledby="intro-title"> <div><p class="label muted">Simple things, considered</p><h1 id="intro-title">Less friction.<br>More good days.</h1><p class="intro muted">I'm Alex. I explore clear, useful interfaces for the small things that fill our days.</p> <a href="about-me.html">About me</a></div> <aside class="note"><p class="label">A note to design by</p><div class="symbol" aria-hidden="true">✳</div><p>Make room for what matters.<br>Give every detail a purpose.</p></aside> </section> <p class="label muted">Selected concepts / 01—02</p> <section class="work" aria-label="Fictional design concepts"> <article><p class="label muted">01 / Planning</p><h2>A calmer Monday</h2><p class="muted">A weekly planner concept that helps people choose one clear next step.</p></article> <article><p class="label muted">02 / Reading</p><h2>Room to read</h2><p class="muted">A reading list concept with quiet typography and space to pause.</p></article> </section> </main> <footer>Alex is a fictional designer. These concepts are part of a coding exercise.</footer> </div> </body> </html>
about.html:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>About me — Alex</title> <style> :root { color-scheme: light; --ink: #202722; --paper: #f5f3eb; --muted: #62695f; --line: #d8dcd0; } * { box-sizing: border-box; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: Arial, sans-serif; line-height: 1.6; } .wrap { max-width: 860px; margin: auto; padding: 0 32px; } header { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--line); } .label { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } a { color: var(--ink); text-underline-offset: 5px; } a:hover { color: #3d5340; } a:focus-visible { outline: 3px solid #717f38; outline-offset: 5px; } main { padding: 66px 0; } h1 { margin: 14px 0 26px; font-size: clamp(44px, 8vw, 72px); line-height: 1.04; font-weight: 500; letter-spacing: -.05em; } .intro { max-width: 620px; font-size: 22px; } .muted { color: var(--muted); } .card { margin-top: 38px; padding: 28px 32px; background: #dfe7c9; border-radius: 22px; } h2 { margin-top: 0; font-size: 24px; font-weight: 500; } ul { margin-bottom: 0; padding-left: 20px; } li + li { margin-top: 10px; } footer { padding: 22px 0; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); } @media (max-width: 650px) { .wrap { padding: 0 22px; } main { padding: 44px 0; } .card { padding: 24px; } } </style> </head> <body> <div class="wrap"> <header><span class="label">Alex / Product designer</span><a href="index.html">Back to home</a></header> <main> <p class="label muted">A little context</p> <h1>About me</h1> <p class="intro">I'm Alex, a fictional product designer who likes making everyday tools easier to understand.</p> <p class="muted">My concept projects explore planning and reading. I start with a small question, sketch a clear path, and check the details that help someone take the next step.</p> <section class="card" aria-labelledby="approach-title"> <h2 id="approach-title">How I approach a problem</h2> <ul><li>Understand what someone is trying to do.</li><li>Make the next step easy to find.</li><li>Check that the little things work, too.</li></ul> </section> </main> <footer>This fictional portfolio was made for a coding exercise. It contains no real client work or contact details.</footer> </div> </body> </html>
Dê dois cliques em index.html para abrir no navegador e clique em About me. A página aponta para about-me.html, mas o arquivo existente é about.html, então o link não abre a página desejada. O texto do erro pode variar entre navegadores; o ponto importante é a diferença nos nomes.
No gerenciador de arquivos, copie index.html e dê à cópia o nome index.before.html. Esse é o backup original para comparação e restauração. Você não precisa instalar o Git.
3. Peça uma investigação sem alterações
Envie esta mensagem para a sessão do Claude Code que você abriu:
Examine apenas index.html e about.html na pasta atual do exercício. Não altere nenhum arquivo. O link About me da página inicial não abre. Identifique seu href, o arquivo de destino que realmente existe e a diferença entre eles. index.before.html é o backup original. Não o altere nem o trate como uma página que precisa de correção. Termine indicando a única alteração que você recomenda.
O que conferir: a resposta deve identificar about-me.html na página inicial e about.html como arquivo existente, limitando a correção ao href do link.
Se a sugestão for criar about-me.html, reescrever a página ou mudar os estilos, corrija o escopo primeiro. A página de destino correta já existe; não é necessário criar outra para o endereço errado. Investigar antes de limitar a alteração também segue o fluxo de correção de erros da Anthropic.
4. Corrija um link e confira as diferenças
Depois de confirmar a causa, envie:
Em index.html, altere somente o href do link About me de about-me.html para about.html. Não mude o texto do link, os estilos, outros textos, about.html nem index.before.html. Depois de salvar, compare index.before.html com index.html. Mostre o diff real dos arquivos e liste quais arquivos foram alterados. Não publique nem faça o deploy do site.
Se aparecer uma solicitação de permissão, confira se o arquivo e a ação correspondem ao escopo. A exibição de avisos depende do modo e das configurações de permissão. A ausência de um aviso não significa que nenhuma edição aconteceu.
A diferença importante deve ser apenas o nome do destino:
- <a href="about-me.html">About me</a></div> + <a href="about.html">About me</a></div>
Essa é a alteração permitida; o diff real também pode trazer números de linha e código ao redor que não foi alterado. Abra index.html no editor e procure href para conferir o endereço salvo. Abra o backup e confirme que o valor antigo continua lá. Se a página inteira ou outros arquivos também mudaram, o requisito de uma única alteração ainda não foi atendido.
5. Teste no navegador
Volte à página inicial e atualize, ou abra index.html de novo pela pasta do exercício. Clique em About me e confira cada item:
| Verificação | Resultado esperado |
|---|---|
| Clicar no link da página inicial | O arquivo local about.html abre |
| Conferir o conteúdo | O título About me aparece, sem erro de arquivo inexistente |
| Voltar ao início | Back to home abre index.html |
| Conferir o escopo | Só o destino em index.html mudou; o backup e a página de apresentação continuam iguais |
Se ainda não abrir, veja se a barra de endereço mostra o antigo about-me.html. Confirme que abriu esta pasta do exercício, não outra cópia. Confira também se o arquivo foi salvo por engano como about.html.txt e se os dois arquivos estão na mesma pasta.
Use o resultado real do clique como teste. O Claude Code dizer que corrigiu o link não substitui essa etapa.
6. Restaure o original e controle a alteração
Ao terminar, abra index.before.html no editor, copie todo o conteúdo de volta para index.html e salve. Atualize a página inicial e clique novamente em About me. O link quebrado original deve reaparecer, mostrando que você restaurou a versão anterior à edição.
Para manter a correção, troque de novo aquela única ocorrência de about-me.html por about.html e repita os testes no navegador. Concluir o exercício significa conseguir explicar a causa, confirmar uma alteração mínima e restaurar o original.
Em um projeto real que precise da revisão de outro agente, você pode compartilhar o código relevante e o diff. O guia existente de Claude Code no Pachat explica conexão e divisão de funções. Este exercício pode ficar inteiramente local.
Referências
- Início rápido do Claude Code, Anthropic (inglês).
- Autenticação, Anthropic (inglês).
- Configuração de permissões, Anthropic (inglês).
- Fluxos de trabalho comuns, Anthropic (inglês).
- Claude Code com outros agentes, Pachat (inglês).
