CREA SITIOS WEB PROFESIONALES EN 30 MINUTOS
El sistema completo para diseñar, construir y publicar con Google Antigravity — sin frameworks innecesarios, con resultados reales en producción.
un sitio web decente.
Wireframes en Figma. HTML desde cero. Integraciones rotas. Rondas de revisión infinitas. Noches perdidas. Y el cliente todavía no está satisfecho.
El verdadero problema
La IA genera código.
Pero sin sistema,
produces basura.
- Antigravity entrega resultados proporcionales a la calidad de tus instrucciones.
- Sin documentos estructurados el output es impredecible, genérico y difícil de escalar.
- El 90% usa IA como chat improvisado, no como sistema de producción.
- Resultado: sitios idénticos entre sí, clientes insatisfechos, tiempo perdido.
Dos documentos.
Un proceso.
Sitios en 30 minutos.
COPY.md — El Alma
Todo el texto del sitio, estructurado para conversión. La IA sabe exactamente qué decir y a quién desde el primer prompt.
DESIGN.md — La Piel
Colores exactos, tipografías y personalidad visual. La IA genera código visualmente coherente desde la primera iteración.
Lo que vas a dominar hoy
El sistema completo en 12 pasos
Qué es Antigravity
La herramienta y su potencial
Entorno de trabajo
Setup y estructura de carpetas
Brief del cliente
10 min de ideación
COPY.md
El alma del sitio
DESIGN.md
ADN visual en texto
Prompt Maestro
Generación en 1 iteración
Stack Técnico
Tailwind · Lucide · Vanilla JS
Corrección 6 Capas
Prompts exactos
Blog con JSON
Sin backend ni WordPress
Despliegue
Hostinger File Manager
Optimización
PageSpeed · Core Web Vitals
Escalar Agencia
20+ clientes al mes
Capítulo 1 — Google Antigravity
La herramienta que
cambia las reglas
del desarrollo web
Antigravity genera HTML, CSS y JS funcional desde lenguaje natural. Un desarrollador junior extremadamente rápido que nunca se cansa.
Lo que lo distingue es su comportamiento consistente cuando le das documentos de contexto bien estructurados.
Velocidad
Bloques completos en segundos. Navegaciones, carruseles, formularios.
Visual + Código
Entiende "paleta oscura con acentos dorados" → genera Tailwind coherente.
Iteración rápida
Cambios específicos al instante. Sin reescribir desde cero.
depende del COPY.md
No del prompt. No del diseño. Del documento que preparas antes de abrir Antigravity. Un COPY.md deficiente produce sitios genéricos sin importar qué tan buena sea la IA.
Capítulo 4 — El documento más importante
COPY.md
El alma del sitio
Todo el texto del cliente en secciones etiquetadas que Antigravity lee directamente. La calidad de este archivo determina el 70% del resultado.
- Headlines al beneficio — conexión emocional, no descripción.
- Verbos de acción en CTAs — "Escríbeme hoy", nunca solo "Contacto".
- Prueba social con números — "200+ proyectos" supera "amplia experiencia".
- Tono consistente de la primera a la última línea.
## Hero Section
- Headline: [beneficio impactante]
- Subheadline: [valor en 2 oraciones]
- CTA: [texto + acción exacta]
## Servicios
- Nombre | Descripción | Ícono
## Testimonios
- Texto | Nombre | Cargo
## Contacto
- Email · WhatsApp · Redes
Capítulo 5
DESIGN.md — La piel
del sitio web
Sin DESIGN.md la IA toma decisiones por default y los defaults siempre se ven genéricos. Este documento garantiza coherencia visual desde la primera iteración.
Paleta de Colores
HEX exactos con rol semántico. Primario, secundario, fondo, texto, acento.
Tipografía
Fuente de titulares + cuerpo. Google Fonts, pesos y escala completa.
Design Tokens
Variables CSS semánticas. Un cambio en --color-primary tiene efecto global.
Táctica — Extracción de ADN Visual
Deja que Antigravity extraiga
la identidad visual del cliente
1. Paleta de colores (HEX exactos o aproximados)
2. Tipografías (o Google Fonts similares)
3. Estilo general (minimalista, oscuro, vibrante...)
4. Espaciado y layout (compacto, aireado, asimétrico)
5. Bordes, sombras y efectos
6. Personalidad visual en 3 adjetivos
Devuelve como DESIGN.md listo para usar.
En menos de 30 segundos tienes un borrador completo que captura la esencia visual del cliente.
Solo necesitas: 2–3 sitios de referencia, el logo o una fotografía representativa.
Ahorra 40 min de decisiones de diseñoCapítulo 6 — El Prompt Maestro
La instrucción que genera
el sitio en una sola pasada
Tu tarea: crear un sitio web completo basado en COPY.md y DESIGN.md.
REQUISITOS TÉCNICOS:
· Un único archivo HTML autocontenido — sin build tools, sin npm
· Tailwind CSS via CDN: cdn.tailwindcss.com
· Lucide Icons: unpkg.com/lucide@latest + lucide.createIcons()
· Google Fonts via <link> con display=swap · Mobile-first + SEO básico
--- INICIO COPY.md --- [pega aquí] --- FIN ---
--- INICIO DESIGN.md --- [pega aquí] --- FIN ---
Genera index.html completo. Listo para producción.
Capítulo 7 — Stack Tecnológico
Un solo archivo HTML.
Filosofía deliberada.
React necesita Node.js, npm, build process y dependencias. Cualquier paso puede romperse cuando las versiones cambien.
Un HTML con Tailwind CDN funciona en cualquier hosting, no tiene dependencias que romperse y cualquier dev puede editarlo sin onboarding.
Tailwind CSS CDN
Clases utilitarias en HTML. Cero configuración. Colors custom con tailwind.config.
Lucide Icons
+1,400 íconos SVG outline. Ligeros y compatibles con Tailwind.
Google Fonts
Preconnect + display=swap obligatorio. Sin esto el texto es invisible al cargar.
El bug de Lucide Icons
resuelto de una vez
<script src="lucide@0.263.1"></script>
<script>createIcons();</script>
<!-- Antes del </body> -->
<script src="unpkg.com/lucide@latest"></script>
<script>lucide.createIcons();</script>
<i data-lucide="music"></i>
El script de Lucide DEBE cargarse después de que todos los íconos estén en el DOM.
Por eso siempre va antes del cierre del </body>, nunca en el <head>.
Si los íconos no se renderizan: este es el problema el 95% de las veces.
Capítulo 8 — Corrección y Refinamiento
No corrijas todo a la vez.
Trabaja por capas.
Contenido
¿Todo el texto de COPY.md presente? ¿Placeholders sin reemplazar?
Identidad Visual
¿Colores exactos de DESIGN.md? ¿Tipografías y pesos correctos?
Layout
¿Orden de secciones correcto? ¿Grids y columnas funcionan?
Responsividad
375px · 768px · 1280px. Prueba los tres antes de entregar.
Funcionalidad
Links, formularios, íconos, blog JSON. Sin errores en consola.
Pulido Final
Animaciones, hover states, footer completo, favicon activo.
Regla de las 3 correcciones: Si después de 3 prompts el problema persiste, edita ese fragmento directamente en el código. Es más rápido.
Táctica — Prompts de Corrección Efectivos
Así se piden
correcciones que funcionan
Fondo: #0D0D0D, no el azul generado.
Botón CTA: background #FFD600, texto negro.
Headline: Montserrat peso 900.
Mantén todo lo demás exactamente igual.
CORRECCIÓN — Cards Servicios:
border: 1px solid rgba(255,214,0,0.2)
background: rgba(255,255,255,0.03)
Ícono de cada card: #FFD600
Elimina box-shadow.
Un prompt de corrección efectivo tiene 3 componentes:
- Sección específica — no "el sitio", sino "el Hero" o "las cards".
- Descripción exacta del problema con valores concretos.
- Instrucción clara de qué cambia y qué no tocar.
Capítulo 9 — Blog sin Backend
Blog dinámico
desde un archivo JSON
Sin WordPress. Sin base de datos. El cliente edita un archivo de texto, tú subes el JSON y el sitio se actualiza.
#blog-container → div vacío en HTML
fetch('./data.json') → JS lo llena
Campos: id · title · excerpt · date · category
⚠ Requiere servidor HTTP (no file://)
Añadir post
Edita data.json. Agrega el objeto. Sube. Sin tocar el HTML.
Añadir imágenes
Sube a /assets. Referencia la ruta relativa en el JSON.
Cero dependencias
30 líneas de Vanilla JS. Perfecto en Hostinger.
Capítulos 10–11 — Despliegue en Hostinger
De tu computadora
al mundo en 5 minutos
01
- Login en hPanel
- Selecciona dominio
02
- Archivos → Gestor
- Navega a public_html
03
- Sube index.html
- Crea /assets
04
- Sube data.json
- Sube imágenes
05
- Activa SSL gratis
- Verifica incógnito
El archivo se llama index.html y va en la raíz de public_html. Cualquier otra configuración da error 404.
Paths relativos obligatorios: src="assets/logo.png" — NUNCA rutas absolutas de tu máquina local.
→ Corrección → Producción
Brief: 15 min · COPY.md + DESIGN.md: 25 min · Generación: 3 min · Correcciones: 20 min · Hostinger: 5 min.
Un sitio web profesional y personalizado, en producción.
Antes esto tomaba 3 días.
Capítulo 14 — Proyectos reales
Proyectos reales.
Sistema real. Resultados reales.
Grupo LIC
Sin identidad digital formal. Paleta oscura con dorados. Dos CTAs diferenciados: organizadores de eventos y parejas buscando banda. Total: 70 minutos.
Alfredo Ortiz
ADN visual extraído de portadas de discos. Tono contemplativo. Headline: "Música que eleva el alma, compuesta para los momentos que importan."
La IA NO puede
hacer esto por ti.
Decidir qué headline resonará emocionalmente con la audiencia del cliente.
Elegir qué fotografías transmiten autenticidad vs. las que se ven como stock genérico.
Juzgar si el tono del copy es correcto para la cultura del cliente.
La IA amplifica tu expertise — no lo reemplaza. El profesional que domina esto compite consigo mismo del pasado.
Capítulo 14 — Escalando la Agencia
De 1 cliente a
20+ al mes
sin perder calidad
- Plantillas por industria — COPY.md pre-rellenado para restaurantes, músicos, coaches. Brief en 10 min.
- Biblioteca de prompts probados — 20–30 prompts documentados eliminan la incertidumbre.
- Onboarding automatizado — Google Forms captura el brief y produce datos listos para COPY.md.
- Precios por paquetes, no por hora — si tardas 1–2h por sitio, cobrar por hora te perjudica.
- Checklist estandarizado — mismo nivel en el proyecto 1 que en el 20. Eso construye reputación.
Plan de Ejecución — Tu hoja de ruta
Primeras 4 semanas —
paso a paso
SEMANA 1
- Accede a Antigravity
- Configura entorno VSCode
- Estructura de carpetas
- Elige cliente demo
SEMANA 2
- Brief en 15 min
- Redacta primer COPY.md
- Extrae ADN visual
- Construye DESIGN.md
SEMANA 3
- Ejecuta prompt maestro
- 6 capas de corrección
- Añade blog JSON
- Prueba en 3 dispositivos
SEMANA 4
- Despliega en Hostinger
- Activa SSL + PageSpeed
- Entrega con capturas
- Construye plantilla base
Sin cliente: elige un negocio local y construye su sitio gratis como práctica. 2 horas de ejecución supera semanas de teoría adicional.
Checklist de Entrega
Antes de entregar,
verifica esto.
- index.html en raíz de public_html
- Paths de imágenes relativos (assets/imagen.jpg)
- Colores verificados contra DESIGN.md
- Tipografías + display=swap en Google Fonts
- Links WhatsApp, email, redes funcionando
- SSL / HTTPS activo en Hostinger
- Prueba en smartphone físico real
- PageSpeed score >80 en móvil
- Meta title + description configurados
- favicon.ico subido y referenciado
- data.json cargando sin errores en consola
- Cliente notificado con URL + capturas
al desarrollador web.
Lo multiplica."
¿Listo para
ejecutar?
El mercado web para PyMEs está subatendido. Tienes el sistema. Tienes la ventaja. Todo lo que queda es aplicarlo.
Visita deceroaia.com.mx© 2025 Angel Ortiz — De Cero a IA. Todos los derechos reservados.