(Spanish) Flujo de trabajo rápido para sitios web

Gabriel Segura — Sun, 11 Oct 2026 21:44:15 +0000

Creo sitios web para clientes en 90 minutos con IA; así es como lo hago

90 minutos es el tiempo que dedico a crear sitios web. El martes de la semana pasada, la clienta me preguntó si podía diseñar una página de destino para su taller de cerámica. Quería que estuviera lista y en funcionamiento para el viernes. El yo de antes se habría quedado pegado a su silla de oficina y habría mirado sin expresión alguna a Figma durante tres días, hasta que se me acumulara tanta inseguridad que empezara a discutir conmigo mismo sobre las combinaciones de fuentes. El nuevo yo cerró Figma y ejecutó un proceso de cinco pasos con IA que logró que el sitio estuviera publicado antes de la cocción en el horno del viernes por la noche. Así es como lo hice.

Descargué mis ideas en Claude

Abrí Claude y comencé a escribir un párrafo desordenado sobre la solicitud de mi amiga: «Mi amiga vende tazas y jarrones de cerámica hechos a mano en Portland, con un estilo rústico y minimalista. Quiere una página de inicio, una página de tienda que enlace con Etsy, una sección de “Acerca de” y un formulario de contacto. Odia el desorden; imagina una mezcla de wabi-sabi con una galería moderna».
Claude me devolvió un mapa del sitio de cuatro páginas, una estructura de navegación sugerida y un borrador para cada sección. No me limité a aceptar sus propuestas: taché dos secciones y le pedí que reescribiera el titular principal de tres maneras diferentes antes de elegir el que menos sonara a robot. La indicación concreta que más me ayudó fue pedirle que «reescribiera este texto principal como si un amigo tranquilo le estuviera describiendo el taller a un desconocido en una cafetería». De repente, la sección cobró vida.

Crear el esqueleto en Framer

En Framer, abrí un lienzo en blanco y utilicé su generador de diseño con IA. Escribí: «Sitio de portafolio minimalista para un artista cerámico, tonos neutros cálidos, espacios en blanco generosos, una imagen principal, cuadrícula de productos de tres columnas». En unos cuarenta segundos, Framer había diseñado un sitio web responsivo completo en mi lienzo.
No estaba mal, pero la cuadrícula de productos tenía un espaciado demasiado apretado y el pie de página tenía cuatro columnas cuando solo necesitaba dos. Afortunadamente, reorganizar los bloques en Framer toma solo unos segundos. Arrastré, redimensioné y eliminé elementos hasta lograr un nuevo diseño: la IA me había dado el 80 % de la estructura que necesitaba y dediqué quince minutos a los últimos ajustes del 20 % restante.

Generar las imágenes

Mi amiga tenía buenas fotos de sus tazas tomadas con el celular, pero no tenía una foto principal. En Midjourney, describí: «Foto desde arriba de tazones de cerámica hechos a mano sobre un mantel de lino, luz suave de la mañana, tonos cálidos de terracota, poca profundidad de campo, estilo editorial». Generé cuatro imágenes, elegí una y luego la amplié. Para los íconos pequeños utilicé el generador de íconos con IA de Canva en lugar de buscar en bibliotecas de íconos.
Me tomó veinticinco minutos generar las imágenes que necesitaba, incluyendo una repetición porque el primer lote de Midjourney hizo que las piezas de cerámica se vieran como ceniceros.

Configurar la funcionalidad

En el CMS integrado de Framer, creé una colección de productos y pegué los enlaces de Etsy de mi amiga. Subí seis fotos de productos y configuré el botón «Tienda» para que se abriera en una nueva pestaña. El formulario de contacto era un componente nativo de Framer: lo arrastré y lo vinculé al correo electrónico de mi amigo. Para el SEO, volví a pegar la meta descripción de cada página en Claude y le pregunté: «¿Tienen menos de 155 caracteres e incluyen “cerámica artesanal Madrid”?». Marcó dos que eran demasiado largas. Las corregí en treinta segundos.

Revisión final y publicación

Revisé la vista previa en celular, corregí un título que se superponía a un botón, realicé una prueba de Lighthouse (94 puntos) y presioné «Publicar». Framer me proporcionó una URL activa y se la envié a mi amigo con un mensaje de texto que simplemente decía: «Ya estás en Internet».

¿Qué significa esto realmente?

La IA no diseñó este sitio web por mí. Eliminó todas las tareas en las que normalmente me quedaría atascado: escribir ante una página en blanco, la parálisis a la hora de decidir el diseño y la búsqueda de imágenes. Yo tomé todas las decisiones estéticas, pero la IA me dio opciones a la velocidad del pensamiento.

DEV Community: Gabriel Segura

(Spanish) Flujo de trabajo rápido para sitios web