Diseño web de Shopify: planifica, diseña y construye un escaparate de Shopify con IA

1. INTRODUCCIÓN: Hola, y bienvenidos a Shopify Web Design. Tu guía para planificar, diseñar y construir un escaparate Shopify con IA Si no has visto mi cara antes, mi nombre es Christopher Dodd Soy un maestro top aquí en skillshare.com y experto en desarrollo Shopify, trabajando con tiendas Shopify En esta clase, te llevaré a través del proceso de creación de un diseño web de alta flity para una tienda de comercio electrónico en Figma. Utilizando la inteligencia artificial tanto como sea posible para automatizar el trabajo más básico. En mis dos clases anteriores, te enseñé a construir diseños web en Figma, estructurados de una manera específica que los hace más fáciles de interpretar para los agentes de IA, y más recientemente, te llevé a través del proceso de llevar una marca de sus elementos centrales a una tienda funcional usando un tema Shopify listo para usar En este curso, te llevaré a través de un proceso que toca lo que aprendimos en ambas clases. Tomaremos esa misma marca de la última clase, pero en lugar de encajarla en un tema existente de Shopify, crearemos un diseño web de alta fidelidad Figma para crear algo completamente personalizado Con esa misma convención te enseñé en mi anterior clase de diseño web Figma Dentro de esta clase automatizaremos la mayor parte posible del proceso de diseño web, centrándonos solo en las decisiones y principios básicos del diseño web mientras dejamos que IA se encargue de la mayor parte del trabajo duro Al final de la clase, habrás creado un conjunto de maquetas de alta fidelidad en Figma, todas mapeadas a plantillas en Shopify que luego podremos usar IA una vez más para generar el código para un tema de Shopify 100% personalizado Empecemos. 2. Prefacio: Entonces como mencioné en la Intro, voy a diseñar y construir un escaparate Shopify en esta clase usando la misma marca ficticia que utilicé en la clase anterior Adjunto a esta clase, deberías poder localizar y descargar la carpeta del proyecto para CNS Macha Muchos de los archivos son los mismos de la clase anterior, pero también encontrarás que he separado carpeta Imágenes del sitio web y agregado un montón de imágenes más a esa carpeta también. También he incluido una carpeta de iconos de sitios web con los iconos estándar de Shopify Si quieres seguir exactamente, puedes usar los mismos archivos que yo, pero si quieres aprender junto con tu propia marca, no dudes en usar tus propios archivos en su lugar. Aparte de los archivos del proyecto, vas a necesitar un par de herramientas. Y desafortunadamente, ambos sí vienen con una etiqueta de precio. Claude code es la herramienta que voy a usar como mi agente de IA para esta clase para automatizar gran parte del trabajo gruñido, pero puedes sentirte libre de cambiar esto por cualquier alternativa, ya sea Codex por IA abierta o algo más código Claude nos ayudará a crear wireframes en Figma, que es la herramienta principal que usaremos en esta clase para crear nuestras maquetas de alta fidelidad Si bien Figma suele ser gratuito, para poder usar el Figma MCP, que es lo que necesitarás para conectarlo al código Claude, necesitarás estar en algún tipo Para mí, pago alrededor de 20 USD cada uno por estos servicios, pero vale la pena al 100%. Dicho esto, si quieres seguir adelante sin ningún agente de IA te ayude, eso también es posible. Solo tendrás que hacer mucho del trabajo básico tú mismo, es decir, configurar los wireframes Figma manualmente Por último, y esto es algo que olvidé mencionar más adelante en la clase, pero si quieres usar el código de Claude para construirte un tema personalizado basado en las maquetas de Figma que crearemos en la clase, querrás tener instalado el kit de herramientas de IA propio de Shopify Sin él, el código con garras o cualquier agente que elijas usar podría no tener las habilidades y conocimientos necesarios para escribir el código del tema Otra herramienta que también podría considerar agregar es Chrome DevTools MCP Esta herramienta permite que el código con garras abra páginas y tome capturas de pantalla para que pueda verificar su propio trabajo en el navegador Esta es una herramienta que actualmente tengo instalada, pero también olvidé mencionarla más adelante en la clase. Entonces es posible que desee que se instale también. Dicho todo eso, si tienes un agente de IA y una suscripción a Figma, deberías estar listo para seguirlo Si bien podemos estar confiando mucho en la IA en esta clase, te puedo asegurar como alguien con años de experiencia construyendo sitios Shopify, usaremos estas herramientas de manera profesional para diseñar y construir un sitio web de Shopify sobre los cimientos correctos, en lugar de simplemente crear otro sitio web de slop de IA 3. Panel de inspiración: En este video, vamos a cubrir el moodboarding, que es la etapa inicial en el proceso de diseño web para obtener inspiración visual con el fin de ayudarte a descubrir qué elementos quieres en tu sitio web y qué estética te gustaría para esas secciones y el sitio web en general Como dice, aquí, un mood board es solo un collage visual de imágenes, texto, colores y texturas utilizados para definir y comunicar la dirección estética de un proyecto de diseño. Obviamente, en nuestra situación aquí mismo, lo estamos haciendo para el diseño web. Ir a mirar otros sitios web similares de Shopify, ver lo que están haciendo, capturas de pantalla secciones que nos gusten y poner eso en un mood board, que se te ocurra como un álbum de recortes No necesitas ningún software específico para esto, pero al parecer vamos a estar usando Figma para el resto de la clase, voy a usar Ya he configurado un archivo de diseño aquí para esta marca en la que vamos a estar trabajando es la misma marca falsa que la clase anterior, Sans Macha Obviamente, esta vez lo estamos haciendo de una manera diferente, pero el proceso con moodboarding es básicamente el El primer paso es obviamente dónde buscar para encontrar estos sitios de inspiración. Si quieres, simplemente puedes buscarlo en Google, o puedes usar una herramienta como Gemini, que también es un producto de Google. Entonces podríamos entrar aquí, como hicimos en la clase anterior y preguntar cuáles son las mejores marcas MachaPowder que venden predominantemente Bien. Entonces este fue básicamente el mismo prompt que pusimos en Gemini la última vez, y puedes ver aquí que hay diferentes categorías que tenemos aquí. Como vimos la última vez, algunos de ellos son muy japoneses y auténticos, y algunos son marcas macha más modernizadas al consumidor moderno Entonces aquí están algunos aquí mismo, Marcha de hoja de Jade. Y claro, esto es específicamente para marcas macha. Quieres cambiar esto por cualquiera que sea tu marca. Entonces, si vendes suplementos proteicos, quieres ver cuáles son las mejores marcas de suplementos proteicos. Pero también puedes buscar inspiración de diseño fuera de tu nicho, también. Cualquier tipo de sitios web de comercio electrónico que te gusten. Cada vez que estés navegando por otros sitios web de eCommerce y veas algo que te guste, definitivamente deberías marcar eso o llevarlo a tu mood board. Pero aquí lo estamos haciendo en una sesión. Entonces vamos a ver a Jade Leaf marchante como nuestro primer ejemplo Y ya puedo decir aquí, igual que hice en la última clase que me gustan algunos de los elementos de diseño. La diferencia entre esta clase y la anterior es que vamos a estar diseñando todo desde cero. Entonces voy a señalar todos los sitios web que me gustan su sistema de diseño general porque más adelante en la clase, vamos a estar creando algo llamado un MD de diseño para todos los sitios que nos gustan, describiendo lo que nos gusta esos sitios y luego combinándolo con nuestro propio sistema de marca para llegar a un sistema de diseño general para nuestro diseño web usando IA. ¿Bien? Entonces solo voy a capturar no solo las secciones que me gustan, sino que también voy a anotar las URL de los sitios que me gustan su estética general Entonces este, Jade Leaf, me gusta mucho su estética. Estoy buscando construir algo similar. Así que lo que voy a hacer es que voy a abrir una edición de texto, cualquier tipo de software de texto simple, y voy a pegar eso ahí dentro. Bien, entonces quiero ir a través y obtener inspiración para secciones que me puedan gustar en mi sitio web. Entonces, como puedes ver aquí, tenemos una sección de héroes, y luego tenemos una sección de colección destacada. Estos son los términos estándar de la industria en Shopify. Un héroe al que puedes pensar como un gran banner que va en la parte superior de tu página, y una sección de colección destacada, ya que se relaciona con Shopify es básicamente solo un montón de tarjetas de productos listadas en una fila como esta generalmente con un control deslizante Entonces eso es solo explicar algo de esa terminología. Prácticamente todos los sitios de comercio electrónico que verás, comienzan con un héroe y una sección de colección destacada. Y verás que eso está integrado en los valores predeterminados de la herramienta que luego usamos para generar el plan de nuestra tienda Shopify ¿Bien? Entonces a medida que bajamos, aquí hay otra pancarta. Aquí hay diferentes categorías. Entonces hay como una sección de lista de colecciones aquí, una imagen a la izquierda, texto en el elemento derecho. Aquí tienen un deslizador de recetas. De nuevo, depende del sitio que estés viendo. Normalmente, la mayoría de los sitios de comercio electrónico Shopify tendrán el héroe y la sección de colección destacada, pero después de eso, realmente va a depender de esa marca específica Bien, entonces lo que quiero que hagas aquí es el número uno, como acabo de hacer, lista los sitios web que te gustan su sistema de diseño general porque vamos a usar eso para ayudar a crear nuestro sistema de diseño más tarde. Número dos, quiero que veas algunas de las secciones y te inspires en qué tipo de secciones puedes poner en tu sitio web aparte de la colección estándar de héroes y características. Por ejemplo, tal vez mires aquí esta sección de recetas y te vas, Oh, en realidad, ten muchas recetas geniales con nuestra marca marcher Esta es definitivamente una sección que quiero en mi página web. Entonces incluso podemos anotar esto en nuestro documento de texto aquí, secciones que quiero, ¿verdad? Digamos, recetas destacadas. Y en Shopify, podemos poner esto en un blog. Creo que eso es probablemente lo que han hecho. Sí, así que están usando la plantilla de artículo para entregar todas estas recetas. Básicamente es solo una entrada de blog, ¿de acuerdo? También hay algunos blurbs aquí, qué es Macha, cómo hacer Macha, Macha beneficios para la salud Entonces podrías decir, Bien, quiero y luego describirlo en como quieras. Siempre y cuando lo entiendas y puedas describirlo, no tiene que tener un nombre exacto, pero yo llamaría a estos que listan productos destacados colección o productos destacados, y este héroe, porque la aplicación que vamos a usar para crear los planes entiende qué es una sección de colección destacada y una sección de héroes. Bien, así que cuanto más podamos usar la terminología estándar, mejor, pero no te pongas al día con eso. Describe la sección lo mejor que puedas. Para mí, lo que voy a hacer por mi lista de secciones es que básicamente voy a replicar las mismas secciones que teníamos en nuestro sitio web de Ciencia de la clase anterior Entonces, si recuerdas, simplemente lo configuramos sobre un tema fuera de la estantería. Entonces, si miras el sitio web, tenemos a nuestro héroe. Tenemos nuestra gama de productos, nuestra colección destacada aquí. Tenemos algunos blurbs sobre Y Cans Macha. Debido a que no había una sección de texto con iconos en el encabezado del tema WA, tuvimos que combinar dos secciones aquí, pero no tendremos que combinar dos secciones para crear una sección cuando la desarrollemos a medida. Entonces esa es esencialmente una sección, las USP, y luego esta sección testimonial. También voy a agregar algunas otras como voy a agregar en una barra de anuncios, pero en su mayor parte, voy a usar la misma lista de secciones que la que creamos en la clase anterior, ¿bien? Tus propósitos, lo que quiero que hagas es construir sobre esta lista, determinar qué tipo de secciones quieres, y también que mires el diseño de ellas también, ¿de acuerdo? Entonces tal vez no tenemos un montón de categorías diferentes en nuestra marca marcher En realidad, sólo tenemos cuatro productos. Es una marca bastante simple para mi marca de prueba particular, pero definitivamente me gusta el estilo de la cabecera. Entonces voy a hacer una captura de pantalla, y tengo esta configuración para que vaya directamente al filtro de capturas de pantalla aquí, ¿verdad? Y entonces puedo entrar en mi tabla de estado de ánimo por aquí y decir, ya sabes, puedes configurar esto como quieras. Puedo decir diseños de cabecera que me gusten. Bien. Y luego solo puedes traer esa captura de pantalla. A lo mejor quieres hacer este texto más grande. Definitivamente lo hago. Aún más grande que eso. Entonces podemos decir, Jefe de diseños que me gusten. Me gusta el tipo de aspecto de píldora. Se puede decir, Bien, secciones que me gusten. Bien, digamos, para este, voy a simplemente alejar el zoom para poder capturarlo más fácilmente. El zoom out realmente no funciona. Así que voy a tratar de capturarlo lo mejor que pueda dentro de mi pequeño ancho de pantalla aquí. Así que voy a agarrar eso. Y luego voy a decir, en realidad, sólo puedo copiar esta cabeza. Y decir ideas de sección, ¿verdad? Entonces podríamos hacer una sección de recetas, traer eso en Ideas de Sección. Sabes, podemos arreglar esto en un marco. Entonces voy a dar click y arrastrar para crear un marco y luego poner esto arriba aquí como ideas de sección. En realidad, podrías poner eso en otra página, por ejemplo, la forma en que configuras tu mood board depende de ti. Solo estoy cubriendo los principios principales de lo que quieres estar buscando y ganando inspiración para que podamos decir aquí recetas destacadas, ¿verdad? Así jefe de diseños que te gustan ideas de sección para tu propia página web. Sólo traeré un poco esta aleta de Wit. Tráelo a la izquierda, también. Sólo trata de poner eso en el medio. Y, por supuesto, hasta ahora solo hemos mirado un sitio web. Entonces veamos algunos otros más incher. Echemos un vistazo a Macha incher. Bien. Y volvamos a buscar la sección de héroes muy agradable ahí. A lo mejor hacemos una captura de pantalla de la sección de héroes, cerrando ahí cualquier molesto pop ups. Me gustan las insignias aquí para crecido en Japón y USDA Entonces podemos decir, aquí, copiar este encabezado y decir, diseños de héroes que me gustan, y luego traer esa última captura de pantalla. ¿Correcto? Así que solo estamos haciendo un tablero Mo aquí, exactamente el mismo proceso que hicimos la última vez, pero esta vez no estamos limitados a la lista de secciones dentro de un tema preconstruido. Estamos construyendo todo esto desde cero. Así que cualquier sección que te guste y cualquier look que te guste, podemos lograr a través de este proceso que vamos a hacer donde estamos construyendo todo desde cero, que suena desalentador, pero con IA, somos capaces de automatizar tanto de esto como sea posible No me gusta el sistema de diseño general de este pico marcher, pero me gusta este , compartiendo los beneficios Entonces podría tomar una captura de pantalla de eso, y luego podría poner eso en mi sección ideas aquí. Bien, entonces le voy a dar un nombre a este, digamos, sección de beneficios. Y podemos pasar por este proceso tanto como tú quieras. Más investigación e inspiración que reúna, mejor. Pero como mínimo, yo diría que dediques al menos media hora haciendo esto. Y para mis propósitos, como dije, voy a quedar con la misma lista de secciones que la que construimos en la clase anterior usando el tema fuera de la estantería, solo para mantener las cosas simples. Pero para ti, quiero que revises, captures las URL de sitios web donde te guste su sistema de diseño general, hagas una lista de las secciones que quieras, y también que tomes nota de ciertos diseños para secciones que definitivamente vas a incluir o estás considerando incluir y pienses qué es lo que realmente te gusta de ese diseño en particular Nuevamente, este es un proceso flexible. No hay una forma establecida de hacer esto excepto por el hecho de que vamos a estar cargando en nuestros sitios web favoritos en una herramienta más tarde para generar un sistema de diseño general. Pero claro, si solo quieres ver la clase y luego volver a eso más tarde con tu propia marca, siempre puedes seguir todos los ejemplos y el proyecto de prueba que estoy ejecutando para esta clase en particular. Simplemente puedes seguir junto con la marca falsa que ya he creado SNS Marcher Bien, así que eso es todo para moodboarding. En el siguiente video, realmente entraremos en armar nuestro plan de sitio web, que luego se convertirá en el wireframe inicial de nuestro diseño Shopper fi de alta fidelidad 4. y generación inicial de wireframes: Este video, vamos a cubrir la etapa de planeación, que a su vez creará nuestras maquetas iniciales para nuestro sitio web de Shopify Ahora, el escaparate de Shopify está construido sobre un sistema de plantillas y secciones Y entonces lo que esta herramienta que estás viendo ahora, que es una herramienta que desarrollé específicamente para este propósito, lo que esto hará es realizar ingeniería inversa ese sistema para que generemos nuestros diseños basados en el sistema de plantillas real utilizado dentro de Shopify que podamos traducir fácilmente este proyecto de diseño en código de la vida real, que es esencialmente de cualquier proyecto de diseño web, ya sea que utilicemos IA o no. Bien, así que como puedes ver aquí, estamos en storefront Esa es la URL en la que puedes acceder a esta herramienta. Y como pueden ver, ya tengo mis credenciales aquí mismo, y solo puedo presionar Iniciar sesión cuando esté listo. Para ti, necesitarás crear una nueva cuenta. Así que simplemente pincharás aquí para crear una nueva cuenta. Es completamente gratis. La razón por la que puedo hacer esto gratis es porque todavía vamos a estar enviando mensajes a Claude o a cualquier asistente de IA que prefieras Por lo tanto, necesitará su propio pedido de suscripción de IA para manejar la generación real de Figma y código Pero lo que esta herramienta te ayudará a hacer es generar el plan que luego podamos alimentar a nuestro agente de IA. Entonces, sin más preámbulos, voy a iniciar sesión. Y como pueden ver, la página inicial una nueva cuenta aún no hay proyectos, así que solo voy a hacer clic en este botón para crear un nuevo proyecto. Y como ya comentamos, voy a usar la misma marca falsa que creé en la última clase de Skillshare, Sance Macha premium Macha para la Entonces voy a darle a Create Project. Aquí puedes ver que ya tenemos un punto de partida para nuestro mapa del sitio generado. Entonces, si volvemos al editor de la tienda en línea para ese tema de sesión en el que trabajamos en la clase anterior de Skillshare, verás aquí en este menú desplegable, tienes una lista de plantillas con algunas de ellas que permiten plantillas alternativas Cualquiera de estos con el Chevron al lado permite una plantilla predeterminada de ese tipo con otras plantillas alternativas Este es el sistema de temas de Shopify, y ojalá, si ya has trabajado con Shopify antes, deberías estar familiarizado con este Volvemos al planificador de tiendas, verás que este mapa del sitio aquí es específico del sistema de desarrollo de temas Shua fi. Y si pasamos el cursor sobre estos, igual que en el editor de la tienda en línea, podemos agregar nuevas secciones a la plantilla al grupo de encabezado, y también en ciertas plantillas, podemos agregar plantillas alternativas Entonces puedes ver aquí si hago clic en esto y digamos solo bundle, en realidad, vamos a hacer esto para nuestro proyecto en particular. Entonces voy a hacer esto ahora. Agrega una plantilla de producto alternativo de paquete. Y si nos desplazamos hacia abajo, podemos ver el grupo para la plantilla del producto. Aquí tenemos nuestra plantilla de producto predeterminada, pero luego tenemos una plantilla alternativa separada llamada Bundle. Bien. Se puede ver eso también para la plantilla de página. Esto es muy típico en Tuba fy. Tienes una plantilla de página predeterminada. Entonces, por ejemplo, podrías tener una página de política de privacidad y una página sobre nosotros. Todos siguen la misma plantilla, pero luego la página de contacto va a tener un formulario de contacto. Así que eso se asienta en una plantilla diferente, y puedes ver aquí la plantilla de página predeterminada, solo tenemos una sección de página principal, y para la sección de formulario de contacto, en lugar de eso, tenemos una sección de formulario de contacto. Verás aquí que muchas de estas secciones tienen principal delante de ellas porque estas secciones se asumen para el tipo de plantilla particular. Homepage va a ser tu más flexible. Como dije, la mayoría de los proyectos tienen una sección de héroes y una sección de colección destacada. Pero en la página de colección, probablemente solo vas a tener una cuadrícula de colección, como es el caso de aquí, o en cualquier sitio web de Sho Fire que encuentres, vas a una página de colección lo general, es una cuadrícula de tarjetas de productos que muestran los productos de esa colección, ¿de acuerdo? Entonces en ese sentido, aquí tenemos tres tipos diferentes. Tenemos estas secciones globales, así que el encabezado y el pie de página, si solo navego hasta eso. Justo aquí. Entonces el encabezado y pie de página por defecto, pero también podemos agregar nuevas secciones al grupo de encabezado y pie de página. Podría cambiar esto en el futuro, pero tengo mucha configuración final aquí. Entonces, diciéndonos qué secciones aún tenemos que planificar. Tenemos nuestras secciones principales y disculpas. Si la app es un poco lenta. Yo lo acabo de crear, así que creo que está tomando algún tiempo calentar. Aquí puedes ver la configuración de nuestras secciones principales. Entonces, por ejemplo, la sección principal del producto, si vamos a una plantilla de producto, verás aquí que hay una sección que se acaba de llamar página de producto. Pero como puedes ver aquí, podemos agregar diferentes secciones debajo de lo que normalmente llamamos la sección principal del producto, que muestra la galería de imágenes, el título, el precio y todos los demás detalles que necesitas para ese producto. ¿Bien? Entonces tenemos otras secciones, que podrían ser cualquier otra cosa que no sean nuestras secciones globales, I E el encabezado y pie de página o nuestras secciones principales. Así que tenemos el formulario de contacto, la sección de colección de características y la sección de héroes aquí mismo. ¿Bien? Entonces nuestro objetivo es comenzar primero con el mapa del sitio, agregar cualquier plantilla alternativa, agregar en nuestra lista de secciones para cada plantilla, y luego le daremos a nuestro planificador detalles adicionales en el encabezado y pie de página y las secciones principales, y luego cualquier otra sección. Así que aquí estamos construyendo nuestra lista de plantillas y nuestra lista de secciones, y luego las otras tres pestañas darán detalles adicionales a esas secciones. Bien, así que entre videos, como te sugerí que lo hagas tú mismo, he creado una lista de las secciones que quiero de estas secciones opcionales, y también he agregado un segundo sitio de inspiración aquí, que usaremos más adelante para ayudar con nuestro sistema de diseño Por ahora, no nos estamos enfocando demasiado en el diseño de alta fidelidad. Sólo estamos tratando de bajar nuestra estructura. Entonces esta es la planeación de alto nivel y el wireframing, ¿de acuerdo? Entonces, obviamente, quiero un héroe de la página principal y una sección de colección destacada, pero queremos una sección de punto de venta, esencialmente, esa sección de marchante de Y Sance a la que señalé antes Voy a dar click Abajo Colección Destacada. Voy a dejar esta nueva sección creada, y luego voy a llamar a esto puntos de venta. Aquí, quiero describir lo mejor que pueda cómo se supone que debe ser y hacer para que la IA sepa qué construir. Entonces voy a decir título de sección, y Sans Macha con tres blurbs. ¿Son tres blurbs? Uno, dos, tres, cuatro, cuatro. Entonces voy a cambiar eso a cuatro blurbs debajo. Cada nota publicitaria tiene icono, título y subtexto. Y luego vamos a dar clic en Insertar sección. Bien, entonces ahí vamos. Hemos agregado la sección de puntos de venta aquí, y la última para nuestra página de inicio fue la sección de testimonios, la sección de testimonios con tres testimonios Cada testimonio tiene una cita, junto con una imagen y nombre para cada autor testimonial. Digamos. Bien, así que también voy a para la sección de colección, si recuerdas, de nuestro sitio web anterior que configuramos usando el tema de prestigio, también está aquí esta sección de banner de colección. Entonces voy a dar click encima de la sección principal de colección, y voy a llamarlo banner de colección, sección de héroe con imagen de fondo para ir en la parte superior de las páginas de colección por encima de la cuadrícula del producto. Insertar sección. Bien, eso está ahí dentro. Para la sección de carritos, es bastante viejo el cliente tenga que ir a una página separada para ver su carrito. La mayoría de los carros ahora funcionan como un cajón que sale a un lado y vive dentro de la cabecera Así que no me voy a centrar demasiado en éste. Simplemente podemos dejarlo en la sección principal del carrito. Todas las secciones principales de este planificador ya tienen descripciones que coinciden con los valores predeterminados, pero puedes, por supuesto, entrar y cambiar esos valores predeterminados si tienes en mente un diseño muy específico Te voy a mostrar eso a continuación a medida que vamos a la siguiente pestaña. Lo mismo con la página de búsqueda, lo mismo con el índice del blog y el artículo del blog, pero también he dejado estos iconos aquí para eliminar estas plantillas de los wireframes en el caso de que tu sitio web de Shopify no tenga un blog en absoluto Por ahora, solo voy a mantener esto aquí y usar el índice predeterminado del blog y la sección del artículo principal. Bajando a la plantilla de producto, como mencioné antes, creé una plantilla alternativa. Puedo crear otra plantilla alternativa como tal. O borra cualquier plantilla alternativa aquí. Quiero una plantilla diferente para un producto bundle. Si recuerdas de nuestra marca CNS, tenemos un cuarto producto que en realidad tiene todos los tres productos anteriores en él Entonces quiero crear una plantilla diferente, y la razón por la cual es porque voy a agregar una sección diferente aquí llamada What's included, que solo es relevante para el producto bundle. Entonces voy a decir una sección que muestra los tres productos que están incluidos en un producto bundle. Entonces, para la sección principal de productos y la sección de bundle, voy a sumar de nuevo en los puntos de venta. Y debido a que esta es una sección existente, no voy a dejar esto en la sección Crear Nuevo. Voy a abrir esto y seleccionar los puntos de venta de aquí. No necesito una descripción porque ya tengo una, así que vamos a agregar eso en y luego los productos relacionados debajo de eso. Entonces entonces voy a ir por debajo de aquí, y podemos simplemente reciclar colección destacada. Ahora, debido a que ya creé la plantilla alternativa, no va a tener naturalmente estas secciones aquí. Probablemente debería haber construido esto primero y luego ramificarme, pero eso está todo bien. Lo que voy a hacer es que voy a añadir en la sección de puntos de venta de esta plantilla, también. Y a lo mejor dejo fuera la colección destacada porque este paquete tiene todos los productos incluidos en ellos, así que queremos mantenerlos en ese producto. Y luego un patrón bastante típico como te mostré antes, la plantilla de página, solo la sección de página principal que mostrará cualquier contenido el usuario administrador ponga en la sección de contenido de la página en el admin, y luego este formulario de contacto, con el que realmente no necesitamos reinventar la rueda También podemos agregar una plantilla de meta objetos. Si no sabes lo que eso significa, no te preocupes por ello, pero eso es en caso de que quieras crear páginas basadas en tus meta objetos. Bien, así que si vuelvo aquí arriba, estoy prácticamente terminado excepto que quiero agregar una nueva sección al grupo de encabezado. Va a ser una sección de barra de anuncios, barra de anuncios, y solo va a que podamos tener barras de anuncios que muestren como un deslizador, una marquesina, diferentes imágenes Pero sólo voy a decir promoción de texto de una sola línea en una barra delgada. Bien, voy a presionar Insertar sección. Y ahora verás que todas nuestras plantillas que usan el mismo grupo de encabezado, que es todas ellas ahora tienen esa barra de anuncios agregada. Entonces esa es ahora una sección global definida por el hecho de que se ha agregado a un grupo de cabecera o a un grupo Potter. Entonces verás que cada plantilla tiene esa barra de anuncios. Bien. Si quisieras aparecer en solo una de las plantillas, lugar de agregarla al encabezado o al grupo de pie de página, simplemente la agregarías en esta sección blanca aquí, cual es la plantilla, ¿bien? Entonces, siempre que este sea nuestro plan general, que siempre podemos retroceder y cambiar en cualquier momento, y estemos contentos de seguir adelante, ahora podemos ir a la siguiente pestaña Secciones Globales. Y rellene algunos otros detalles para ayudar a la IA a entender qué es cada uno de estos. ¿Bien? Entonces voy a hacer clic en Editar información en la barra de anuncios. Y como pueden ver, está un poco aplaudido a esta altura de pantalla Pero puedes ver aquí en la barra de anuncios, ¿qué trata de lograr la sección? Entonces podemos agregar en algún propósito aquí, digamos, promover ciertas ofertas, y entonces ¿cómo funciona? Si se trata de un slider con múltiples mensajes diferentes que queremos mostrar, queremos escribirlo aquí. Y también queremos marcar esta casilla para los usuarios bloques repetibles porque podemos configurarlo como mensajes separados integrados en diferentes bloques que luego podemos configurar en el editor de la tienda en línea En ese sentido, va a estar sacando los datos de la configuración de sección y bloque. Como puedes ver aquí para la fuente de contenido, podemos poner en tema datos de data store, lo que significa sacados de la tienda real, no del editor de la tienda en línea o una mezcla de ambos. Esto definitivamente va a ser datos de tema porque la intención es que el usuario edite el texto a nivel de tema de Shopify, y no hay funcionalidad Así que sólo voy a dejar eso en blanco y darle a guardar. Bien, entonces la barra de anuncios, hemos configurado, y ahora vamos a entrar en la cabecera. Entonces el encabezado va a tener algunos campos extra aquí para la configuración. Primero nos va a preguntar ¿qué debe contener el encabezado? Por lo general, el encabezado contiene un título o logotipo del sitio, algo de navegación, y luego estos iconos particulares que desencadenan diferentes cosas en Shopper Fi. Entonces voy a seleccionarlos a todos. Va a tener el icono de la tarjeta de cuentas para el cajón del carrito y un icono de búsqueda que permita a los usuarios buscar justo en el encabezado. Entonces voy a golpear a continuación. Y ahora puedo tomar algunas decisiones en torno a si quiero un mega menú, que es bueno para tres niveles de anidación o un desplegable, que es mejor para dos niveles de anidación Entonces, digamos, para nosotros, solo haremos un desplegable porque no necesariamente tenemos tantos niveles diferentes de anidación También puede optar por usar un cajón Nav en el escritorio. Por lo general, cuando estás navegando en el móvil, no tienes elementos de navegación en tu encabezado ya no tienes elementos de navegación en tu encabezado porque el ancho de la pantalla es muy pequeño. Normalmente tienes ese icono de hamburguesa a la izquierda. Así que en realidad, sólo te voy a mostrar eso aquí mismo. Justo así , normalmente tienes ese ícono de hamburguesa a la derecha, y esto es lo que se llama el cajón de navegación Algunos sitios web usarán el cajón de navegación tanto en el móvil como en el escritorio, por lo que puede hacer clic aquí para elegirlo en su lugar, o puede describir un comportamiento personalizado aquí mismo. Pero voy a hacer desplegable, y luego en este campo opcional, puedes agregar en cualquier cosa especial que aparezca en el cajón del menú móvil cuando se toca el ícono de la hamburguesa. Una cosa que quiero señalar aquí es, si no sabes la respuesta para nada de esto, algo de esto te está confundiendo, solo planifica lo que sea. Vamos a conseguir los wireframes. Lo verás dentro una Figma y luego podrás editar desde ese punto Estas son solo algunas decisiones de diseño comunes en torno a elementos y patrones realmente comunes dentro de los sitios web de comercio electrónico de Shopify que solo estamos preguntando con anticipación para que sea solo un clic dentro del planificador, la IA construirá exactamente eso ¿Bien? Entonces el siguiente, ¿cómo debe comportarse la búsqueda cuando un visitante hace clic en el icono? Entonces diré que debería abrir una entrada de búsqueda debajo del encabezado que el usuario ingresa su término de búsqueda, golpea Enter y se dirige a la página de búsqueda con esa consulta de búsqueda pre llenada. Bien. Pero de nuevo, lo que sea que pienses aquí, de hecho, creo que puedes dejar esto en blanco si quieres o simplemente tomar una mejor conjetura aquí. Ahora bien, ¿qué debería hacer el icono del carrito? En algunos sitios web que no tienen un cajón de carrito, solo dirigirá al usuario a la página del carrito. Pero vamos a estar haciendo un tema normal de Shopify moderno, así que va a abrir el cajón del carrito Entonces aquí podemos hablar de cómo debería funcionar el cajón del carrito. Déjame ver si puedo saltarme eso porque no queremos nada especial con el cajón del carrito. Sí. Y luego cualquier otra cosa que queramos describir sobre el encabezado. Aquí es donde podemos agregar cualquier información extra. De lo contrario, si solo lo dejamos con información genérica, nos va a dar un wireframe genérico, que si no tienes ninguna objeción con eso está totalmente bien Pero si quieres algo específico, mejor escribirlo ahora para que tus wireframes iniciales estén más cerca de la visión que tenías en mente para tu escaparate Entonces voy a presionar Guardar en eso y eso completará la configuración del encabezado. Como puedes ver aquí, configurado luego baja al grupo Pie de página. Voy a presionar Configurar en esto. Y nuevamente, me va a preguntar qué elementos quiero en mi pie de página. Entonces creo que voy a seleccionar todos estos. Quiero un logo de sitio. Quiero navegaciones. Quiero una suscripción por correo electrónico, iconos sociales y una fila final debajo del resto del pie de página, generalmente solo llamada sección inferior. Y entonces ¿cuántos menús diferentes necesitaremos? Entonces por ejemplo, de nuevo, quiero ponerle un visual a esto si vamos a la sesión Macha de la última clase de Skillshare Puedes ver aquí verás que solo tiene uno, así que voy a poner uno aquí. ¿Y qué debería incluir la sección inferior? Como puedes ver aquí, la sección inferior del sitio web anterior solo tiene los derechos de autor. Pero si vamos a uno de nuestros sitios web de inspiración como Jade Leaf Macha, si vas por aquí, ves que tiene tres menús diferentes, un boletín de suscripción, y también la sección inferior es solo el texto de copyright Entonces no tenemos tanto contenido, así que solo voy a hacer clic también en texto de copyright, sin menú extra, sin iconos de pago, pulsa Siguiente. Y cualquier cosa en particular que se describa sobre el Pie de Página, este es un campo opcional para que agregues cualquier información adicional que no se te haya pedido. Voy a dejar ese espacio en blanco y darle a Guardar. Y ahora puedes ver cómo se configuran ahora encabezado, pie de página y barra de anuncios. Ahora a las secciones principales. El principal, como se resalta aquí es la sección principal del producto. Entonces voy a hacer clic en Configurar. Y ¿qué elementos vamos a tener en esta sección principal de productos? Todos estos son elementos típicos. Entonces lo que voy a hacer es, claro, no tiene las imágenes aquí porque supone que definitivamente vamos a tener eso. Título del producto, bastante obvio. Vamos a incluir ese resumen de reseñas de precios de productos. El selector de cantidad agrega un botón Carrito y algunos acordeones. No creo que vayamos a tener varianza, así que no voy a incluir el selector de variantes, y aún no vamos a ofrecer en suscripción, así que no voy a agregar en suscripción, y agregaré en una descripción del producto. También puedo agregar un elemento personalizado propio si ninguno de esos describe un elemento que quiero en mi sección principal de productos, así que también puedo hacerlo. De lo contrario, podemos agregar eso en más adelante una vez que lleguemos a los wireframes Eso es genial. ¿Dónde debería sentarse la galería de productos en el escritorio? Por lo general, se sienta a la izquierda. Simplemente déjalo a la izquierda a menos que tengas un tipo diferente de página de producto y quieras la imagen a la derecha. Y luego también puedes hacer clic en arrastrar en qué orden con la galería la izquierda y el contenido a la derecha, qué orden quieres para eso. Así que en realidad voy a subir la descripción de mi producto. Por debajo del precio del producto. Pero aparte de eso, esa es mi orden. Entonces voy a golpear a continuación en eso. Y luego voy a elegir mi diseño móvil, que a veces cambia. A lo mejor la imagen es realmente grande, y así el usuario tendrá que desplazarse o mirar hacia abajo en la página para ver otra información importante. Entonces un patrón bastante típico es mover el título del producto y precio por encima de la imagen en el móvil. Entonces hagámoslo. En realidad, tal vez queramos poner ahí también el resumen de las reseñas para que el usuario pueda ver claramente el precio del título y reseñas antes de que vean la imagen, y luego puedan desplazarse hacia abajo para todo lo demás. Bien. Ahora para el estilo de galería, podemos tener miniaturas a la izquierda para navegar por las diferentes imágenes del producto o miniaturas en la parte inferior Podemos tener un solo deslizador de imagen o podemos tener una cuadrícula. Estos dos son los más comunes. Así que vamos a hacer miniaturas a la izquierda, o puedes describir estilo particular si ninguno de esos cumple con lo que estás buscando Y luego en el estilo de galería móvil, ¿queremos miniaturas en la parte inferior ¿Queremos un slider sin miniaturas? ¿ Queremos algo más? ¿Queremos una grilla? Voy a hacer miniaturas en la parte inferior en el móvil Bien. Entonces vamos a guardar esa información, y luego una vez que eso guarde y actualice, verá que la sección principal del producto está configurada Como puedes ver aquí, esto probablemente necesite actualizar el diseño de este, pero nos dice que antes podemos decir que hemos hecho la configuración y creamos nuestro plan de sitio web, hacemos la sección principal de colección y la sección principal del producto, y luego responder a la pregunta de si necesitamos una configuración diferente para la sección principal del producto en las plantillas alternativas. En este punto, podrías estar pensando todo este proceso es bastante laborioso. Hay muchas decisiones por tomar, pero esto nos va a ahorrar mucho tiempo con la generación inicial de los archivos Figma Y esta etapa de planeación puede tardar tanto o tan poco como quieras. Puede dar tanta o tan poca información como desee en esta sección de planeación. Obviamente, si tuvieras una idea en particular en mente, esta herramienta está diseñada principalmente para incitarte a pensar estas decisiones de diseño antes llegar a la etapa real de FIGMA Pero obviamente, una vez que se ha creado el Figma y te das cuenta de algo que no te gustó o quieres cambiar algo, eso también es totalmente genial Hacer un poco de planificación con anticipación realmente nos ayuda a automatizar el proceso inicial de diseño web. Y para que no estemos mirando un archivo Figma en blanco. Y como verás pronto, tendremos un buen punto de partida con los wireframes ya creados en Figma. En lugar de comenzar completamente desde cero y tener que resolver estas decisiones de diseño sobre la marcha y también tener que construirlo manualmente dentro de Figma. Bien. Con eso fuera del camino, acabemos con nuestra planificación. Entonces aquí hay otra pregunta. Porque tenemos dos plantillas, va a preguntar, ¿ sección principal del producto varía según la plantilla Voy a decir que no, es lo mismo en todas partes. La única diferencia con la plantilla será la sección extra de lo que se incluye debajo de la sección principal del producto. Pero el diseño de la sección principal del producto puede seguir siendo el mismo para ambas plantillas de producto. Y luego si estamos contentos por la sección de carritos, como puedes ver aquí, para muchos de estos, solo asumirá una cierta configuración, por lo que son opcionales, pero solo necesitamos tomar algunas decisiones alrededor de la sección principal de colección, principalmente en torno a cuántas columnas queremos la cuadrícula. Entonces en escritorio, voy a configurarlo cuadrícula de cuatro columnas y me movil una cuadrícula de dos columnas. La siguiente pregunta será, ¿ la colección necesita filtros? Debido a que tenemos una gama de productos de solo cuatro productos, no necesitamos filtros. Si tienes una gama de productos de muchos productos diferentes, los filtros pueden ser bastante útiles. Todo depende de qué tan grande sea su gama de productos. Entonces voy a golpear a continuación en eso. Y luego vamos a diseñar la tarjeta del producto, que es el mosaico en el que se muestra cada producto, que se usa no solo en las páginas de colección, sino en la colección destacada y productos relacionados, esa tarjeta de producto para mostrar otro producto cuando no estás en esa página del producto es un elemento común que necesitamos para tomar algunas decisiones en torno a. Entonces, obviamente, quiero la imagen o imágenes del producto. Quiero el título del producto. No hay varianza para mis proyectos particulares, así que voy a dejar eso fuera. Voy a tener un resumen de opinión y un anuncio rápido al botón Carrito, y luego aquí puedo hacer clic en O para agregar otro si quiero. Y luego debajo de aquí, si me desplazo hacia abajo, pueden ver que también puedo controlar el orden. Entonces en realidad, no me da opción, pero lo que voy a hacer una vez que traemos a Figma, voy a poner el botón Agregar al carrito encima de la imagen Pero por ahora, solo lo dejaré en este orden. El pedido se puede cambiar fácilmente más tarde, así que simplemente presionaré Guardar. Fresco. Entonces eso ya está configurado. Verás aquí que la sección de la tarjeta principal, la sección de la página principal y la sección del artículo principal tienen una descripción predeterminada. Pero para el índice del blog, hay una cuestión de, habrá etiquetas. Ni siquiera voy a hacer una sección de blog, así que sólo voy a dejar eso dejado fuera. Nuevamente, solo tienes que dar tantos detalles como realmente necesites para tu proyecto, y luego podemos pasar a nuestras otras secciones aquí. Y estas otras secciones no tienen preguntas específicas. Si hacemos clic en Editar información sobre cualquiera de estos, solo vamos a rellenar propósito cómo se ve y cómo debe operar, y luego también de dónde provienen los datos. Banner de colección y dónde está la fuente de contenido. El propósito, de nuevo, sólo voy a dejar eso en blanco. Aquí son campos opcionales. Realmente no tiene funcionalidad, y va a sacar de los datos del tema. Entonces la intención está en el editor de la tienda en línea, establecer la imagen, establecer el texto que aparece. Y luego para el look, ya lo tiene pre llenado aquí. Aquí sección con imagen de fondo para ir en la parte superior de la página de colección por encima de la cuadrícula del producto. Ah, ya lo llenamos cuando creamos eso antes, ¿de acuerdo? Entonces formulario de contacto, como puedes ver aquí, nombre, mensaje de correo electrónico que envía una solicitud de contacto Sí, realmente no necesitamos editar nada de esto. Todo es solo funcionalidad estándar. La sección de héroes, podría especificarlo. Definitivamente son datos temáticos. Esta fuente de contenido no va a afectar a las maquetas de Figma, pero lo que hará es más tarde cuando volvamos a esta herramienta para tomar la hoja de especificaciones, podamos implementarla en el sitio web, cual es como un bono para esta clase para mostrarte cómo tomar ese diseño y construirlo en el código requerido para el tema En ese punto, veremos cómo importan estas decisiones en torno a la fuente de contenido. Pero por ahora, todo lo que es importante para la generación de diseño Figma es el aspecto principalmente, ¿de acuerdo? Puntos de venta, también van a ser datos temáticos. Ya mencioné el look en la descripción cuando lo creé en el mapa del sitio. No hay funcionalidad. El propósito es bastante autoexplicativo, y quiero usar bloques repetidos. Nuevamente, la información que acabo de ingresar aquí es solo para la hoja de especificaciones al final cuando intentamos construir. Realmente no hace una diferencia en el diseño Figma. Este también va a ser datos temáticos usando bloques repetibles Y luego lo que se incluye, nuevamente, los datos del tema usando bloques repetibles, presione guardar, y eso es todo Obviamente, depende de lo que pongas en mapa de tu sitio en cuanto qué secciones aparecen en Global, Maine y otras secciones aquí. No creo que puedas agregar más secciones principales, pero podrías agregar, como mostramos en este video, agregando una barra de anuncios a las secciones globales, y luego todas estas otras secciones como puntos de venta, testimonios, héroe que no son secciones principales o secciones globales que van a aquí. Entonces, obviamente, esta lista va a depender de tus necesidades específicas. Si quisieras seguir exactamente con mi proyecto de prueba, así es como va a quedar de tu lado, también. Y ahora podemos desde cualquiera de estas pestañas, clic en este botón azul para crear el plan de diseño web. Bien, así que aquí pueden ver, tenemos el plan de diseño web a la izquierda, y tenemos la hoja de especificaciones a la derecha El plan de diseño web abarca básicamente todas las secciones donde existen y cómo deben ser. La hoja de especificaciones es algo que usaremos para acompañar los wireframes más adelante para dar contexto en torno a la funcionalidad y fuente de contenido a la IA para construirla realmente en el tema Pero por ahora, ignoremos por completo este lado derecho y miremos el lado izquierdo. Entonces aquí podemos exportar este plan de diseño web, y en este punto, ni siquiera necesitamos usar IA. Podemos tener este documento aquí que podrías enviar a un diseñador o podrías tener en una segunda pantalla mientras construyes un diseño manualmente en Figma. Así que no tienes que usar la IA si no quieres, sino porque hemos tomado todas estas decisiones con anticipación, podemos automatizar la construcción de este plan de diseño web en Figma. ¿Bien? Entonces, como puedes ver aquí, tenemos el nombre de la plantilla, y luego dentro de eso, tenemos las diferentes secciones globales, la sección principal, y luego la sección FOOTA Y para la página principal, obviamente, no tenemos una sección principal. Tenemos esas dos secciones globales y luego nuestras cuatro secciones opcionales ahí, ¿de acuerdo? Entonces en esta clase, lo que vamos a hacer es no vamos construir el Figma manualmente a partir de este plan de diseño web Vamos a simplemente hacer clic aquí para copiar las instrucciones de Figma, y luego vamos a querer pegar esas instrucciones en una sesión de código con garras Puedes usar la aplicación de escritorio aquí, pero prefiero ejecutar la extensión de código con garras dentro de mi editor de código preferido, que es el código de Visual Studio No obstante, usted quiere hacerlo, yo sólo voy por aquí para iniciar una nueva sesión. Sólo se está cargando aquí arriba. Y entonces justo aquí es donde puedo insertar mi prompt, así puedo pegar, y ahí se puede ver el prompt altamente detallado que debería poder darle a Claude toda la información que necesita para crear el wireframe Aquí abajo, he puesto esto en orden, así que me va a pedir lo menos posible permisos y simplemente seguir recto y construirlo. Y, por supuesto, para que Claude se conecte a Figma, la app Figma necesita estar abierta Recuerda que necesitas un asiento de desarrollo o superior para poder usar esta función MCP, al menos en el momento de la grabación, y también debes tener el MCP activado Por lo que las instrucciones han cambiado para encender el MCP desde mi último curso sobre diseño web Figma. Así que asegúrate de buscar las últimas instrucciones sobre cómo instalar el Figma MCP Cambia con bastante frecuencia. Pero siempre que ya tenga la configuración de Figma MCP, entonces simplemente puede ejecutar este prompt en el código de Cloud Y veamos si surge alguna duda. De lo contrario, básicamente debería crear el archivo Figma para nosotros. Como puedes ver, aquí va a cargar la habilidad de generación de diseño Figma de Figma y luego va a desencadenar algunas otras habilidades y otras acciones de MCP Pero aquí vamos. Aquí está nuestra primera pregunta. Se nos pregunta en qué equipo de Figma debería crear los nuevos wireframes? Para mí, ese definitivamente va a ser mi equipo personal, el equipo de Christopher Dodd Asegúrate de elegir un equipo con un conjunto de desarrollo. Por supuesto, voy a avanzar rápidamente a través de mucho de esto porque es solo Claude trabajando de fondo. Si esto te lleva mucho tiempo, no te alarmes. Esto debería llevar bastante tiempo. Actualmente estoy hasta unos 17 minutos de espera. Pero si quieres ver algo un poco más interesante, realidad puedes entrar en Figma, ver el archivo, y ver cómo se construye en tiempo real Así que voy a cambiar a esa vista, y ahora pueden ver que tenemos un marco con nuestros componentes, y tenemos nuestras diferentes plantillas siendo construidas. Obviamente, aún no está completo. Así que voy a dejar que eso siga funcionando hasta que esté hecho. Bien, entonces después de unos diez minutos más, así que eso fue como 26 minutos. Por lo que probablemente se puede esperar que todo el proceso se complete en menos de media hora. Pero obviamente, depende cuántas secciones incluyas y todo eso. Pero para un proyecto de este tamaño, tardó unos 26 minutos. Y ahora si cambio a Figma, se puede ver que se han generado todos los wireframes Así que no te preocupes, esta no va a ser la forma final. Vamos a hacer que esto se vea mucho mejor, pero esto es solo básicamente las maquetas de baja fidelidad aquí Así que tenemos nuestra página de inicio en el escritorio. La versión móvil de esa página de inicio. Entonces tenemos la página del producto. Recuerda, tomamos algunas decisiones de diseño antes de tiempo que queríamos la galería de productos a la izquierda, y tenemos las miniaturas del producto la izquierda en el escritorio, y luego las tenemos en la parte inferior con estas arriba Así que ahora todas esas decisiones han sido factorizadas en los wireframes Figma. Y como pueden ver, Y Suns Macha aquí mismo, y debería estar usando componentes tanto como Entonces componentes es una cosa en Figma. Creo que lo cubrimos en la clase de diseño web Figma donde tenemos nuestro componente maestro aquí porque se supone que este encabezado tiene el mismo aspecto en cada plantilla Entonces, si actualizamos este de aquí mismo, eso debería portar a través del encabezado del escritorio en cada plantilla. Puedes ver aquí indicado por este diamante aquí que esta es una instancia del componente. Entonces esto se alinea bastante bien con el sistema Shopify. Obviamente tenemos que reemplazar algunos de estos íconos aquí, y no es perfecto. Pero lo que tenemos aquí es un diseño básico de todas nuestras secciones, y tenemos las secciones dispuestas en sus plantillas apropiadas. Entonces, mirando más abajo, tenemos la página del producto por defecto. Tenemos éste aquí. Lo que está incluido. No quiero estos botones aquí. Nuevamente, va a haber pequeños cambios aquí y allá. Eso es normal. Nuestra página de colección aquí mismo con las cuatro columnas en escritorio y dos columnas en el móvil, por defecto plantilla de página en escritorio y móvil, nuestra página de contacto aquí mismo. Y en realidad, una página que olvidé hacer fue la página sobre nosotros, la página Nuestra historia. Eso lo teníamos en la clase de diseño web anterior, así que podría arrojar eso más tarde. Como dije, no hay que hacer todo en la etapa de planeación, sino solo para conseguir algo en la lona, todo lo demás podemos hacer manualmente porque estamos dentro de Figma. Entonces todo esto que creamos aquí, podríamos haberlo hecho nosotros mismos, pero acabamos de dejar que Figma haga media hora s 5. Implementación de un sistema de diseño: Esta lección, vamos a crear un sistema de diseño, y luego vamos a enviar ese sistema de diseño a Claude para luego implementar ese sistema de diseño en nuestros wireframes Figma actualmente grises de baja fidelidad Entonces, si miramos lo que generamos en la última lección, tenemos todos estos aburridos wireframes grises de Figma, lo cual es difícil imaginar potencialmente que este sea un sitio web o un diseño web terminado todavía, porque le faltan algunas cosas Número uno, le falta ese sistema de diseño, le falta color, le faltan fuentes. También le faltan algunas imágenes e iconografía. Y también, ciertas partes necesitamos poner marcadores de posición más apropiados y volver a jig el layout un poco Pero ya empiezas a ver que este diseño cobra vida mucho más simplemente aplicándole un sistema de diseño. Ahora, en la era de la IA, tenemos algo llamado diseño punto D. ¿Qué es esto exactamente? Fue desarrollado por Google, creo, y es un documento de sistema de diseño que los agentes de IA pueden usar para leer y generar una interfaz de usuario consistente en todo su proyecto. Entonces, básicamente, es como que el sistema de diseño que vive dentro de un archivo de rebajas punto d es Markdown, que básicamente es solo un documento que es fácilmente legible por agentes de IA Y si miramos dentro de la carpeta del proyecto, si entro en nuestra carpeta de identidad de marca aquí, podemos ver que ya tenemos una identidad de marca aquí mismo. Déjame simplemente llevar esto al marco. Puedes ver aquí que ya tenemos nuestra paleta de colores y nuestras fuentes. Un sistema de diseño entra en mucho más detalle que eso. Pero para este proyecto, lo estamos manteniendo simple, y de hecho podemos crear un archivo MD de diseño a partir de esto. Y entonces lo que voy a hacer es recordar esos sitios de inspiración que encontraste antes? Bueno, aquí en mente otra vez. Tengo Jade leaf marcher y matutino hecho. Bueno, he creado esta herramienta aquí mismo llamada un sistema de diseño Mixer. Vamos a usar una extensión cromada que construí llamada Extractor Design MD. Vamos a extraer el sistema de diseño y crear un archivo DotD de diseño de cada uno de esos sitios web, y luego vamos a mezclarlos con nuestro propio punto md de diseño para crear un nuevo archivo DotD de diseño remezclado Esta es una de las cosas poderosas en las que la IA es buena. Es bueno para mezclar cosas juntas, y usar el formato design dotmd, significa que estamos usando un formato que ha sido diseñado por una compañía gigante como Google Bien. Entonces lo primero que voy a hacer es generar un archivo MD de diseño a partir de los archivos que ya tengo en mi proyecto. ¿Bien? Entonces lo que voy a hacer es, recuerda que corrí esto aquí en esta ventana de aquí. Esto no está conectado a ninguna carpeta. Entonces voy a hacer clic en este botón aquí para abrir una carpeta, y luego voy a seleccionar aquí la carpeta de identidad de marca CNS, abrirla y ahora tendrá contexto dentro de esa carpeta Creo que en realidad va a abrir una ventana completamente nueva, y voy a tener que crear una nueva sesión con garras, pero eso está Como puedes ver aquí. Si ejecuto una sesión de código con garras, ahora va a estar ejecutándose dentro de esta carpeta, por lo que tiene acceso a todos los activos dentro de esta ¿Todo bien? Entonces lo que voy a hacer es que le voy a pedir que genere un archivo design dot md basado en los archivos de esta carpeta. A saber, el logotipo. Así que puedes usar el símbolo at aquí para hacer referencia a archivos específicos dentro de la carpeta. Entonces puedo decir es decir, el logo, los gritos que acabo de escribir literalmente Sans, no responde bien a archivos con acentos extraños en ellos, desafortunadamente. Entonces solo abriré el At aquí y luego lo encontraré en la lista. Aquí hay muchas carpetas anidadas. Pero ahí vamos. La guía de identidad de marca, y el documento de colores y fuentes. También estoy para que tenga contexto de lo es un archivo MD de punto de diseño, pega en esto. Entonces voy a hacer zoom aquí para que veas qué es eso. Simplemente escribe eso palabra por palabra. Construya un punto d de diseño a partir de esto siguiendo la especificación canónica de Google Lab en la dirección Github del archivo de diseño MD y refleje la estructura del ejemplo de referencia en el MD de diseño ¿Bien? Solo dándole ese detalle extra para que sepa exactamente lo que estamos tratando de hacer aquí, y luego le pegaré a Enter en eso y dejaré que Claude code haga su magia. Mientras está haciendo eso, entonces podemos ir a nuestros sitios web de ejemplo y extraer su diseño MD. Así que pasemos a esta página en mi sitio web, christopher dow.com, DesignMD Y en la parte inferior, enlaza a otra página, DesignMDetractor Simplemente voy a abrir eso en una nueva pestaña y puedes ver aquí que podemos descargar esta extensión de chrome Entonces, cómo funciona es que abres cualquier sitio web y luego haces clic en el icono del extractor de diseño MD. En tu barra de herramientas de Chrome, y luego tomará todos los estilos calculados y nombrará las variables CSS y luego las pondrá en un archivo md de punto de diseño. Para instalarlo, necesitamos descargar y descomprimir el archivo y luego ir a las extensiones de Chrome Colon, activar el modo desarrollador y luego cargar el archivo desempaquetado, hacer clic en Cargar desempaquetado y seleccionar la carpeta del extractor MD de diseño descomprimido Bien, así que un poco de configuración aquí. Vamos a entrar en nuestro escritorio aquí y dejar caer en el diseño DMdetractor Entonces vamos a descomprimir ese archivo Zip. Y aquí puedes ver la carpeta desempaquetada que contiene la extensión web Entonces podemos ir a extensiones de Chrome Colon Dash. Enciende el modo desarrollador aquí arriba en la parte superior derecha, menos ya encendido. Haga clic en Cargar desempaquetado por aquí a la izquierda, navegue hasta la carpeta con el nombre design MD dash extractor, el que acabamos de descomprimir, presione Seleccionar en eso, y luego dirá extensión Y como pueden ver aquí, la tengo dos veces, así que sólo voy a quitar la más reciente. No necesito múltiplos de ellos. Las extensiones de Chrome son muy fáciles de hacer hoy en día debido a la IA. Así que tengo algunas que he creado anteriormente que ya están aquí en mi cuenta de Chrome. Y entonces lo que voy a hacer es que voy a navegar hasta esa dirección. Entonces la primera, Jade Leaf Macha, y yo tenemos algunas extensiones diferentes Voy a tener que hacer click sobre esto para abrir la lista completa de extensiones. Y luego solo estoy buscando extractor de diseño punto d. Haga clic en eso. Y entonces voy a verificar que el nombre de la marca sea correcto, extraer y copiar pronto. Esto abrirá Cloud en una nueva pestaña. Podemos hacerlo aquí en la web o podemos volver a nuestra sesión de código Cloud aquí mismo y crear una nueva sesión. Pero solo hagámoslo en la web porque ya es bastante fácil. En realidad no necesitamos ejecutar nada localmente aquí. Así que solo voy a pegar en ese prompt exacto y presionar Ejecutar en eso. Entonces podemos pasar al siguiente, que es mautino made.com Este es otro diseño que me gusta para un sitio web Macha. Entonces entonces vamos a ir por aquí. Vamos a ir de nuevo a diseñar extractor punto d. Éste tiene el nombre equivocado saliendo. Dice ceremonial. Entonces sólo tenemos que cambiar eso a matutino hecho. Después vamos a dar clic en Extraer y copiar. Pon esto en una nueva sesión con garras. Golpea Enter, es tan sencillo como eso. Y entonces cada una de estas sesiones con garras va a devolver un archivo de diseño punto d ¿Bien? Entonces, si vuelvo a mi sesión por aquí, parece que ya está terminada. Entonces dice, creé un archivo design dot md en la carpeta de identidad de marca Sans, bla, bla, bla, bla, bla Así que miremos dentro de nuestra carpeta. Entra en sesión de identidad de marca, y tenemos ese archivo de diseño punto d ahí mismo Si lo abrimos en código de Visual Studio o lo que sea nuestro editor de código, esta es una pequeña vista previa de cómo se ve. Puedes ver sus variables generadas para todos los colores y las fuentes aquí. También se infiere algunos otros detalles ahí. Tener alguna información general sobre el contenido de la marca. Obviamente, si quieres revisar esto y cambiar algo aquí porque realmente no coincide con lo que tenías en mente para la marca, obviamente, adelante. Pero si esto se basa en archivos de identidad de marca encerrados que han sido confirmados, entonces todo esto debería ser exacto. Entonces ya tenemos ese archivo de diseño. Vamos a volver a entrar aquí. Voy a volver a realmente no esta página. Ya tenemos nuestro extractor, y luego aquí en el mezclador de diseño MD, vamos a empezar subiendo nuestras propias marcas design dot md file Entonces haré clic en Abrir ahí y solo copiará los detalles en esta caja de aquí mismo. Y entonces vamos a tener nuestros sitios de inspiración. Aquí pueden ver que ya he hecho esto. Entonces ya tengo la mañana hecha aquí. Creo que está en caché mis entradas anteriores aquí. Pero ahora puedes ver en estas sesiones de Claude, ambas parecen estar hechas ahora, así que puedes ver que tenemos un MD de diseño para cuál es este ? Olvidé el nombre. Entonces esta es para Jade Leaf marcher, así que voy a descargar esto Y en vez de llamarlo diseño MD, voy a llamarlo Jade Leaf design dot md. Podemos dejar eso donde queramos, y luego voy a descargar este, que es el diseño hecho por la mañana MD. Así que ahora los tengo a los dos, y luego puedo volver por aquí. Para la mañana hecha una, voy a ir un paso atrás. En realidad, fue dos pasos atrás, puesto en la mañana hizo diseño. Y como puedes ver aquí, tengo una caja extra para lo que te gusta del diseño de este sitio. Entonces, cuando la IA está remezclando estos, está conservando lo que te gusta de cada sistema de diseño Entonces lo que me gustó de la mañana hecha, si vuelvo a ello, fue que me gustó este tipo de papel buscando color de fondo, y también me gustó el espaciado y las líneas divisorias. Si después voy a Jade Leaf Macha, subo el diseño punto D para Jade Leaf Macha. ¿Qué me gustó? Me gustó el encabezado en forma de p, radios de los bordes y la iconografía Entonces, si vas a Jade leaf marcher. Me gustó este encabezado de píldora. Como puedes ver aquí, eso flota sobre la parte superior y el radio del borde Entonces los bordes curvos en esto me gustaron particularmente. Entonces, lo que estoy haciendo aquí al agregar esto es hacerle saber a Claude que mire esas partes específicamente cuando esté construyendo nuestro nuevo sistema de diseño. Como puedes ver aquí, entonces podemos presionar generar prompt. Va a generar un prompt bastante grande, 34.000 caracteres. Y entonces lo que vamos a hacer es igual que lo hicimos con la herramienta de planeación, vamos a copiar ese prompt y luego simplemente volver directamente a Claude. Aquí mismo en la misma ventana donde creé mi MD de diseño para mi marca, puedo hacerlo directamente en la misma sesión o crear una nueva sesión. Voy a hacer una nueva sesión, y luego voy a pegar en el prompt para generar el archivo combinado punto D de diseño que se inspira en este otro sitio, pero en última instancia lo combina con su propio MD de diseño para crear un nuevo archivo dotmd de diseño donde tenga toda la información que Claude necesita para volver a revestir los wireframes Figma Pulsa Enter en eso. Bien, entonces ahora que ve estamos creando esto en la misma carpeta donde tenemos el diseño original punto d, nos está preguntando si queremos sobrescribir ese archivo o guardarlo como un nuevo archivo Realmente no importa. a presionar Guardar como archivo nuevo acaso necesitábamos el original por cualquier motivo, pero no deberíamos, así que parece que ya está hecho. Si miro dentro de la carpeta, esta es la versión sintetizada de diseño que acaban de crear. Entonces lo que voy a hacer es que voy a cambiar nuevo a la sesión original. Probablemente puedas crear una nueva sesión, pero esta sesión que al menos conozco ya ha hecho algo en Figma, así que ya tiene el contexto Entonces prefiero hacerlo aquí mismo, y todo lo que quiero hacer es escribir el siguiente sencillo prompt. Por favor tome este sistema de diseño y aplíquelo a nuestras maquetas actuales de Figma Bien. Entonces, claro, necesito adjuntar ese archivo, así que voy a hacer clic en Subir desde computadora. Agarra el diseño sintetizado dotMD siempre que esté en el mismo formato que design dot MD, no necesita ser nombrado exactamente design dot MD Y entonces todo lo que voy a hacer es darle a Enter en eso, y luego debería volver a desollar nuestras maquetas de Figma en tiempo real, Entonces me siento tentado a trasladarme directamente a Figma y ver que esto sucede en vivo Figma, pero puede que haya algunas preguntas que surjan de Claude, así que quiero estar revisando a ambos al mismo tiempo, si es posible, pero parece que todo va bien hasta ahora, así que solo lo dejaré aquí por ahora, para que podamos ver esta actualización en Bien, entonces ahora está terminado, y puedes ver que estos diseños de figma sin vida ahora se ven Como puedes ver, está usando los colores de nuestra marca de ese verde marcher Se implementó ese fondo de color de papel. Se implementó el diseño de la píldora para el encabezado que le dije que me gustaba de Jade Leaf marcher Las tarjetas de producto se ven mucho más agradables. Las fuentes ahora deberían coincidir con las fuentes de mi marca. Entonces, si miramos, tenemos al Inter y al cuerpo de sesión. Entonces está usando Sans body, que debería ser, si desvinculo es Inter Entonces tal vez necesitamos actualizar los encabezados si queremos que sean Bueno, en realidad, el encabezado aquí es correcto, pero el título del producto está usando Inter Entonces esto debería estar en Marca con tenis Arenas. Sí. Bien, entonces está usando las fuentes adecuadas la mayor parte del tiempo. Tal vez queramos revisar un poco su trabajo ahí. Y como puedes ver, por lo menos, tenemos color y radio de borde implementados en nuestros diseños de Figma. Entonces lo dejaré ahí para este video sobre la implementación del sistema de diseño. Y en el siguiente video, traemos algunas de nuestras imágenes, nuestra iconografía, y posiblemente limpiemos un poco más el diseño porque hay ciertas partes que definitivamente necesitan algo de trabajo 6. Las imágenes y la iconografía: Bien, entonces en los dos videos anteriores, usamos nuestro planificador de escaparates e IA para construir nuestros wireframes, y luego aplicamos nuestro sistema de diseño a los Ahora se ven mucho más animadas, pero aún queda trabajo por hacer. Y podemos usar IA para esto para ciertas partes de la misma. Al igual que podríamos decirle a la IA que actualice los íconos aquí y les diga exactamente dónde buscar. Pero, claro, la IA no es gratuita. Vamos a tener que usar tokens y esperar a que Claude vuelva con nosotros o cualquier herramienta de IA que estés usando. Entonces para esto, voy a estar haciendo mayormente trabajo manual. Pero puedes ver aquí que la mayor parte del trabajo que podríamos automatizar ya se ha hecho por nosotros. Entonces lo primero que voy a hacer es agregar en nuestro logo porque verás aquí solo dice Sans marcher donde sea que se supone que aparezca el logo Y si recuerdas, en la última lección, hablé de componentes e instancias en Figma. Entonces aquí hay una instancia del encabezado. Ir por aquí, tenemos otra instancia del encabezado, el encabezado de escritorio. Si queremos cambiar algo en todas las instancias, tenemos que ir al componente maestro, que está por aquí, y puede decir que es un componente maestro. Al pasar el cursor sobre él, dirá componente, pero también este icono aquí Entonces esto es para componentes. Y si echamos un vistazo aquí, este diamante de aquí es por ejemplo. Entonces, si quieres hacer un cambio que sea solo en una instancia, lo hacemos en la instancia, pero si queremos que llegue a todos los encabezados o a todas las instancias de ese componente, lo hacemos a nivel de componente. Entonces hagámoslo. En lugar de Sans Macha, lo reemplazaremos con el logo Entonces lo que voy a abrir mi carpeta aquí, agarrar el logo, y luego simplemente arrastrarlo a esa posición. Ahora tenemos que hacer un poco de trabajo aquí para cambiar la altura aquí para llenar el contenedor, va a llenar naturalmente la altura del contenedor, que es lo que hará en HTML de todos modos. Entonces podemos eliminar el texto que era el marcador de posición para el logotipo Podría parecer un poco pequeño. Necesito verlo tal vez en la vida real, pero a lo mejor es un poco pequeño. Así que podría simplemente aumentar la altura mínima de la misma. Voy a ir aquí a la altura, dar clic para agregar una altura mínima, y digamos que quiero que sea por lo menos 30. ¿Bien? Entonces ahora eso va a ser un poco más grande. Y ahora que lo veo venir a través, creo que necesito un poco más de relleno la izquierda, tal vez. Entonces voy a hacer un ajuste al relleno aquí mismo. Actualmente se encuentra en 24, que está vinculada a una variable específica, que es el relleno de contenedores. De hecho, podría dejar eso por ahora. Ahora bien, esto no sucedió cuando hice esto antes, pero la disposición de los componentes está un poco apagada. Algunos de ellos se superponen. Así que permítanme mover algunos de estos componentes a su propio espacio aquí, para que no se superponga con otros componentes. Y entonces este de aquí mismo es el componente de fila de acordeón. Es posible que desee etiquetarlos o simplemente dejarlos como están. Pero como puede ver aquí, este marco aquí contiene nuestros componentes maestros. Y para cada componente, va a haber una versión de escritorio y móvil. Obviamente ese no es el caso en la versión de código finalizada del tema, sino Figma, porque tenemos separación entre los diseños de escritorio y móvil, va a haber una versión para móvil y una versión para escritorio Entonces voy a ir por aquí y hacer lo mismo para reemplazar el logo aquí. Ir hasta aquí, llenar contenedor para las alturas, quitar el existente. Y entonces, como puedes ver aquí, todavía es un poco demasiado grande. Entonces, ¿tenemos algún acolchado superior e inferior que hagamos? Entonces, ¿tal vez necesitamos trabajar con el ancho un poco aquí? Y reducirlo a digamos 100. Como puedes ver aquí, está recortando aquí. No seleccionamos relación aspec fija. Entonces voy a golpear relación fija de Apec y luego reducir el ancho hasta 100, y ahí se puede ver que está funcionando un poco mejor, pero no está dispuesta en el centro absoluto Entonces podría romperlo del diseño automático haciendo clic en este botón aquí para hacer un posicionamiento absoluto. Esto hará que ignore el diseño automático, y luego solo puedo colocarlo en el centro muerto, bien, en caso de que quisiéramos eso. En realidad, se ve un poco fuera de lugar a la derecha o es que solo me lo estoy imaginando Creo que ahí se ve mejor. Bien, entonces ahora deberías poder ver que ese logo se ha portado a todos los diseños que usan ese componente, que es prácticamente todos ellos porque es una sección global. Y así para el encabezado, se ve bastante bien. De alguna manera resolvió los íconos sin que yo le diera ningún ícono. A lo mejor en realidad se veía dentro de la carpeta. Entonces, si volvemos a la carpeta, y en realidad, no están aquí, pero si volvemos a salir y miramos dentro de esta carpeta aquí mismo, sí tenemos íconos de sitios web. Entonces tal vez miró fuera de la carpeta para encontrarlos. No estoy segura. A veces, la IA funciona formas que no instruyes específicamente, pero necesitamos reemplazar los íconos aquí para IG, Facebook y Tik Tok. Entonces lo que voy a hacer es entrar en la carpeta de iconos sociales aquí donde tengo esos íconos. El primero es IG, así que voy a traer Instagram ahí mismo. Parece que no cayó en la posición correcta. Oh, ya veo. En realidad estoy editando la instancia aquí. Así que en realidad quiero subir aquí y editar el componente real. Entonces déjenme hacerlo de nuevo a nivel de componentes. Esa es una buena. Eso es un poco captado. Parece que se está posicionando dentro este círculo junto al texto IG. Voy a quitar ese texto IG, y no quiero el círculo en absoluto. Entonces, arrastremos esto fuera del marco y pongamos eso ahí. Entonces haré lo mismo por Facebook. Es un poco difícil colocarlos exactamente donde necesitas en un diseño pequeño como este, pero ahí tienes. Siempre puedes simplemente moverlos una vez que los colocamos. Intenta lanzar TikTok ahí. Ahí vamos. Y ahí lo tienes, los tres íconos sociales sin los círculos a su alrededor. Pero son un poco más pequeños de lo que pretendíamos. Los círculos eran 28 por 28, así que voy a hacer todos estos iconos 28 por 28. Pero primero, tengo que arreglar la relación de aspecto. De nuevo, da clic aquí para fijar la relación Apec. Y luego una vez más en el ícono de TikTok. No queremos un fondo blanco ahí, así que eso fue un poco de un error de la IA, así que solo voy a quitar el relleno como tal, y ahí se puede ver. Así que en realidad podemos querer que estos sean blancos, así podríamos entrar aquí. Aquí hay un relleno, así que en realidad podemos cambiar el color porque son, de hecho, SVG Pero en realidad me gusta como negro. En realidad, creo que hay un off black que probablemente hayamos almacenado como una variable en alguna parte. Entonces voy a mover el relleno aquí, abrirlo aquí, y tratar de encontrar en nuestras bibliotecas el color apropiado. Así que aquí tenemos un montón de variables de color que se han implementado en la etapa anterior. ¿Y en secundaria? Entonces, sí, es aproximadamente del mismo color pero ligeramente diferente. Entonces hagamos estos en secundaria. Siempre es bueno usar variables. A ver. Si descargo la variable, sí, verás que es casi negra Está muy cerca del negro. Entonces es mejor que usemos variables consistentes para que nuestros colores sean consistentes. Y como verás en el pie de página, ahí también hay un logo. Entonces voy a reemplazar eso con el logo de nuestro sitio web. Nuevamente, necesitamos arreglar la altura de esto, así que podría simplemente reducir el ancho de la misma hasta 100, tal vez un poco más de 100, así que digamos 150. Fresco. Y luego cosa similar aquí para la versión móvil del pie de página. Una vez más, este probablemente pueda ser 100 en el móvil. Bien. Y entonces necesitamos movernos probablemente podamos simplemente copiar y pegar lo que ya hemos hecho aquí para ahorrarnos algo tiempo y luego simplemente quitar este marco. 28 parece un poco grande, así que cambiemos estos a 20 en el móvil. Y debido a que estamos haciendo todos estos cambios en el componente, eso debería fluir a todos nuestros diseños móviles, ¿de acuerdo? Otro componente aquí son las tarjetas de producto. Entonces esta área de aquí, vamos a tener nuestra imagen de producto, para que podamos ignorar el color de esa. Eso va a verse diferente. Pero como puedes ver, tenemos estos bordes curvos con sombra. Puede o no querer eso. Creo que se ve bien, así que voy a dejarlo por ahora. Lo que quiero hacer y lo mencioné en un video anterior es que quiero poner el botón de Agregar rápido sobre la parte superior de la imagen. Entonces lo que voy a hacer es que voy a agarrar ese botón y podemos etiquetarlo si queremos. Podemos decir botón de Agregar rápido, cambiar el nombre del marco si queremos, y después voy a hacer clic en arrastrarlo. En realidad, tengo que hacer esto dentro de la barra lateral aquí. Y voy a hacer click arrástralo aquí arriba. El problema con eso es que ahora tenemos este pequeño marco aquí para el icono de la imagen. En realidad no vamos a ir a vivir con eso. Eso era sólo un icono ahí para indicar un marcador de posición. Entonces sólo voy a borrar eso por completo. Y luego voy a tomar este botón, en realidad, el color de fondo del botón, y el color del espacio de imagen es el mismo, así que no vamos a ver el contorno aquí. Pero lo que voy a hacer es que solo voy a agregar algo de relleno aquí mismo. Y luego para el botón, voy a colocarlo al fondo. Entonces voy a dar click aquí en alineación. En realidad, necesito hacer eso en el marco padre, establecer la alineación a la parte inferior, y luego verás los límites del botón aquí. A lo mejor solo agrego un borde para que eso sea un poco más obvio. Entonces parece que sí tiene un trazo, pero a lo mejor el trazo es del mismo color que el fondo. Entonces, permítanme cambiar el trazo a otra cosa, digamos, en primaria. Bien, entonces ahora puedes ver esto Una vez que implemente esto, haré que este botón solo aparezca en Ha. Pero por ahora, eso indica aproximadamente lo que quiero. Recuerden, esta zona aquí será reemplazada por imágenes, y no estoy seguro de si la pedí en la etapa de planeación o no, pero a esta tarjeta parece que le falta el precio también. Así que solo voy a duplicar el título del producto y hacer un precio de producto aquí. Y eso es demasiado grande. En realidad, creo que voy a agrupar estos juntos. Selección de fotogramas, convierta esto en un marco de diseño automático, establezca la dirección como tal , alinéelos para que estén igualmente espaciados y luego establezca el ancho para llenar el contenedor. Si no has usado Figma antes y no estás exactamente seguro de lo que acabo de hacer, definitivamente mira la clase de diseño web Figma No quiero repetirme en esta clase cuando puedas regresar y ver esa. En esa, cubro más de las prácticas reales de usar Figma, ¿ de Entonces voy a establecer eso en 12 en lugar de lo que es ahora como el título del producto. Entonces en realidad, creo que voy a ir a impulsar esto a 16 en escritorio y el precio a 14. Y entonces, obviamente, por aquí, necesito hacer algo parecido. Es como, muy pequeño por aquí. Déjame ver cómo aparece en los diseños reales porque pusimos en el plano que queríamos que fueran dos columnas. Eso no es un montón de espacio, así que tal vez tengamos que reducir esta brecha en el móvil. Por ahora, sólo voy a dejarlo como está. Y como no hay fecha de cosecha en el móvil, dejaré los botones de adición rápida debajo. O tal vez simplemente deshazte de ellos por completo. Entonces no voy a hacer eso en una instancia. Lo haré en el componente maestro aquí mismo y solo lo eliminaré de la experiencia móvil. ¿Bien? Bien, así que esos son básicamente los componentes maestros. Los he actualizado un poco. He puesto el logo y los íconos, pero aún no he hecho ninguna imagen. Entonces por aquí, lo que voy a hacer es actualizar la imagen del héroe. Entonces voy a hacer clic en esto, y luego voy a entrar en relleno. Y quita ese relleno de color y reemplázalo con un relleno de imagen. Entonces voy a subir eso desde mi computadora dentro de las imágenes del sitio web. Tengo mi sección de héroes ahí mismo , así que voy a traer eso, y luego puedo posicionarlo como me gusta, como tal. Ahora, es un poco brillante, así que si pongo texto por encima, podría ser un poco difícil de ver. Voy a agregar otro relleno sobre la parte superior, y Figma es bueno en esto Sabe lo que estoy tratando de hacer. Agrega una superposición negra al 20%, y luego voy a cambiar esto de un color oscuro para el relleno de texto a un color claro. Y debido a que todas nuestras variables están configuradas, nuevamente, te animo a que no fijes el color con un valor hexadecimal aquí, usa las variables existentes. Entonces pienso en primaria y luego aquí, primaria también. Y puedes ver que eso se ve bastante bien, ¿de acuerdo? La otra cosa es que quería que el encabezado de la píldora se superpusiera sobre el héroe. Entonces lo que voy a hacer es que voy a hacer este encabezado en el escritorio, específicamente en el marco del escritorio de la página principal porque solo quiero que esto se aplique a esta página, voy a quitar el diseño automático y dejar que esta posición sea absolutamente. ¿Bien? Entonces ahora va a repasar, y luego solo necesito ajustar un poco mi imagen. Entonces voy a arrastrarlo como tal. Ahora puedes ver que tengo ese bonito encabezado estilo píldora que vi de Jade Leaf que me gustó. ¿Bien? Pongamos la misma imagen de héroe en nuestra versión móvil. Así que solo hacemos clic aquí, misma sección de héroe. Este panel lo está bloqueando, pero puedes ver aquí, estoy contento con eso y queremos los mismos colores aquí. Entonces fue solo en primaria y luego lo mismo para aquí en primaria. Y se me olvidó poner el overlay, así que solo presionaré ese botón para agregar un relleno extra, el 20% overlay, y lo dejaré así, ¿de acuerdo? Llegaremos a insertar la copia un poco más tarde, pero vamos a entrar y rellenar imágenes del producto en estas tarjetas de producto reales. Obviamente, esta información va a sacar del back end de Shopify cuando se ponga en marcha Pero para fines de visualización en el diseño, vamos a reemplazar el relleno aquí nuevamente en la instancia, no en el componente porque cada uno va a tener un relleno diferente para representar un producto diferente cada uno. Vamos a entrar en las imágenes del sitio web. Vamos a mirar dentro de las fotos, y aquí tengo imágenes de productos. Vamos a buscar en imágenes de productos primarios. Voy a presentar primero el polvo de matcha, como pueden ver aquí Ahora podemos ver que nuestro botón no tiene ningún relleno una vez que lo hemos colocado encima de una imagen en lugar de ese fondo. Entonces voy a volver al componente aquí, asegurarme de que este tenga algo de relleno. Entonces creo que voy a usar este color aquí mismo. En realidad, eso no va bien con el green en absoluto. Entonces tal vez sólo para salir a la superficie. Echemos un vistazo con una imagen. Bien. Creo que estoy bastante contento con eso. Cambiar el título del producto. Nuevamente, esta va a ser información dinámica, así que en realidad no necesitas hacer esto. Pero dependiendo de si necesitas esto para visualización o quieres mostrarlo a otra persona. Voy a actualizar el título. El nombre del producto es si entramos aquí, solo ve a abrir eso en la nueva pestaña para que podamos ver Ambos al mismo tiempo. Si vamos por aquí, tenemos nuestra lista de productos aquí mismo. Así que el polvo matcha premium, 100 gramos. Yo sólo me desharé de la parte de los 100 gramos porque no tenemos espacio para eso. Y aquí realmente podemos ver que tal vez no tengamos espacio para todos los detalles. Entonces tal vez tengamos que volver a la tarjeta aquí, el componente, y reducir esto nuevamente, o 16 ya es bastante pequeño. A lo mejor solo aumentamos el ancho del contenedor aquí para darle más espacio. Por lo que actualmente está en mil 200. Hay bastante relleno. En realidad se puede ver aquí que no está extendiendo todo el ancho del contenedor, así que podría tratar de arreglar eso por aquí en la cuadrícula del producto. Entonces los alinearé al centro, los espaciar de manera uniforme. Todavía no le queda muy bien. Entonces lo que creo que voy a hacer es, sí, no tenemos espacio para poner el precio a la derecha, así que solo cambiaré eso, bajaré este precio por debajo del título del producto. Y ahora no necesitamos el marco, así que solo podemos quitar eso. Nuevamente, estas cosas surgen mientras estás diseñando, pero con una herramienta como Figma, puedes hacer todo esto manualmente, y con el Figma MCP, también puedes tener IA para ayudarte con las cosas más básicas Entonces el precio de ese producto, si miramos la lista de productos, es de 45 dólares Entonces ahí puedes ver, como cómo aparecerá la tarjeta en el sitio web. Sigamos con las otras tarjetas de producto. Quiero hacer esto rápido porque no quiero empantanarme demasiado en esto Es simplemente el mismo proceso una y otra vez. Entonces tal vez hagamos el tazón a continuación. Y debido a que estos títulos van a pasar dinámicamente, aquí no los voy a editar. Pero de nuevo, tal vez quieras hacer eso, actualizarlos al nombre correcto. En realidad, quiero hacer los accesorios una última vez, así que voy a hacer batidor y luego voy a hacer el kit de accesorios Bien. A lo mejor voy a actualizar los títulos aquí. Solo diré tazón de cerámica, batidor ceremonial y juego de paquetes Bien. Entonces eso se ve bastante bien en el escritorio. Voy a cambiar la colección destacada a nuestra gama de productos, y luego voy a ir hasta aquí y hacer lo mismo en el móvil. Yo solo haré las imágenes para el móvil. Pero para tu diseño, tal vez quieras actualizar los títulos y precios de los productos también. Me acabo de dar cuenta de que tenemos un precio agregado al componente general, así que también lo haré. El siguiente fue tazón. Entonces veo que la tarjeta móvil tiene esto todavía, solo quiero quitar eso. Y luego agregar en el precio. Así que voy a agarrar esto, pegarlo aquí, y luego obviamente hacerlo más pequeño porque estamos en el móvil. Bien, así podemos volver aquí, actualizar estas imágenes a través la propiedad fill, y ahí está tu paquete. ¿Bien? Entonces eso básicamente abarca las dos primeras secciones. Si queremos actualizar realmente la copia de la sección de héroe también, tengo el documento de copia web aquí para referencia. Entonces fue Macha premium para el estilo de vida de bienestar moderno Así que solo voy a reemplazar eso porque ahora podemos ver que o es demasiado grande o tenemos que romper en dos líneas. Entonces es bueno poner ahí la copia real solo para ver. Entonces lo que voy a hacer es reducir eso a una de estas variables. Eso es mejor. Y luego voy a, lo que fue el otro hecho a mano para la calidad y la pureza. Bien, entonces vamos a entrar aquí, poner eso ahí. Y en realidad, sólo voy a dejar así el tamaño de la fuente. Lo mismo por aquí, trae ese rubro. Eso va a ser demasiado grande para el móvil, creo. Así que queremos hacerlo más pequeño, y luego podemos usar saltos de línea aquí, pero sigue siendo un poco demasiado grande. Así que sólo voy a salir de las variables aquí y hacer 24. Después por aquí, la otra copia web que va por debajo de ella. Voy a poner ahí definitivamente va a necesitar un salto de línea para esa, también. Entonces voy a hacer probablemente dos saltos de línea como tal. A lo mejor también reducimos el tamaño de la fuente. Entonces, como puedes ver, eso es una especie de flujo de trabajo. Insertamos las imágenes, insertamos los íconos, el contenido real y realizamos cualquier edición que detectemos en el camino que necesitemos arreglar No voy a hacer todas las plantillas porque para muchas de estas, las imágenes van a sacar los datos del tema y almacenar datos. Entonces mucha de esa información se pierde cuando construimos. Y está basado en lo que ya te acabo de mostrar. Por ejemplo, si quisiéramos ir a la página del producto, otra vez lo mismo. Simplemente tomamos la zona donde está destinada a ir la imagen. Nos deshacemos de ese pequeño icono molesto de ahí. Porque eso va a ser un problema. Reemplazamos ese relleno de fondo con una imagen de producto real o cualquier tipo de imagen dependiendo de dónde se encuentre, y continúa actualizando las imágenes y reemplazando la copia, viendo lo que se rompe, viendo qué cambia, y actualizando eso a medida que avanza. Lo único que sí quiero cubrir en video es nuestro Y CNS Macha no se ve muy bien y nuestros testimonios también Entonces quiero refactorizar eso y también lo que se incluye es usar básicamente tarjetas de producto, así que quiero cambiar eso Pero el resto se ve bastante bien. Solo tenemos que rellenar ese contenido que falta. Pero por lo demás, se ve bastante bien. Echemos un vistazo a nuestras secciones globales por aquí. Sí, se ve bastante bien. Incluso tiene los íconos aquí en la navegación móvil. Entonces, en lugar de revisar y agregar imágenes y copiar a todas las plantillas, podría que solo en el siguiente video te lleve a través de la sección testimonial de puntos de venta y lo que se incluye porque el resultado inicial de IA que ha llegado va a necesitar un poco de trabajo Y si quieres pasar y poblar el resto de los wireframes con tus imágenes, también puedes hacerlo Podría hacerlo yo mismo un poco más tarde para este proyecto de prueba, también. Voy a romper esto en un nuevo video, y podemos hablar de estas secciones extra que necesitan algo de trabajo en el siguiente video. 7. Diseño manual de Figma: Entonces como vimos en el último video, IA ha clavado algunas de las secciones Creo que la sección de héroes y la sección de colección destacada se ve bastante bien. Pero la sección marchante de Y CNS, todavía no puedo ver la visión Y aquí mismo, la sección de testimonios también necesita un poco de trabajo. Por lo tanto, no entendió completamente lo que se incluye porque mi intención no es que el cliente agregue productos individuales a la tarjeta cuando esté en la página del producto para el paquete. Solo quiero mostrar los diferentes productos que se incluyen en el paquete cuando están en esa página. Entonces en este video, vamos a arreglar manualmente estas secciones. Pero antes que nada, parece que para los puntos de venta que Claude no creó eso como componente, y quiero que estos cambios se apliquen a cada plantilla que la utilice. Yo puedo, por supuesto, simplemente borrar la sección y luego traerla, pero prefiero que sea una instancia de componente, creo que eso también ayuda con la generación de código para explicar que es el mismo código para cada una de estas secciones solo con contenido potencialmente diferente. Entonces para esto, en lugar de arreglarlo yo mismo, en realidad voy a volver con Claude aquí, y esto es algo que puedes hacer sin importar en qué etapa te encuentres en el proyecto. Claude puede sumergirse en Figma a través del MCP en cualquier etapa Y si es algo que puedes explicar fácilmente y que Claude puede interpretar fácilmente, lo convierte en un buen prompt de Claude. En lugar de necesariamente tener que hacer el trabajo manual usted mismo. Así que voy a copiar los nombres de estas secciones, y luego voy a volver a mi sesión de código Claude dentro del código de Visual Studio. Diré que implementaste la sección de puntos de venta. En realidad, la sección testimonial sólo aparece en la página principal Entonces solo diré que implementaste la sección de puntos de venta como secciones duplicadas regulares. A mí me gustaría que fuera un componente en Figma. Bien, entonces no sé si me explico tan bien, pero parece haber entendido a lo que me refiero, va a convertir la sección de punto de venta en un componente reutilizable adecuado. Entonces va a inspeccionar lo que está pasando actualmente en el archivo Figma y cambiarlo por nosotros. Bien, entonces es decir que notó algo inesperado y piensa que alguien más ha editado el archivo desde la última vez que revisó. Así que sólo voy a asegurarme que Claude entienda eso. Sí, he editado el archivo desde que generaste por primera vez los wireframes Por favor, no revierta mi trabajo. Bien. Ojalá entienda eso y no vuelva a revertir ninguno de los trabajos que ya hemos hecho. No creo que lo haga, siempre y cuando lo dejemos claro. Bien, entonces ahora parece que ya está hecho. Déjame entrar en Figma, y, sí, parece que los puntos de venta son ahora un componente común No estoy seguro de dónde está el componente, porque esta es una instancia todavía. Entonces tenemos que encontrar ahí está. De nuevo, se ha solapado con el otro contenido, pero podría simplemente lograrlo. Y para ser honesto contigo, eso tomó alrededor de 6 minutos de tiempo con Claude. En esta situación, tal vez hubiera sido solo más rápido para mí hacerlo yo mismo, lo que va a demostrar que algunas cosas simplemente se hacen mejor con IA y algunas cosas simplemente se hacen mejor de forma manual. Entonces ese es un buen ejemplo ahí que tomó 6 minutos y pasó un montón en fichas. A veces simplemente es mejor hacerlo manualmente. Ahora que eso está hecho, podemos editar la sección del punto de venta en una ubicación, y esa información se extenderá a todas las plantillas que la usen. Bien, entonces lo que voy a hacer obviamente es reemplazar estos diminutos círculos con el icono. Y si usamos el sitio web que construimos en la clase Skillshare anterior, modo de ejemplo, estos iconos son un poco más grandes los 40 píxeles Entonces, si le echo un vistazo aquí, 64 por 64, probablemente sea alrededor del tamaño correcto que queremos. Entonces voy a hacerlo en lugar de simplemente cambiar esto a 64 por 64, vamos a reemplazarlo de todos modos. Entonces traeré los íconos. El primero fue la defensa radical. Entonces déjame encontrar dónde está eso. Entonces dentro de las imágenes del sitio web dentro de los íconos, esta es la primera, así que voy a arrastrar eso aquí. Va a salir enorme. Quiero fijar la relación de aspecto y luego ponerla 64 y luego quitar ese punto ahí. Voy a hacer lo mismo rápidamente por estos otros. Avanza rápido a través de esto porque es exactamente el mismo proceso para cada propaganda. También voy a hacer eso para la versión móvil. Bien, genial. Y luego solo rellenaré los títulos destacados y las descripciones también. Así que voy a copiar eso del sitio web, defensa radical, ritual sostenido, chispa metabólica, vívida desintoxicación, y luego las descripciones Esto también está en el documento de copia web. Entonces, si no lo estás tomando del sitio web como yo, puedes tomarlo del documento de copia web aquí mismo. S, Ritual sostenido. Cambiaré al documento de copia web porque es posible que no tengas acceso al sitio web de la clase anterior, pero es exactamente el mismo contenido aquí. Y tal vez valga la pena señalar que probablemente podríamos haber evitado esta etapa si acabáramos de darle esta información a Claude al principio. Pero ahí tienes. Nos tomé unos minutos más, pero ahora hemos cargado en esta información, y quiero verlo ahora en la instancia real. Como puedes ver, hay algunas cosas que necesitan cambiar. Quiero que todos estos blurbs estén centrados, así que voy a ir a cada uno de estos blurbs, centrar el contenido Y creo que también quiero eso aquí en el móvil, también. Déjame ir a verlo en su lugar. Creo que a lo mejor quiero un color de fondo diferente, también. Entonces voy a cambiar el color de fondo aquí por digamos, blanco, pero no voy a elegir el blanco normal. Voy a elegir la variable de fondo, en realidad, la variable de fondo. Aquí se veía blanco, pero en realidad no es blanco. Vamos a tratar de superficie. No. Voy a hacer superficie brillante. Y luego aquí también llenar superficie brillante. Sí, creo que me gusta más así, y el texto no está alineado en el centro. Está alineado a la izquierda. Entonces solo voy a entrar en la alineación del texto aquí para cada propaganda y alinearlo en el medio. Ahora volvamos a echar un vistazo. Se ve bastante bien, pero el texto es un poco demasiado grande, así que quiero tener un contenedor Max WIP en el contenido del texto aquí Entonces, aquí mismo, voy a establecer un Max WIP haciendo clic en el Chevron junto al WIP, agregar un Max With de, veamos como se ve 200 Bien, tal vez 250, tal vez 260. Sí. Entonces voy a configurar estos todos a Max WIP 260 en el móvil. Y en escritorio, tal vez 260 también. Experimentemos con eso. 250 parece que no está envolviendo. Solo necesito cambiar las reglas de redimensionamiento aquí. Sí, no me gusta cómo se envuelve así. Entonces creo que voy a hacer por el Max con 260. Entonces éste también, poniéndolos a todos en 260. Algunos de ellos no van a cambiar porque ya eran lo suficientemente pequeños, pero estas son reglas de respuesta que se van a traducir bien, a la web y a medida que cambiamos el tamaño en diferentes anchos de pantalla Bien, entonces ahora puedes ver que tenemos Y CNS Macha, y todos nuestros cambios se aplican a cada plantilla que la usa ¿Bien? Déjame solo revisar también la fuente. Entonces viene como Inter. Quiero usar la fuente de encabezado aquí, así que voy a cambiar eso también. También puedo usar una variable aquí. Puedo dar click aquí para cambiarlo a la variable, o debería poder hacerlo. Juro que antes vi una variable para encabezamientos. Seance encabezamiento titular MD. Bien, así que solo necesito entrar aquí, y creo que da clic aquí para aplicar estilos. Eso es lo que estoy buscando. Entonces voy a hacer titular MD, aplicar ese estilo en todos los ámbitos. También hay Title MD que puedo usar. Pero vamos a ver cómo es el titular MD. Podría ser un poco demasiado grande. Sí, creo que probablemente va a ser un poco demasiado grande. Entonces tal vez lo hagamos. En lugar de ese estilo, cambiamos el estilo a otra cosa. Entonces título MD, y luego tal vez igual que en el sitio web, la mayúscula no se ve bien con esa fuente. Entonces tal vez sí lo configuré en MD, pero solo desvinculo eso, bajamos el tamaño de fuente a 24 o podemos ir al estilo sí y cambiarlo a nivel de estilo Entonces, si voy aquí y hago clic para editar el estilo, puedo bajar eso a unos pocos píxeles, tal vez a 24. Y eso va a cambiarlo en todas partes. Así que recuerda, aquí la bajamos a 24. Probablemente podamos devolverlo ahora al estilo que era antes, y prefiero hacerlo porque eso solo mantiene la consistencia en todo el sitio web usando estas variables. Entonces necesito aplicar los estilos aquí también, titular MD. Y un último cambio que quiero hacer aquí es que quiero un poco más de espacio entre el encabezado y el contenedor. Entonces solo voy a aumentar la brecha a, digamos, 48 y tal vez hacer esta partida En vez de MD grande, ahí vamos. Tal vez agregue un signo de interrogación aquí. Hazlo en ambos. Este quiero estar centrado, así que voy a establecer la alineación aquí, y estoy bastante bien con eso. Entonces lo voy a dejar ahí, y vamos a trabajar en la sección testimonial siguiente Entonces éste sólo aparece una vez, así que no va a ser un componente, sino que podemos, por supuesto, tratarlo como un componente. Y entonces lo que voy a hacer es sustituir todos estos portacuarios de imagen fotos de los propios clientes. Las mismas fotos que usamos en la clase anterior, nuevo, las va a hacer enormes. Así que tenemos que bajarlos a lo que creemos que son mejores dimensiones. Creo que 200 tal vez sea suficiente. Y luego queremos agregar un radio de esquina. Tenemos nuestro radio de esquina, variables aquí. Entonces porque estamos usando radios en todas partes, creo que deberíamos usarlo aquí Quita eso. Pongamos una cotización real. Entonces voy a agarrar eso de la copia web. Esta puede ser Sarah. Así que voy a copiar su nombre de autor también. Y si, no se ve tan increíble. Creo que lo que vamos a querer hacer es que se vea más como una tarjeta de producto. Entonces voy a agregar algo de relleno aquí. Entonces iré a mis bibliotecas. Echemos un vistazo. Hagamos antecedentes. Simplemente va a hacer la página de fondo sobre fondo, y superficie superficial brillante, como hicimos aquí arriba, no sentir que Eva. Estoy sintiendo algo que es un poco más blanco. mejor si pongo algún radio de esquina aquí, nuevo, usando una de las variables por defecto. Y luego centremos todo en este marco, agreguemos un poco de relleno dentro de este marco. Creo que eso es una cosa que definitivamente falta. Veamos si tenemos alguna variable para el espaciado. Sí, así que el relleno del contenedor. Vamos a usar eso. Bien, eso se ve un poco más agradable. Y luego alguna brecha aquí también. Actualmente solo hay una brecha de diez píxeles. Entonces pongamos eso a 20. Y ahora necesito ver esto apilado uno al lado del otro para ver si queda bien. Entonces voy a duplicar. Bien. Todo bien. Creo que eso me gusta. Así que solo voy a quitar ese soporte de lugar y usar este duplicado. Y nuevamente, si nos estuviéramos poniendo técnicos con esto, podríamos querer hacer esto aquí mismo un componente también. Entonces, si hacemos alguna edición, se va a aplicar a todos los componentes de aquí De hecho, permítanme hacerlo ahora mismo. Voy a crear componentes, tirar esto en nuestra sección de componentes aquí mismo, eliminar eso y luego traer una instancia de ese componente. Y a estas alturas, ya deberías saber lo que eso nos permite hacer es editar la tarjeta una vez aquí en nuestros componentes, y entonces esos cambios fluirán a todas las tarjetas testimoniales, ¿de acuerdo? Así que voy a nombrar éste en lugar de testimonial una tarjeta testimonial escritorio, Y luego solo duplicaré esto dos veces. Bien. Me gusta la mirada a eso aparte de que algo está pasando aquí con este recorte. Estoy seguro de por qué se superpone en la final y no en las otras. La tarjeta en sí se superpone. Entonces lo que queremos hacer es que queremos hacer los contenidos del abrazo de WIP, pero luego agregar un látigo mínimo para que no quede demasiado aplasta así. Entonces tal vez como 300. Y entonces ahora podemos alinearlos en el centro. Podríamos alinearlos con igual brecha si quisiéramos. Yo sólo voy a alinearlos así. Y no creo que la imagen tenga que ser tan grande, así que podría reducir eso a 150 y en realidad tal vez poner el testimonio en la parte superior Creo que todos estos testimonios son probablemente demasiado texto, pero aún no reinventemos nuestro ejemplar Entonces vamos a sustituir a éste. Obviamente, en este punto, estamos editando las instancias porque no queremos que este cambio se aplique a todas nuestras instancias de componentes. Entonces sólo tenemos que arrastrar eso a esta instancia. No me gusta que arrastre una nueva imagen adentro, así que solo actualizaré el relleno aquí y luego reemplazando el contenido de la última instancia aquí, Ava entonces obviamente, necesitas reemplazar la imagen aquí del tercer perfil Bien, entonces creo que eso es bueno por ahora. Creo que si dedicara más tiempo a ello, definitivamente podría arreglar esto. Creo que estos burbs son probablemente estos testimonios son probablemente demasiado largos o necesitan ser presentados posiblemente un poco diferente, pero estoy lo suficientemente feliz por ahora, y solo voy a hacer lo mismo aquí para el móvil Entonces voy a crear una versión móvil de esta tarjeta testimonial. Así que solo dupliqué el componente, y lo estoy llamando móvil, bien, lo arrastra, así sabemos que es diferente, y luego voy a arrastrar opción. Para traer eso, elimine los otros, los marcadores de posición, y luego duplique eso dos veces Como pueden ver aquí, no está centrada en el medio, así que voy a alinear eso en el centro. Y solo me doy cuenta que no tenemos un encabezado, así que necesito poner encima de esta fila testimonial un encabezado En realidad, voy a copiar el encabezamiento aquí arriba, colocarlo arriba aquí. Entonces vamos a necesitar alguna brecha en nuestra sección de testimonios. Creo que la brecha que usaba antes, ¿qué era? Vamos a conseguir una brecha consistente. Eran 48, creo que usé 48 aquí, entonces yo, perfecto. Bien. Entonces lo mismo por aquí, copiaremos esto en nuestro diseño móvil, lo pondremos en la parte superior, y en realidad estoy bastante bien con esas tarjetas. Así que sólo voy a reemplazar el contenido una vez más. Bien. Entonces como puedes ver aquí, esto se ve bastante bien lleno. Tiene contenido real dentro de él, para que puedas ver cómo va a quedar en el sitio web final. Y así esas fueron las dos secciones de la página de inicio que quería abordar. La sección de punto de venta también entra en la plantilla del producto, manera que también cubre la plantilla del producto. Pero finalmente, quería cubrir y arreglar lo que está incluido en el paquete. No quiero que esto se vea como una tarjeta de producto, así que en realidad puedo separar instancia aquí, así que no es una instancia de la tarjeta del producto Entonces voy a quitar los otros de aquí y solo voy a duplicar lo que creo aquí. No quiero que sea una tarjeta de producto. Puede ser un poco similar. Voy a quitar el anuncio rápido. Pondré en el título del producto, polvo de marcha premium, sustituiré esto, por supuesto, con la imagen. Voy a quitar eso. Agrega un relleno de imagen. Queremos volver a nuestras fotos de productos. Nuestros primarios, añadimos el polvo macho. Y en lugar de reseñas y todo eso, quiero poner en un descriptor de lo que es ese producto Entonces creo que tal vez lo tengo en la copia web aquí. En realidad, hagamos algunos puntos puntitos. Entonces voy a crear un nuevo vamos a duplicar esto, entonces obviamente no queremos negrita aquí. Parece que he activado el cuadro de aviso de IA accidentalmente aquí. Ahí vamos. Entonces quiero agrupar esto en su propia selección de fotogramas. Quiero agregar diseño automático. Quiero alinearlo en el centro, este título para que sea más grande. Entonces voy a aplicar ese estilo. Obviamente necesita alguna brecha. Voy a añadir 16 píxeles de hueco. No se arreglarán las alturas. Será contenido abrazo, y voy a cambiar el nombre de este marco lo que incluye la tarjeta. Hacer de este un titular más grande, titular grande, centrar todo en el contenedor. Y mucha preferencia personal aquí, obviamente, diseño, como quiera que te guste diseñar. Y obviamente estoy pasando por esto rápido porque, ya sabes, tal vez quieras diseñarlo de una manera completamente diferente. Pero solo para terminar esta lección y hacer que esto se vea un poco más apropiado para lo que tenía en mente para el sitio web real, voy a alinear estos auto layout, flexionarlos con espacio intermedio, flexionarlos con espacio intermedio, y luego renombrar aquí a los otros productos, que, si miramos dentro de la lista de productos, teníamos el elegante batidor marcher Hagamos que cada título de producto tenga dos líneas para que coincidan, y luego enviemos un texto al centro de una línea. Obviamente necesitamos reemplazar la imagen, y luego el final será el tazón, y luego tenemos que agarrar el nombre de ese tazón, el tazón de marcher premium de cerámica Y luego por aquí, todavía no tengo ningún contenido, así que voy a dejar eso como contenido marcador por ahora y luego limpiarlo entre videos antes de que entre videos antes estemos listos para generar el código Aquí hay algo que está haciendo la sección sea realmente grande aquí, así que permítanme tratar de averiguar qué es eso. Creo que tenemos una altura fija en el contenedor aquí. Si cambio eso para abrazar contenidos, no. Déjame sacarlo a colación manualmente, y creo que eso es lo suficientemente bueno para nuestra página de Paquetes. De nuevo, podría entrar en muchas más correcciones y actualizaciones a través de todas estas diferentes plantillas, pero eso crearía un curso muy largo, y mucho de él va a llegar a las preferencias personales de usted como diseñador. Entonces en este video, solo quería mostrarte cómo limpiaría ciertas secciones. Obviamente, tengo que hacer la versión móvil de esto. Eso voy a hacer entre videos. Pero mostrándote cómo puedes crear tus wireframes, puedes respeinarlos con tu propio sistema de diseño, y luego podemos entrar después Y haga manualmente nuestro proceso normal de diseño Figma ahora que tenemos esa base establecida para Creo que estarás de acuerdo en que configurar los wireframes con anticipación y lograr que Claude ayude a implementar nuestro sistema de lograr que Claude ayude a implementar diseño nos está ahorrando mucho tiempo, dándonos más tiempo para enfocarnos en las cosas importantes, esas pequeñas actualizaciones menores de las que hablamos en este y el video anterior Entonces después de este video, voy a seguir limpiando estos diseños, conseguir que se vean exactamente como los quiero en el sitio web en vivo, y luego usaremos estos diseños de figma de alta fidelidad, así como la hoja de especificaciones que generamos anteriormente Aquí mismo para seguir adelante y generar realmente el código para nuestro escaparate Shopify 8. Generación de código temático: Bien, así que como se mencionó entre videos, iba a limpiar el diseño de Figma si salimos hasta la página del producto, la página del producto Bundle, la página de la colección, verás que ya está todo construido Póngase en contacto con nosotros. No necesitaba hacer ningún cambio en eso. Rellené imágenes e información real aquí para la página del carrito. página del carrito no es muy importante porque no mucha gente va a navegar hasta ella, dado que tenemos un cajón de carritos. La página de búsqueda en Escritorio y Móvil y luego tenemos las páginas de nuestro blog aquí, que no he rellenado. No voy a implementar un blog en esta clase, así que solo voy a eliminar todas estas plantillas por completo. Recuerda, mencioné en el video de planeación que puedes simplemente eliminarlos de tu plan si tu sitio web de Shopify no tiene blog en absoluto Quería incluirlos solo para mostrarte cómo están saliendo como un wireframe Pero solo voy a eliminar estos wireframes por completo porque realmente no necesitamos una plantilla de blog Y puedes ver por aquí nuestros cajones. Entonces el cajón del carro en el escritorio, que es básicamente el mismo diseño que en el móvil y nuestro cajón de navegación aquí mismo. Ahora básicamente hemos construido nuestro archivo Figma. Tiene todas las plantillas que necesitamos construir. Como puedes ver enumerado aquí. Todo está muy bien estructurado en secciones con diseño automático y componentes con instancias, tal como lo hicimos en la clase de diseño web Figma Y al igual que en la clase de diseño web Figma, ahora vamos a generar el código para este tema Shuberfi A diferencia de la clase de diseño web Figma que era agnóstica de una plataforma, no estaba basada en Shopify Simplemente se basaba en HTML y CSS. En esta situación, en realidad vamos a construir un tema de Shopify, que es un conjunto muy específico de archivos de código que solo se ejecutan en las tiendas Shopify Entonces por eso pasamos por la planeación al principio con el planificador. Todo esto está construido específicamente para Shopify, y luego estos wireframes se han configurado específicamente en función de ese plan mapeando ciertas plantillas dentro de un tema, siendo el tema el sistema que representa el escaparate opera Entonces, junto con estas maquetas de alta fidelidad terminadas y la hoja de especificaciones, que si volvemos a nuestro planificador de escaparates y miramos al lado de nuestro plan de diseño web, podemos ver nuestra hoja de especificaciones aquí, tenemos suficiente información para darle a una IA como Claude las instrucciones para ir a construir Antes de hacer eso, solo queremos verificar qué posibles preguntas podrían surgir durante la construcción. Puedes ver aquí que tengo esta parte naranja en la parte superior de la hoja de especificaciones. Esto cubrirá cosas que realmente no cubrimos en nuestro plan. Por lo que está pidiendo la sección de colección destacada, es el contenido de la sección fuente de datos del tema, almacenar datos o mezclar. Entonces parece que no llenamos fuente de contenido. Entonces voy a volver al proyecto y solo asegurarme de hacer esa parte específica. Entonces voy a entrar en otras secciones, ir a colección destacada, editar información. Y puedes ver aquí no configuré la fuente de contenido. Entonces voy a decir mezcla de datos de tema y datos de tienda porque los productos van a provenir de la colección, pero la colección específica que se elija será de la configuración de la sección. Entonces voy a guardar esa información, volver a crear plan de diseño web, y luego voy a copiar las instrucciones de compilación del tema. En realidad, antes de hacer eso, quiero renombrar esto y darle acceso a este archivo. Entonces digamos seance Macha Skillshare proyecto de clase en caso de que quieras acceder a Entonces presionaré Compartir aquí, y luego copiaré el enlace e intentaré incluirlo en algún lugar de la clase. Bajo el peor de los casos, si no he publicado en ningún lado, simplemente voy a crear una nota aquí, puedo hacer una pausa aquí, captura de pantalla y luego sacar el contenido de texto de esto aquí mismo. ¿Bien? Bien, así que volvamos a aquí, voy a copiar de nuevo las instrucciones de compilación del tema y voy a abrir una nueva ventana en el código VS Puedes hacerlo en el editor de código o IDE que prefieras Para mí, es código de Visual Studio, y uso código de Visual Studio en todas mis clases. Entonces voy a crear una nueva ventana dentro de Visual Studio Code. En realidad, necesito señalarlo a una carpeta específica. Así que voy a abrir la ventana de mi buscador aquí, ir hacia atrás a mi carpeta de escritorio aquí, y voy a crear una carpeta llamada tema personalizado. Bien. Entonces voy a ir por aquí, da clic en este botón llamado Explorer. Y como dice aquí, todavía no he abierto una carpeta, así que voy a abrir esa carpeta. Por supuesto, esta carpeta está vacía, pero ahora todo lo que hagamos dentro esta carpeta se aplicará a esta carpeta. ¿Bien? Entonces voy a dar click aquí para abrir una sesión de código Claude. Y entonces todo lo que voy a hacer es pegar las instrucciones de Figma, y luego también necesito adjuntar la hoja de especificaciones. Entonces voy a bajar aquí y descargarla como Markdown. Markdown es más fácil de leer para las IA. El documento de Word es más para los humanos. Entonces voy a descargar la hoja de especificaciones de Suns marcher en esa misma carpeta Entonces voy a presionar esto para subir eso desde mi computadora. Seleccione la hoja de especificaciones del marchante de SNS, y esto debería ser suficiente para seguir adelante y construir el tema Ahora, en realidad puedo leer aquí. Hay algunas cosas que debo mencionar. Antes de comenzar, esto necesita ser actuado primero. Está en el prompt, así que te va a incitar a que hagas esto de todos modos. Necesitarás Shopify CLI para enviar los archivos de tema a tu tienda Shopify Supongo que puedes optar por simplemente crear el tema, confiar en que funciona, comprimirlo, y luego subirlo vía pero te recomiendo que lo hagas con el CLI Entonces, si no estás familiarizado con la CLI de Shopify, CLI solo significa interfaz de línea de comandos Simplemente puedes buscar Shopify CLI en Google. Debería dirigirte a una página como esta, y luego puedes simplemente instalarla si aún no la has instalado. ¿Bien? Los otros requisitos previos que vas a necesitar son un conector Shopify MCP Este aviso Iclaud debería indicarle que lo configurara y se conectara a una tienda Por supuesto, vas a necesitar una tienda a la que conectarte. Voy a desplegar este tema directamente en la misma tienda que tenía para la clase anterior, Sansmchatmshofy Como puedes ver aquí, tenemos el tema Horizon, y tenemos el tema de prestigio en prueba, que es el tema en el que construimos nuestro escaparate en la clase anterior Y así conectándose a esta tienda, lo que va a hacer es que va a publicar este tema que estamos creando para los temas del borrador. Bien, entonces creo que son todos los requisitos previos, pero una vez más, si ejecutamos este prompt, Claude debería decirnos qué necesitamos si de todos modos nos falta algo ¿Bien? Entonces acercaré el zoom, y luego presionaré Enviar en eso. Mientras lo hace, podemos ver nuestro diseño y echar un vistazo a algunos de los contenidos dinámicos que necesitaremos dentro de nuestra Shopper Fire Store existente. Por ejemplo, los menús y los productos, ¿bien? Entonces, aquí arriba en nuestro encabezado, puedes ver que tenemos estos elementos del menú, y cada uno tiene un Chevron, lo que indica que si hay sub ítems, cursor sobre estos va a abrir los sub Actualmente tenemos un menú muy básico en nuestra tienda en la actualidad. Entonces, si entro en lo real ahora está viviendo en la sección de contenido del Amén, verás menú principal, solo hay tres enlaces sin anidamiento Para una tienda con solo cuatro productos, este tipo de productos tiene sentido, pero en el mundo real, es posible que tenga 100 productos, por lo que potencialmente querría menús que estén anidados a dos o tres capas de profundidad con más elementos de menú que esto Lo mismo para el pie de página. Entonces, si nos desplazamos hacia abajo, puedes ver que hay todos estos elementos del menú. Esto va a sacar de esa misma sección en el admin. Entonces verás cuando publiquemos esto, estos estarán vacíos y necesitamos vincularlo a los enlaces de menú correctos. Por lo que puede que no se vea exactamente como el diseño en ese sentido, con los elementos del menú marcador de posición aquí Entonces por supuesto, cada uno de estos está sacando de un producto diferente. Por lo que cada uno de estos tendría que ser configurado como un producto. Pero creo que ya lo hicimos en la clase anterior. Entonces si voy a mi sección de productos por aquí, se puede ver que tenemos los cuatro productos ya cargados en. Y si no tomaste la última clase y no tienes esto ya cargado , está totalmente bien. Si vamos a la carpeta del proyecto, estoy bastante seguro de que me fui en la lista de productos. Entonces, lo que puedes hacer es simplemente ir a aquí en la parte superior de la página de productos en el Amin, hacer clic en Importar, y luego importar un archivo CSV con formato Shoo cinco, y eso traerá exactamente esa misma lista de productos Bien. También las colecciones. Entonces me parece bastante simple, pero tengo una tienda o colección. Realmente no tiene sentido tener más colecciones que no sean esta cuando solo tienes cuatro productos en la tienda. Pero cuando tienes muchos productos en tu tienda, obviamente, quieres organizarlos en colecciones. Entonces creo que esa es la mayoría de los datos dinámicos. Cosas como esta vendrán de la configuración de la sección. Así que solo tendremos que configurarlo, o el tema tendrá esos valores predeterminados incluidos, así que saldrá de la caja Obviamente todo en esta sección proviene del objeto producto en sí. Lo que está incluido realmente no necesita cambiar en ninguna parte del sitio. Esto obviamente se extrae de una determinada colección, y la búsqueda obviamente extrae de productos u otros recursos en su sitio en función de su término de búsqueda. ¿Bien? Así que permítanme mirar hacia atrás en nuestra instancia de código con garras ahora, ver dónde está. Y es preguntarnos si queremos proceder con una consulta o acción de MCP No puedo recordar cómo se llama. Y claro, queremos decir que sí. Vamos a necesitar usar el Shopify MCP para poder conectarnos a nuestra Entonces solo esperaremos a que vuelva pidiéndonos que nos conectemos. Bien, entonces aquí vamos. ¿ Qué necesitamos antes de comenzar? Necesita el dominio exacto de la tienda. Así que voy a agarrar eso para nuestra instancia aquí. Va a ser Sans marcher.mishabify.com. Entonces voy a decir número uno. Número dos, inicio de sesión de Shopify CLI. Entonces haré clic para abrir una nueva terminal y ejecutar este comando aquí mismo, reemplazando tu tienda con Sans Macha Obviamente, pon aquí tu propia tienda. Bien, aquí se nos ha ocurrido un error. Creo que esto está un poco desactualizado. Esta solía ser la forma en que podías iniciar sesión en una tienda. En cambio, solo voy a ir Shopify Theme Dev. Tienda igual, y luego poner en Sans Macha punto mi shoafi.com Y esto abrirá una nueva ventana del navegador para que me inicie sesión. Sólo vamos a hacer coincidir este código con lo que muestra en nuestra terminal. Sí. Confirma e inicia sesión, dice que estamos conectados correctamente para que podamos volver a aquí. Bien, entonces voy a decir número dos, me he autenticado con éxito, y aquí abajo, voy a decir que sí a proceder Se va a pedir la contraseña de la tienda. Bien, así que aún no hemos terminado del todo. La contraseña de la tienda es algo que encuentras en el canal de ventas de la tienda online bajo preferencias. He hecho que la contraseña sea falsa, así que solo voy a escribir eso. Falso. Y eso debería ser suficiente para conectarse realmente a la tienda. Bien, dice, No, porque ya estoy ejecutando este mismo comando con una tienda diferente. Eso es bastante típico para mí, ser un desarrollador de Shopify Trabajo en una variedad de tiendas. Acabo de seguir adelante y despejé eso, así que voy a ejecutar esto de nuevo. Sí, quiero proceder. Bien. Y ahora parece haber funcionado, pero está tratando de subir realmente este tema, y ahí no hay nada. Entonces sí, todavía no va a funcionar realmente. Entonces el número tres es el enlace del marco Figma. Entonces lo que voy a hacer es ese enlace que copié antes, voy a copiar dentro de este chat de Claude, también. Así que el enlace para compartir aquí mismo. Entonces conector Shopify MCP, voy a preguntar si el propio código Claude puede conectarme Por favor, conéctame. Todo bien. Y esto es algo bueno de la IA, si estás bloqueado en cualquier etapa, va a decir que estás bloqueado y te avisará con lo que necesitas para desbloquearte Entonces solo sigue lo que te dice el agente de IA y deberías estar bien. De lo contrario, como siempre, puedes usar la sección de discusión de la clase Skillshare Voy a minimizar esto un poco que podamos ver más de lo que está pasando aquí arriba. Y puedo ver por los registros que me muestran ahora mismo, ya está empezando a leer el Figma, averiguar qué hay dentro de él, y pronto debería comenzar con la compilación Si hago clic en este botón para ver el explorador, puede ver que aún no se han creado archivos, pero eso pronto va a suceder a medida que construimos este tema usando ese símbolo maestro con una hoja de especificaciones. Bien, entonces me está preguntando por los marcos para el blog y la plantilla de artículo, los que acabo de borrar. Entonces me está preguntando, ¿debería construir una convención estándar o simplemente saltarse por ahora Voy a pegarle a Skip por ahora. Bien, entonces después de 15 minutos adicionales, ya se completó lo que estaba haciendo Y como puedes ver aquí, ha construido todos los archivos dentro de las diferentes carpetas que conforman un tema de Shopify ¿Bien? Así que vamos a desplazarnos un poco hacia arriba y leer con qué ha regresado. Dice, ahora he construido y validado las ocho plantillas que tienen cobertura Figma Aquí hay un informe completo de estado. Entonces, en lugar de leer esto línea por línea, solo voy a cubrir los puntos principales. Entonces entendió que ciertas secciones se comparten a través de cada plantilla. Entonces se crearon esos. Se han creado las diferentes plantillas. Se entiende que hay una plantilla alternativa. Para la página de contacto y para el paquete del producto. Entonces como puedes ver aquí, no espero que entiendas completamente el código del tema Shuba fi, pero si lo haces, puedes ver aquí que esta es definitivamente una plantilla alternativa solo por el nombre del archivo solo Se saltaron las plantillas de artículos de blog porque eso se eliminó de la Figma, luego ciertas suposiciones que ha hecho con el cambio de variantes, por ejemplo, no se ha mostrado ninguna interfaz de usuario de Figma para ello, lo que agregó una selección mínima de diseño bajo por si acaso llega una variante Para el rápido agregar al carrito, infería que debería dirigir al carrito en lugar de a un cajón del carrito Tal vez necesitemos cambiar eso. Vamos a echar un vistazo a eso. Ordenar por colección, va a hacer un sort by para la página de colección usando Ajax, lo que básicamente significa que no hay recarga de página No inventó ninguna faceta filtrante. Nuevamente, no le dijimos al planificador al principio que necesitábamos filtros de colección, así que simplemente no ha incluido eso. En la página del carrito, está usando Ajax para cambiar la cantidad cada vez que actualizamos la cantidad dentro de la página del carrito. Y la página de búsqueda tiene alcance únicamente a los productos. La sección de recolección fija aún no tiene datos en vivo. La tienda ya tenía dos temas, Horizon, y dice, desarrollo aquí, debe significar el que actualmente se está ejecutando usando la CLI No ha empujado nada. Dime si presionar a ese tema de desarrollo existente o crear uno nuevo. Técnicamente, este tema de desarrollo existe solo en el CLI En cuanto apagamos el CLI, eso ya no existe. Entonces vamos a tener que pedirle que empuje a un nuevo tema. Entonces todavía se requiere QA visual manual, lo cual está totalmente bien. ¿Bien? Entonces voy a decir, para el objetivo de despliegue, por favor despliega el tema a un tema completamente nuevo. Por favor, despliega el código en un tema completamente nuevo. Este que estamos ejecutando aquí mismo en Shopify Theme Dev sigue siendo el que se mencionó anteriormente, este tema de desarrollo Entonces, si estás familiarizado con la CLI, podemos ejecutar un tema de desarrollo para probar los cambios de código sin realmente empujarlo a la tienda Entonces, mientras está empujando el tema a la tienda, vamos a echar un vistazo a ese. Así que normalmente podemos encontrar esa misma dirección cada vez, si levantamos la terminal, podremos ver cuál es esa. Entonces suele ser esta dirección. Entonces voy a copiar esa dirección, pegarla por aquí y parece que tenemos un error de cuatro oh cuatro. Sólo voy a cerrar nuestra sesión anterior presionando Control C y luego reiniciándola. Primero lo iniciamos, no había archivos temáticos en absoluto, así que probablemente ese sea el problema. Y ahora se puede ver que ha llegado a través. Entonces como puedes ver aquí, algo de eso es bueno, otro no es bueno. Nuestro marco básico está aquí, pero hay algunas cosas que tenemos que arreglar. A saber, aquí tenemos este raro contenedor. No estoy seguro exactamente de lo que está pasando pero parece que la página no está llegando a la izquierda y derecha de la pantalla. Entonces mientras podemos usar Figma para crear nuestro tema inicial, y si vamos a una página de producto, lo cual va a ser más fácil si entramos al editor de la tienda en línea Entonces voy a ver el segundo enlace por aquí. Esto nos permitirá navegar a las diferentes plantillas y también agregar datos de temas faltantes. Si vamos a la página del producto aquí, deberíamos poder ver, y este es un tamaño de pantalla muy pequeño. Voy a alejar un poco, y verás que sí creó las secciones necesarias, pero aquí hay bastante limpieza que hacer Como pueden ver, aquí están nuestras pequeñas tarjetas de producto. Lo que voy a hacer antes de seguir adelante y limpiar eso es que voy a agregar en los datos que faltan. Entonces, para la colección destacada, entendió correctamente que queremos traer una colección, pero tenemos que seleccionar cuál es esa colección, ¿de acuerdo? Entonces después de hacer eso, llena la información. Voy a darle a Guardar en eso. Y en el siguiente video, te voy a llevar a través de la limpieza de la salida que ha llegado a través de la generación de código AI. 9. Limpieza de código temático: Bien, entonces en el último video, generamos el código de tema de Shopify para nuestro Pero como vimos, ha llegado a través de un poco roto y un poco incompleto. Así que vamos a pasar algún tiempo en esta lección arreglando lo mejor que podamos la salida que ha llegado a través de la IA. Si recuerdas de la clase de diseño web Figma, pudimos obtener una manera justa usando la generación de código AI, siempre que los archivos Figma se configuraran la manera correcta todavía teníamos que hacer algunos pequeños refinamientos en el camino, y esto no es diferente De hecho, probablemente sea un poco más desafiante porque se basa en una plataforma donde se extraen muchos datos desde diferentes ubicaciones. Por ejemplo, la sección de productos destacados en la página de inicio está sacando de los datos de la sección. Y notarás aquí que falta la lista de productos aquí. Eso es algo que es una solución fácil. A veces faltarán datos que necesitamos insertar realmente en el tema. Ahora bien, uno de los problemas que vamos a enfrentar es que este tema que estamos viendo aquí mismo es un tema de desarrollo que va a desaparecer en cuanto apaguemos el CLI, igual que este editor de tienda en línea de aquí mismo Así que no voy a usar esto ahora mientras actualizo el tema y su lugar miro el tema en la tienda real que ha creado. Ans Macha Para poder hacer las ediciones, vamos a incitar a Claude, pero solo tendremos que pedirle a Claude al final de cada sesión que empuje esos cambios a la tienda a ese tema para que podamos verlos realmente Y esto es un pequeño problema con Shopify los datos del tema en el que editamos aquí en que editamos aquí en el editor de la tienda online y el código ambos viven en las mismas carpetas Pero si editamos los datos aquí, no vuelve automáticamente a esta versión temática en nuestra computadora local, ¿de acuerdo? Entonces por ahora, lo voy a hacer en el escaparate, y luego voy a compilar una lista de cambios que quiero fijos envíelo a Claude, y luego Claude puede empujar esos cambios al tema ¿Bien? Entonces voy a ir a la sección de colección destacada aquí y cargar una colección. Entonces, como puedes ver aquí, la generación de código de tema se ha agregado con éxito en la configuración de personalización. Entonces como puedes ver aquí, podemos personalizar el título. Entonces podríamos decir colección destacada, o podemos dejarla en nuestra gama de productos. Y si tuviéramos otras colecciones en nuestra tienda, podríamos mostrar otras colecciones, ¿de acuerdo? Esto está atravesando correctamente. Como puedes ver aquí, tenemos bloques de puntos de venta. De hecho voy a alejar un poco aquí, así podemos ver a la izquierda aquí vendiendo bloques de puntos y luego los detalles para cada uno. Para que podamos cambiar esto. Podemos actualizar el icono. Parece que sacó el icono y lo agregó directamente al tema. Pero idealmente, no queremos hacer eso. Eso lo dejaré como está por ahora. Parece que aquí podemos cambiar el icono a otra cosa, como podemos ver aquí. Pero si no agregamos eso en, todavía va a ir por defecto a estas imágenes. Y si bajamos aquí, lo mismo también, así puedo cambiar la imagen aquí. Esta tienda ya cuenta con imágenes de la clase anterior, así que por eso las estás viendo en la biblioteca aquí, pero siempre puedes subir tus imágenes a esta sección. En realidad, voy a poner eso como mi primer comentario. Si entramos en la carpeta Activos, deberíamos ver todas las imágenes que se han incluido en el tema. Idealmente, no queremos tener ninguna imagen instalada en el tema en sí. Así que voy a crear un mensaje de retroalimentación aquí. Uno, no almacenar imágenes en el tema. Todas las imágenes deben provenir de los datos de la tienda o de los datos del tema. Bien, ese es mi primer comentario porque tener las imágenes en el tema significa que creamos un tema más voluminoso Solo queremos tener el código aquí, y queremos tener las fotos realmente subidas a la sección de archivos de nuestro Shabafi Amin Bien, entonces eso es lo primero que voy a cambiar aquí arriba en la cabecera, verás que está enlazando al menú principal. Entonces estos son en realidad los enlaces de menú que tenemos en nuestra lista de enlaces de menú principal. Entonces como puedes ver aquí, si hago clic en Editar, eso nos llevará a la sección de menús del admin para que los editemos. lo tanto, creo que estos enlaces deberían ser correctos si solo vuelvo a él ahora en base al trabajo que hicimos la última vez. Sí, entonces esos enlaces deberían funcionar. El logo, nuevamente, está mostrando un logo sin que le subamos nada. Entonces esta primera retroalimentación debería arreglar eso también. Y entonces lo realmente evidente es, si solo voy aquí para previsualizar ese tema, solo diré que todo el diseño está sangrado a la izquierda y a la derecha Intenta ser lo más descriptivo posible aquí. Soy desarrollador, así que soy capaz de mirar el código y ser un poco más descriptivo. Probablemente podamos averiguar qué es esa sangría mirando el código aquí Así que tenemos este extraño sistema de cuadrícula de contenido de margen de contenido que está sucediendo aquí. Normalmente no es como lo configuraría , pero se puede ver aquí, creo que la sección del cuerpo está en algún tipo de cuadrícula. Pero vamos a pedirle a Claude que lo arregle. Todo el diseño tiene sangría a la izquierda y a la derecha. El borde izquierdo de cada sección no se alinea con el borde izquierdo de la ventana gráfica y viceversa a la derecha Bien, queremos estados Hova en los botones. Entonces voy a decir implementar estados Hova en todos los botones y enlaces Entonces sí, el sitio web se siente como que no es muy interactivo porque no pasa nada cuando estamos pasando el cursor sobre botones y enlaces Y por aquí, la brecha entre los iconos del lado derecho del encabezado es inconsistente. La brecha entre los iconos en el lado derecho del encabezado es inconsistente. No estoy seguro de qué causó eso. Y luego este encabezado en forma de píldora, encabezado en forma de píldora en la página de inicio debe colocarse sobre la primera sección. Entonces conozco algo de CSS, voy a decir posicionamiento pegajoso o absoluto tanto detalle como puedas darle aquí, que no sea tanto como pueda proporcionar, pero solo haz tu mejor esfuerzo absoluto. Creo que nos faltan para el FOD los enlaces aquí. Entonces para Instagram, solo voy a poner en instagram.com porque esta no es una marca real, pero no va a mostrar el icono por el aspecto de las cosas A menos que insertemos un enlace. Entonces solo diré instagram.com. Sí, y como puedes ver, eso crea el link, facebook.com, y luego TikTok, que creo que es solo tiktok.com que creo que es solo Y luego cuando pongo estos enlaces, entonces aparecen los íconos. Ahora bien, para la sección de newsletter, no estoy seguro de por qué tiene todo este espacio ahí. Déjame echar un vistazo a los diseños de Figma o cómo se supone que debe verse Bien, entonces voy a decir que hay una gran brecha en el pie de página entre permanecer en el bucle y la entrada de correo electrónico. Bien, ¿qué sigue? El logotipo se estira en el pie de página. El logotipo se estira horizontalmente en el pie de página. Bien, así que eso es solo la página de inicio sola. Si voy a la página del producto, verás aquí, honestamente, no tan mal. Pero nuevamente, las secciones están un poco sangradas en la colección para los productos relacionados, solo cargaré en estos, pero van a estar apagados a la izquierda Entonces diré si hay tres artículos o menos en la sección de colección destacada, centrar las tarjetas de producto. Cuando se trabaja con datos dinámicos, es bueno tener condicionales aquí hecho de que ahora sean tres elementos no significa que vayan a ser tres elementos en el futuro. Así que no quieres que se rompa cuando se agreguen nuevos artículos. Y como mencioné, quería el botón Agregar rápido. Entonces, si actualizo por aquí, botón Agregar rápido en las tarjetas del producto debería mostrarse solo en la tarjeta del producto hover, y el ancho del botón debe ser 100% 100%, lo que significa que ocupa el 100% del espacio disponible Reseñas que no podemos implementar sin una aplicación de reseñas específica, por lo que primero tendríamos que insertar una aplicación de Reseñas. Ahora veamos qué pasa si hacemos clic en el botón de nuestra cuenta. Bien. Sí, eso parece funcionar. La búsqueda nos lleva a una nueva página. Lo ideal sería que la búsqueda abra un panel debajo del encabezado. Por lo que al hacer clic en el icono de búsqueda en el encabezado, debe abrir una entrada de búsqueda directamente debajo del encabezado para capturar el término de búsqueda. Y sí, obviamente, en tu situación, los comentarios podrían ser diferentes. Eso lo esperaría. Además, parece que el funcionamiento del icono del carrito y el icono Cuenta de enfrente. Diré el funcionamiento del icono del carrito, y el icono de la cuenta está atrás al frente. Además, la posición es de atrás a adelante también. Y también al hacer clic en el icono de CRT siempre se debe abrir el cajón del carrito, no navegar a la página del carrito Entonces sí, solo pasa por el tema completo. Obviamente, va a ser diferente cada vez cuántas ediciones necesitamos hacer Déjame ir a la página del producto. Oh, sí, le echamos un vistazo aquí, ¿no? Sí. Bien. Y ahora echemos un vistazo a la página de la colección. La página de colección se ve bien. Y luego tenemos nuestra página de contacto con el formulario de contacto. Estoy totalmente de acuerdo con eso, y no tenemos ninguna entrada en el blog. La página predeterminada se ve así. De nuevo, estoy bastante contento con eso. Así que permítanme correr con esta retroalimentación por ahora. Voy a quitar el punto 13 ahí, y luego presionaré Enter. Bien, así que eso tomó una cantidad considerable de tiempo, tanto tiempo que después de unos 15 minutos, solo decidí ir al gimnasio y volver a él más tarde. Por lo que ha concluido. Aquí está el resumen. También compacté el chat, que es algo que haces cuando estás hablando con agentes de IA para resumir el contexto de vez Entonces por eso estás viendo esto aquí mismo, charla compactada Pero si nos desplazamos hacia arriba y vemos lo que ha escrito aquí sin que nos lo pidamos, se empujan todas las correcciones al mismo tema inédito Se quitaron todas las imágenes de la carpeta de activos como lo pedí y cubrieron todas las cosas. Así que, en realidad, volvamos y verifiquemos si realmente está hecho las cosas que dice que está hecho y se solucionó el problema. ¿Bien? Entonces podemos volver al mismo tema exacto, y de inmediato, vemos que hay un Así que simplemente puedes tomar el error de líquido y pegarlo directamente en el chat, y por lo general sabe qué hacer. Mientras está haciendo eso, verás una vez que volvamos a la página de inicio, verás que tenemos el SVG de marcador de posición de imagen estándar en todas partes donde no se ha establecido una imagen Así que volvamos al editor de la tienda online y volvamos a configurar esas imágenes. Entonces voy a ir a la página de inicio aquí y agregar en nuestro logo, que ya debería estar en nuestra biblioteca desde la última vez que configuramos este sitio web, y ahora puedes ver el logo que hemos seleccionado está aquí mismo. Entraremos en el héroe aquí mismo, cargaremos la imagen del héroe aquí mismo. ¿Verdad? Entonces, en lugar de tener las imágenes extraídas de la carpeta de temas, que normalmente no es lo que haces, nos estamos asegurando de que todos sean archivos dentro la tienda Shopper Fi que luego traemos al tema a través de la configuración del tema, ¿de acuerdo? Puntos de venta por cada nota publicitaria, vamos a traer el ícono relevante, que creo que fueron estos. Y guardemos eso y echemos un vistazo rápido aquí. Corregido y empujar el error. Ojalá, eso no haya sobrescrito nuestros datos. Parece que no tiene a Dios. Y se puede ver que el encabezado está superponiendo al héroe en la página principal en el escritorio. Eso es bueno. Si hago clic en el ícono del carrito aquí, parece que nos está llevando a la sección de cuenta, y el ícono de cuenta nos está llevando al carrito y luego tenemos esta búsqueda aquí. Está un poco flotando en medio de la nada, así que eso no es lo ideal. El botón ahora tiene un estado estacionario, pero no es perfecto Eva, y los botones de anuncios rápidos solo se muestran al pasar el cursor Eso es bueno, pero no están extendiendo por con. Y en este punto, si tienes los conocimientos de desarrollo, podría ser más fácil editar el código tú mismo o inspeccionar el código y dar instrucciones más detalladas. No voy a asumir en esta clase que tienes conocimiento de cómo codificar o el sistema de desarrollo de temas de Shopify Por supuesto, si quieres aprender eso, puedes acceder a mis clases anteriores sobre esas materias. Pero aquí, voy a seguir cargando en las imágenes. Creo que esa fue Sarah M, Maya K y Ava L. Obviamente, se trata de gente ficticia, así que en realidad no importa . Golpea guardar en eso. Y luego para el pie de página carga en el logo. Y parece que hemos perdido esos datos que estaban en la sección de iconos sociales, así que solo vamos a repoblar Y esto es lo que hay que tener cuidado. Es por eso que me gusta usar la integración de Github, que es un poco más de una cosa de desarrollador, pero la integración de Github mantendrá todo sincronizado y minimizará los riesgos de pérdida de datos así. Entonces prefiero desplegar mis temas usando Github. Se puede ver esa brecha ahí que le pedimos que arregle se ha arreglado. Y vamos ahora a ¿ qué más pedimos en nuestra lista? Entonces, si vuelvo al principio, en lugar de ver lo que dice que está hecho, déjame ver qué le pedimos que hiciera. Bien. Así que sí, hay muchos registros aquí para tamizar Oh, aquí vamos. Podemos simplemente subir a la cima para recibir comentarios. Entonces, sí, eliminó todas las imágenes del tema. Tenía ese problema con la sangría a izquierda y derecha. Parece que ya está completamente arreglado eso. Gracias a Dios. Queríamos Hovstts en todos los botones y enlaces. Ahí están los Hovstts, pero el estilo que ha inferido, no es particularmente aficionado, pero lo ha hecho La brecha entre los iconos en el lado derecho de la cabecera inconsistente. Eso lo arregló. El encabezado en forma de perla en la página principal debe colocarse sobre la sección. Sí. Hay una gran brecha en el Pie de Página. Sí, eso lo arreglamos. El logotipo se estira horizontalmente en el pie de página. Ya no es el caso. Si hay tres artículos o menos en la sección de colección destacada, envíelo a las tarjetas de producto. Bien, para que podamos ir ahora mismo a una página de producto, a ver si se ha hecho eso. Así que necesitamos realmente poblar las imágenes de nuevo. Así que voy a entrar en mi plantilla de producto aquí mismo, y este producto realmente necesita ser asignado a la plantilla alternativa. Así que déjame volver a entrar aquí. Podría tener que publicar, en realidad este tema a la ranura principal con el fin de seleccionar esa plantilla. Pero como esta es una tienda de desarrollo, no está en vivo, eso no va a ser un problema en absoluto. Y luego para el conjunto completo de marcher, voy a fijarlo. Voy a acercar aquí. Voy a configurarlo para usar la plantilla bundle, no la plantilla predeterminada. ¿Bien? Ahora bien, si tuviéramos que volver a la página de inicio, luego volvamos a la plantilla de producto predeterminada. no debería mostrarnos el producto bundle Ya no debería mostrarnos el producto bundle porque eso está en una plantilla diferente. ¿Bien? Aquí, vamos a añadir de nuevo en esas imágenes y también añadir en los productos relacionados. Le pegaré a Guardar en eso. Recuerden, estábamos comprobando si los alinea en el medio. No lo ha hecho. Entonces eso es una cosa que no ha hecho. Yo solo arreglaré los íconos aquí para los planes de venta. Golpea guardar en eso. Ahora voy a ir a la plantilla alternativa de paquete. Mirando la sección principal del producto, está funcionando bastante bien. Lo que está incluido, solo necesitamos cambiar esto con las imágenes. Pondré la imagen de la Macha premium en la primera imagen del batidor, creo que fue en el segundo artículo Sí. Y luego el tercer ítem, que son todos los bloques en el editor de la tienda en línea, como sospecharíamos será el bowl. Ahí vas. Y el 100% de este contenido es editable y rederable en la tienda online Editor, que es lo que esperaríamos, ¿ Nuevamente, vendiendo puntos aquí, creo que este es el último lugar que aparece. Entonces sólo un lugar más para hacer esto en. Bien, tengo estos de atrás al frente. Pulsa guardar en eso y ve a nuestra página de colección. Entonces solo tenemos una colección por defecto. Por aquí, voy a tirar la imagen del paisaje. Entonces entrando aquí en nuestras imágenes del sitio web de Shopify, fotos de un sourcing T fields versión dos, creo, era la que queríamos Hit hecho y podemos personalizar el rumbo aquí a otra cosa. Si queremos. De lo contrario, simplemente toma por defecto el título de la colección como cabría esperar Y entonces aquí tenemos nuestra cuadrícula de recolección. Voy a darle a Guardar en eso. ¿Y qué más? Tenemos nuestra página por defecto. No creas que hubo ningún problema con eso y con nuestra página de contacto, que realmente no tuvimos ningún problema con Eva. A menos que quisiéramos poner algo de contenido aquí, pero te lo dejaré a ti. ¿Bien? Ahora voy a verlo todo en la vista previa móvil. Entonces sí, no 100% perfecto. Definitivamente algunas cosas podemos mejorar, pero nada realmente roto que pueda ver aquí. Si hago clic en el cajón de Nav, se abre con éxito. Ahora bien, si voy a la página del producto, verás que realmente no obtuvo el pedido que especificamos bien. Yo creo en el diseño, teníamos el título y el precio arriba. Así que también tendríamos que darle esa retroalimentación a Claude . Plantilla de colección. Sí, puedes ver a dónde voy con esto. Sólo estoy revisando todas las diferentes páginas. Y como tienes comentarios, literalmente puedes simplemente volver a insertar eso en Claude y pedirle que lo arregle. Sólo voy a corregir los errores obvios en este video. Entonces, por ejemplo, voy a decir comentarios adicionales. Uno, contáctanos sección de formulario, ¿cómo se llama? La sección Formulario de contacto debe apilarse en el móvil en lugar de flexionar en una fila. Entonces voy a poner eso como un error real. ¿Qué más había ahí? El grande era, si acabo de salir de esto, éste, con esto no ir en el medio no es un bicho enorme. No voy a hacer un gran problema con esto. Pero hay un gran error en cuanto a por qué el icono de la cuenta está activando el carrito y el icono del carrito está activando la Entonces diré que el ícono del encabezado del carrito está activando enlace de la cuenta y el ícono de cuentas está activando el cajón del carrito Debe ser lo contrario. Déjame verificar la funcionalidad de agregar realmente al carrito. Entonces, si quería agregar rápidamente este tazón a mi carrito, la interacción fue agradable, pero no abrió el cajón del carrito. Ah, y acabo de recordar que esto en realidad no es indicativo del carrito aquí mismo. En realidad lo puso en el lugar equivocado. Pero como puedes ver, tenemos este bonito cajón de carritos que actualiza el único problema es que tuvimos refrescar para poder verlo. Entonces voy a escribir eso. Después de agregar a CRT, el cajón del carrito debe actualizarse automáticamente y abrirse Y el indicador en el icono debería mostrar un sincrónicamente también No estoy seguro de cómo deletrear exactamente una sincrónicamente. Palabra dura. Simplemente lo escribiré en Google para corregirlo automáticamente. Así que lo enviaré. En realidad, solo revisaré la página del producto. Haz clic en cómo funciona Agregar carrito en eso. Sí. Nuevamente, parece que tenemos que actualizar nuestra página para ver la tarjeta actualizada, lo cual no es lo ideal. Así que voy a mandar eso. Creo que 0.3 está tocando ambas situaciones en las que tenemos el carrito de adición rápida y el Ad card en la página del producto. Vamos a verificar que nuestra galería de productos está funcionando. Lo es, pero lentamente, así que definitivamente podemos optimizar eso. Pero solo los ejecutaré, y el principio principal que quiero que te lleves de esto es que probablemente no va a salir perfecto, y tu solución para conseguirlo perfecto es solo seguir iterando con Claude sobre lo que hay que arreglar seguir iterando con Claude sobre lo que hay que Obviamente, como desarrollador en Shopify desde 2019, sé escribir el código manualmente, pero incluso ahora hablo con Claude en lugar de codificarme Por lo que recomiendo tomar este enfoque. Cuantos más conocimientos técnicos tengas, y las mejores descripciones que puedas darle obviamente mejorarán tus resultados. Pero solo hazlo lo mejor que puedas, y la mayor parte del tiempo, debería entender de lo que estás hablando. No sólo seguir yendo y viniendo hasta que lo haga. Entonces voy a esperar ahora, ojalá, eso no tome otros 20 minutos, y te alcanzaré cuando termine. Bien, después de unos cuatro minutos más, conseguimos esto. Así que empuja a vivir el tema. Es decir que Sans matre es ahora el tema inédito en vivo. ¿Deberíamos empujar esos cambios ahí? Me está haciendo esta pregunta porque obviamente, si fuera un sitio en vivo, esto sería bastante arriesgado. Voy a asegurarme de que no borre primero nuestros datos. Entonces voy a hacer otro, y voy a decir que sí, empuje para vivir, pero he hecho algunos cambios en el editor de la tienda online que me gustaría que mantuvieras. No borres mi trabajo en los archivos JSON. Entonces, para aquellos de ustedes que no conocen toda esa información, todos los valores en el editor de la tienda en línea entran en estos archivos JCN Entonces por eso estoy diciendo que no borres mi trabajo en los archivos de JCN Ojalá siga esta instrucción, y podrá fusionar código con los cambios JSON en el sitio web real. Bien, entonces parece que ya está hecho. Echemos un vistazo a lo que decía. Los tres problemas se corrigen, verifican en vivo y se empujan con el alcance con la única bandera para que solo cambie los archivos liquid y SVG Así que ninguno de tus temas editó ediciones JSON fueron tocadas. Bien. Entonces lo principal era el icono en la cabecera. Bien, entonces ahora parece que es el icono correcto. Es solo la posición incorrecta. Bien, pero al menos los íconos ahora están relacionados con el lugar correcto. Y ahora, ojalá, en realidad, los quite del carrito, como pueden ver. Y luego si hago clic en Agregar al carrito, sí, el carrito se actualizará automáticamente, y también lo hará el número. Comprobemos dos veces en la página de inicio que Quick Add está haciendo lo mismo. Es, me gustaría ser un poco más de una animación cuando el cajón del carrito aparezca dentro y fuera. Pero está funcionando. Y como mencioné antes, también está esta página Nuestra historia, que actualmente está vacía en este tema actual. Voy a dejar esa en blanco por ahora. Si seguiste en esta clase usando la misma marca, Sans Macha con todas las mismas plantillas, te dejaré la página Nuestra historia como un proyecto extra para continuar Agrega un par de marcos adicionales para escritorio y móvil para la página Nuestra historia. Y entonces puedes imitar lo que se creó aquí en el tema de prestigio para esa página en particular Todas las imágenes en la carpeta del proyecto con la copia para todo esto. Entonces puedes intentar crear esto en Figma usando IA o no, y luego implementarlo en una tienda Shopify Pero en cuanto a la construcción terminada de nuestro diseño personalizado, lo voy a dejar aquí. Obviamente, hay más trabajo por hacer. Pero, de nuevo, es sólo ir y venir con Claude para arreglarlo. Y obviamente, como desarrollador de Shopify yo mismo, puedo ponerme bastante detallado y en las malas hierbas con esto Pero solo en general, puedes ver que hemos creado nuestro propio tema personalizado desde la etapa de planificación hasta un tema de trabajo en una tienda Shopify real usando datos reales de la tienda aquí mismo Y lo hermoso de esto es que este es 100% nuestro propio tema. A diferencia de ese tema anterior, el tema de prestigio, donde si quisiéramos ir a vivir con ese tema, tendríamos que comprar realmente el tema, que creo que es de 300 a 400 dólares Entonces sí, si bien gastamos un montón de tokens en Cloyd para tomar un plan de sitio web y crear un tema totalmente personalizado, este tema ahora es nuestro, y ahorramos el dinero en cualquier otro desarrollo personalizado que podamos tener que obtener, ya sea contratar a un desarrollador o pagar por un tema fuera de la estantería Entonces aquí es donde básicamente terminaremos el viaje para esta clase. En el último video, vamos a terminar las cosas, y te voy a dar algunos detalles sobre tu proyecto de clase. 10. Extra: código del tema terminado: Antes de pasar a la conclusión, solo quería incluir aquí un pequeño video extra. Entre videos, he seguido adelante y actualizado el tema, lo limpié. Como puedes ver aquí, ese encabezado de búsqueda necesitaba un poco más de trabajo, pero ahora se ve bien. Me di cuenta probablemente no necesitas buscar una tienda que solo tenga cuatro productos, pero ahí tienes. Nuevamente, todos estos datos están extrayendo de la tienda real. Entonces los productos y el menú aquí arriba y también el menú aquí abajo. Pero si quisiera que este tema coincidiera exactamente con el escaparate, claro, entraría y actualizaría los datos de la tienda Menús, por supuesto, viven dentro de la tienda, no dentro del tema. Y como no creamos una página de O story, solo voy a eliminar eso del menú principal y del menú de comida. Entonces, si tuviera que volver aquí ahora, ya verán que eso lo cambiará en nuestro tema. Entonces espero que entiendas a estas alturas, que algunos de los cambios que harás en tu tienda Shopify están a nivel de tienda Así que cambiar cosas como menús, productos, colecciones, y algunas están a nivel temático. Y lo que quiero decir con eso es cuando estás en tu tema, estas diferentes configuraciones aquí mismo, todo esto es reordenable, como es el caso en todos los temas de Shopify Entonces, el tema debería ser lo suficientemente flexible teóricamente como para trabajar en cualquier tienda con algún dato que llegue, ¿de acuerdo? Y con eso en mente, lo que he hecho es que he comprometido todo mi trabajo este repo de GitHub aquí por si acaso ustedes quieren acceder al código de tema final de donde terminé Esto está disponible en mi cuenta GitHub de Christopher Dodd, la dirección que puedes encontrar aquí si necesitas el enlace directo Si tuvieras que crear este tema como un tema que querías vender en la tienda de temas, por ejemplo, eso debería funcionar en cualquier tema, necesitas probarlo en diferentes tiendas y ver cómo funciona. En este video, estábamos construyendo específicos para esta tienda en particular Sans marcher powder store Y así la elección depende de ti lo flexible que quieras hacer el tema. Solía trabajar para una empresa, por ejemplo, que no tenía ningún dato de sección. Entrarías en el editor de la tienda en línea, y no habría secciones en absoluto. Simplemente sería código. Y así, claro, puedes hacerlo, también, o puedes hacerlo altamente personalizable para que alguien pueda usar este tema sin escribir ningún código y aún así poder personalizarlo tanto como necesite. Sí, solo quería crear este video extra para darte acceso al código de tema final en el que aterricé. Esto definitivamente no es el final. Puede entrar aquí, ramificarse de este código de tema y usar el código Claude o cualquier agente de IA que desee para luego iterar esto, mejorarlo y construirlo según sus requisitos Y esa es la mejor parte de todo este proceso. Estamos usando el mismo proceso de desarrollo estándar que se hace en el mundo real. Solo estamos usando la IA para ayudar a planificar y automatizar gran parte del trabajo básico. Entonces con eso dicho, te veré en la conclusión. 11. Conclusión y proyecto de clase: Esto concluye esta clase sobre AI automatizado Shopify Web Design. Para tu proyecto de clase, te animo a crear el diseño web para tu tienda Shopify Figma usando las técnicas que cubrimos en esta clase, diseñando el plan para tus wireframes, usando el planificador de tiendas y luego construyendo las maquetas de alta fidelidad Cuando hayas terminado tu diseño, súbelo a la sección de proyectos de clase para compartir tu trabajo con otros estudiantes o para recibir comentarios de mi parte. Si disfrutaste de esta clase, asegúrate dejar una reseña positiva y asegúrate de revisar algunas de mis otras clases aquí en skillshare.com, donde profundizo en conceptos como desarrollo web, Shopify y otras herramientas Gracias como siempre por mirar, y te veré en la siguiente.