Cómo usar Claude Code para crear sitios web y efectos de animación de nivel de 10,000 dólares

Desde instalar habilidades de diseño, recolectar materiales de referencia, redactar indicaciones de construcción, hasta implementar animaciones de foco del cursor, revisar y reparar por rondas, y luego refinar y pulir, esta guía completa te permite empezar sin conocimientos de programación. Este artículo está compilado y traducido del artículo de monokern X. (Resumen previo: Claude Code lanza nuevo comando /goals: separa ejecución y evaluación, evita que los agentes de IA sean perezosos y mientan) (Complemento de fondo: Práctica: Te enseño paso a paso cómo usar 7 Agentes para actualizar Vibe Coding a un proceso de desarrollo de nivel experto)

Índice del artículo

Toggle

• Primer paso: Instalar habilidades de diseño
• Segundo paso: Buscar materiales de referencia
• Tercer paso: Redactar indicaciones de construcción
• Cuarto paso: Animación del bloque héroe
• Quinto paso: Revisar y reparar
• Sexto paso: Refinar y pulir
• Resultado

Los agentes cobran $5,000 USD para crear un sitio web de portafolio que se vea tan bien.

Yo hice el mío en 2 horas. Aquí está el proceso completo.

Este es un registro real de implementación, no una plantilla de guía genérica.

Uso mi propio portafolio como ejemplo: los materiales de referencia que realmente usé, las indicaciones que realmente envié, los errores que realmente encontré y reparé.

No se necesita experiencia en programación.

Primer paso: Instalar habilidades de diseño

Por defecto, la salida de diseño de Claude es mediocre. Las mismas fuentes, la misma tipografía, la misma apariencia plana. Dos habilidades pueden solucionar este problema.

• Frontend Design — Desarrollado por Anthropic, se ejecuta en segundo plano, bloquea fuentes sobreutilizadas como Inter, impulsa una tipografía más audaz, mejora la calidad del texto.

Pega esto en Claude Code:

Instala esta habilidad: github.com/anthropics/skills/tree/main/frontend-design

Cuando aparezca el mensaje, permite los cambios e instálalo globalmente.

• UI/UX Pro Max — 57 estilos de interfaz, 95 combinaciones de colores, 56 combinaciones de fuentes, puedes llamarlo directamente al construir.

Pega esto en Claude Code:

Instala este plugin usando NPM: github.com/nextlevelbuilder/ui-ux-pro-max

Cambia el selector de modo a Modo Auto, para que Claude no te pregunte si permites en cada paso.

Segundo paso: Buscar materiales de referencia

No describas tu sitio web ideal de la nada; haz que Claude vea cómo quieres que se vea.

Mi portafolio usó "Il Capo Production" en Awwwards como referencia principal.

awwwards.com/sites/il-capo-production

Ese estilo oscuro y cinematográfico era exactamente lo que quería.

Así es como lo usé realmente:

No tomé captura de toda la página y dije "hazme esto", sino que capturé las partes que me gustaban bloque por bloque:

• 1.png — Bloque héroe
• 2.png — Bloque debajo del héroe (trabajos mostrados como video + título/descripción)
• 6.png — Pie de página y parte inferior del sitio
• 11.png — Página de proyecto individual
• 12.png — Pantalla de carga

En cuanto a la página del portafolio (la página que lista todos los trabajos), el sitio de referencia no tenía un diseño que coincidiera. Fui a Pinterest y encontré un diseño diferente de estilo similar, y lo capturé por separado nombrándolo 11.png.

No intentes copiar completamente un sitio web, toma prestadas las partes buenas de cada sitio.

Coloca todos los materiales en la carpeta /reference dentro del proyecto.

Tercer paso: Redactar indicaciones de construcción

Al inicio de la indicación, usa /ui-ux-pro-max para activar la habilidad de diseño.

Esta es la indicación exacta que usé para el portafolio:

Indicación para copiar:

/ui-ux-pro-max
Crea un sitio web de portafolio personal de alta gama para un desarrollador frontend. Debe verse caro, moderno e impresionantemente técnico,
con animaciones elegantes que se carguen sin problemas en cualquier dispositivo.
Usa las referencias de diseño en la carpeta reference: 1.png es el bloque héroe, 2.png es el bloque debajo del héroe
(que muestra trabajos en formato video + título/descripción), 6.png es el pie de página/parte inferior del sitio, 7.png es la página del portafolio que lista todos los trabajos,
11.png es un ejemplo de página de proyecto individual al hacer clic en cualquier trabajo desde el portafolio, 12.png es la pantalla de carga.
En el centro del bloque héroe, usa me.png para colocar mi foto.
Todos los marcadores de posición de imágenes de trabajos/proyectos usan example.png.

Antes de comenzar a construir, hazme cualquier pregunta que necesites aclarar.

La última línea es clave Claude se detendrá y hará 4-6 preguntas sobre estilo, fuentes, diseño, nivel de animación, tono del contenido; tus respuestas se convertirán en la base de todo el sitio web.

Responde con especificidad; cuanto más preciso seas aquí, menos idas y venidas tendrás después.

Después de que respondas, Claude tarda unos 5 minutos en planificar y luego unos 10 minutos en construir; la primera salida ya es bastante sólida.

Cuarto paso: Animación del bloque héroe

Poner una foto normal en el centro de un bloque héroe oscuro es aburrido Debe pasar algo cuando el usuario mueve el ratón.

Se me ocurrió la idea del foco para mi portafolio:

• Todo el bloque es oscuro
• Mi foto es casi invisible por defecto
• El cursor actúa como una linterna — "iluminándome"
• La segunda capa es solo una versión brillante y cálida de la misma foto

Le describí este concepto a Claude y le pedí que lo implementara:

"En el bloque héroe, quiero un efecto de cursor tipo linterna/foco. Fondo oscuro. Mi foto es casi invisible por defecto. Cuando el cursor se mueve sobre el bloque, actúa como un foco — revela una versión más brillante y cálida de la foto debajo a través de una máscara circular de borde suave que sigue al cursor. Radio 100-150px, bordes difuminados suaves. Por favor implementa este efecto."

Claude lo hizo a la primera. El efecto es exactamente como se describe — el usuario mueve el cursor, la foto se ilumina donde apunta.

Quinto paso: Revisar y reparar

Antes de hacer una revisión de calidad formal, primero desplázate por el sitio web tú mismo y anota todo lo que se sienta incorrecto.

Mi lista después de la primera construcción:

• Las transiciones entre rutas de página se sienten abruptas — necesitan un fundido suave
• El efecto de foco tiene un retraso notable, no sigue bien el cursor
• Algunos elementos se desbordan de la pantalla, no se adaptan bien
• Las fuentes no coinciden con el sitio de referencia — se ven más genéricas que la estética de Il Capo

Anota todos los problemas, y luego envíalos de una sola vez:

"Aquí hay varios problemas que necesitan ser reparados, por favor trata todos:\

2. [Describe el problema 1]\
3. [Describe el problema 2]\
4. [Describe el problema 3]"

Es muy importante enviar todos los problemas de una sola vez.

Sexto paso: Refinar y pulir

Después de reparar los errores obvios, realiza una revisión de calidad estructurada. Pega esto en Claude:

"Por favor revisa este sitio web contra los siguientes estándares, señala honestamente qué necesita mejorar:
— Tipografía (¿Estamos usando fuentes de IA sobreutilizadas como Inter?)
— Color (¿La combinación de colores es contenida o desordenada?)
— Jerarquía (¿Los tamaños de texto guían correctamente la vista?)
— Animaciones (¿Suaves y con intención, o entrecortadas y aleatorias?)
— Versión móvil (¿Está realmente diseñada para móviles, o es solo una versión de escritorio reducida?)
— Texto (¿Contenido y específico, o relleno genérico de IA?)"

Claude puntuará cada punto. Léelo todo, luego expresa acuerdo o desacuerdo con cada punto, y finalmente organiza los problemas que quieras reparar en una sola indicación y envíala de una sola vez.

No dejes que repare los puntos con los que no estés de acuerdo. Tú conoces mejor tu propio sitio web que él.

Resultado

Finalmente obtendrás un sitio web sólido. No perfecto — pero suficientemente bueno.

Algunas cosas no estarán completamente correctas en la primera construcción, tal vez la versión móvil necesite una revisión más, o alguna animación se sienta ligeramente fuera de lugar; esto es normal.

Desde aquí, itera. Cada día encuentra una cosa para mejorar y repárala.