00:00:00Claude Code es pésimo en diseño front-end y la culpa es tuya,
00:00:04pero este es un problema que podemos resolver con una hoja de ruta sencilla.
00:00:07Solo tienes que saber hacia dónde vas.
00:00:09Y en este video,
00:00:10voy a desglosar los siete niveles del diseño
00:00:13front-end en Claude Code y explicaré qué puedes esperar en cada
00:00:16nivel, las trampas que debes evitar,
00:00:18y lo que necesitas hacer para progresar al siguiente.
00:00:21Y para el final,
00:00:22tendrás un proceso sencillo y repetible para crear
00:00:25diseños front-end con Claude Code que no sean simplemente
00:00:28otra plantilla genérica y aburrida.
00:00:30Nuestro caso de estudio para el video de hoy será nuestra
00:00:33falsa aplicación web SaaS llamada Argus.
00:00:36Argus será una aplicación de inteligencia para redes sociales.
00:00:41Básicamente, un lugar donde los creadores de contenido o
00:00:43quien sea pueda ir y encontrar temas tendencia en su nicho.
00:00:48Y a través de Argus,
00:00:49vamos a recorrer todo el proceso de siete niveles.
00:00:52Así que comencemos con el nivel uno.
00:00:53Lamentablemente, mucha gente está estancada aquí.
00:00:55Esto es solo tú y un prompt.
00:00:57Vas a tener Claude Code abierto y simplemente vas a
00:00:59decir algo como: "Oye,
00:01:01creemos una página de aterrizaje para Argus,
00:01:02mi aplicación web de redes sociales que sirve como herramienta de
00:01:05inteligencia para creadores para identificar temas tendencia en
00:01:08su nicho". Ahora,
00:01:09aunque haga esto y lo ponga en el modo de planificación,
00:01:12lo que vamos a obtener es algo muy, muy genérico.
00:01:15¿Por qué? Porque realmente no le hemos dado dirección de diseño.
00:01:18Y estamos confiando en que Claude Code llene los vacíos
00:01:20sobre qué es lo que se ve bien.
00:01:22Se escucha a menudo que la IA no tiene gusto; es cierto,
00:01:26pero en realidad, la mayoría de la gente no tiene gusto.
00:01:28Y debido a ese problema,
00:01:31no pueden articulárselo a Claude Code, ¿entiendes?
00:01:33Si no sabes cómo se ve algo bien hecho,
00:01:35¿cómo va a adivinarlo Claude Code?
00:01:37Así que aquí, en el nivel más básico, necesitamos
00:01:39empezar a dominar algunas habilidades.
00:01:41Esas tres habilidades son: escribir prompts descriptivos,
00:01:43especificar frameworks y entender qué son
00:01:46esos frameworks,
00:01:46y empezar a construir un vocabulario básico de diseño.
00:01:50Ahora, simplemente usando el modo de planificación en este proceso,
00:01:53vas a empezar a desarrollar algunas de estas habilidades porque
00:01:55te hará preguntas como: "¿qué stack tecnológico quieres
00:01:57usar para esta landing page?", ¿verdad?
00:01:58Next JS, HTML puro, Astro.
00:02:00No tendrás ni idea de qué significa nada de esto,
00:02:02pero con solo escribir algo preguntando "¿qué son
00:02:05estos frameworks?"...
00:02:07Vas a empezar a construir cierto nivel de competencia en
00:02:11este espacio en cuanto a frameworks y cosas así;
00:02:13solo tienes que hacer preguntas.
00:02:14El modo planificación también te obligará a pensar en las
00:02:17decisiones de diseño y en el objetivo real de tu sitio web,
00:02:19porque no basta con decir: "Oye,
00:02:20solo quiero una página de aterrizaje para Argus".
00:02:21¿Cuál es el punto de esto? ¿Entiendes?
00:02:23¿Cuál es el resultado real que buscas?
00:02:25En este caso,
00:02:26queremos un registro para lista de espera y una muestra del producto.
00:02:29Y luego nos hará preguntas explícitas sobre
00:02:32el estilo. Ahora bien,
00:02:35estos tipos de estilos visuales que te va a ofrecer,
00:02:38de nuevo, son algo genéricos: oscuro y tecnológico, limpio y minimalista,
00:02:41¿verdad?
00:02:42Esto no es lo suficientemente específico para obtener los resultados
00:02:45que queremos todavía. Aquí es donde se queda todo el mundo.
00:02:47Y por eso todo se ve tan genérico.
00:02:49Así que, para nosotros, elegiremos limpio y minimalista,
00:02:52y luego haremos solo la sección principal,
00:02:53las características y una llamada a la acción, y enviaremos esto.
00:02:55Ahora probablemente pienses: "Si esto es tan básico,
00:02:58¿cómo voy a escribir prompts descriptivos y
00:03:01construir ese vocabulario básico de diseño?".
00:03:03Bueno, francamente,
00:03:04va a tomar algo de tiempo y experiencia.
00:03:06Cuanto más te expongas a,
00:03:09de nuevo, cómo se ve un buen diseño front-end creativo,
00:03:12más irás captando estas cosas.
00:03:13Y hablaremos más de eso en los siguientes niveles.
00:03:16Veamos qué nos construyó... ¡vaya, qué basura de IA!
00:03:20Es espantoso, ¿verdad? Es lo más genérico que existe.
00:03:24Incluso tiene esos degradados púrpuras
00:03:27que la IA ama por alguna razón. ¿Qué pasó?
00:03:30¿Qué salió mal? Incluso con el modo planificación, esto fue lo que obtuvimos.
00:03:32Bueno, la verdad es que, como ya sabes,
00:03:35Claude Code, y la IA en general,
00:03:37no son los mejores en diseño front-end.
00:03:38Y si le das prompts aburridos y poco descriptivos,
00:03:42este es el tipo de resultado que vas a obtener, ¿vale?
00:03:44Y, sin embargo, esto es lo que sueles ver por todas partes con
00:03:46quizás unas pocas diferencias. Entonces, ¿qué podemos hacer?
00:03:48¿Qué podemos hacer para salir del nivel uno y de este
00:03:51infierno del diseño? Pero antes de eso,
00:03:52unas palabras de parte de vuestro patrocinador favorito: yo.
00:03:55Acabo de lanzar la Masterclass de Claude Code
00:03:58hace no mucho tiempo.
00:03:59Es el lugar número uno para pasar de cero a desarrollador IA,
00:04:02especialmente si no vienes de un entorno técnico.
00:04:04Lo actualizo cada semana. Y desde que se lanzó,
00:04:07ya hemos añadido más de una hora de contenido nuevo y actualizado
00:04:10más de 20 módulos. Así que, si quieres echarle un vistazo,
00:04:13puedes encontrarlo en Chase AI Plus.
00:04:14Hay un enlace en el comentario fijado,
00:04:17pero si eres totalmente nuevo en la IA,
00:04:18y eso te parece demasiado...
00:04:19asegúrate de revisar la comunidad gratuita de Chase AI.
00:04:22Hay un enlace en la descripción.
00:04:24Bueno, para pasar al nivel dos,
00:04:25necesitamos darle a Claude una educación en diseño.
00:04:28Y aquí es donde empezamos a introducir habilidades.
00:04:30Aquí es donde empezamos a traer prompts especializados externos
00:04:33que le dicen a Claude Code cómo diseñar mejor.
00:04:36Ahora, estas habilidades en las que confiamos, como la de diseño front-end
00:04:39o la habilidad "UI UX Pro Max", van a hacer gran
00:04:41parte del trabajo pesado por nosotros.
00:04:42Van a inyectar en Claude Code esos prompts que
00:04:45dicen: "Oye, si estás creando una página web en esta industria,
00:04:49este es el tipo de cosas que deberías buscar".
00:04:51"Aquí tienes una lista de técnicas de diseño de basura de IA;
00:04:55evítalas".
00:04:56Así que básicamente va a potenciar nuestros problemas.
00:04:58Incluso si llegamos con algo bastante pobre, y
00:05:00aquí tenéis un vistazo a esa habilidad UI UX Pro Max.
00:05:03Es un repositorio de código abierto en GitHub con 52,000 estrellas.
00:05:07Podemos ir a la carpeta de habilidades y
00:05:09ver cómo está configurado todo. Si queremos escribir,
00:05:12son solo prompts de texto, y es un conjunto de prompts
00:05:15que actúan como una lista de verificación para que Claude Code,
00:05:17una vez más, salga de esas cosas genéricas.
00:05:19Para que no nos quedemos estancados con esto. Ahora, para instalar esta
00:05:21habilidad en particular y todas las demás similares,
00:05:23es muy sencillo. Si entramos en el GitHub,
00:05:26tenemos las instrucciones detalladas justo aquí.
00:05:27Solo vamos a poner "/ plugin marketplace",
00:05:30añadir la habilidad y luego instalarla.
00:05:32Simplemente ejecutamos esto en nuestra terminal de Claude Code.
00:05:35Y si eso resulta un poco confuso, entiende que
00:05:37siempre puedes simplemente copiar la URL,
00:05:40pegarla en Claude Code y decir: "Oye,
00:05:41me gustaría instalar esta habilidad".
00:05:42Pongamos la habilidad a prueba.
00:05:44He cargado la habilidad con una barra diagonal.
00:05:46También puedes usar lenguaje natural y decir algo como:
00:05:47"Oye, Claude Code, usa la habilidad UI UX Pro Max".
00:05:50Y vamos a decirle:
00:05:51"Quiero que recrees la página de aterrizaje usando la habilidad.
00:05:54Hazme cualquier pregunta que necesites".
00:05:55Ahora, al igual que en el modo planificación estándar,
00:05:57nos hará algunas preguntas sobre el estilo.
00:05:59Haremos lo que nos recomiende esta vez, ¿vale?
00:06:03Ir por algo de tipografía. Claro. Suena genial.
00:06:05Y luego un color para el botón de acción. Hagámoslo naranja.
00:06:07Queremos alejarnos del púrpura a toda costa.
00:06:09Claude Code terminó el rediseño, así que echemos un vistazo.
00:06:12Aquí está la landing page usando la habilidad UI UX Pro Max.
00:06:15Y de inmediato, se nota una mejora enorme, ¿verdad?
00:06:18Ahora tenemos un fondo adecuado y este detallito
00:06:21de los cuadrados.
00:06:22Los botones tienen un brillo sutil e incluso cambian
00:06:25de color cuando pasas el ratón sobre ellos.
00:06:27Tenemos un gráfico y los colores cambian de una sección
00:06:30a otra. Así que esto es mucho, mucho mejor, aunque
00:06:33todavía le sigue encantando el púrpura. Dicho esto,
00:06:36está claro que esto lo hizo una IA, ¿verdad?
00:06:38No es algo que verías y te dejaría boquiabierto
00:06:40por lo que se creó. Sigue pareciendo una plantilla de IA.
00:06:43Parece una plantilla de IA con algo de diseño,
00:06:46pero sigue siendo una plantilla de IA. Y en el fondo,
00:06:48es exactamente el mismo sitio web que viste antes,
00:06:49solo que con un poco de maquillaje.
00:06:51Entonces, ¿cómo podemos mejorar esto realmente?
00:06:52¿Cómo podemos pasar del nivel dos al nivel tres?
00:06:55Porque estas habilidades son geniales.
00:06:56Aportan ideas de teoría del color, tipografía,
00:06:59espaciado y diseño de maquetación general, pero en esencia,
00:07:02esto sigue siendo genérico.
00:07:04Y la verdad es que, en cuanto a las habilidades a dominar,
00:07:07la más importante es:
00:07:08¿cómo evaluamos este resultado con ojos de diseñador y luego
00:07:11convertimos esas críticas en prompts?
00:07:13Sigue siendo un problema de prompting, pero el detalle con
00:07:16el prompting —y aquí es donde caemos en la trampa—
00:07:18es que hay un techo para lo descriptivos que podemos ser,
00:07:21especialmente cuando empezamos, ¿verdad?
00:07:23Nos falta el conocimiento para articular los problemas
00:07:27de forma adecuada.
00:07:27Estoy intentando explicar un medio visual y un problema visual
00:07:31con texto. Inherentemente, hay una pérdida de información ahí.
00:07:34Entonces, ¿qué podemos hacer realmente?
00:07:36Tenemos que empezar a mostrarle a Claude Code.
00:07:39El problema era que necesitábamos mostrarle
00:07:41ejemplos reales de lo que estamos buscando.
00:07:44Para desbloquear el nivel tres,
00:07:46ahí es donde empezamos a alejarnos de los prompts de solo texto
00:07:49y empezamos a movernos hacia el medio visual; mostramos en lugar de solo contar.
00:07:52Empezamos a mostrarlo, no solo a contarlo.
00:07:54Así que el nivel tres es donde te conviertes en el director visual.
00:07:56Aquí es donde empezamos a darle código a Claude,
00:07:58ejemplos concretos de lo que buscamos, ¿verdad?
00:08:01De esa manera no dependemos solo del texto y de las habilidades.
00:08:03Ahora usaremos texto más habilidades más ejemplos visuales.
00:08:07Esto supone un gran avance por dos razones. Primero,
00:08:09Claude va a ser capaz de imitar mucho mejor
00:08:12una imagen que le muestres que tu descripción de la misma.
00:08:15Pero segundo, al usar imágenes,
00:08:17eso implica que estamos mirando otros sitios web y
00:08:20ahora podremos ver, de nuevo, qué es lo que está bien,
00:08:23¿qué están haciendo los profesionales y cómo podemos imitarlos?
00:08:25Ahora,
00:08:26hay varios lugares donde puedes encontrar inspiración
00:08:28para tus diseños de front-end y voy a enumerar cuatro.
00:08:31El primero es Awwwards. Se escribe Awwwards con tres uves dobles.
00:08:34Es un sitio donde la gente envía su trabajo de front-end y
00:08:37los califican. Así que tiene un enfoque muy creativo.
00:08:40El segundo es godly.website.
00:08:42Es un sitio de scroll infinito donde puedes ver,
00:08:45de nuevo, muchísimos diseños. El tercero es Pinterest,
00:08:48que sorprendentemente tiene cosas muy geniales.
00:08:49Aquí estoy buscando "landing page de SaaS".
00:08:52Cuando encuentro una que me gusta,
00:08:53también puedo ver muchas otras similares.
00:08:56Y por último, tenemos Dribbble. Con tres bes.
00:08:58Aquí también puse "landing page de SaaS". Y de nuevo,
00:09:01veo un montón de cosas que se ven muy bien.
00:09:04Digamos que llegué a un sitio como Open Hands que me gusta.
00:09:07Me gusta, ya saben,
00:09:09ese efecto de scroll que tienen arriba con los flujos probados.
00:09:11Me gusta bastante la combinación de colores.
00:09:14Es algo inusual de entrada.
00:09:15Tienen la prueba social y, en general,
00:09:19me gusta el estilo, ¿vale? Por ejemplo. Así que,
00:09:22lo que voy a hacer es muy, muy sencillo.
00:09:23Voy a tomar varias capturas de pantalla de esta web,
00:09:26subirlas a Claude y decirle: "Oye, este es el estilo visual
00:09:29al que quiero llegar". Así que, dentro de Claude, dije:
00:09:31"En realidad, quiero que nuestra web coincida con el estilo de Open Hands".
00:09:34Le di la URL. Y luego dije:
00:09:36"Aquí tienes unas capturas de pantalla de referencia".
00:09:38Y subí todas las capturas ahí.
00:09:40Así que ahora tiene referencias visuales reales en las que basarse.
00:09:43Para mí, al menos, sería difícil describir
00:09:45con palabras lo que estaba buscando aquí,
00:09:47incluso con la ayuda de algo como la habilidad de Pro en UI/UX.
00:09:51Y es a través de este proceso
00:09:52que vamos a empezar a curar muy buenas referencias visuales.
00:09:55Hay muchísimas por ahí.
00:09:57Y una vez que empiezas a verlas más y más,
00:10:00cosas como estas te resultan un rechazo total. Es como:
00:10:03"¿Por qué haría algo así cuando tengo
00:10:05todo esto tan genial disponible?". Y al ver más referencias,
00:10:07aunque solo le demos capturas a Claude,
00:10:09esto te ayudará a comunicar lo que te gusta específicamente,
00:10:12porque...
00:10:12vas a ver las mismas cosas una y otra vez
00:10:14mientras revisas todas estas referencias.
00:10:16Y lo que también querrás empezar a hacer es
00:10:18combinar referencias de varios sitios, ¿verdad?
00:10:21Aunque estuviéramos usando Open Hands aquí,
00:10:23probablemente encontré algo genial en Pinterest o
00:10:26en godly.websites y diga: "Voy a sacar esto de aquí".
00:10:28"Y voy a sacar esto de allá", ¿no?
00:10:29Quiero tomar lo mejor de todos estos sitios y
00:10:32combinarlo. Sin embargo,
00:10:33es muy fácil quedarse atrapado en esta trampa en este nivel.
00:10:36Diría que la mayoría se detiene aquí, en el nivel tres,
00:10:39donde entienden que deben usar habilidades.
00:10:41Claude no es muy bueno de entrada,
00:10:42pero con habilidades y capturas puedo llegar bastante lejos.
00:10:45Lo cierto es que hay un techo aquí porque
00:10:49nos vamos a quedar algo estancados en la "brecha de estilo".
00:10:50Como verás con lo que genera,
00:10:52se va a quedar... más o menos cerca, ¿vale?
00:10:55Pero no va a ser perfecto porque, de nuevo,
00:10:57sigue existiendo ese efecto de pérdida
00:11:01al decirle yo a Claude, que es muy preciso,
00:11:03que todo lo hace en código, mostrándole una imagen visual y
00:11:05diciéndole: "Oye, traduce lo visual a código".
00:11:08Y ese es el problema con mucho diseño front-end.
00:11:10Es como: es un medio visual y, sin embargo,
00:11:12estoy intentando escribirlo con texto y, al mismo tiempo,
00:11:15si le mando capturas visuales,
00:11:17sigue faltando esa pieza de traducción.
00:11:18¿Cómo lo hace correctamente? Bueno,
00:11:20lo cierto es que tiene un límite y podemos ver ese
00:11:22límite en acción justo aquí,
00:11:24porque esto es lo que creó con todas esas capturas.
00:11:28Aquí está el original y aquí el nuestro.
00:11:31Y como he dicho antes,
00:11:32aquí es donde la gente se queda atascada.
00:11:33Porque si recorremos esto, ya sabes,
00:11:36si entrecierras los ojos,
00:11:37puedes ver más o menos lo que intentaba hacer.
00:11:39Y tal vez llegó al 50% del camino.
00:11:41Y hay algunas cosas que nos gustan,
00:11:43pero lo que la gente hace ahora es volver aquí,
00:11:46tomar otra captura de la cabecera. Vale.
00:11:49"Vamos a trabajar en la cabecera" una y otra vez,
00:11:51muchos prompts, vale, vuelve a la captura, regresa.
00:11:53Y simplemente toma una eternidad y nunca lo logras del todo.
00:11:56¿Verdad?
00:11:57Debido a ese problema con la traducción de capturas
00:11:59a código.
00:11:59Así que para salir del nivel tres y avanzar al
00:12:02nivel cuatro,
00:12:03no solo debemos mirar la superficie de estos sitios que
00:12:06nos gustan y sacar inspiración de ellos.
00:12:08Necesitamos aprender a clonarlos adecuadamente y
00:12:11obtener el código subyacente que está impulsando algo
00:12:15como Open Hands. Y esto va más allá de simplemente:
00:12:18"Oh, solo queremos clonarlo y los estamos copiando".
00:12:20No, el proceso de clonar y luego descubrir cómo
00:12:23copiar estas cosas trae grandes beneficios
00:12:26para nosotros, no solo por la parte de la plantilla, que es genial,
00:12:30sino que te vas a ver expuesto al código real
00:12:34que sucede bajo la superficie y así pasar
00:12:36del nivel tres al nivel cuatro.
00:12:38Ahora debemos ir más allá de simplemente mirar superficialmente
00:12:41estos sitios para inspirarnos con las capturas.
00:12:44Ahora necesitamos aprender a ir bajo su superficie,
00:12:48mirar tras la cortina y ver cómo están construidos
00:12:51en términos de sus componentes de programación reales: su HTML,
00:12:54su CSS y su JavaScript.
00:12:56Así que el nivel cuatro es el Clonador.
00:12:59Aquí es donde aprendemos robando a los profesionales.
00:13:02Ahora, permítanme ser muy claro.
00:13:04Este nivel no se trata de:
00:13:05"Oh, vamos a plagiar sitios web y copiarlos y
00:13:08decir que son nuestros". Ese no es el caso aquí.
00:13:10Lo que sucede es que vamos a encontrar sitios que nos gusten
00:13:13y los vamos a deconstruir para usarlos como
00:13:16una plantilla sobre la cual construir. Y en el proceso,
00:13:20vamos a aprender muchísimo, como con cualquier habilidad.
00:13:24¿Cómo mejoras? Miras lo que hacen los profesionales.
00:13:27Intentas copiarlos.
00:13:28Aprendes un montón al intentar emularlos.
00:13:30Y con el tiempo le das tu propio toque y creas
00:13:33algo original. De eso se trata este nivel.
00:13:35Y para sacar el máximo provecho de esto,
00:13:37necesitamos empezar a entender qué pasa con
00:13:39el diseño front-end. El diseño front-end, de forma
00:13:42simplificada, tiene tres partes. Tiene el HTML.
00:13:45Piensa en eso como los huesos del sitio web, ¿vale?
00:13:47Cómo está estructurado realmente. Tenemos el CSS.
00:13:50Ese es el estilo, ¿verdad? Del sitio web.
00:13:52Piénsalo como la ropa del sitio web.
00:13:55Y luego tenemos el JavaScript.
00:13:56Piensa en el JavaScript como los músculos, ¿vale?
00:13:59Es lo que permite que las cosas sucedan cuando haces clic
00:14:01en un botón o haces lo que sea.
00:14:02Y es al mirar estas tres partes de un sitio web que
00:14:05podremos clonar o usar mejor una plantilla,
00:14:08pero también entender cómo funcionan, ¿verdad?
00:14:10Esa idea de deconstruir el sitio y aprender cómo
00:14:13hacen las cosas. Entonces, ¿cómo hacemos esto?
00:14:15¿Cómo podemos deconstruir, por ejemplo, Open Hands?
00:14:17Está claro que las capturas no funcionan porque no es lo mismo.
00:14:21Bueno, es relativamente sencillo. Para obtener el HTML,
00:14:25vamos a ir al sitio web y pulsaremos Control U.
00:14:28Lo que ves aquí es la totalidad del HTML.
00:14:33Así que lo que vamos a hacer es copiar esto,
00:14:37¿vale? Vamos a copiar todo esto.
00:14:39Y luego lo vamos a pegar en Claude.
00:14:42Normalmente esto será bastante grande; en este caso,
00:14:44son 1152 líneas de HTML. Ahora, abajo del todo,
00:14:48verán que también hay enlaces
00:14:50a los archivos CSS
00:14:54así como al JavaScript.
00:14:56Y eso es lo que estoy resaltando aquí abajo.
00:14:58Esto va a estar al final de básicamente todos
00:15:01estos archivos HTML, y alejaré un poco el zoom.
00:15:04Es difícil de ver, pero al final, ¿ven?
00:15:06tenemos el JavaScript y el CSS.
00:15:09Son archivos reales que también incluyen muchísimo código.
00:15:13Así que lo que haremos después de darle el HTML,
00:15:17es decirle también a Claude: "Oye,
00:15:19echa un vistazo al JavaScript y al CSS para
00:15:22entender realmente qué está pasando". Así que escribí:
00:15:24"Mira también los archivos CSS y JS". Puedes parar ahí.
00:15:29Y usará la búsqueda web por su cuenta para revisarlos.
00:15:31El problema es cómo funciona esa búsqueda en Claude.
00:15:35Llama a un modelo más pequeño para que lo haga, ¿vale?
00:15:39Así que esta instancia de Claude no va realmente a esa página.
00:15:42Usa un modelo pequeño. Este lo mira, lo resume y se lo
00:15:46devuelve a Claude.
00:15:47El problema es que los archivos CSS y JS son muy grandes y contienen
00:15:51muchas de las formas específicas en que se armó este sitio.
00:15:54Así que lo queremos todo, ¿vale? No quiero un resumen.
00:15:58Por eso he creado una habilidad que permite que Claude
00:16:03haga esto mejor. Es básicamente un prompt mejorado.
00:16:04Así toma todo el CSS y JavaScript que necesita.
00:16:07Solo digo: "Usa la habilidad de Site Teardown".
00:16:12Pondré esta habilidad de Site Teardown en la
00:16:16comunidad gratuita de la escuela; el enlace está en la descripción.
00:16:18Solo tienes que cargarla y tú también podrás hacer esto.
00:16:21En total, ¿qué dije? Dije: "Aquí está el HTML de Open Hands".
00:16:25Echen un vistazo también a los archivos CSS y JS.
00:16:28Usen la función de desglosar sitios y esta información para clonar mejor el sitio original de OpenHands.
00:16:31Ahora, ¿cómo nos va a educar esto? Bueno, lo primero es que...
00:16:36probablemente no tengan ni idea de cómo logré hacer cosas como este fondo, ¿verdad?
00:16:39¿Cierto?
00:16:40Seguramente no entienden bien o ni siquiera conocen qué tipo de vocabulario
00:16:43deberían haber usado para que imitara esto mejor, ¿no?
00:16:46Cuando solo le dábamos capturas de pantalla, obteníamos esto que era...
00:16:50bueno, algo parecido, más o menos,
00:16:52pero al hacer que Claude analice realmente lo que ocurre bajo el capó,
00:16:56podemos confiar en que Claude nos enseñe estas cosas porque ahora
00:17:01Claude entiende realmente lo que está pasando a nivel de código.
00:17:04Ahora podemos tener una conversación inteligente con Claude y decir: "Oye,
00:17:07¿cómo hicieron esto? ¿Qué significa eso? ¿Qué es un GSAP?".
00:17:11"¿Cómo hicieron las animaciones de desplazamiento? ¿Cómo hicieron esto?"
00:17:13"¿Cómo hicieron aquello?"
00:17:14Y con el tiempo, tras clonar más y más de estos sitios y usarlos como
00:17:18plantillas para tus propios proyectos, porque de nuevo,
00:17:19siempre vas a darle tu toque original.
00:17:21Solo estás usando esto como una base fundamental.
00:17:23Te volverás mejor en el diseño front-end,
00:17:26tal como sucede con cualquier otra habilidad.
00:17:29Y este es el proceso mediante el cual no solo te expones a técnicas profesionales,
00:17:31sino que empiezas a incorporarlas en tus creaciones,
00:17:34pero para pasar a los niveles adicionales... como dije, no puedes ser simplemente
00:17:38un mono frente al teclado con Claude,
00:17:41al igual que con todo lo demás de lo que hablamos. No puedes limitarte a dar a aceptar,
00:17:43aceptar, siguiente, siguiente, porque ¿entonces cómo te diferencias?
00:17:46Entonces, ¿qué habilidades necesitamos dominar en este proceso?
00:17:48Necesitamos aprender a leer y entender el código fuente.
00:17:51Claude nos ayuda con eso.
00:17:52Necesitamos identificar qué técnica corresponde a cada efecto porque,
00:17:57llegado a cierto punto, tenemos que ser capaces de ver estos sitios y
00:18:02reconocer de inmediato: "Ah, esto es lo que está pasando". Y finalmente,
00:18:04necesitamos aprender a adaptar estos patrones de clonación a nuestros propios diseños.
00:18:09No estamos plagiando. Nos estamos inspirando.
00:18:12Y si no dominas estas habilidades,
00:18:13te vas a quedar atrapado en esta trampa: el techo del clonador,
00:18:16donde solo copias, pero no puedes crear.
00:18:18No vas a querer entender el porqué.
00:18:20Así que vas a chocar con un límite insuperable.
00:18:22Y al final del día, podría reemplazarte con cualquier persona de la calle
00:18:25y simplemente decirle que siga los pasos uno, dos y tres, ¿verdad?
00:18:27Eso no te llevará tan lejos como quieres.
00:18:29Así que veamos qué fue capaz de construir Claude cuando le dimos
00:18:32todo este contexto de código adicional. Aquí está la versión actualizada.
00:18:35Esta obviamente se parece mucho más a la original,
00:18:39especialmente ahora que el fondo se ve bien.
00:18:41Si comparamos estas dos ahora, obviamente no es idéntica todavía.
00:18:45Este fue básicamente su primer intento, pero es mucho mejor,
00:18:48mucho más parecido a lo que teníamos.
00:18:50Y si queremos seguir iterando en este punto y acercarlo
00:18:54a lo que más nos guste de aquí, bueno, es mucho más fácil, ¿no?
00:18:57Porque ahora está mirando esencialmente el mismo libro de recetas
00:19:01que usa OpenHands, y podemos decir: "Vale, déjame cambiar esto".
00:19:04"Cambiemos aquello. Ya veo cómo lo hicieron. Así es como podemos emularlo".
00:19:07Y de nuevo, aquí es donde podemos empezar ese proceso de aprendizaje. Por ejemplo,
00:19:10este fondo tan genial, ¿cómo funcionaba?
00:19:12Y también, ¿cómo podemos conseguir lo mismo que tiene OpenHands, donde el ratón
00:19:17se desplaza y, ya saben, va revelando u ocultando partes?
00:19:19Solo tienes que preguntarle a Claude: "¿Cómo funciona el fondo?".
00:19:22"¿Cómo podemos igualar ese efecto?". Y cada vez que haces esto,
00:19:25simplemente estás añadiendo otra herramienta a tu repertorio.
00:19:27Así, Claude explica cómo funciona este efecto y, mejor aún, ahora
00:19:32lo aplica correctamente en nuestro propio fondo. Genial.
00:19:35Pero, por razones obvias, no queremos quedarnos en el nivel cuatro.
00:19:38No queremos ser solo un clonador, ¿verdad? Queremos darle nuestro toque.
00:19:42Queremos empezar a hacerlo nuestro. ¿Cómo hacemos eso?
00:19:45¿Cómo pasamos al nivel cinco y le damos nuestro propio giro a las cosas?
00:19:48Bueno, aquí es donde empezamos a divertirnos con componentes y también
00:19:53con nuestros propios diseños de recursos personalizados. Aquí es donde traemos
00:19:56nuestras cosas y ya no solo copiamos exactamente lo que hace otra web.
00:19:57Una de las formas más fáciles de empezar es buscando componentes de calidad
00:20:02en sitios como 21st.dev. En muchos sentidos,
00:20:04esto es similar a cómo buscamos inspiración en sitios web y trajimos esas partes,
00:20:08pero a un nivel micro, a nivel de componentes.
00:20:11Por ejemplo, en un sitio como 21st.dev,
00:20:14puedo mirar cosas como los botones aquí a la izquierda.
00:20:17Y lo que voy a encontrar son un montón de diseños de
00:20:21botones diferentes. Y si encuentro uno que me guste, digamos,
00:20:26algo como esto... bueno, pues solo tengo que copiar este prompt,
00:20:29llevarlo a Claude y decirle: "Oye, integremos este diseño de botón".
00:20:33Y esto se aplica a prácticamente cualquier tipo de botón, ¿verdad?
00:20:36Tenemos cosas para carruseles, áreas de desplazamiento, mapas,
00:20:40menús de navegación, imágenes, de todo.
00:20:42Y no se limita solo a 21st.dev. Hay otros sitios como CodePen, ¿cierto?
00:20:46CodePen tiene muchísimos diseños geniales que también podemos incorporar.
00:20:50Monet es otro muy bueno. De hecho,
00:20:52hay un montón de lugares donde puedes encontrar estos componentes tan chulos
00:20:57y empezar a integrarlos en tu página web.
00:20:59Pero, ¿y si queremos algo que sea un poco más personalizado?
00:21:01No quiero simplemente copiar un montón de componentes aleatorios de otros sitios.
00:21:04¿Cómo lo hago realmente original? Bueno, tienes dos opciones.
00:21:08La primera es seguir usando estos componentes de 21st.dev,
00:21:11pero pedirle a Claude que los cambie, ¿no? Al final es solo código.
00:21:14Este prompt nos da el código exacto y luego podemos retocarlo a nuestro gusto,
00:21:18o podemos literalmente crearlo nosotros mismos. Quiero decir,
00:21:21si vamos a Pinterest y vemos páginas de aterrizaje geniales como esta,
00:21:25que son casi como obras de arte, bueno, nada nos impide
00:21:29usar la IA para crear una imagen así y que sea el elemento estrella
00:21:34que la gente vea al entrar en nuestra página.
00:21:36Y no tienen por qué ser solo imágenes estáticas. Es decir,
00:21:39tenemos toda la capacidad de añadir vídeos a nuestro fondo,
00:21:42vincularlos a ciertas animaciones de desplazamiento para, de nuevo,
00:21:45tomar las ideas que descubrimos en el paso cuatro y hacerlas nuestras.
00:21:49Así que hagamos eso. Vamos a rediseñar rápidamente nuestra página web,
00:21:53alejarnos de este clon de OpenHands y diseñar alguna pieza genial
00:21:57de arte con IA para que sea lo primero que se vea al entrar al sitio.
00:22:01Ya conocen el proceso a estas alturas,
00:22:02primero necesitamos encontrar algo de inspiración y, tras navegar por
00:22:06Pinterest un rato,
00:22:07estoy viendo muchos sitios como este donde tenemos una imagen casi de dibujos
00:22:10animados o estilizada de fondo para la sección principal.
00:22:14Y luego tendremos parte de nuestro texto a la izquierda.
00:22:16Aquí es donde puedes empezar a aportar tu narrativa visual, ¿no?
00:22:19¿Qué aplicación estamos creando? La aplicación es Argus, ¿verdad?
00:22:22Y tenemos que idear un eslogan que, idealmente, también
00:22:27conecte con la propia imagen. ¿Qué buscamos con Argus? Bueno,
00:22:30Argus... ya saben, figura mitológica, 10 000 ojos.
00:22:33Hablamos de redes sociales.
00:22:34Hablamos de encontrar cosas antes que los demás.
00:22:37Así que el eslogan que se me ocurrió fue "Mira lo que viene", sencillo.
00:22:41Es directo. Y ya saben quién me ayudó con eso.
00:22:44Obviamente fue Claude. Y luego lo que hice con Claude fue,
00:22:47básicamente decirle: "Oye, ya sabes,"
00:22:49"estamos hablando de narrativa visual aquí."
00:22:51"¿Qué ideas se te ocurren para la imaginería?", ¿no?
00:22:54Porque en esta etapa quiero hacer algo propio, ¿vale?
00:22:57Puedo tomar los conceptos generales de lo que ven aquí en cuanto a imágenes
00:23:01y cómo lo organizan, pero la imagen tiene que ser mía. Y de nuevo,
00:23:04tener una narrativa visual que conecte con lo que tu aplicación
00:23:07realmente hace, te ayudará muchísimo.
00:23:10Así que lo que terminé haciendo fue crear una imagen basada en algunas
00:23:15ideas que me dio Claude Code, y de hecho me apoyé en Midjourney para esta,
00:23:18Pueden usar cualquier generador de imágenes que quieran,
00:23:21ya sea Nano Banana Pro o Seed Dream, no importa realmente.
00:23:24Me gusta mucho Midjourney para este tipo de piezas de arte conceptual
00:23:28porque Midjourney, especialmente la versión siete...
00:23:31aunque la verdad no he probado mucho la versión ocho.
00:23:33Le puedes dar un prompt algo raro. El que yo le di fue:
00:23:38"Necesito una imagen de fondo que será la página de inicio de un sitio web llamado
00:23:41Argus. El eslogan es 'Mira lo que viene'".
00:23:43Y solo con un prompt tan pobre y vago como ese,
00:23:47obtuve un montón de cosas chulas de entre las que pude elegir.
00:23:50Vi esto y pensé: "Esto se ve genial, ¿verdad?". Y ya me lo imagino,
00:23:54ahora mismo,
00:23:55con la información aquí a la izquierda,
00:23:59podemos tener algo arriba... puedo jugar con esto.
00:24:02Creo que es muy chulo. Quizás hasta hagamos alguna animación en algún momento.
00:24:06Una vez que tengo mi imagen, el resto es bastante fácil.
00:24:10Voy a descargarla, se la daré a Claude y le diré: "Oye,
00:24:13quiero rediseñar la página principal usando esta imagen como fondo".
00:24:17Así que, dentro de Claude, dije:
00:24:19"En realidad quiero cambiar el front-end por completo."
00:24:21"Quiero usar la siguiente imagen como fondo para la sección principal."
00:24:24"Pongamos la información sobre la app Argus en el lado izquierdo,"
00:24:27"dejemos espacio negativo a la derecha para que luzca la imagen y que el eslogan sea
00:24:30'Mira lo que viene'". Veremos qué hace. Y de nuevo,
00:24:34este es el nivel donde tienes que empezar a dejar que tu creatividad
00:24:37fluya, porque hasta este momento,
00:24:39te has expuesto a muchos diseños front-end diferentes que son distintos
00:24:43a lo súper genérico que ves en todas las plantillas de SaaS.
00:24:46Eso significa algo de arte chulo o lo que sea. Repito,
00:24:48la narrativa visual es lo que buscamos y realmente va a subir de nivel
00:24:52tu trabajo.
00:24:52Y aquí está cómo se ve nuestra sección principal actualizada con ese nuevo
00:24:56fondo. La hice un poco más pequeña
00:24:58para que puedan verla entera y Claude también,
00:25:02ya saben, actualizó todos los colores. De nuevo, fue solo el primer intento.
00:25:06Solo hemos añadido este fondo, pero de inmediato
00:25:09se empieza a sentir un poco más, no sé, original,
00:25:12más creativo, algo que destaca, ¿verdad?
00:25:15Y ahora empezamos a añadirle más y más de nuestro estilo.
00:25:19Para empezar, puede ser tan simple como mejorar la resolución de la imagen.
00:25:21Eso puedes hacerlo en Midjourney, porque como vemos aquí,
00:25:24la imagen se siente un poco estirada y no tan detallada como nos gustaría,
00:25:28o podemos hacer algo como añadir movimiento.
00:25:30No tenemos por qué tener un fondo estático.
00:25:32Podemos poner un vídeo ahí detrás también.
00:25:34Convertirlo en vídeo es muy fácil.
00:25:36Solo tienes que ir a algún sitio como Kling 3.0 o Veo 3.1,
00:25:40cualquier lugar donde puedas usar un fotograma inicial.
00:25:41Lo ideal es que también puedas definir el fotograma final. Como ven aquí a la izquierda,
00:25:45así no hace movimientos locos, porque hay que recordar que,
00:25:49lo ideal sería que fuera un bucle perfecto.
00:25:52A veces puede ser difícil conseguir que las imágenes de IA hagan bucles correctos.
00:25:55Así que la segunda mejor opción es crear un vídeo bastante largo, de unos 15 segundos.
00:25:59Y quieres que el movimiento sea sutil. Como lo que ven aquí, ¿vale?
00:26:03Si tuviera esto de fondo, incluso con los pájaros quietos,
00:26:07que está totalmente bien, es casi como un efecto de paralaje lo que consigues.
00:26:11Y como es la página principal y esto dura 15 segundos,
00:26:14es poco probable que alguien se quede ahí sentado 30 segundos
00:26:18para verlo entero. Así que, si hay un pequeño salto al final,
00:26:22no pasa nada. Pero por suerte en este,
00:26:24como el movimiento era tan sutil,
00:26:25casi ni se nota cuando pasa del segundo 15 al segundo uno.
00:26:29Así que vamos a usar este. Y probablemente se pregunten:
00:26:31"¿Qué pasa con el rendimiento?". Bueno, en cuanto al rendimiento en escritorio,
00:26:35estará bien con el vídeo, pero le diremos a Claude: "Oye,"
00:26:38"si es un usuario de móvil el que entra en tu web móvil,"
00:26:42no cargará el video para ellos. Simplemente cargará esa imagen estática.
00:26:45Así que le di la nueva imagen reescalada y le dije: "usa esa para el móvil".
00:26:50Luego le di un enlace al video y le dije: "Oye,
00:26:52reemplaza eso en la sección principal".
00:26:54Y así es como se ve la página ahora con el movimiento,
00:26:58¿verdad? Creo que se ve bastante bien. Lo otro es que es sutil, ¿no?
00:27:02No quieres poner un movimiento loco y que parezca un videojuego
00:27:06en el fondo, a menos que sepas lo que estás haciendo,
00:27:07pero algo como esto, con ese movimiento sutil de las nubes,
00:27:11tienes el agua moviéndose abajo, ¿ves? De nuevo, esto le da,
00:27:14le da a tu página web,
00:27:15cierta personalidad, y darle a tu web un nivel de carácter original es de lo que
00:27:19se trata el nivel cinco. Como sigo diciendo, en los primeros cuatro niveles,
00:27:22aprendíamos los fundamentos. Veíamos qué hacen los profesionales; aquí,
00:27:25en el nivel cinco, realmente lo estamos personalizando. Al igual que con el inicio,
00:27:28así es como debes empezar a abordar cada una de las secciones, ¿vale?
00:27:32Como estas tarjetas; estas tarjetas son horribles. El fondo aquí es algo aburrido.
00:27:36Es exactamente lo mismo todo el tiempo. Entonces, ¿qué voy a hacer?
00:27:38Voy a buscar inspiración. Iré a 21st thought dev, iré a Awwwards.
00:27:42Lo llevaré a Claude Code y luego voy a iterar, iterar,
00:27:45e iterar hasta llegar a un punto que realmente me guste. En esta etapa,
00:27:48mientras haces todos estos cambios visuales, te sentirás un poco
00:27:51limitado trabajando solo dentro de Claude Code. De nuevo,
00:27:54siempre existe esa especie de tensión entre estar dentro de una terminal,
00:27:58usando texto, e intentar manipular cosas en un medio visual. Así que en el paso seis,
00:28:03vamos a empezar a salir un poco de Claude Code porque es aquí,
00:28:06en el nivel seis, donde empezamos a traer algunas herramientas externas que nos
00:28:11permiten ser aún más específicos con la composición de estos elementos visuales.
00:28:14Y hay muchísimas herramientas a nuestra disposición.
00:28:17Tenemos cosas como paper.design, tenemos Stitch, tenemos Figma, ¿vale?
00:28:21Tenemos pencil.dev.
00:28:22Aquí es donde ya tienes la capacidad y las habilidades para traer estos programas
00:28:26externos para retocar un poco más; y uno excelente para probar, porque está
00:28:29muy orientado a la IA y es sencillo, es Stitch. Además es gratis, ¿vale?
00:28:33Es de Google y básicamente nos da un lienzo visual para jugar con el diseño frontend.
00:28:38Lo que hice aquí fue... no estamos empezando nada desde cero.
00:28:42Estamos haciendo un rediseño. Así que le pasé capturas de nuestra web,
00:28:45tanto de la página principal como del resto.
00:28:47Y le dije: "Aquí tienes cómo está configurada la web actual. Me gusta mucho el inicio".
00:28:51"Me gusta el estilo de ahí y me gustan los colores,
00:28:53pero quiero actualizar básicamente toda la mitad inferior de nuestro sitio web, ¿vale?"
00:28:57"Se siente muy plano, ¿no?"
00:28:59"Quiero traer el tipo de imágenes y colores que tenemos aquí
00:29:03arriba. Veamos qué se te ocurre".
00:29:05Así que echemos un vistazo a lo que generó para el rediseño.
00:29:08Y aquí está lo que obtuvimos.
00:29:10Lo genial de Stitch es que puedo pedirle rediseños sobre el rediseño.
00:29:14Si lo tengo seleccionado,
00:29:15pueden ver que aparece abajo y puedo darle instrucciones como a cualquier chatbot.
00:29:18También puedo hacer clic derecho e ir a variantes y, de nuevo,
00:29:22cambiar el diseño, la combinación de colores, las imágenes, etc.
00:29:24Como esto fue un rediseño en Stitch y no estaba construyendo algo desde
00:29:28cero, esto es solo una imagen que creó.
00:29:30Pero es algo a lo que puedo hacer clic derecho y copiar.
00:29:34Y luego llevar eso de vuelta a Claude Code y decirle: "Oye,
00:29:37¿qué te parece esto?". De nuevo,
00:29:38estas herramientas de edición visual son geniales para el proceso de ideación.
00:29:43Y repito, hay muchísimas. Pencil.dev es otra
00:29:46que verán por todas partes.
00:29:47Esto funciona muy bien si usas Cursor o VS Code,
00:29:50porque puedes tener el lienzo abierto y editar cosas en tiempo real.
00:29:54Hay muchas herramientas en este espacio y salen más al mercado
00:29:58cada semana. Así que subí esa imagen de nuevo a Claude Code y básicamente
00:30:01le dije: "Oye, ¿qué te parece esto?"
00:30:03"¿Qué opinas de este efecto de glassmorphism que logramos con la
00:30:06imagen de fondo? Vamos a probarlo".
00:30:08Y eso es prácticamente lo que harás de aquí hasta que la web esté como
00:30:12tú quieras,
00:30:12porque esta es la etapa del diseño frontend en la que solo estás retocando.
00:30:15Vas a retocar, retocar, retocar y retocar.
00:30:16A estas alturas ya has desarrollado las habilidades para ver hacia dónde vas,
00:30:21pero este es un proceso extremadamente iterativo y no hay atajos reales.
00:30:25Pero, de nuevo, ya tienes todas las herramientas a tu disposición,
00:30:27tanto para encontrar inspiración como para experimentar.
00:30:31Después de unos 20 minutos de retoques por mi cuenta,
00:30:34esto es lo que conseguí con Argus. Primero que nada,
00:30:37notarán algunos pequeños cambios que le dan peso,
00:30:40le dan una sensación más premium. Lo primero es la sección de carga, ¿no?
00:30:43Cuando actualizo esto, ¿qué ven?
00:30:45Se nota como una pequeña pausa antes de que cargue todo el texto y eso le da
00:30:49cierto empaque, ¿verdad? Lo hace sentir más sólido.
00:30:52También notarán que cambié las fuentes. Las fuentes son vitales. La tipografía es clave.
00:30:57¿A dónde puedes ir para ver diferentes fuentes y,
00:31:00ya saben, buscar inspiración? Pues un lugar excelente es Google Fonts.
00:31:03Tienen muchísimas fuentes, todas gratuitas.
00:31:06Están categorizadas por tipo y Claude Code puede usarlas todas.
00:31:08Así que echen un vistazo a Google Fonts si están en plan: "Ah,
00:31:11no sé muy bien cuál debería usar". Añadimos una sección de scroll aquí abajo.
00:31:14Pusimos este tipo de cinta en la parte inferior que también sirve como borde
00:31:19entre nuestro video y el fondo de imagen que tenemos abajo. Antes,
00:31:25pasar de la sección principal con video a la misma imagen como fondo
00:31:30era muy brusco, pero esto le da un borde mucho más natural.
00:31:35También notarán los cambios que trajimos desde Stitch.
00:31:38Ahora tenemos este efecto de glassmorphism que aún debemos pulir
00:31:41un poco. Notarán que se corta un poco al rebotar,
00:31:44pero de nuevo muestra ese arte de fondo que le da personalidad a lo nuestro.
00:31:48Y luego también pueden ver detalles sutiles, ¿verdad?
00:31:52Si actualizo justo aquí,
00:31:54verán que el contador sube rápido de cero a 10 millones. Es decir,
00:31:59son estos pequeños detalles los que demuestran que realmente te esforzaste
00:32:03en la web y que hay un nivel de orgullo profesional.
00:32:07Incluso notarán ese efecto de brillo pasando sobre herramientas de IA y
00:32:10estrategia de contenido. Y de nuevo, son solo esas cositas.
00:32:12Son esos pequeños detalles que, a decir verdad, la mayoría de la gente
00:32:16ni siquiera notará. Sin embargo, cuando los combinas todos,
00:32:20lo que obtienes finalmente es algo que se ve coherente y algo que
00:32:24cuidaste y creaste, sin importar si usaste la IA como herramienta.
00:32:27El punto es que fue trabajado, ¿entienden? Tiene todos esos detalles.
00:32:31Como la barra de scroll arriba, ¿ven cómo progresa? Son solo
00:32:34detalles muy, muy pequeños. Entonces, ¿cómo le di las instrucciones?
00:32:38Bueno, sinceramente,
00:32:40fue solo una combinación de todo lo que hemos hablado hasta ahora. O sea,
00:32:42he visto el tipo de cosas que me gustan.
00:32:45Tomo capturas de pantalla y las llevo a Claude Code, pero más aún,
00:32:48no soy ningún experto en diseño web. Así que en ciertas cosas,
00:32:52supe de inmediato: "Oye,
00:32:53me gustaron las tarjetas de glassmorphism que vimos en Stitch", ¿verdad?
00:32:57Porque recuerden que Stitch nos dio esa idea primero.
00:32:59Y cuando Claude Code las hizo originalmente, eran algo planas, ¿no?
00:33:03No destacaban en la página. Así que le dije: "Oye,
00:33:06vamos a darles algo de cuerpo. Hagamos que resalten".
00:33:08Pero lo que también le pedí a Claude Code fue: "Oye,
00:33:12quiero que hagas una búsqueda en la web sobre las mejores prácticas de diseño web
00:33:17cuando se trata de hacer este tipo de cosas".
00:33:20Y además de averiguar cómo
00:33:22hacer que estas tarjetas resalten y tengan peso,
00:33:25proponme otras cosas que hagan que nuestra web se vea un poco más premium
00:33:29pero de manera sutil. Y se le ocurrieron un montón de ideas diferentes.
00:33:32Revisé todas las ideas; descarté algunas, me quedé con otras,
00:33:36pero ese es el ritmo general de trabajo, ¿vale?
00:33:40No tienes que depender totalmente de ti mismo.
00:33:41Claude puede buscar en la red y ver las mejores prácticas, pero recuerda,
00:33:45tú siempre tienes el control.
00:33:47Tú estás al volante y no tengas miedo de divertirte con esto.
00:33:50Como dije, todos estos pequeños detalles son donde, de nuevo,
00:33:53le das carácter y lo haces tuyo, ¿verdad?
00:33:57Cuanto más podamos hacerlo tuyo y reflejar tu espíritu creativo en este
00:34:02espacio, mejor se verá. De verdad,
00:34:04porque si es un reflejo de ti y de lo que quieres proyectar en pantalla,” es difícil llamar a eso contenido basura de IA.
00:34:08estás intentando retratar, es difícil llamar realmente a eso basura de IA.
00:34:11Es difícil llamarlo una plantilla genérica de IA porque es tuyo.
00:34:14Y aunque este nivel trate superficialmente sobre
00:34:17usar herramientas externas como Stitch,
00:34:19creo que en realidad este nivel seis es todo lo que acabo de decir.
00:34:23Como usar Stitch para iterar.
00:34:25Pero, en última instancia, en este nivel
00:34:27es donde finalmente puedes pensar creativamente, expresarte en el diseño frontend
00:34:31y usar Claude Code como la herramienta, a diferencia de los primeros niveles,
00:34:34donde solo nos dejábamos llevar. Eso nos deja con la capa final,
00:34:37la capa siete, ¿verdad? ¿Y qué está pasando ahí?
00:34:41¿Qué es todo esto del 3D? Bueno, les adelanto...
00:34:45este es un lugar donde probablemente ninguno de nosotros vaya a entrar todavía.
00:34:51Cuando hablamos de la frontera, del arquitecto y de las cosas en 3D,
00:34:55aquí es donde juegan en las grandes ligas.
00:34:57Esto no es algo que realmente podamos hacer nosotros. Creo que a día de hoy,
00:35:02finales de marzo de 2026,
00:35:05no sé si esto está todavía a nuestro alcance, porque aquí es cuando
00:35:07empezamos a hablar de WebGL personalizado, shaders y experiencias 3D.
00:35:12De esto estamos hablando.
00:35:13Webs que parecen prácticamente un videojuego. Miren, por ejemplo,
00:35:17este sitio web de aquí.
00:35:20¿Creen que esto es algo donde simplemente podemos hacer control U, control A,
00:35:25ya saben, mirar el HTML y el CSS para ver qué pasa?
00:35:30No, no; esto es como arte, ¿verdad?
00:35:34Este es un equipo de diseñadores que pasó muchísimo
00:35:37tiempo montando todo esto y es absolutamente precioso. Ahora,
00:35:41en teoría, ¿podría la IA hacer esto? Quizás, pero seré honesto. Esto está,
00:35:45esto está muy por encima de ustedes o de mí.
00:35:47Y francamente, solo puse esto aquí para mostrarles lo que es posible.
00:35:50Porque cuando ves webs así... y si quieren ver más,
00:35:53vayan a Awwwards,
00:35:54de la que hablé antes, y miren sus "sitios del día" y "sitios del mes";
00:35:57todos tienen ese mismo estilo donde
00:36:00todo es totalmente personalizado.
00:36:03Y quizás esto sea algo en lo que la IA nos permita participar en unos años.
00:36:07Pero es realmente genial.
00:36:09Todo el espacio del diseño web es sumamente interesante.
00:36:12Estas cosas son arte puro. Y como dije,
00:36:16cuando empiezas en este mundillo,
00:36:17solo ves el mismo estilo SaaS una y otra y otra vez.
00:36:19Pero cuando ves cosas como esta, simplemente te explota la cabeza.
00:36:22Y esto es muy del nivel siete.
00:36:24Si saben cómo hacer cosas así con IA, pues oye,
00:36:27deberían ser ustedes los que estén en YouTube haciendo videos.
00:36:29Porque a mí me encantaría aprender; pero,
00:36:30sinceramente, creé este nivel solo para mostrar esta web de Igloo.
00:36:34Porque es genial. Así que... échenle un vistazo y,
00:36:38simplemente déjense asombrar y piensen en lo que podrían hacer
00:36:42en el futuro.
00:36:43Y aquí es donde los voy a dejar al final de nuestros siete niveles de
00:36:46diseño frontend con Claude Code. Lo que espero que hayan sacado de esto,
00:36:51más que nada, es la idea de la progresión de habilidades
00:36:56para llegar a algo así. Porque es algo totalmente factible.
00:36:58Y la idea es que primero necesitamos ver cosas que nos gusten,
00:37:01luego tenemos que aprender a deconstruirlas.
00:37:03Esa idea de clonar sitios web creo que es súper importante, ¿verdad?
00:37:06Porque vas a aprender muchísimo dejando que Claude Code te guíe
00:37:10sobre cómo alguien creó una web que te encantó. Y a través de ese proceso,
00:37:14te vas a educar en todas estas técnicas y efectos que
00:37:18ni siquiera sabías que eran posibles. Y tras ese proceso,
00:37:21podrás ir a tu propio sitio web y empezar a aplicarlos con tu
00:37:26propio estilo creativo, ¿ven? De eso se trata realmente. No se trata de:
00:37:30"Oye, hay esta habilidad súper especial, la usas en Claude Code,
00:37:33y ¡guau!, mira qué web". Sinceramente, si fuera tan fácil,
00:37:37todas las webs se verían bien. Y no es así.
00:37:40Así que está claro que no es tan fácil, ¿no? Hay algo más. O sea,
00:37:44creo que esa idea de que la IA no tiene gusto propio
00:37:47es en parte cierta,
00:37:48pero creo que es más exacto decir que
00:37:53nos cuesta mucho articular nuestro propio gusto, y nos cuesta
00:37:57articularlo porque ni siquiera conocemos las palabras correctas,
00:38:02porque no somos diseñadores web. No conocemos el vocabulario.
00:38:05No conocemos la nomenclatura.
00:38:06Y eso es algo muy común con todo lo relacionado con la IA en
00:38:10general, no solo en diseño web. También pasa con la programación.
00:38:13Si no vienes de ese mundo,
00:38:15simplemente no sabes cómo hablar el idioma, literalmente. Y eso crea una
00:38:19desventaja de traducción,
00:38:21entre tú y Claude Code, y el resultado final acaba siendo algo
00:38:25descuidado y genérico. Pero espero que al recorrer esta hoja de ruta,
00:38:29vean un camino para aliviar esas carencias con el tiempo.
00:38:32Espero que les haya servido de algo. Me he divertido mucho haciendo esto.
00:38:37Díganme en los comentarios qué les pareció. Como siempre, no olviden
00:38:40echar un vistazo a Chase AI Plus si quieren acceder al masterclass de Claude Code.
00:38:43Nos encantaría tenerlos allí. ¡Nos vemos!