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
Acceder al Generador de Planillas
Abre el navegador y ve a la URL del generador. No requiere instalación ni configuración previa. El sitio carga automáticamente con el formulario listo para usar.
Completar sección PROYECTO
En el paso 01 PROYECTO, ingresa el nombre de tu proyecto (ej: 'Mi Sitio Web') y selecciona si usarás HTML o Astro como tecnología base. Esta información es fundamental para que Cascade genere el código correcto.
Configurar IDENTIDAD VISUAL
En el paso 02 IDENTIDAD VISUAL, define: Colores (fondo, texto, enlaces, acentos), Tipografía (títulos, cuerpo, botones, layout). Estos valores se incluirán en el markdown para que Cascade cree un diseño coherente y profesional.
Definir ESTRUCTURA del sitio
En el paso 03 ESTRUCTURA, crea las secciones de tu sitio. Para cada sección define: Nombre (ej: 'Inicio'), Contenido (descripción breve), Slug (URL amigable). Puedes agregar múltiples secciones con el botón '+ Agregar Sección'.
Agregar DATOS AUXILIARES
En DATOS AUXILIARES, completa: Contacto (descripción, email, teléfono), Redes Sociales (Facebook, Instagram URLs), SEO (GA4-ID para Google Analytics, Aviso de Cookies). Estos datos se integrarán automáticamente en tu sitio.
Generar la especificación
Una vez completes todos los campos, haz clic en el botón azul 'GENERAR ESPECIFICACIÓN' en la esquina inferior derecha. El sistema procesará toda tu información y generará un markdown detallado.
Copiar el markdown generado
El markdown se mostrará en el editor. Selecciona todo el contenido y cópialo al portapapeles. Este markdown contiene todas tus especificaciones en un formato que cualquier IA puede interpretar.
Selecciona todo (Ctrl+A) y copia (Ctrl+C) 🚀 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.