Diseño de Websites con IA
Sección dedicada a herramientas y recursos de diseño con Inteligencia Artificial. Puedes encontrar herramientas de IA e IDEs recomendados en el menú de navegación superior.
Generador de Template Markdown - Caribe Media
📖 Descripción
Generador y editor de markdown online para la creación de especificaciones de diseño que la IA interpreta automáticamente. Este es un generador de especificaciones en markdown que actúa como intermediario entre tus decisiones de diseño y la IA.
🚀 Cómo lo utilizamos
El flujo de trabajo es el siguiente:
- 1 Completas un formulario con información del proyecto (nombre, identidad visual, estructura, datos auxiliares)
- 2 El generador produce un markdown estructurado con toda esa información
- 3 Copias ese markdown y lo pasas a Cascade (la IA en Windsurf)
- 4 La IA interpreta el markdown y genera automáticamente la estructura HTML/Astro completa, estilos CSS, componentes y layout según tus especificaciones
📥 Pasos Detallados
LA CHISPA — Requerimiento del Cliente
Aquí capturamos dos cosas esenciales: Nombre del proyecto (identificador único) y Requerimiento completo (todo lo que el cliente solicita: descripción, contenido, instrucciones, links, teléfonos, horarios, etc.). El requerimiento debe tener mínimo 20 caracteres. Cuanto más detallado, mejor — la IA extraerá el contenido literal de aquí.
ARQUITECTURA — Estructura del Proyecto
La IA analiza automáticamente tu requerimiento y detecta: Tipo de proyecto (¿Es una Landing Page o un Sitio Web?), Secciones/Rutas (¿Qué páginas o secciones necesita?), y Componentes (¿Qué componentes React o Astro se requieren?). La IA lee el texto del cliente, detecta palabras clave y genera una estructura coherente.
IDENTIDAD — Visual, SEO y Tipografías
Aquí definimos cómo se verá y se posicionará el proyecto: SEO (metadatos para buscadores: Title, Description), Vibra de diseño (estilo visual: Corporativo, Creativo, Lujo, etc.), Paleta de colores (5 colores con roles específicos), y Tipografías (fuentes para títulos Display y texto Body). Las tipografías deben ser exclusivamente de Google Fonts.
EL GRAN FINAL — Master Prompt
La IA genera un Master Prompt completo con 8 secciones: Nombre e introducción, Stack tecnológico (Astro, Tailwind CSS, React), Arquitectura (rutas/secciones y estructura), Componentes (lista con su tipo), Identidad visual (paleta, tipografías, vibra), SEO (metadatos por página/sección), Instrucciones de desarrollo (buenas prácticas), y Contenido por sección/página (el contenido literal del cliente mapeado a cada sección).
🚀 Próximos Pasos: Levantar tu Proyecto Local
Ya que has creado tu proyecto en la sección de Onboarding, vamos a ir nuevamente a nuestra carpeta mediante la terminal para levantar el servidor local donde veremos los cambios:
Navegar a la carpeta de tu proyecto
Abre tu terminal (CMD, PowerShell, o Git Bash) y navega a la carpeta donde creaste tu proyecto en Onboarding:
cd ruta/a/tu/proyecto Instalar las dependencias del proyecto
Ejecuta el comando para instalar todos los paquetes necesarios. Usa el que corresponda a tu gestor de paquetes:
Con npm:
npm install Con pnpm:
pnpm install Levantar el servidor de desarrollo
Ejecuta el comando para iniciar el servidor local de Astro. Tu proyecto estará disponible en http://localhost:4321:
Con npm:
npm run dev Con pnpm:
pnpm run dev Abre tu navegador y visualiza los cambios
Accede a la URL local en tu navegador. Cualquier cambio que hagas en tu código se reflejará automáticamente gracias al hot reload:
http://localhost:4321 Edita y personaliza tu proyecto
Abre tu editor de código (Windsurf, VS Code, etc.) y comienza a editar los archivos. Agregando el markdown a tu archivo raiz y haciendo llamado del mismo en tu chat de AI dentro de tu Editor de código. Los cambios se verán en tiempo real en tu navegador:
⚙️ Configuración Recomendada
Colores personalizados
Define una paleta de colores coherente para tu marca
Ejemplo: Fondo: #ffffff, Texto: #1a1a1a, Acento: #0066cc
Tipografía profesional
Selecciona fuentes que reflejen la identidad de tu proyecto
Ejemplo: Títulos: Outfit, Cuerpo: Inter, Botones: Modern Full
Estructura modular
Organiza tu sitio en secciones lógicas y reutilizables
Ejemplo: Inicio, Servicios, Portafolio, Contacto, Acerca de
Integración de contacto
Incluye información de contacto y formularios
Ejemplo: Email: info@ejemplo.com, Teléfono: +1-234-567-8900
Redes sociales
Conecta tus perfiles de redes sociales
Ejemplo: Facebook, Instagram, LinkedIn URLs
Configuración SEO
Optimiza tu sitio para buscadores
Ejemplo: GA4-ID: G-XXXXXXXXXX, Aviso de Cookies
Herramientas de IA e IDEs Disponibles
Una vez que hayas generado tu especificación en markdown, puedes utilizar diversas herramientas de IA para crear tu sitio web. Encuentra enlaces directos a Windsurf (Cascade), Claude.ai y Google Gemini en el menú de navegación superior bajo "IA / IDEs".
💡 Tip: Estas herramientas pueden interpretar el markdown generado y crear automáticamente componentes, estilos y estructura completa para tu proyecto.