Pachat.ai
Para tu primera tarea con Claude Code, elige algo con un resultado claro: arreglar el enlace About me de la página principal de un portafolio. Este ejercicio solo usa dos archivos HTML y no requiere publicar una web. Las diferencias entre archivos y el resultado al hacer clic te permitirán comprobar la corrección.
Los mensajes siguientes son instrucciones de práctica que puedes copiar; las imágenes muestran la web del ejercicio. Las respuestas del modelo pueden variar: evalúa los archivos guardados y el resultado de los clics.
1. Instala, inicia sesión y abre la carpeta
Si ya tienes Claude Code, pasa a comprobar la versión. De lo contrario, ejecuta en una terminal el comando de tu sistema. Ambos métodos aparecen en la guía oficial de Anthropic.
macOS, Linux o WSL:
curl -fsSL https://claude.ai/install.sh | bash
Windows PowerShell:
irm https://claude.ai/install.ps1 | iex
Ejecuta el comando de Windows en PowerShell, no en CMD. Al terminar la instalación, abre una terminal nueva y ejecuta:
claude --version
Resultado esperado: un número de versión de Claude Code. Si no se encuentra el comando, consulta primero la solución de problemas de instalación en la guía oficial.
Crea una carpeta llamada claude-code-link-exercise en tu gestor de archivos. En la terminal, escribe cd seguido de la ruta completa; usa comillas dobles si contiene espacios. Sustituye la ruta del ejemplo por la tuya:
cd "/path/to/claude-code-link-exercise" claude
En el primer inicio, sigue las indicaciones del navegador con una cuenta que tenga acceso a Claude Code. Si el navegador no se abre, copia el enlace de acceso siguiendo las instrucciones de la terminal; consulta la guía de autenticación. Comprueba que el directorio de trabajo de la sesión sea la carpeta del ejercicio.
2. Crea las dos páginas y reproduce el fallo
Con un editor de texto plano o de código, crea estos dos archivos dentro de la carpeta. Deben llamarse exactamente index.html y about.html, sin añadir .txt. Copia cada bloque completo en el archivo correspondiente y guárdalo.
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>
Haz doble clic en index.html para abrirlo en el navegador y pulsa About me. La página apunta a about-me.html, pero el archivo existente es about.html, así que el enlace no llega a la página prevista. El mensaje de error puede variar entre navegadores; lo importante es la diferencia entre los nombres.
En el gestor de archivos, copia index.html y llama a la copia index.before.html. Será la copia original para comparar y restaurar. No necesitas instalar Git.
3. Pide una investigación sin cambios
Envía este mensaje a la sesión de Claude Code que abriste:
Revisa únicamente index.html y about.html en la carpeta actual del ejercicio. No modifiques ningún archivo. El enlace About me de la página principal no abre. Indica su href, el archivo de destino que existe y la diferencia entre ambos. index.before.html es la copia original. No la modifiques ni la trates como una página que haya que corregir. Termina indicando el único cambio que recomiendas.
Qué debes comprobar: la respuesta debe identificar about-me.html en la página principal y about.html como archivo existente, y limitar la corrección al href del enlace.
Si propone crear about-me.html, reescribir toda la página o cambiar los estilos, corrige primero el alcance. La página de destino adecuada ya existe: no hace falta crear otra para una dirección equivocada. Investigar antes de limitar la modificación también sigue el flujo de corrección de errores de Anthropic.
4. Corrige un enlace y revisa las diferencias
Una vez confirmada la causa, envía:
En index.html, cambia únicamente el href del enlace About me de about-me.html a about.html. No cambies el texto del enlace, los estilos, otros textos, about.html ni index.before.html. Después de guardar, compara index.before.html con index.html. Muestra las diferencias reales entre los archivos y enumera los archivos modificados. No publiques ni despliegues la web.
Si aparece una solicitud de permiso, comprueba que el archivo y la acción correspondan al alcance indicado. La aparición de avisos depende del modo y la configuración de permisos. La ausencia de un aviso no significa que no se haya editado nada.
La diferencia importante debe ser solo el nombre del destino:
- <a href="about-me.html">About me</a></div> + <a href="about.html">About me</a></div>
Este es el cambio permitido; el diff real también puede mostrar números de línea y código adyacente sin cambios. Abre index.html en el editor y busca href para comprobar el valor guardado. Abre la copia y confirma que conserva el anterior. Si también cambió toda la página u otros archivos, aún no se cumple el requisito de una sola modificación.
5. Comprueba el resultado en el navegador
Vuelve a la página principal y recárgala, o abre otra vez index.html desde la carpeta. Pulsa About me y revisa cada punto:
| Comprobación | Resultado esperado |
|---|---|
| Pulsar el enlace de inicio | Se abre el archivo local about.html |
| Revisar el contenido | Aparece el título About me, sin error de archivo inexistente |
| Volver al inicio | Back to home abre index.html |
| Revisar el alcance | Solo cambió el destino en index.html; la copia y la página de presentación siguen iguales |
Si sigue sin abrir, mira si la barra de direcciones muestra el antiguo about-me.html. Asegúrate de estar usando esta carpeta del ejercicio y no otra copia. Comprueba también que el archivo no se haya guardado como about.html.txt y que ambos estén en la misma carpeta.
La prueba es el resultado real del clic. Que Claude Code diga que está arreglado no sustituye este paso.
6. Restaura el original y controla el cambio
Al terminar, abre index.before.html en el editor, copia todo su contenido en index.html y guarda. Recarga el inicio y pulsa otra vez About me. Debe reaparecer el enlace roto original: habrás recuperado la versión anterior a la modificación.
Para conservar la corrección, cambia de nuevo esa única aparición de about-me.html por about.html y repite las comprobaciones del navegador. Completar el ejercicio significa poder explicar la causa, verificar un cambio mínimo y restaurar el original.
Cuando un proyecto real necesite la revisión de otro agente, puedes compartir el código pertinente y el diff. La guía existente de Claude Code en Pachat explica la conexión y el reparto de funciones. Este ejercicio puede completarse de forma local.
Referencias
- Inicio rápido de Claude Code, Anthropic (inglés).
- Autenticación, Anthropic (inglés).
- Configurar permisos, Anthropic (inglés).
- Flujos de trabajo habituales, Anthropic (inglés).
- Claude Code con otros agentes, Pachat (inglés).
