Uno de los momentos más llamativos de esta sesión empezó con un no. Le pedí a Claude en Chrome que me simulara la interfaz de mi página educativa con mis vídeos y tutoriales, y me respondió que no podía hacerlo desde el navegador. Tenía razón: Claude en Chrome está diseñado para actuar sobre páginas web existentes, no para crear interfaces desde cero. Pero la misma petición, hecha directamente en claude.ai, produjo en segundos un mockup interactivo completo y personalizado.

Esa diferencia entre herramientas es en sí misma una lección importante: no todas las formas de trabajar con Claude sirven para lo mismo. Saber cuándo usar cada una es parte del aprendizaje.

El prototipo que generó Claude no es una plantilla genérica. Usó el contexto de nuestras conversaciones anteriores para construir algo reconocible: la marca monteSTEAM con sus colores, las dos líneas de contenido diferenciadas (Claude 101 para PLD Engineering en azul, tutoriales de Arduino y maker en verde), los vídeos reales de las últimas sesiones como tarjetas con miniaturas, las etiquetas fijas del canal y un explorador por categorías con el recuento aproximado de tutoriales de cada área.

La estructura resultante tiene cinco zonas: una barra de navegación limpia con las secciones principales, un hero con la descripción del canal y las etiquetas, un buscador con un grid de últimos vídeos, una sección de tutoriales destacados en formato tarjeta grande con descripción y etiquetas, y un explorador por categorías. Todo en un estilo plano, sin ruido visual, coherente con lo que debe ser una página educativa profesional.

Lo más útil de este flujo no es el resultado visual en sí, sino lo que se puede hacer con él. Un prototipo así sirve para presentarle a un desarrollador exactamente qué quieres antes de que empiece a programar, para probarlo con usuarios reales antes de invertir tiempo en la implementación, o simplemente para tener una referencia visual clara mientras montas la web en WordPress. En los tres casos, pasar de una idea en la cabeza a algo que se puede señalar y comentar vale mucho más que cualquier descripción verbal.

El prompt que usé no tenía ningún tecnicismo de diseño. Describí lo que trabajo, mencioné que Claude ya me conocía y pedí algo bonito y manejable. El resto lo hizo el contexto acumulado de nuestras sesiones.

Palabras clave YouTube (con hashtag)

#iesmonterroso #aidarac #montesteam #Claude #Anthropic #DiseñoWeb #PrototipoWeb #InteligenciaArtificial #IA #WordPressTips #YouTubeEducativo #Tutorial #Maker #EducaciónDigital #UXDesign #ClaudeEnChrome

Etiquetas WordPress (separadas por comas)

iesmonterroso, aidarac, montesteam, claude, anthropic, diseño web, prototipo web, inteligencia artificial, wordpress, youtube educativo, tutorial, maker, educación digital, UX, interfaz, mockup