Transcript
00:00:00"La IA no tiene gusto y es tu culpa".
00:00:03La razón por la que tus resultados visuales son tan mediocres
00:00:05es porque tus prompts son muy mediocres.
00:00:08No estás usando el tipo de terminología,
00:00:10lenguaje y nomenclatura
00:00:11que un diseñador real usaría.
00:00:13Pero, por suerte para nosotros, encontré una solución.
00:00:16Se llama Impeccable.
00:00:17Y es un repositorio de GitHub de código abierto
00:00:20que, para todos los efectos, es una habilidad única
00:00:23Y hoy no solo les voy a mostrar cómo funciona esta habilidad,
00:00:25vamos a usarla para crear un sitio web nuevo
00:00:27y para editar uno de mis sitios web que ya existe.
00:00:29que le enseña cómo es realmente un buen diseño
00:00:32mientras también le indica qué tipo de diseños malos evitar.
00:00:36Y hoy no solo les voy a mostrar cómo funciona la habilidad,
00:00:39vamos a usarla para construir un sitio web nuevo
00:00:42y para editar uno de mis sitios web que ya existe.
00:00:45Así que al final de este video, no tendrás excusa
00:00:48cuando se trate de crear diseños front-end mediocres.
00:00:51Entonces, Impeccable es un repositorio de GitHub de código abierto
00:00:54que nos da una habilidad única
00:00:55que nos permite crear diseños front-end
00:00:58que no apesten.
00:01:00Ahora, es una sola habilidad,
00:01:01pero decir eso es minimizarlo un poco
00:01:03porque esta única habilidad incluye 23 comandos diferentes.
00:01:07Tiene siete archivos de referencia específicos del dominio.
00:01:10Nos dice qué tipo de antipatrones evitar
00:01:13e incluso nos permite editar cosas dentro de nuestro navegador.
00:01:17Así que esta es, de hecho, una herramienta muy robusta.
00:01:20Esto no es solo una habilidad de diseño front-end
00:01:22que se extiende por unos pocos párrafos
00:01:24Ahora, desglosa todo dentro del repositorio,
00:01:26pero la verdad es que nunca recordarás todos.
00:01:28Pero hay dos cosas que ayudan aquí.
00:01:31Una, obviamente, Cloud Code hará un buen trabajo
00:01:34al determinar cuál deberías usar.
00:01:35Pero, en segundo lugar, tienen un sitio web completo
00:01:37que también nos muestra qué hace cada una de estas 23 habilidades.
00:01:40Así que el GitHub enlaza al sitio web,
00:01:42que es impeccable.style.
00:01:44Y lo genial es que, por cada habilidad aplicable,
00:01:46podemos ver cómo luce algo antes,
00:01:49que es Cloud Code básico,
00:01:53y cómo luce después
00:01:54de usar ese comando específico de Impeccable.
00:01:56Así que está bastante bien.
00:01:59Ahora, Impeccable realmente tiene siete pilares de diseño,
00:02:02tipografía, color, diseño espacial, capacidad de respuesta,
00:02:03y cómo se ve después
00:02:05de usar ese comando específico de Impeccable.
00:02:07Así que es bastante pulcro.
00:02:09Ahora, Impeccable realmente tiene siete pilares de diseño,
00:02:12tipografía, color, diseño espacial, capacidad de respuesta,
00:02:15interacciones, movimiento y redacción de UX.
00:02:17Así que no se trata solo de colores y cosas por el estilo.
00:02:21Es bastante completo.
00:02:22Y justo aquí, podemos desplazarnos
00:02:25por todos estos comandos diferentes.
00:02:27Y, como dije, ver cómo se ven
00:02:29usando la habilidad y sin usarla.
00:02:31Así que si te preguntas: "Oye, ¿qué hace exactamente esto?
00:02:34¿Puedo verlo en acción?"
00:02:35Bueno, este es el lugar para hacerlo.
00:02:37El sitio web también incluye un estudio de caso
00:02:39que muestra cómo crearon este sitio web
00:02:40con Impeccable y una sola imagen.
00:02:42Y creo que se ve bastante genial.
00:02:43Y por último, muestran este modo en vivo,
00:02:45con el que vamos a jugar un poco,
00:02:47que está en alfa,
00:02:48y nos permite manipular nuestro sitio web
00:02:51a través del navegador, como dije antes.
00:02:53Ahora, también tiene una extensión de Chrome y una CLI,
00:02:56pero para ser honesto,
00:02:56obtenemos cerca del 99% del valor a través de la habilidad.
00:02:59Así que eso es en lo que nos centraremos hoy.
00:03:01Ahora, para instalar esto, es una sola línea de código,
00:03:04que todo lo que tienes que hacer es copiar esto,
00:03:06ir a tu terminal y pegarlo.
00:03:07Ahora, cuando se trata de usar Impeccable,
00:03:09realmente hay dos caminos a seguir.
00:03:11Uno es Greenfield,
00:03:12donde construimos un sitio web desde cero,
00:03:14y el segundo es editar un sitio existente.
00:03:17Ahora, hoy haremos ambas cosas y más,
00:03:20porque no solo les voy a mostrar
00:03:22cómo construirlo desde cero,
00:03:23también les mostraré cómo se ve
00:03:25cuando construimos desde cero con algún tipo de imagen de referencia,
00:03:27con un mood board, por así decirlo.
00:03:30Después de hacer eso, iremos a mi sitio web real
00:03:33y veremos qué piensa Impeccable al respecto
00:03:36y qué tipo de "basura" podemos mejorar en mi propio trabajo.
00:03:41Por último, echaremos un vistazo a Impeccable Live,
00:03:43que está en su fase alfa,
00:03:44y veremos qué tan bueno es esto realmente tal como está hoy.
00:03:48Pero antes de sumergirnos en la construcción real,
00:03:50una palabra rápida del patrocinador favorito de todos: yo.
00:03:54El mes pasado lancé mi Masterclass de Claude Code,
00:03:56y es la forma número uno de pasar de cero a desarrollador de IA,
00:03:59especialmente si no vienes de un entorno técnico.
00:04:02Actualizo este curso cada semana,
00:04:05así que es el mejor lugar para averiguar
00:04:07cómo usar realmente esta herramienta increíble.
00:04:10Nos enfocamos en casos de uso reales.
00:04:12Acabo de sacar todo mi
00:04:13plan de lecciones del sistema operativo agentico de Claude Code.
00:04:16Así que si quieres tenerlo en tus manos,
00:04:18puedes encontrarlo dentro de Chase AI Plus.
00:04:20Hay un enlace a eso en el comentario fijado.
00:04:23Así que empecemos,
00:04:24y vamos a comenzar con el proyecto Greenfield.
00:04:27Así que vamos a construir un sitio web desde cero.
00:04:29Ahora, de nuevo, hay tantos comandos,
00:04:31que puede volverse un poco confuso.
00:04:32Si estás comenzando algo desde cero,
00:04:35sugiero abrirlo con Impeccable Craft,
00:04:39porque va a incluir
00:04:41algunos de estos comandos subsidiarios como Impeccable Teach.
00:04:44Ahora, ¿qué significan todas estas cosas?
00:04:45Bueno, Impeccable Craft significa prácticamente
00:04:48que va a pasar por su propia versión del modo plan
00:04:50y preguntar sobre nuestro sitio web, nuestro producto,
00:04:53qué es lo que realmente estamos tratando de construir.
00:04:55Y en ese proceso, creará dos archivos.
00:04:59Creará un product.markdown
00:05:01y un design.markdown.
00:05:02Ahora, el design.md es prácticamente lo mismo
00:05:07que hemos visto en Google Stitch.
00:05:09Ustedes recuerdan Google Stitch, ¿verdad?
00:05:11La herramienta de diseño gratuita de Google.
00:05:13Tienes todo este sistema de diseño,
00:05:14y tienes este archivo design.md,
00:05:16que es este archivo markdown muy detallado,
00:05:20diciéndole a la IA cómo construir algo.
00:05:21Toda esta estructura de design.md
00:05:24se está convirtiendo en un estándar de la industria, por así decirlo.
00:05:27Lo ves por todas partes estos días.
00:05:29Y Impeccable sigue ese enfoque.
00:05:31Así que esencialmente nos va a entrevistar
00:05:32y a averiguar qué es lo que estamos construyendo
00:05:34y cómo queremos que se vea.
00:05:36Y una vez que haya realizado la entrevista,
00:05:37va a seguir adelante y construir la página de aterrizaje para nosotros.
00:05:39Es una plataforma de análisis para fundadores solitarios y equipos pequeños.
00:05:41estoy en un nuevo directorio llamado Impeccable-test.
00:05:44El comando es Impeccable-craft.
00:05:47Y el prompt es: "Vamos a construir una página de aterrizaje
00:05:49para mi producto SaaS falso Lighthouse.
00:05:51Es una plataforma de análisis para fundadores solitarios/equipos pequeños.
00:05:54Hazme cualquier pregunta que quieras".
00:05:56Este es prácticamente el mismo prompt
00:05:58que le di a Huashu Design en mi último video.
00:06:01Si no lo has visto, hazlo definitivamente,
00:06:03que es esencialmente un clon de diseño de Claude.
00:06:06Así que será interesante ver
00:06:08cómo Impeccable se mantiene frente a ese sistema de diseño.
00:06:11Y si no has visto ese video,
00:06:13lo enlazaré arriba.
00:06:14Así que regresó con 13 preguntas.
00:06:16Las primeras cuatro son todas sobre el producto,
00:06:18como: ¿quién es el cliente real?
00:06:19¿Cómo describirías a Lighthouse?
00:06:21¿Cuál es la mentalidad del visitante?
00:06:22¿Cuál es la llamada a la acción principal?
00:06:23¿Cuál es el punto real de esta página de aterrizaje?
00:06:25Las siguientes preguntas son sobre la voz y el aspecto
00:06:28antes de entrar en el alcance.
00:06:29¿Solo estamos haciendo el héroe?
00:06:30¿Scroll completo, capturas de pantalla reales?
00:06:32Como: ¿tienes otros activos para mí?
00:06:34Y lo que me gusta aquí es la profundidad de las preguntas.
00:06:36Estas son más preguntas que las que Huashu Design nos hizo
00:06:40en el último video.
00:06:41Y esto es bastante cerca de la cantidad de preguntas
00:06:43que obtendrías de algo como Claude Design.
00:06:44Es muy profundo y me gusta ver esto.
00:06:46Así que lo que voy a hacer es simplemente llenarlas.
00:06:49Las mantendré bastante estándar.
00:06:50No voy a tener que hacer nada loco.
00:06:52Y vamos a pedir un scroll completo.
00:06:53Así que aquí está lo que Impeccable nos dio en su primer intento
00:06:56con una guía bastante mínima.
00:06:57Todo lo que realmente hicimos fue responder sus preguntas.
00:06:59No le dimos ningún tipo de activo ni siquiera ejemplos.
00:07:01Ahora, de inmediato,
00:07:02definitivamente no pienso "basura de IA" de entrada cuando veo esto,
00:07:05aunque empiezas a ver este color crema
00:07:08y la fuente serif en todas partes en estos diseños front-end
00:07:11más modernos, especialmente cosas como Claude Design.
00:07:13Me gusta este panel que se le ocurrió,
00:07:16definitivamente me gusta esto.
00:07:18Me gusta que no solo estoy viendo tus cajas bento estándar,
00:07:20ya sabes, las que ves en cada
00:07:23sitio web de diseño con IA.
00:07:25Esta parte se ve bastante bien.
00:07:26Tenemos la cita, precios completos,
00:07:30y luego algo como: "oye, adelante, danos tu correo".
00:07:32Así que, para una primera pasada, está bastante bien.
00:07:35Pero lo que realmente me gusta hacer últimamente
00:07:37cuando se trata de mis diseños web con Claude Code es
00:07:40que no dejo que me dé un solo resultado como este.
00:07:44Así que lo que hice fue decirle a Impeccable, también conocido como Claude Code,
00:07:47que no quiero solo un diseño del sitio web.
00:07:50Como ven aquí, esta fue la primera pasada que me dio.
00:07:52Quiero ver tres variantes diferentes para poder elegir.
00:07:56Y quiero que todas sean bastante distintas.
00:07:59Además de eso, quiero poder hacer clic en todas ellas
00:08:01y quiero verlas todas una al lado de la otra.
00:08:03Así que quiero ver una especie de macro diseños
00:08:05antes de entrar de lleno en los detalles
00:08:08y empezar a jugar con los componentes.
00:08:09Y así es como Impeccable me dio esto.
00:08:11Tenemos el editorial que acabamos de ver.
00:08:15Creó uno al que llamó "drenched" justo aquí.
00:08:17Definitivamente un estilo diferente, con mucho más color.
00:08:20Y luego tuvimos el brutalista.
00:08:22Aquí tienen un vistazo al "drenched",
00:08:24definitivamente es mucho más diferente.
00:08:26Diré que tenemos algo de superposición aquí en el frente,
00:08:29pero esto se ve bastante diferente de la mayoría de las generaciones de IA.
00:08:34A medida que avanzamos, ya saben, me gusta un poco la audacia
00:08:39de este sitio web, aunque realmente no conozco los colores.
00:08:43Pero diré que me gusta este brutalista.
00:08:44Es muy en escala de grises,
00:08:46pero me gusta cómo están configurados los números.
00:08:48Me gusta cómo las cajas están como desplazadas.
00:08:52Como que las líneas no coinciden del todo.
00:08:54De hecho, me gusta mucho este.
00:08:56Creo que se ve genial y muy diferente.
00:08:58Y creo que lo que vamos a hacer es que nos quedaremos
00:09:02con este por ahora.
00:09:04Y para que lo sepan, todo esto de los tres diseños
00:09:07y verlos todos a la vez,
00:09:08eso no es algo inherente a Impeccable.
00:09:12Esto es algo que hago yo.
00:09:13Es solo un simple prompt.
00:09:14Y les sugiero encarecidamente que hagan esto sin importar el tipo
00:09:17de diseños o herramientas que estén usando.
00:09:19Creo que esto es algo que aprendí de Stitch
00:09:23porque Google Stitch hace que sea muy fácil
00:09:25hacer este tipo de cosas donde puedes ver
00:09:26todas estas variaciones diferentes en la misma página
00:09:29y comparar y contrastar.
00:09:30Y para mí personalmente, tengo que ver estas cosas visuales
00:09:33para tener alguna idea de hacia dónde quiero ir.
00:09:37Así que sugiero encarecidamente que hagan esto.
00:09:38No tienen que ser tres.
00:09:39Podrían ser seis, podrían ser un millón.
00:09:41Y también cuando le piden a Claude Code
00:09:42que haga este tipo de cosas, solo díganle,
00:09:44quiero poder ver los tres en la misma página.
00:09:47Quiero poder abrirlos en pantalla completa uno por uno.
00:09:50Y también pueden pedirle que les dé un montón
00:09:53de opciones macro diferentes,
00:09:55y luego pueden simplemente elegir entre ellas
00:09:57y luego hacer que cree estas.
00:09:57Porque obviamente toma un poco de tiempo generarlas.
00:09:59Así que ahora que tenemos una página de destino que nos gusta,
00:10:01ahora es momento de empezar a editar algunas cosas,
00:10:03que es donde entra el nuevo Impeccable Live.
00:10:06Así que todo lo que tenemos que hacer es decir,
00:10:07oye, ejecutemos Impeccable Live en esta página brutalista.
00:10:10Ahora, una vez que ejecutan ese comando,
00:10:12Claude Code les dirá que el modo en vivo está activo.
00:10:14Debería darles un enlace al host local
00:10:18en el que necesitan estar, o pueden simplemente actualizar su navegador.
00:10:20Y entonces, aquí dentro, ahora pueden ver
00:10:22mientras me desplazo, las cosas ahora están resaltadas.
00:10:26Y en la parte inferior aquí, tenemos algunas cosas también.
00:10:29Entonces, primero que nada, tenemos design.md.
00:10:32Abre la barra lateral en el lado derecho.
00:10:35Y si presiono "raw", puedo ver todo lo que realmente creó.
00:10:39Ahora, si hago clic en un componente particular
00:10:41como esta copia principal, tenemos algunas opciones que aparecen.
00:10:45Primero que nada, tenemos "free form", que es,
00:10:47oye, le doy un prompt de texto,
00:10:50o tengo acceso a esencialmente
00:10:52todos estos diferentes comandos de Impeccable.
00:10:54Así que "bolder", "quieter", "distill", "polish", "adapt".
00:10:56Todos estos son solo parte de esos 23 comandos de Impeccable
00:11:00de los que hablábamos antes.
00:11:02Así que digamos que hago algo como "bolder".
00:11:04Entonces "bolder" es esencialmente un prompt prediseñado.
00:11:09Y si miramos aquí dentro de la documentación de Impeccable,
00:11:12lo que "bolder" va a hacer es que lo hará más audaz.
00:11:15Así que este es el antes, este es el después.
00:11:18Es simplemente hacerlo casi un poco más llamativo.
00:11:21Así que la definición exacta es que empuja los diseños seguros
00:11:26hacia el impacto sin caer en el caos,
00:11:28dice cuándo usarlo y cómo funciona y todo eso.
00:11:31Entonces, si hacemos "bolder" en esto, y para ser honesto,
00:11:32siento que esto ya es bastante audaz.
00:11:34No sé si este es el mejor.
00:11:35Puedo refinar eso más a fondo.
00:11:37Así que puedo hacer "bolder" más cualquier prompt que quiera hacer.
00:11:40Digamos que escribo "add color".
00:11:43Entonces tengo esta cosa aquí que dice
00:11:46x3, x4, x2.
00:11:47Esa es la cantidad de variaciones que me va a mostrar.
00:11:50Y luego presionamos "go".
00:11:51Así que esto, en cierto modo, es como una micro versión
00:11:56de lo que estábamos haciendo aquí en términos de variaciones
00:11:58donde estoy como, está bien, dame esta única cosa.
00:12:00Cambiémoslo, muéstrame variaciones.
00:12:03Ahora estamos haciendo esto a un micro nivel
00:12:06y podemos ser aún más específicos
00:12:08en términos de lo que buscamos, ¿verdad?
00:12:09En este caso, estamos haciendo "bolder".
00:12:10Podríamos haber elegido cualquiera de esas 12 opciones
00:12:13y esto es lo que se le ocurrió.
00:12:14Así que sí, muy audaz en comparación con las otras opciones.
00:12:17Esta es la variante uno, la variante dos,
00:12:21un poco más moderada
00:12:22y luego la variante tres, un poco salvaje, ¿verdad?
00:12:25También esta capacidad de ajustar la variante.
00:12:27Entonces, si hago clic en "tune", ¿verdad?
00:12:30podemos cambiar un poco el desplazamiento.
00:12:31Por ejemplo, esto, como lo salvaje, ¿quieres que se vea?
00:12:36¿Cómo quieres que se vean los colores?
00:12:39Así que de nuevo, si pensamos en mi último video
00:12:42o si piensan en Claude Design, como ajustes,
00:12:44de nuevo, esto es prácticamente como micro ajustes
00:12:47y eso aplica a todas las variantes.
00:12:50Ocultar la clave, mostrar la clave, así que hay mucho que podemos hacer.
00:12:53Digamos que queremos ir con esto.
00:12:54Entonces, si quiero ir con eso, ¿qué voy a hacer?
00:12:56Solo tengo que presionar aceptar y ya está aplicado.
00:13:00Ahora, si presionas aceptar y falla así,
00:13:02solo revisa el Claude Code,
00:13:03básicamente está aplicando tus cambios y recargándolo.
00:13:06Y así es como se ve con los cambios promulgados.
00:13:09Ahora, lo único de lo que no hablé fue "detect".
00:13:10Entonces, si presiono "detect" aquí, lo que va a buscar
00:13:13es esencialmente tratar de ver, ¿hay algo de basura de IA aquí?
00:13:17Está detectando alguno de estos anti-patrones
00:13:19de los que hablamos antes?
00:13:20Ahora, debido a que esto fue creado completo con Impeccable,
00:13:24dudo mucho que encuentre algo
00:13:26y es por eso que no vemos que aparezca nada.
00:13:28Pero veremos más adelante cuando echemos un vistazo a mi propio sitio web,
00:13:31si ese es el caso.
00:13:32Pero así es básicamente como funciona el sistema en vivo.
00:13:34Y creo que esta parte es realmente genial y lo que lo distingue,
00:13:37creo, de otras habilidades y repositorios de diseño frontend
00:13:41que han visto en el pasado,
00:13:42especialmente el hecho de que podemos crear variantes adicionales.
00:13:45Soy súper optimista sobre poder ver
00:13:47todas estas variantes diferentes a la vez
00:13:49y ajustarlas a este nivel tan micro, micro, micro.
00:13:52Así que me encanta esto, pero de nuevo, es alfa.
00:13:54Así que, ya sabes, tal vez te encuentres con algunos errores.
00:13:57Hay un par de cosas
00:13:59que parecen estar un poco ásperas en los bordes,
00:14:01como la recarga que acaban de ver, pero oigan,
00:14:03creo que esto es súper genial.
00:14:04Así que definitivamente revisen esto si usan Impeccable.
00:14:07No dejen que solo lo cree y terminen con ello.
00:14:09Entren en vivo y jueguen con esto.
00:14:11Ahora, una vez que tengan la página web en un lugar que les guste,
00:14:13hay más comandos que tienen la capacidad de ejecutar.
00:14:16Así que podemos ejecutar algo como "polish"
00:14:18donde hace una pasada final del sistema de diseño.
00:14:20Podemos hacer algo como "harden"
00:14:22donde va a echar un vistazo a casos extremos y errores
00:14:24y asegurarse de que todo esté funcionando.
00:14:25Como dije, esto es muy, muy sofisticado
00:14:28y bastante profundo en términos de la cantidad de comandos que podemos ejecutar.
00:14:30Pero por el bien del tiempo, lo que vamos a hacer ahora
00:14:33es que les voy a mostrar cómo construir desde cero,
00:14:35pero esta vez vamos a estar usando
00:14:38esencialmente como un tablero de inspiración o una maqueta
00:14:40del tipo de visión que queremos llevar a Impeccable.
00:14:43Porque quiero ver cómo se ve esto
00:14:45cuando copiamos cuál fue su estudio de caso,
00:14:48porque lo que hicieron es que tomaron esta imagen,
00:14:50la metieron en Claude Code, la pusieron en Impeccable,
00:14:52y fue como, está bien, crearon este sitio web,
00:14:53y pudieron obtener algo
00:14:54que se veía bastante increíble.
00:14:55Así que seguí adelante y creé algunas imágenes
00:14:58que coinciden con la estética que Impeccable usó en su estudio de caso,
00:15:02pero estamos usando Lighthouse en su lugar,
00:15:04para que al menos podamos obtener una prueba
00:15:07que es algo así como una comparación uno a uno.
00:15:09Así que me gusta esta, así que creo que iremos con esta.
00:15:11Al igual que antes, estoy ejecutando "impeccable craft" como la habilidad.
00:15:15Luego me hizo una serie similar de preguntas que antes,
00:15:18y prácticamente me dijeron que solo me quedara con
00:15:21una especie de estado de ánimo y ambiente
00:15:22que obtuviste de la imagen que te di.
00:15:24Así que esto es lo que se le ocurrió,
00:15:26y honestamente, deja un poco que desear.
00:15:29Creo que simplemente lanzarle este tipo de tablero de inspiración
00:15:33y decirle, "Oye, creemos un sitio web a partir de esto,"
00:15:35le costó trabajo.
00:15:37Creo que hizo lo mejor que pudo.
00:15:38Como, todavía tenemos el tablero, tiene los colores,
00:15:41pero no es tan bueno como el que ellos crearon,
00:15:43porque creo que como solo le di ese recurso
00:15:46y no incluí activos adicionales,
00:15:48realmente no lo fragmentó de la misma manera
00:15:51que Impeccable hizo con su estudio de caso,
00:15:52pero podría ser un problema de redacción.
00:15:55Pero aun así, se pueden ver los huesos
00:15:57de algo que funcionaría aquí.
00:15:59Me gusta cómo hacen el panel de control.
00:16:01Así que definitivamente no es tan impresionante, creo,
00:16:05como el original que hicimos al principio,
00:16:09pero bueno, pensé en probarlo.
00:16:11Ahora veamos cómo funciona cuando editamos un sitio existente.
00:16:14Usaremos mi sitio web, el sitio real de mi agencia de IA,
00:16:18y ejecutaremos algunos comandos en él.
00:16:21Usaremos el documento de Impeccable
00:16:23para que pueda realizar ingeniería inversa a un archivo design.md
00:16:26desde el código, y luego haremos cosas como ejecutar la auditoría
00:16:29y hacer una crítica, y realmente haremos lo de la versión en vivo de nuevo
00:16:32en mi sitio web real y ver qué tipo
00:16:36de anuncios podemos crear.
00:16:37Como referencia, este es el sitio web de mi agencia de IA.
00:16:41Tengo una sección principal estándar.
00:16:43Voy a los servicios, hablo de mi filosofía
00:16:47sobre cómo hacemos la implementación de IA
00:16:49antes de tener una especie de llamado a la acción,
00:16:51un lugar donde las personas pueden completar su información
00:16:54si quieren trabajar conmigo.
00:16:55Tengo algunas páginas adicionales como mi blog,
00:16:57pero nos limitaremos a la página de inicio por ahora.
00:17:00Así que lo primero que hice fue decir,
00:17:02ejecutemos el documento de Impeccable en esta base de código
00:17:05y veamos qué tiene que decir Impeccable sobre mi sitio actual.
00:17:08Así que está revisando toda la base de código
00:17:11y creará un design.md para lo que ya tenemos,
00:17:16y es a partir de esa base
00:17:18que podemos empezar a editar cosas.
00:17:19Después de que Impeccable revisó la base de código,
00:17:21escribió tres archivos que son básicamente como
00:17:23contexto estratégico para lo que está sucediendo.
00:17:26Habla sobre las victorias, la Estrella Polar,
00:17:29pero también habla sobre siete violaciones diferentes que encontró.
00:17:33Entonces, la esfera azul dice que las maquetas de tarjetas de servicio
00:17:37son básicamente un paquete variado de imágenes prediseñadas,
00:17:40una cuadrícula de tarjetas intencional.
00:17:43Odia el glassmorphism, así que no le gusta eso.
00:17:47Dice que cargamos una fuente determinada, pero nunca la usamos,
00:17:50así como algunas otras cosas.
00:17:53Así que había algunos tipos de características
00:17:54que están esencialmente en el código,
00:17:55pero que en realidad no aparecen en la interfaz de usuario.
00:17:58Y luego algún problema con algunos de los colores.
00:18:02También habla sobre la brecha estratégica
00:18:04de que yo básicamente no me pongo a mí mismo, la persona, Chase,
00:18:07en el sitio web, lo cual es justo.
00:18:10Ahora podemos obtener una crítica aún más profunda
00:18:12si ejecutamos el comando de crítica.
00:18:15Hagámoslo ahora.
00:18:16Le estoy diciendo que ejecute el comando de crítica.
00:18:18Ni siquiera escribí crítica correctamente.
00:18:20Diciéndole que ejecute el comando de crítica en la página de inicio.
00:18:23Así que ejecutó su crítica y su veredicto fue,
00:18:25sí, es una chapuza de IA al límite.
00:18:27Me dio un puntaje de salud del diseño en 10 cosas diferentes
00:18:33y cada una era sobre cuatro
00:18:34y no obtuve más de tres en ninguna de ellas,
00:18:37pero no obtuve ningún uno, así que eso es bueno.
00:18:39El total fue 25 de 40, lo que clasifica como aceptable.
00:18:43Para la carga cognitiva, me da un cinco de ocho fallido.
00:18:46Dice que el movimiento de fondo compite con el contenido.
00:18:51Sí, creo que es algo tenue,
00:18:54pero veo de dónde viene.
00:18:56Dos CTA de igual peso aquí con prioridad ambigua.
00:19:00La sección de servicios tiene cuatro esquemas visuales diferentes
00:19:03junto con algunas otras cosas.
00:19:05Y su impresión general es que tiene buenos huesos,
00:19:08pero podría hacer un poco más.
00:19:10Y luego al final, lo desglosa
00:19:11en tres lugares diferentes hace una semana.
00:19:14Así que honestamente, me gusta esta crítica.
00:19:16Esto es muy, muy profundo y nos da mucho con lo que trabajar
00:19:19y se vuelve bastante específico sobre lo que cree que está mal.
00:19:22Ahora, si estoy de acuerdo con parte de esto o no,
00:19:24creo que es aparte del punto,
00:19:26pero nos da cosas en las que pensar.
00:19:29Sabes, no voy a asumir ciegamente
00:19:31que todo lo que me está diciendo es correcto,
00:19:32pero podemos repasar esto, o si quisiera,
00:19:35puedo repasar todo esto.
00:19:36Estoy como, está bien, cambiemos esto y aquello.
00:19:37Así que veamos qué pasa si hacemos B
00:19:40y decimos que queremos jugar
00:19:42con lo que llama disciplina de decoración
00:19:44y veamos qué cambios hace.
00:19:46Y después de ver qué cambios hace,
00:19:48entraremos en la sesión en vivo,
00:19:51tal como lo hicimos con la primera página de destino que construimos
00:19:54y jugar con eso.
00:19:55Así que veamos algunos de los cambios que hizo.
00:19:57Y los cambios fueron muy sutiles.
00:19:59Así que podemos ver justo aquí en la sección de servicios,
00:20:03esta es la versión actualizada.
00:20:04Ellos suavizaron los colores y lo mantuvieron
00:20:07solo en esta especie de naranja terracota y blanco.
00:20:09Notarán que ya no hay una especie de neblina azul
00:20:13en la parte inferior izquierda.
00:20:14Como referencia, este es el anterior
00:20:17donde tienes este azul en la parte inferior izquierda
00:20:18y luego azul y luego verde.
00:20:20Así que se mantiene solo en dos colores, ¿verdad?
00:20:23El tipo de blanco, bueno, realmente tres colores,
00:20:25diría que blanco, gris y luego el naranja.
00:20:28También se puede ver abajo en la sección de enfoque.
00:20:32Así que mientras paso por las tarjetas, todavía tenemos ese brillo naranja,
00:20:36pero en el original tenía algo de naranja aquí abajo.
00:20:41Tenía la línea de la tarjeta en la parte superior
00:20:43y cree que es una especie de cosa de tipo de IA.
00:20:47Y ese es el alcance de los cambios de disciplina de decoración.
00:20:51Así que bastante sutil, tiene otros
00:20:53que quiere probar también.
00:20:54Tienen que ver con la confianza y la conversión
00:20:56y potencialmente agregar cosas como fotos de perfil.
00:20:58Pero a lo que saltaremos ahora
00:21:00es entrar al modo en vivo.
00:21:02Así que echemos un vistazo al sitio web ahora en el modo en vivo.
00:21:05Así que digamos que quería cambiar estas tarjetas un poco
00:21:08y al igual que antes, ¿qué haría?
00:21:10Puedo hacerlo de forma libre o puedo seguir
00:21:13y elegir uno de estos comandos precargados.
00:21:17Así que probemos deleite para este.
00:21:19Y luego seguiremos adelante y buscaremos tres variantes.
00:21:22Y lo que hace el deleite es agregar algo de personalidad real
00:21:26a ese componente en particular.
00:21:27Aquí hay un vistazo a algunas de las variantes que nos dio.
00:21:30Así que esta es un poco más grande,
00:21:32tiene una especie de cosa aquí abajo a la derecha.
00:21:35Cambia el texto real aquí.
00:21:37Y añade esta pequeña cosa también.
00:21:40Y obviamente como estas, tenemos las melodías
00:21:43con las que jugar también.
00:21:45Se supone que es un número, está un poco mal.
00:21:49Así que sí, prácticamente el mismo escenario
00:21:53que el primer sitio web que creamos.
00:21:55Creo que esta cosa en vivo para Impeccable
00:21:57es en realidad su herramienta más poderosa con diferencia.
00:22:00El hecho de que podamos hacer estos microajustes
00:22:02desde esencialmente una interfaz gráfica
00:22:04versus tener que hacer todo en la línea de comandos.
00:22:06Así que me alegra ver que es prácticamente
00:22:08la misma configuración exacta,
00:22:09incluso cuando estamos usando una base de código que ya existe.
00:22:12En general, realmente me gustó Impeccable.
00:22:13Creo que es 100% una habilidad que deberías agregar a tu stack
00:22:17y definitivamente probar cuando hagas tu próxima ronda
00:22:20de diseño front-end,
00:22:21ya sea para un sitio web que estás creando desde cero
00:22:23o para algo que ya existe.
00:22:26Y 100% prueba la herramienta en vivo.
00:22:29Esto es algo que acaban de añadir,
00:22:31creo que hace aproximadamente una semana.
00:22:32Y creo que es un gran diferenciador
00:22:34de todas estas otras cosas.
00:22:35Creo que cuando combinaste estos microajustes
00:22:38con los diseños macro que te dije que hicieras
00:22:41a través de la solicitud al principio,
00:22:43creo que tienes un flujo de trabajo realmente poderoso.
00:22:45Como siempre, dime qué te pareció.
00:22:47El enlace a este repo estará en la descripción.
00:22:49También hay el enlace en el comentario fijado a Chase AI+
00:22:52si quieres tener en tus manos mi clase magistral de Cloud Code.
00:22:55Y además de eso, nos vemos.