Cómo construir sitios web con Claude Code · La guía completa de Vibe Coding.

Piensa en cómo solías construir un sitio web hasta ahora: acudías a un desarrollador web, le explicabas lo que querías, recibías un boceto, enviabas comentarios, recibías una versión y otra vez comentarios. Una semana de tira y afloja y al menos 3,000 shekels. Cada vez. Vibe Coding cambia todo el juego. Abres Claude Code, le hablas durante 30 segundos sobre lo que quieres que haya en el sitio y él lo construye. En pocos minutos tienes un sitio web en vivo con imágenes, botones, galería y experiencias de cliente. Todo lo que estás acostumbrado a ver en un sitio web normal. Esta guía es el resumen de lo que aprendimos en el taller 4 de Claude Code. Aprenderemos los 3 métodos para diseñar un sitio web, qué 3 herramientas debes instalar antes de empezar, cómo mejorar la estética de un diseño genérico de IA a un sitio web prémium y cómo desplegar el sitio en Vercel.

Qué tendrás al final de la guía

• Sitio web en vivo en Internet · Con un dominio temporal de Vercel (puedes conectar tu propio dominio más adelante)
• Flujo de trabajo ordenado con Claude Code · Sabes cómo darle un prompt, cómo trabajar en Plan Mode y cuándo aprobar
• Métodos de diseño en tu haber · Transcripción libre a Claude, inspiración de un sitio existente y componentes de 21st.dev
• Habilidades instaladas en Claude · Un sitio web con accesibilidad, privacidad y un diseño prémium en lugar de un estilo genérico de IA
• Copia de seguridad completa del código en GitHub · Si algo se rompe, se vuelve atrás con un clic
• Infraestructura de base de datos lista en Supabase · Si quieres recopilar correos electrónicos, guardar pedidos o cualquier información

Paso 1 · Las 3 herramientas que se instalan antes de empezar

Vercel

Despliegue en la nube · El sitio web está en vivo en Internet

La opción predeterminada para desplegar sitios web estáticos y Next.js. Sin Vercel, el sitio que Claude te construya solo estará en tu computadora en localhost:3000 · nadie más lo verá. En el momento en que le dices a Claude "despliégalo en Vercel", sube el código, lo despliega en la nube y te devuelve una URL pública que puedes compartir.

Consejo para agentes: después de registrarte, vuelve a Claude → Customize → Connectors → Browse Connectors → Vercel → Connect. Así es como Claude puede desplegar sitios web con un clic.

Supabase

Base de datos · Memoria para el sitio web

Postgres + Auth + Storage. En lugar de ejecutar un servidor para guardar correos electrónicos, pedidos o cualquier información · Supabase te da todo eso con un clic. Si quieres un formulario de contacto en el sitio web que guarde todas las solicitudes, una lista de correo o una pequeña tienda · este es el software responsable de almacenar la información.

Consejo para agentes: al igual que Vercel · conecta el conector en Customize → Connectors. El nombre del conector es Supabase. La cuenta gratuita es suficiente para el 99% de los proyectos personales.

GitHub

Copia de seguridad de código · Como Google Drive para tu sitio web

En GitHub se guarda todo el código del sitio web en línea. Si algo se rompe, si Claude comete un error que no puedes deshacer, si quieres trabajar en el sitio web desde otra computadora · GitHub guarda todo el historial. Cada vez que quieras · le dices a Claude "haz una copia de seguridad en GitHub" y él sube la última versión.

Consejo para agentes: tus repositorios se guardan de forma predeterminada como Private (privados) · solo tú tienes acceso. Si quieres compartir el código con otro desarrollador · puedes cambiar a Public con un clic.

💡 Las tres herramientas juntas · cuestan cero pesos para principiantes. Solo si quieres un sitio web con alto tráfico (miles de usuarios al día) o una base de datos excepcionalmente grande · entonces hay planes de pago. Para el 99% de los proyectos personales y pequeños negocios · la versión gratuita es suficiente.

Paso 2 · Método 1 · Vuelca todo lo que se te ocurra (transcripción al modelo)

Speakly

Herramienta de transcripción · Hablas, se genera texto ordenado

El mejor software para transcribir hebreo hablado a texto. Presionas una tecla de atajo en el teclado (en mi caso F-Key), se abre el micrófono, hablas de todo lo que se te pasa por la cabeza y sueltas. El texto ordenado y preciso entra automáticamente en cualquier aplicación con la que estés trabajando · Claude, chat, correo electrónico, Word.

Consejo para agentes: la tecla recomendada en Mac es F-Key (Fn). En Windows · puedes configurar Caps Lock u otra tecla. El atajo es cómodo · solo mantienes presionado, hablas y sueltas.

Cómo iniciar un nuevo proyecto en Claude

Prompt de ejemplo · Sitio web para plantillas ortopédicas personalizadas (para copiar y editar)

Quiero construir un sitio web que se adapte a plantillas para zapatos. Quiero que el sitio web tenga mi propio estilo · futurista, fluido, con fuentes claras y un contraste muy, muy claro. Tonos: monocromos · blanco, negro, gris. Acento azul futurista. Quiero la menor cantidad de desorden visual posible. Quiero que haya imágenes de deportistas, tal vez imágenes de soldados corriendo, para que la gente entienda la dirección. Quiero que haya experiencias de cliente · personas que califican desde Google y recomiendan el producto. Quiero quizás lugares donde haya un video de un cliente recomendando. Si no tengo eso · simplemente deja un marcador de posición (Placeholder) vacío que pueda llenar yo mismo. Quiero que haya un botón de acceso a WhatsApp para que puedan comunicarse con un representante lo más rápido posible. En el Hero · quiero que haya una imagen de una plantilla flotando en el espacio. Si no puedes crear una imagen así para mí · simplemente crea un prompt para ingresarlo en un modelo de imagen y lo generaremos. Trabaja en Plan Mode. Muéstrame el plan. Después de que lo apruebe · procede con la construcción.

🎯 Importante · siempre comienza en Plan Mode (el botón en la parte inferior de Claude). Esto te ahorra montones de tokens · Claude presenta un plan de trabajo antes de correr a construir, y puedes hacer correcciones antes de que invierta esfuerzo. Vimos en Plan Mode cómo presenta todos los colores, fuentes y el orden de las secciones · y luego se aprueba.

Paso 3 · Método 2 · Inspiración de un sitio existente

GoFullPage

Extensión de Chrome · Captura de pantalla completa de un sitio web

Una extensión de Chrome gratuita que captura toda la página en una sola imagen larga. Haces clic en el icono de la cámara · desplaza todo el sitio web automáticamente, captura cada sección y la une en una sola imagen continua. Se puede descargar como PNG o PDF. Es especialmente útil para inspirarse en sitios web sin tener que hacer 20 capturas de pantalla manuales.

Consejo para agentes: después de la captura · la extensión abre una nueva página con la imagen completa. Haces clic en el icono de descarga (flecha hacia abajo) y seleccionas PNG. Ahora tienes una imagen con la que trabajar.

El prompt para ingresar a Claude junto con la imagen de inspiración y el enlace (para copiar)

Check deeply the elements, DOM, sources. Then start to create section by section, one by one, in all aspects · HTML, CSS, JS. Reference site: [Pega aquí el enlace al sitio de inspiración] [Además · arrastra la imagen de Full Page a Claude] Trabaja en Plan Mode. Muéstrame el plan · en qué secciones comienzas, en qué orden y qué componentes duplicas. Después de que lo apruebe · procede a la construcción. Construye el sitio web por partes, no todo de golpe · así saldrá más fiel al original.

⚠️ Esto es inspiración · no copia. Tomamos la estética y la estructura, pero reemplazamos el contenido, las imágenes y los productos por los nuestros. También se pueden cambiar los colores y las fuentes. Así es como tu sitio web se ve tan profesional como el sitio que te gustó · pero es tuyo.

Paso 4 · Método 3 · Componentes de 21st.dev (el método Frankenstein)

21st.dev

Biblioteca de componentes · Diseños prémium de la comunidad

Miles de componentes de interfaz de usuario de una comunidad de diseñadores líderes. Cada componente incluye una vista previa en vivo, código y un botón de Copy Prompt. Haces clic en el botón · se copia el prompt. Lo pegas en Claude · Claude construye el componente en tu sitio web. La mayoría de los componentes son gratuitos, algunos son prémium.

Consejo para agentes: consejo de oro · antes de tomar un componente, piensa si se integra con el lenguaje de diseño general del sitio web. Un componente hermoso que no encaja arruina la coherencia. Es mejor 3 componentes que combinan bien que 10 dispersos.

Flujo de trabajo con 21st.dev

• Entra en 21st.dev. Regístrate con Google (proceso de 5 segundos).
• Navega por las categorías · Hero, Buttons, Cards, Galleries, Animations y más.
• Encuentra un componente que te guste · verás una vista previa en vivo en la página.
• Haz clic en el botón azul Copy Prompt arriba.
• Vuelve a tu Claude, pégalo y presiona Enter.
• Claude construye el componente en tu sitio · verifica en localhost:3000 que se vea como mostró 21st.

Paso 5 · Skills · La diferencia entre IA genérica y un sitio web premium.

⚖️ Especialmente importante · Accesibilidad y privacidad. En Israel, un sitio web que no cumple con el estándar de accesibilidad (TI 5568) expone a su propietario a una demanda de hasta 50,000 shekels. La política de privacidad es obligatoria según la Ley de Protección de Privacidad. Estas no son opciones · son una obligación legal. Los skills resuelven esto con un clic.

Dónde descargar skills · Los 2 repositorios principales

skills.sh

El repositorio oficial de Anthropic · Miles de skills

El repositorio principal para skills de la comunidad. Navega por categorías (Website, Marketing, Productivity), encuentra un skill adecuado y verifica que tenga la etiqueta Trust Hub Pass (indica que el código fue revisado y es seguro). Puedes ver cuántas descargas tiene un skill · cuantas más tenga, más popular y probablemente de mayor calidad.

Consejo para agentes: verifica siempre la etiqueta Trust Hub Pass antes de la instalación · así evitas descargar un skill que pueda realizar acciones no deseadas en la computadora.

agentskills.co.il

Repositorio israelí en hebreo · Skills adaptados al mercado local

El repositorio israelí · Skills adaptados a la regulación israelí (privacidad, accesibilidad), al idioma hebreo y al mercado local. Todos los skills son gratuitos. Vale la pena revisar todo antes de iniciar un nuevo sitio web para israelíes.

Consejo para agentes: si tu skill esencial es la accesibilidad en Israel · también conviene realizar una revisión manual después de la instalación. El estándar israelí es estricto y a veces el skill es un punto de partida, no una solución definitiva.

Los 9 skills recomendados para cada sitio web nuevo

El club AI Master te abre la puerta: reunión en vivo cada semana, grabaciones y comunidad. ₪47 al mes, cancelación en cualquier momento.

Israeli Privacy Shield

Regulación de privacidad para sitios web en Israel

Resuelve la obligación legal de la política de privacidad según la Ley de Protección de Privacidad. El skill agrega un banner de cookies, política de privacidad completa y gestión de consentimiento del usuario. Obligatorio para cualquier sitio web israelí.

Israeli Accessibility Compliance

Accesibilidad de sitios web según el estándar TI 5568

Implementa accesibilidad según el estándar TI 5568 y WCAG 2.1 AA. Agrega un botón de accesibilidad, verifica contraste, texto alternativo y garantiza la navegación por teclado. Sin este skill · exposición a una demanda de hasta 50,000 shekels.

Consejo para agentes: el skill es un excelente punto de partida, pero el estándar israelí es estricto · se recomienda realizar una revisión manual adicional después de la instalación para garantizar el pleno cumplimiento.

Hebrew Content Writer

Redacción de contenido profesional en hebreo

Skill para escribir contenido en hebreo · sin traducciones literales del inglés, sin clichés de IA. Escribe con un estilo directo, que convierte y habla el idioma de la audiencia israelí. Vale oro para páginas de aterrizaje y contenido de marketing.

UI/UX Pro Max

Experiencia de usuario · 50 estilos, 161 paletas de colores

El skill más completo para experiencia de usuario · 50 estilos de diseño, 161 paletas de colores, 57 pares de fuentes y las mejores reglas de UX de la industria. La elección visual predeterminada de Claude recibe una mejora de cientos por ciento.

OKLCH Color Engine

Colores que no se ven con apariencia de IA genérica

Skill que mejora la paleta de colores del sitio web. Utiliza un espacio de color avanzado (OKLCH) para crear paletas profesionales que no parecen hechas por IA. Una mejora inmediata para la calidad visual.

Emil Kowalski Skill

Experiencia de usuario basada en diseñadores líderes

Skill basado en el trabajo de Emil Kowalski · uno de los diseñadores más destacados del mundo (Linear, Vercel). Su enfoque · microinteracciones, animaciones sutiles y detalles que convierten un sitio web común en una experiencia.

Interface Details

Detalles que marcan la diferencia en la maquetación

Skill basado en un artículo de Jakub.kr sobre los detalles que hacen que una interfaz se sienta bien. Espaciados, ajuste de tipografía, microespaciado y todos los pequeños matices que diferencian un sitio web aficionado de uno premium.

Web Design Guidelines

Vercel Labs · Más de 250,000 instalaciones por semana

Skill de diseño web · 250,000+ instalaciones por semana. De Vercel Labs · el estándar de facto para el diseño de sitios web con IA. Si instalas un solo skill para un sitio web nuevo · que sea este.

Refero Design Styles

חוקיות עיצוב מהאתרים המובילים

ספריית סגנונות עיצוב מבוססת על האתרים המובילים בעולם · Apple, Linear, Notion, Stripe ועוד. בוחרים סגנון, קלוד מטמיע. דרך מהירה לקבל אסתטיקה של חברה גלובלית.

שלב 6 · פריסה לאוויר · האתר חי באינטרנט

🌐 הדומיין הזמני יהיה משהו כמו `my-project-xyz123.vercel.app`. אם אתם רוצים דומיין משלכם (`mydomain.com`), קונים אותו מ-SiteGround / GoDaddy / Cloudflare, ומבקשים מקלוד לחבר אותו ל-Vercel. זה תהליך של 10 דקות עם DNS records. אם תרצו · אעלה סרטון נפרד שמסביר את זה.

מה לעשות אחרי שהאתר חי

• **שולחים את הלינק לכמה חברים** · מבקשים פידבק. דברים שאתם רואים אחרי 50 פעמים בקוד · הם רואים בלחיצה אחת
• **מחליפים את כל ה-Placeholder עם תוכן אמיתי** · תמונות שלכם, וידאו של לקוחות, מספרי טלפון נכונים
• **מגבים לגיטהאב** · אומרים לקלוד 'תגבה את הקוד הזה לגיטהאב פרטי'. ככה אם משהו נשבר בעתיד · יש מאיפה לשחזר
• **מחברים דומיין משלכם** (אופציונלי) · אם רוצים לראות מקצועי
• **מוסיפים אנליטיקס** · מבקשים מקלוד 'תוסיף Google Analytics 4 לאתר'. ככה אתם רואים מי גולש ומאיפה

מה אפשר לבנות עם Vibe Coding · 8 רעיונות

8 פרויקטים שיוצרים עם Claude Code ב-45 דקות

• **דף נחיתה לעסק** · Hero חזק, הסבר על המוצר, חוויות לקוח, כפתור CTA לוואטסאפ
• **אתר תיק עבודות** · גלריית פרויקטים, סיפור אישי, יצירת קשר. רלוונטי לפרילנסרים ויוצרי תוכן
• **Lead Magnet** · דף שמציע מתנה (מדריך, צ'קליסט), אוסף מיילים, שולח ב-Make ל-RavMaser
• **אתר אירוע** · פרטי האירוע, ספירה לאחור, הרשמה, מפה
• **חנות קטנה** · קטלוג מוצרים, סליקה דרך Stripe / Cardcom
• **אתר מנוי / קורס** · רישום משתמשים, גישה לתוכן, אזור אישי. ב-Supabase
• **Dashboard פנימי לעסק** · גרפים, נתונים, פעולות מהירות. למשרד שלכם
• **אתר לקוח** · אתם בונים, גובים. עם 21st.dev והסקילים · הלקוח לא יאמין שזה לא מעצב מקצועי

שאלות נפוצות

כן, קלוד מבין עברית מצוין. אפשר לדבר איתו בעברית, לכתוב בעברית, והאתרים שהוא בונה יוצאים בעברית מקצועית. הקטע היחיד שיש לו לפעמים אתגר איתו هو RTL (כיוון ימין-לשמאל) · בעיקר כשמערבבים אנגלית בתוך טקסט עברי. הסקיל Hebrew Content Writer עוזר במיוחד בזה.

המנוי הבסיסי של Claude (20 דולר/חודש) מספיק לבניית אתר בודד. עם מנוי Pro (100 דולר/חודש) אפשר לבנות מספר אתרים ביום. שלושת הכלים (Vercel, Supabase, GitHub) חינמיים. הסקילים חינמיים. בסה״כ · אתר מקצועי עולה לכם כמה שעות עבודה ולא יותר. את הנגישות והפרטיות הסקילים פותרים בקליק.

תמיד אפשר לתקן. אומרים לקלוד 'הכפתור הזה גדול מדי', 'המראה של ה-Hero לא מתאים', 'תחליף את הצבע הראשי לכחול'. הוא משנה רק את החלק הספציפי, לא מתחיל מאפס. תוכלו לעשות אינסוף איטרציות עד שזה יוצא כמו שאתם רוצים. הטיפ · לעבוד בשינויים קטנים, לבדוק כל אחד לפני שעוברים לבא.

כן. אחרי שהאתר פרוס ל-Vercel, אומרים לקלוד 'יש לי דומיין mydomain.com שקניתי ב-X. תחבר אותו לפרויקט בוורסל'. הוא ינחה אתכם לעדכן DNS records בספק הדומיין (SiteGround/GoDaddy/Cloudflare). תהליך של 10-20 דקות, ואז האתר חי על הדומיין שלכם.

WordPress/Wix/Webflow · אתם בוחרים תבנית מוכנה, גוררים אלמנטים, מוגבלים למה שהמערכת מאפשרת. אתר נראה 'תבניתי'. Vibe Coding · קלוד כותב קוד ייעודי לאתר שלכם. אין מגבלה לרכיבים, לעיצוב, או לפונקציונליות. רוצים אנימציה ייחודית? פיצ'ר שלא ראיתם בשום מקום? אינטגרציה מיוחדת? · קלוד יבנה. בנוסף · הקוד שלכם, אתם הבעלים שלו, אין נעילה ל-vendor.

כן. אומרים לקלוד 'תוסיף לאתר חנות עם 5 מוצרים, חיבור ל-Cardcom או Stripe'. הוא בונה את החנות, את עגלת הקניות, את ה-checkout, ומחבר ל-API של הסליקה. צריך לפתוח חשבון אצל ספק הסליקה, להעביר לקלוד את המפתחות, והוא מסיים את הכל.

סיכון נמוך · כל פעם שמשנים משהו, קלוד יוצר commit חדש ב-GitHub. אם משהו נשבר · אומרים לקלוד 'תחזור לגרסה האחרונה שעבדה'. הוא ימצא את הקומיט הקודם ויחזיר. בנוסף · Vercel שומר את כל ה-deployments הקודמים, אפשר לחזור לכל גרסה ב-2 קליקים. בקיצור · קשה לשבור משהו לתמיד.

כן. שתי אופציות · 1) משתמשים ב-Supabase לאחסון מיילים, ואז מתחברים ל-RavMaser/Resend/Mailchimp דרך Make או דרך API ישיר. 2) שמים טופס שמתחבר ישירות לכלי הניוזלטר שלכם. אומרים לקלוד 'תוסיף לאתר טופס אימייל שמתחבר ל-RavMaser'. הוא מטפל בכל הצד טכני.

💪 רוצים ליווי לאורך הדרך?