Como Reconstrui Mi Web en 5 Horas con IA

El proceso exacto, los prompts, y las decisiones que tome para pasar de una pagina generica a un sitio profesional en un solo dia usando Claude Code.

5h
Tiempo total
$0
Disenador
1
Persona
Hector Mejia · oktya-ai.com · @oktya.ai
CONTEXTO

El Problema

Mi pagina anterior era un template de Next.js con texto generico que no representaba nada de lo que realmente hago.

Lo que necesitaba era claro: una pagina que mostrara proyectos reales con números reales.

El problema es que disenar una buena web toma tiempo. Contratar a alguien toma más.

Lo que queria lograr

  • Un sitio oscuro, minimalista, estilo Linear/Vercel
  • Proyectos reales con metricas (2,500+ estudiantes, 89K pagos, agentes 24/7)
  • Copy directo — sin palabras de relleno, sin AI slop
  • Que se pudiera construir en un fin de semana
LECCION

Si tu web no refleja lo que haces hoy, te esta haciendo dano. Mejor no tener web que tener una que da la impresion equivocada.

PASO 1

El Prompt Inicial

No empece diciendole a Claude Code 'hazme una web bonita.' Eso da resultados genericos.

PROMPT# Primer prompt — no le dije que hacer, le pedi que preguntara

Aqui esta mi brand guide con colores, tipografias y tono.
Antes de construir nada, hazme preguntas sobre que quiero
comunicar, quien es mi audiencia, y que proyectos destacar.

Claude Code me hizo como 15 preguntas.

Por que funciona

La IA no puede leer tu mente. Si le das instrucciones vagas, te da resultados vagos.

ERROR COMUN

Decir 'hazme una web profesional y moderna' es el peor prompt posible.

PASO 2

Agentes de Investigacion

Despues de la entrevista vino la primera version del sitio. La estructura estaba bien, pero el copy era malísimo.

Entonces corri agentes de investigación.

PROMPT# Research prompt

Investiga como presentan case studies las mejores paginas de tech.

Lo que descubri

  1. 1Las mejores paginas describen QUE hace el producto, no COMO lo hicieron. El tech stack va aparte, como tags. La descripción vende el resultado.
  2. 2Cada proyecto lleva UNA metrica concreta. No tres, no cinco. Una.
  3. 3El copy evita superlativos. Los números hablan solos.
PROMPT TIP

Cuando la IA te da copy generico, no le digas 'hazlo mejor.' Dale ejemplos concretos.

PASO 3

Las 5 Horas

Todo paso en un solo dia. 5 horas de trabajo real.

  • Hora 0-1
    Entrevista con Claude Code.
  • Hora 1-2
    Primera version del sitio completa.
  • Hora 2-3
    Corri agentes de investigación.
  • Hora 3-4
    Iteraciones visuales.
  • Hora 4-5
    Ajustes finales, deploy a Vercel.

Lo que aprendi

Lo que aprendi

La mayoria del tiempo no fue 'construir' — fue dirigir.

Quieres ver el resultado?

El sitio esta live. Ve a verlo y dime que opinas.

Hecho con Claude Code · 2026

Como Reconstrui Mi Web en 5 Horas con IA — Oktya | Oktya