Creé un sitio web con Claude en una tarde y lo vendí por 10.000 dólares. Aquí tienes el sistema exacto.

Grabé todo el proceso y luego lo desglosé paso a paso para que puedas replicarlo. El sitio que ves abajo parece que le costó cinco cifras a un freelancer. Nadie que lo visite puede saber que una IA escribió el código. Coste total para publicarlo: unos $60.

GIF

Primero: la verificación honesta

No voy a venderte una fantasía. Así que, antes del "cómo", esto es lo que es real y lo que no.

Lo que es real:

• Claude Code escribe el código completo de un sitio desde cero basándose en tu descripción. Sin plantillas, así que tu sitio no se parece a todos los clones de Wix/Squarespace. Esta es la razón principal por la que el resultado puede alcanzar un nivel premium.
• Las dos habilidades que uso son reales y gratuitas. Una es frontend-design, creada por Anthropic — funciona en segundo plano y prohíbe las fuentes y diseños de IA más manidos. La otra es UI/UX Pro Max, una habilidad creada por la comunidad que incluye docenas de estilos de interfaz, paletas de colores y combinaciones de fuentes que puedes usar a demanda.
• El flujo de trabajo de imagen/vídeo es real. ElevenLabs ahora agrupa los principales modelos visuales (GPT Image, Google Veo 3.1) además del escalado Topaz dentro de una sola pestaña — lo verifiqué, ellos giraron hacia imagen y vídeo a finales de 2025. Así que generas una imagen fija, la animas y la escalas sin salir de la página.
• Claude Code está incluido en el plan Claude Pro por $20/mes ($17 si se factura anualmente). No necesitas un plan Max para esto. Confirmado vigente a junio de 2026.
• El alojamiento en un servidor económico con un dominio gratuito el primer año cuesta unos $40–45/año.

Lo que NO es magia: Los "$10,000" son el valor del resultado, no tu pago garantizado. Un sitio como este es lo que las agencias cobran entre $5K y $15K por construir. Que realmente ganes eso depende de que lo vendas — más sobre el dinero abajo. Los prompts aquí son puntos de partida, no una máquina expendedora.

Cada herramienta nombrada es real. Cada precio está vigente a junio de 2026.

Qué diferencia un sitio de $10,000 de uno de $200

Antes de construir nada, necesitas un objetivo. Le pregunté a Claude qué es lo que realmente hace que un sitio se vea caro, y se reduce a 8 cosas en 3 grupos:

Buen gusto

1. Punto de vista — una dirección de diseño real, no un mood board
2. Tipografía — fuentes intencionales (y no las demasiado usadas)
3. Color — moderación, máximo 4–5 valores hex, nada de arcoíris

Sustancia 4. Jerarquía — el tamaño le dice al ojo qué leer 1º, 2º, 3º 5. Imágenes — personalizadas o generadas por IA de forma convincente, nunca fotografías de stock genéricas 6. Texto — contenido mesurado, sensorial, escrito como un humano, no como una máquina de adjetivos

Calidad percibida 7. Movimiento — efectos de cursor y microinteracciones que lo hacen sentir vivo 8. Móvil — diseñado para teléfonos, no un escritorio encogido

Guarda esta lista. Al final, calificarás tu propio sitio con estos 8 puntos. Esa autoevaluación es el único paso que separa un resultado pulido de uno genérico.

Para quién es esto

Esto funciona si:

• Quieres vender sitios web a negocios locales (restaurantes, gimnasios, clínicas, inmobiliarias, etc.) y no sabes programar
• Ya trabajas como freelance y quieres multiplicar por 10 tu producción y tus precios
• Quieres un sitio premium para tu propio negocio o marca personal
• Puedes dedicar una tarde concentrada y estás dispuesto a iterar en lugar de esperar un clic perfecto

Esto no es para ti si quieres un juguete de "presiona un botón, consigue negocio". La calidad de tu briefing y tu disposición a insistir cuando algo se ve plano es el trabajo.

Lo que necesitas (y lo que cuesta)

Coste total realista para un sitio terminado: ~$60 (un mes de Claude Pro + alojamiento + dominio por el año).

El proceso completo, paso a paso

Paso 1 — Configura Claude Code

Regístrate en Claude Pro en claude.com. Descarga la aplicación de escritorio (icono de descarga, abajo a la izquierda → sección Claude Code → app de escritorio → ejecuta el instalador). Inicia sesión.

Cambia de modo chat a modo código (pestaña arriba a la izquierda, o Cmd/Ctrl + 3).

Crea una carpeta nueva y vacía en cualquier lugar de tu ordenador — este es tu espacio de trabajo. Haz clic en el botón de seleccionar carpeta cerca del cuadro de chat y ábrela dentro de la app. Claude Code funciona mejor cuando tiene su propia carpeta donde vivir.

La interfaz se actualiza a menudo, así que si un botón no está exactamente donde lo describo, no te preocupes: el concepto es el mismo, solo busca el equivalente.

Paso 2 — Mejora a Claude con dos habilidades

De serie, Claude es un generalista. Su diseño predeterminado es aceptable: recurre a las mismas fuentes y diseños que has visto en todos los sitios hechos con IA. Las habilidades solucionan eso.

Instala la habilidad #1 — frontend-design (funciona en segundo plano): Pega el enlace de la habilidad frontend-design en Claude Code con:

1Instala esta habilidad de forma global.

Permite las ediciones cuando te lo pida.

Instala la habilidad #2 — UI/UX Pro Max (la usas a demanda): Pega el enlace de UI/UX Pro Max en Claude Code con este texto exacto — la redacción importa porque se instala limpia a través de la terminal:

1Instala este plugin usando npm, de forma global.

Permite las ediciones.

Paso 3 — Activa el modo automático

Abajo a la izquierda, debajo del chat, cambia el selector de modo a modo automático. Esto permite que Claude trabaje sin detenerse a pedir permiso en cada paso. Con el modo automático activado y ambas habilidades instaladas, estás listo para construir.

Paso 4 — Reúne referencias (tu atajo para el buen gusto)

Describir el gusto visual con palabras es difícil, especialmente si eres nuevo en el diseño. Las referencias solucionan eso: capturas de pantalla de sitios que te gustan que le das a Claude para que coincida con el estilo. Es mucho más fácil mostrar el gusto que describirlo.

Dónde las encuentro:

• Dribbble — donde los diseñadores publican su trabajo
• Awwwards — sitios galardonados, un nivel muy alto
• Pinterest — busca el tema exacto, ej. "diseño web restaurante moderno"

Encuentra de 3 a 5 sitios que te gusten y guarda capturas de pantalla. No los estás copiando — le estás mostrando la dirección a Claude.

Paso 5 — El único prompt que construye el sitio

Este es el video completo en un solo movimiento. Llamas a la habilidad de diseño, das el briefing, adjuntas tus capturas de referencia y terminas con la línea mágica.

Para mi construcción, hice un sitio para un restaurante de Seattle. Aquí está la estructura del prompt — adapta el briefing a tu proyecto:

1/ui-ux-pro-max
2
3Construye un sitio web de una sola página para [NEGOCIO — ej. un restaurante de alta cocina en Seattle].
4
5Dirección: [el estilo en tus propias palabras — ej. lujo oscuro y sofisticado, pero con raíces en el
6Pacífico Noroeste, NO un restaurante genérico de Manhattan].
7
8Secciones (en orden): [ej. hero, filosofía/historia, menú, el local, reservas].
9Sin galería, sin sistema de reservas — solo una página que se despliega de arriba abajo.
10
11Adjunto de 3 a 5 capturas de referencia para el estilo visual.
12Que coincida con la *sensación*, no las copies.
13
14Stack técnico: HTML/CSS/JS estático en un solo archivo (sin React — mantenlo simple).
15
16Antes de escribir cualquier código, hazme preguntas aclaratorias.

Esa última línea — "hazme preguntas aclaratorias" — es lo que hace que Claude se detenga y piense antes de construir. Volvió a mí con unas ~7 preguntas: el nombre, la dirección de estilo, qué secciones, quién escribe el texto, el stack técnico, el nivel de animación y cualquier otra cosa.

La parte que más importa: Claude me ofreció tres direcciones de estilo para elegir, como un menú. Elegí lujo oscuro y sofisticado con raíces en el Pacífico Noroeste, cinco secciones, sin galería, sin reservas — una página con scroll.

Este es el momento más importante de todo el proceso. Tus respuestas aquí se convierten en el sitio entero. Cuanto más específico seas ahora, menos tendrás que pelear con Claude después. Tómate tu tiempo.

Luego envíalo. Claude dedica ~3 minutos a leer y planificar antes de escribir una línea, luego ~4–5 minutos construyendo. Salta al resultado.

Preguntas seguidas por Claude

Revelación de la 1ª versión

Paso 6 — Califícate a ti mismo con la lista de 8 puntos

Antes de seguir puliendo, compara el sitio con el estándar que estableciste. Pega la lista de 8 puntos (de más arriba en este artículo) en Claude y pídele:

1Aquí está mi lista de 8 puntos para un sitio web de $10,000. Revisa el sitio actual y
2dime honestamente en qué posición está cada uno: fuerte, mixto o ausente. Sé implacable.

En mi construcción, Claude respondió: punto de vista — fuerte, color — fuerte, jerarquía — fuerte, tipografía — mixto, e imágenes/movimiento/móvil/cosas invisibles — todo mixto. Obtendrás una división similar, y está bien. El objetivo es saber exactamente qué queda por hacer.

Paso 7 — Aquí es donde pasa de profesional a caro

Este capítulo es toda la diferencia. No arregles las cosas una por una — eso desperdicia tokens y el resultado se siente parcheado. Lidera con intención, no con detalles específicos, y pide un lote.

Este es el prompt exacto que uso:

1Necesitamos más microinteracciones artesanales. Las secciones inferiores se sienten un poco genéricas.
2No necesitamos hacerlas más recargadas — solo más caras. Propón un lote de refinamientos
3y aplícalos todos a la vez.

Observa que no le estoy diciendo a Claude qué añadir — le estoy diciendo cómo quiero que se sienta. Claude es mejor convirtiendo intención en detalles específicos de lo que la mayoría de la gente es escribiendo especificaciones. Volvió con un lote: grano de película en todo el sitio, líneas divisorias de latón animadas entre secciones, un efecto de brasa brillante, revelaciones de titulares palabra por palabra. Cinco cambios, un prompt, implementados juntos.

Luego haz la revisión por sección tú mismo. Desplázate, encuentra las secciones que todavía se sienten planas — siempre hay un par — y dale a Claude un movimiento o interacción de cursor por sección:

1La sección de [historia] se siente estática. Añade un micromovimiento elegante o una interacción de cursor
2aquí. Mantenlo sutil y refinado — vivo, no ruidoso.

Si el primer intento es demasiado obvio, insiste: "Hazlo más sutil, añade un pequeño retardo para que siga al cursor." En mi construcción, eso convirtió un halo de luz de vela estático en uno que sigue tu cursor con un suave retraso. Dos prompts, dos secciones — esa capa es la diferencia entre un sitio que parece caro y uno que se siente caro mientras navegas.

Paso 8 — Imágenes: tráelas o genéralas

GIF

Las imágenes son el único pilar que Claude no puede resolver completamente solo. Mejor opción: fotografía personalizada. Colócala en tu carpeta de proyecto y dile a Claude qué es y dónde va.

¿Sin presupuesto para fotografía? La generación con IA ya es lo suficientemente buena como para que nadie pueda notarlo. El truco que lo hace rápido: no escribas el prompt de imagen tú mismo — Claude ya conoce tu proyecto, así que pídele que escriba el prompt por ti:

1Escríbeme un prompt de generación de imágenes para el hero de este sitio. Debe coincidir con el
2ambiente exacto, la paleta de colores y la dirección que hemos construido hasta ahora. Dame solo el prompt.

Pégalo en tu generador de imágenes y obtendrás algo que encaja con la marca en el primer intento. En ElevenLabs puedes generar una imagen fija (GPT Image), poner ese mismo fotograma en Google Veo 3.1 para animarlo y escalarlo con Topaz — todo en una pestaña. Coloca el recurso final en tu carpeta de proyecto.

Paso 9 — Incorpora componentes profesionales de 21st.dev

GIF

Cuando quieras un elemento visual impactante (un efecto de scroll, un hero llamativo), 21st.dev es una biblioteca gratuita de componentes creados por desarrolladores reales. Encuentra uno que te guste, haz clic en Copiar Prompt, pégalo en Claude Code, adjunta tu recurso y dile a Claude que construya el hero con él.

Aquí está la parte importante: Claude protege tu arquitectura. El componente de scroll que elegí estaba construido para React; mi proyecto era un sitio estático simple, así que Claude se negó a usar la versión de React porque cambiaría cómo funciona todo el proyecto — y reconstruyó el efecto en HTML plano. (Si tu proyecto realmente necesita React — un panel de control, un checkout, un inicio de sesión — Claude diría que sí. No rompe cosas solo porque se lo pidas.)

Cuando el efecto falla en el primer intento — el mío lo hizo — simplemente describe qué está mal:

1El video aparece pero no se desplaza como debería hacerlo el componente. Profundiza más —
2abre la página en el navegador, inspecciona lo que realmente está pasando y arregla la causa real.

Claude abrió la página por sí mismo, la inspeccionó en vivo y encontró el error real tres capas adentro. La lección: sigue insistiendo. Explica qué falló y qué esperabas — Claude casi siempre puede resolverlo si le dejas mirar más de cerca.

Paso 10 — Texto, fuentes y móvil (las victorias rápidas)

GIF

Texto: El texto generado por IA tiende a sobre-explicar por defecto. El texto premium es mesurado y sensorial — "Ribeye añejado en seco. 16oz. 60 días. Cocinado a la brasa." se lee como si lo hubiera escrito un chef. La habilidad frontend-design empuja a Claude hacia esto, por eso se gana su lugar en cada proyecto.

Fuentes: hay una fuente — Inter — tan usada que instantáneamente grita "esto lo hizo una IA". Si la ves en tu resultado:

1Cambia Inter en todas partes por una fuente menos manida — Geist funciona bien. Mantén la fuente del titular.

Móvil: "responsive" no es "diseñado para teléfonos". Los teléfonos verán tu sitio mucho más que los ordenadores. Pide una revisión dedicada:

1Haz una revisión dedicada para móvil. Decide qué debe ocultarse en pantallas pequeñas, qué debe
2ser más ajustado y qué debe redimensionarse. Esta es la versión que la mayoría de la gente verá realmente.

En mi construcción, la navegación se colapsó, la marca de texto tuvo un espaciado más ajustado y los botones obtuvieron una variante más pequeña. Con eso, los 8 puntos de la lista están completos.

Paso 11 — Ponlo en vivo (la parte en la que todos fallan)

Ahora mismo tu sitio solo existe en tu ordenador — esa URL de localhost solo funciona en tu máquina. Para compartirlo necesitas alojamiento + un dominio real.

Elige un proveedor de alojamiento con un dominio gratuito el primer año. Para un sitio estático simple (sin inicio de sesión, sin checkout, sin base de datos) el nivel "premium/compartido" más barato es suficiente. Configura el período a 12 meses — es el mínimo que te da el dominio gratuito. Busca tu dominio, reclámalo. Mi total fue de ~$43 por el año: alojamiento + dominio + email.

Si Claude te construyó algo con un backend real (dijo que

sí

a React, configuró Node.js, una base de datos, etc.), elige el nivel

business

en su lugar — soporta Node.js. El momento en que Claude aceptó o rechazó React en el Paso 9 te dice qué plan necesitas.

El único error que carga una página en blanco: cuando subas los archivos, comprime los archivos dentro de tu carpeta de proyecto — no la carpeta en sí. Abre tu carpeta de proyecto, selecciona todo lo que hay dentro (Cmd/Ctrl + A), luego comprime. Quieres un solo zip con index.html en el nivel superior. Si comprimes toda la carpeta, el alojamiento la descomprime un nivel demasiado profundo y tu dominio se muestra en blanco.

En el proceso de configuración del alojamiento, elige Migrar Sitio Existente → Subir Archivos de Copia de Seguridad, selecciona tu dominio, arrastra el zip, y envía. Haz clic en tu dominio — y ahí está, tu sitio de $10,000 en vivo en una URL personalizada.

Cuánto puedes ganar realmente con esto

El sitio en sí es un activo valorado en $10,000. Así es como se convierte en dinero:

• Vender sitios a negocios locales es el camino más rápido. Restaurantes, dentistas, gimnasios, agentes inmobiliarios y contratistas pagan rutinariamente $1,000–$5,000 por un sitio premium de una página. Construye uno en una tarde, cobra en consecuencia. Dos clientes al mes a $2,000 = $4,000/mes a tiempo parcial.
• Freelancers experimentados / pequeñas agencias cobran $5,000–$15,000 exactamente por este tipo de sitio personalizado, animado y diseñado para móvil — y ahora lo entregan en horas en lugar de semanas. El margen es el objetivo principal.
• Servicio productizado: vende un paquete fijo de "página única premium en 5 días por $1,500". Predecible, repetible, y puedes gestionar varios a la vez.
• Tu propia marca: si lo usas para ti mismo, la "ganancia" son los acuerdos y la credibilidad que un sitio con aspecto de cinco cifras te aporta.

Rampa realista para alguien que empieza hoy: primer cliente de pago en unas semanas, $1K–$5K/mes a tiempo parcial en un par de meses si realmente haces prospección. La construcción ya no es el cuello de botella — las ventas lo son.

Qué cambia para ti después de esto

GIF

Antes, un sitio web premium personalizado significaba o aprender a programar durante meses o pagar a un desarrollador miles de dólares. Después de esto, la barrera técnica ha desaparecido. Puedes producir un sitio genuinamente caro, totalmente personalizado, animado y diseñado para móvil en una tarde — y venderlo, o usarlo para que tu propio proyecto se vea serio.

La habilidad con la que realmente te quedas no es "programación". Es dirección — saber qué es lo que se ve caro, detallarlo con precisión e insistir hasta que esté bien. Esa habilidad se acumula en cada sitio que construyas después de este.

Tu próximo paso (hazlo hoy)

1. Regístrate en Claude Pro e instala la aplicación de escritorio.
2. Instala ambas habilidades (Paso 2) y activa el modo automático.
3. Guarda de 3 a 5 capturas de referencia de Dribbble o Awwwards.
4. Ejecuta el prompt de construcción del Paso 5 — incluyendo "hazme preguntas aclaratorias" — y responde con cuidado.

No te saltes la recopilación de referencias ni las preguntas aclaratorias. Ahí viene el 80% de la calidad. Construye un sitio de principio a fin antes de preocuparte por vender — necesitas verlo funcionar primero.

Una cosa honesta

Esto no es una píldora mágica. Es una herramienta real que hace un trabajo real — pero el resultado depende de ti. Los prompts anteriores son puntos de partida, no guiones. La diferencia entre un sitio que parece una plantilla y uno que parece de $10,000 es el gusto que aportas, las referencias que eliges y cuántas veces insistes en una sección plana en lugar de aceptar "suficientemente bueno".

Claude se encarga de la ejecución. Tu dirección y tu esfuerzo deciden el resultado. Lo que hagas con eso depende totalmente de ti.

*

*Por favor, marca con favoritos, retuitea y sigue a @thegreatest_svpara más contenido de alta calidad, herramientas de IA e investigación de primer nivel.AVISO LEGAL (Ganancias e información) Las ganancias o estadísticas mostradas en este artículo son ejemplos de mi investigación, experiencia propia y no son garantías de lo que ganarás. Los resultados varían según el nicho, la calidad del contenido, el RPM/CPM, la participación de la audiencia, la constancia, el esfuerzo y otros factores. Esto no es un consejo financiero, fiscal, legal ni profesional: consulta a los expertos correspondientes antes de tomar decisiones comerciales.Recursos y enlaces

Herramientas y recursos de Claude Code: https://claude.com/

**Habilidad Frontend Design (de Anthropic):

**https://github.com/anthropics/skills/tree/main/skills/frontend-design

**Habilidad UI/UX Pro Max:

**https://github.com/nextlevelbuilder/ui-ux-pro-max-skill

21st.dev: https://21st.dev

La lista de verificación del sitio web de $10K (descarga gratuita en PDF): https://drive.google.com/file/d/1CCRCvSbJ1tNXmd2YDnUNr1XkTAguYG7v/view

Sitios de referencia de diseño

Dribbble: https://dribbble.com

Awwwards: https://www.awwwards.com

Pinterest:https://pinterest.com