Creé un sitio web con Claude en una tarde y lo vendí por $10,000. Aquí está el sistema exacto.

Grabo todo el proceso y luego lo desgloso paso a paso para que puedas copiarlo. El sitio que ves abajo parece que un freelancer cobró cinco cifras por él. Nadie que lo visite puede saber que una IA escribió el código. Costo total para ponerlo en vivo: unos $60.

GIF

Primero — la verificación honesta de los hechos

No te voy a vender 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 para un sitio desde cero según tu descripción. Sin plantilla, 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 — se ejecuta en segundo plano y prohíbe las fuentes y los diseños de IA más usados. La otra es UI/UX Pro Max, una habilidad construida por la comunidad que incluye docenas de estilos de UI, paletas de colores y combinaciones de fuentes que puedes usar bajo demanda.
• El flujo de trabajo de imágenes/video es real. ElevenLabs ahora agrupa los mejores modelos visuales (GPT Image, Google Veo 3.1) más la mejora de escala Topaz en una sola pestaña — lo verifiqué, ellos migraron a imagen y video a finales de 2025. Así que generas una imagen fija, la animas y la mejoras sin salir de la página.
• Claude Code está incluido en el plan Claude Pro a $20/mes ($17 si se factura anualmente). No necesitas un plan Max para esto. Confirmado vigente a junio de 2026.
• El hosting en un proveedor económico con un dominio gratuito el primer año cuesta entre ~$40–45/año.

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

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

Lo que diferencia un sitio de $10,000 de uno de $200

Antes de construir cualquier cosa, 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 más usadas)
3. Color — moderación, máximo 4–5 valores hexadecimales, 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 material genérico de stock 6. Texto — contenido medido, 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 una versión de escritorio reducida

Guarda esta lista. Al final calificarás tu propio sitio contra los 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, bienes raíces, etc.) y no sabes programar
• Ya trabajas como freelancer 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 enfocada y estás dispuesto a iterar en lugar de esperar la perfección con un solo clic

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

Lo que necesitas (y lo que cuesta)

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

La construcción completa, 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 → aplicación de escritorio → ejecuta el instalador). Inicia sesión.

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

Crea una carpeta nueva y vacía en cualquier parte de tu computadora — 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 aplicación. Claude Code funciona mejor cuando tiene su propia carpeta para trabajar.

La interfaz se actualiza con frecuencia, así que si un botón no está exactamente donde lo describo, no entres en pánico — el concepto es el mismo, solo encuentra el equivalente.

Paso 2 — Mejora a Claude con dos habilidades

Tal como viene, Claude es un generalista. Su diseño predeterminado es aceptable — usa 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 (se ejecuta 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 lo solicite.

Instala la habilidad #2 — UI/UX Pro Max (la usas bajo demanda): Pega el enlace de UI/UX Pro Max en Claude Code con este texto exacto — la redacción importa porque se instala limpiamente 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 hacia 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 entregas a Claude para que coincida con la vibra. 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 exactamente lo que quieres, ej. "diseño de sitio web para 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 a Claude la dirección.

Paso 5 — El único prompt que construye el sitio

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

Para mi construcción, hice un sitio para un restaurante en Seattle. Esta es la estructura del prompt — adapta el brief 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 gama en Seattle].
4
5Dirección: [la vibra en tus propias palabras — ej. lujo oscuro y con estilo, pero con los pies en el
6Pacífico Noroeste, NO una parrilla genérica de Manhattan].
7
8Secciones (en orden): [ej. héroe, filosofía/historia, menú, el ambiente, reserva].
9Sin galería, sin sistema de reservas — solo una página que se despliega de arriba a abajo.
10
11Adjunto de 3 a 5 capturas de pantalla como referencia para el estilo visual.
12Capta 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 otras cosas.

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

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

Luego envíalo. Claude pasa unos ~3 minutos leyendo y planificando antes de escribir una línea, luego ~4–5 minutos construyendo. Avanza hasta la revelación.

Preguntas seguidas por Claude

Revelación de la 1.ª versión

Paso 6 — Califícate a ti mismo contra la lista de verificación de 8 puntos

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

1Aquí está mi lista de verificación de 8 puntos para un sitio web de $10,000. Revisa el sitio actual y
2dime honestamente dónde se encuentra en cada uno: fuerte, mixto o faltante. 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 eso está bien. El objetivo es saber exactamente qué falta.

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

Este capítulo marca toda la diferencia. No arregles las cosas de una en una — eso desperdicia tokens y el resultado se siente como un remedio improvisado. 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.

Nota que no le estoy diciendo a Claude qué añadir — le estoy diciendo cómo quiero que se sienta. Claude es mejor convirtiendo la intención en detalles específicos que la mayoría de las personas 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 títulos palabra por palabra. Cinco cambios, un solo prompt, implementados juntos.

Luego haz tú mismo el repaso sección por sección. Desplázate, encuentra las secciones que aún 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 aquí un micromovimiento elegante o una interacción de cursor.
2Mantenlo sutil y refinado — vivo, no ruidoso.

Si el primer intento es demasiado evidente, insiste: "Hazlo más sutil, añade un ligero retraso 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 se ve caro y uno que se siente caro mientras lo navegas.

Paso 8 — Imágenes: consíguelas o généralas

GIF

Las imágenes son el único pilar que Claude no puede resolver completamente por sí solo. La 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 notar la diferencia. El truco que hace que esto sea 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 héroe de este sitio. Debe coincidir con el
2estado de ánimo 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 encaje con la marca al primer intento. En ElevenLabs puedes generar una imagen fija (GPT Image), pasar ese mismo fotograma a Google Veo 3.1 para animarlo y mejorarlo con Topaz — todo en una sola pestaña. Coloca el activo final en tu carpeta de proyecto.

Paso 9 — Incorpora componentes profesionales de 21st.dev

GIF

Cuando quieras un elemento visual impactante (un efecto de desplazamiento, un héroe 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 activo y dile a Claude que construya el héroe con él.

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

Cuando el efecto falla al primer intento — el mío falló — solo describe lo que 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á sucediendo y corrige 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 permites mirar más de cerca.

Paso 10 — Texto, fuentes y móvil (los logros rápidos)

GIF

Texto: El texto generado por IA tiende a explicar demasiado por defecto. El texto premium es contenido y sensorial — "Ribeye añejo en seco. 16 oz. 60 días. Cocido al fuego." suena como si lo hubiera escrito un chef. La habilidad frontend-design empuja a Claude hacia esto, por lo que 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 usada — 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 las computadoras de escritorio. Solicita una revisión dedicada:

1Haz una revisión dedicada para móvil. Decide qué debe ocultarse en pantallas pequeñas, qué debe
2estar 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, el menú de navegación se colapsó, la marca tuvo un espaciado más ajustado y los botones recibieron una variante más pequeña. Con eso, los 8 puntos de la lista de verificación están completos.

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

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

Elige un proveedor de hosting con un dominio gratuito el primer año. Para un sitio estático simple (sin inicio de sesión, sin proceso de pago, sin base de datos), el nivel más económico "premium/compartido" 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: hosting + dominio + correo electrónico.

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

sí

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

nivel business

en su lugar — es compatible con 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 subes 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 está dentro (Cmd/Ctrl + A), luego comprime. Quieres un solo zip con index.html en el nivel superior. Si comprimes toda la carpeta, el hosting la descomprime un nivel demasiado profundo y tu dominio se muestra en blanco.

En la configuración inicial del hosting, elige Migrar Sitio Existente → Subir Archivos de Respaldo, selecciona tu dominio, arrastra el zip, 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í mismo es un activo con un valor de $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 regularmente $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 / agencias pequeñas 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 negocios y la credibilidad que genera un sitio que parece de cinco cifras.

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

Lo que cambia para ti después de esto

GIF

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

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

Tu próximo paso (haz esto 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 pantalla 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. De ahí viene el 80 % de la calidad. Construye un sitio de principio a fin antes de preocuparte por vender — primero necesitas verlo funcionar.

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 las veces que insistes en una sección plana en lugar de aceptar "está bien así".

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

*

*Por favor, guarda en marcadores, retuitea y sigue a @thegreatest_svpara más contenido de calidad, herramientas de IA e investigación de alto nivel.DESCARGO DE RESPONSABILIDAD (Ganancias e Información) Las ganancias o estadísticas mostradas en este artículo son ejemplos de mi investigación, mi propia experiencia 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 consistencia, el esfuerzo y otros factores. Esto no es asesoramiento financiero, fiscal, legal o 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 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