Creando un sitio web con IA: guía práctica de ingeniería de prompts para desarrolladores

# Crea un sitio de portafolio de una página en un fin de semana con un asistente de IA: Guía para desarrolladores

Desarrollar un sitio de portafolio de una sola página con la ayuda de un asistente de IA como Claude Code representa una forma fresca de abordar el desarrollo web. Este método te permite crear un proyecto completamente funcional en poco tiempo, sin necesidad de contratar expertos externos: solo se requieren conocimientos básicos de HTML/CSS y habilidades en ingeniería de prompts.

Etapa de preparación: Contenido y estructura

Antes de escribir cualquier código, recopila tu contenido y define la arquitectura del proyecto. La IA puede generar texto si le das suficiente contexto: historiales de chats, materiales de charlas, descripciones de proyectos. Para la biografía, pide tres versiones —corta, media y detallada— para agilizar el proceso.

Define la estructura de la página antes de tu primer prompt. Aquí va un diseño recomendado para un portafolio de orador:

• Barra lateral fija de 300px
• Contenido principal con secciones
• Sección hero con foto e info clave
• Bloque de biografía
• Tarjetas de temas de charlas
• Sección de logros con estadísticas
• Galería de fotos y videos
• Información de contacto

Creación de prompts: Del esqueleto al pulido

La regla de oro para asistentes de IA: describe el resultado final, no los pasos. Tu primer prompt debe generar el marco básico con la estructura y semántica correctas.

Ejemplo de un prompt inicial efectivo:

Crea un sitio de portafolio de una página para un orador.

Estilo: Tema oscuro (fondo #0a0a0a), fuente Raleway de Google Fonts, color acento #3182CE.

Diseño: Dos columnas. Izquierda: barra lateral fija de 300px con foto redonda, nombre, título, enlaces sociales. Derecha: secciones de contenido principal —Biografía, Temas de charlas (tarjetas), Logros (estadísticas), Galería (rejilla de fotos), Contacto.

Requisitos: HTML puro, CSS y JS vanilla. Sin frameworks ni dependencias externas salvo Google Fonts.

Una vez que tengas el esqueleto, itera para refinar. Cada ronda aborda una tarea específica:

• Tipografía y esquema de colores
• Diseño responsive
• Elementos interactivos
• Animaciones y microinteracciones

Detalles de implementación técnica

Diseño responsive y compatibilidad entre navegadores

La responsividad móvil requiere atención especial. Tras los ajustes de escritorio, pide correcciones móviles explícitamente:

En móvil (<768px), el diseño se rompe: barra lateral y contenido lado a lado, contenido desborda. Corrige: Apila la barra lateral arriba horizontalmente (foto y contactos en fila), contenido principal a toda anchura abajo.

Consejos clave para compatibilidad entre navegadores:

• Prueba en Chrome, Safari, Firefox
• Añade prefijos de proveedor para propiedades CSS
• Verifica tablets (768-1024px)

Optimización de rendimiento

Una vez terminados los aspectos visuales, optimiza. Problemas comunes y soluciones:

• Optimización de imágenes:

- Convierte PNG a WebP

- Redimensiona a las dimensiones necesarias

- Añade carga diferida (lazy loading)

• Carga de recursos:

- Google Fonts asíncronos

- Precarga de assets críticos

- Diferir carga de iframes

• Métricas de rendimiento:

- LCP (Largest Contentful Paint)

- FID (First Input Delay)

- CLS (Cumulative Layout Shift)

Ejemplo de prompt de optimización:

El sitio puntúa 38 en PageSpeed Insights. Problemas: imágenes grandes (foto de perfil 12MB), recursos que bloquean el renderizado, sin lazy loading para videos. Optimiza: Convierte imágenes a WebP, precarga imagen hero, difiere carga de iframes.

Despliegue y alojamiento

Opciones de alojamiento

• Netlify/GitHub Pages — gratis, súper sencillo
• VPS personalizado — control total, requiere configuración

Errores comunes en despliegue VPS

• Nombres de archivos sensibles a mayúsculas (Linux es estricto)
• Rutas absolutas vs. relativas
• Permisos de archivos y aislamiento de usuarios
• Organización de la estructura del proyecto

Consejos para evitar dolores de cabeza:

• Usa nombres en minúsculas
• Sin espacios ni caracteres especiales
• Documenta tu configuración
• Usa Git para control de versiones

Lecciones clave

• Proceso iterativo: Divide el desarrollo en tareas pequeñas; cada iteración resuelve un problema
• Controles de calidad: Prueba en varios navegadores, ejecuta herramientas de rendimiento
• Documentación: Registra cambios y decisiones para retrocesos fáciles
• Optimización: Trata el rendimiento como una fase separada tras los visuales

Mejores prácticas de código

Estructura del proyecto

Organiza los archivos lógicamente:

proyecto/
├── index.html
├── styles/
│   ├── main.css
│   ├── mobile.css
│   └── animations.css
├── scripts/
│   └── main.js
├── images/
│   ├── optimized/
│   └── original/
└── assets/
    └── fonts/

Metodología CSS

Usa nombres de clases BEM significativos:

.speaker-card {
    /* estilos de tarjeta */
}

.speaker-card__image {
    /* estilos de imagen dentro de tarjeta */
}

.speaker-card__image--rounded {
    /* modificador para imagen redondeada */
}

JavaScript para interactividad

Añade interacciones básicas sin frameworks:

// Animaciones activadas por scroll
const observerOptions = {
    threshold: 0.1,
    rootMargin: '0px 0px -50px 0px'
};

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.classList.add('animate-in');
        }
    });
}, observerOptions);

// Aplicar a todos los elementos .animate-on-scroll
document.querySelectorAll('.animate-on-scroll').forEach(el => {
    observer.observe(el);
});

Errores comunes y soluciones

• Prompts vagos — La IA genera plantillas genéricas
• Sin restricciones — La IA incluye librerías no deseadas
• Omitir optimización — Sitio bonito pero lento
• Ignorar móvil — Pierdes la mitad de tu audiencia

Herramientas de control de calidad

• PageSpeed Insights — auditorías de rendimiento
• Lighthouse — chequeos completos del sitio
• BrowserStack — pruebas entre navegadores
• Git — control de versiones y retrocesos

— Editorial Team