Shopify Webdesign – Planen, Entwerfen und Erstellen einer Shopify-Storefront mit KI

1. Einführung: Hallo und willkommen bei Shopify Web Design. Ihr Leitfaden für die Planung, Gestaltung und den Aufbau einer Shopify-Storefront mit KI Falls Sie mein Gesicht noch nicht gesehen haben, mein Name ist Christopher Ich bin ein Top-Lehrer hier auf skillshare.com und Experte für Shopify-Entwicklung. Ich arbeite seit 2019 mit Shopify-Shops arbeite seit 2019 mit Shopify-Shops In diesem Kurs führe ich Sie durch den Prozess der Erstellung eines hochwertigen Webdesigns für einen So weit wie möglich künstliche Intelligenz einsetzen , um die grundlegendsten Arbeiten zu automatisieren In meinen beiden vorherigen Kursen habe ich Ihnen beigebracht, wie man Webdesigns auf Figma erstellt, so strukturiert sind, dass sie für KI-Agenten leichter zu interpretieren Zuletzt habe ich Sie durch den Prozess geführt, eine Marke von ihren Kernelementen in ein funktionierendes Schaufenster zu verwandeln, indem ihren Kernelementen in ein funktionierendes Schaufenster zu verwandeln ich ein handelsübliches Shopify-Thema verwende handelsübliches Shopify-Thema In diesem Kurs führe ich Sie durch einen Prozess, der auf das eingeht, was wir in diesen beiden Kursen gelernt haben Wir nehmen dieselbe Marke aus dem letzten Kurs, aber anstatt sie in ein bestehendes Shopify-Theme zu integrieren, erstellen wir ein High-Fidelity-Webdesign Figma, um etwas völlig Benutzerdefiniertes zu erstellen Mit derselben Konvention, die ich Ihnen in meinem vorherigen Figma-Webdesign-Kurs beigebracht habe meinem vorherigen Figma-Webdesign-Kurs In diesem Kurs werden wir den Webdesign-Prozess so weit wie möglich automatisieren und uns nur auf die Kernentscheidungen und Prinzipien des Webdesigns konzentrieren, nur auf die Kernentscheidungen und Prinzipien des Webdesigns konzentrieren während KI den größten Teil der Routinearbeit erledigt. Am Ende des Kurses wirst du in Figma eine Reihe von originalgetreuen Mockups erstellt haben , alle Vorlagen auf Shopify zugeordnet sind. Anschließend können wir KI erneut verwenden, um den Code für ein zu 100% benutzerdefiniertes Shopify-Theme zu generieren Code Lass uns anfangen. 2. Vorwort: Wie ich in der Einführung erwähnt habe, werde ich in diesem Kurs eine Shopify-Storefront entwerfen und erstellen , wobei ich dieselbe fiktive Marke verwende, die ich in der vorherigen Klasse verwendet habe, in der vorherigen Anhang zu diesem Kurs sollten Sie in der Lage sein, den Projektordner für CNS Macha zu finden und Im Anhang zu diesem Kurs sollten Sie in der Lage sein, den Projektordner für CNS Macha zu finden und herunterzuladen Viele der Dateien sind dieselben wie in der vorherigen Klasse, aber Sie werden auch feststellen, dass ich den Bilderordner der Website getrennt und diesem Ordner auch eine Menge mehr Bilder hinzugefügt diesem Ordner auch eine Menge mehr Bilder hinzugefügt Ich habe auch einen Ordner mit Website-Symbolen mit den Standard-Symbolen von Shopify hinzugefügt Ordner mit Website-Symbolen mit den Standard-Symbolen von Shopify Wenn Sie genau mitmachen möchten, können Sie dieselben Dateien wie ich verwenden. Wenn Sie jedoch mit Ihrer eigenen Marke lernen möchten, stattdessen gerne Ihre eigenen Dateien verwenden Abgesehen von den Projektdateien benötigen Sie ein paar Tools. Und leider sind beide mit einem Preisschild verbunden. Claude Code ist das Tool, das ich als meinen KI-Agenten für diesen Kurs verwenden werde meinen KI-Agenten für , um einen Großteil der Routinearbeit zu automatisieren, aber Sie können es gerne gegen eine andere Alternative austauschen , sei es Codex by Open AI oder etwas anderes Claude Code wird uns helfen, Wireframes in Figma zu erstellen, dem Kernwerkzeug, das wir in diesem Kurs verwenden werden , um unsere originalgetreuen Mockups zu Figma ist zwar in der Regel kostenlos, aber um das Figma MCP nutzen zu können, das du benötigst um es mit Claude-Code zu verbinden, benötigst du Für mich zahle ich jeweils etwa 20 USD für diese Dienste, aber es lohnt sich zu 100% Davon abgesehen ist das auch möglich, wenn Sie mitmachen möchten, ohne dass Ihnen ein KI-Agent hilft. Sie müssen nur einen Großteil der grundlegenden Arbeit selbst erledigen, nämlich die Figma-Wireframes manuell einrichten Schließlich, und das habe ich später in der Klasse vergessen zu erwähnen, aber wenn du Claude-Code verwenden möchtest, um dir ein benutzerdefiniertes Theme zu erstellen , das auf den Figma-Mockups basiert , die wir in der Klasse erstellen werden, solltest du das Shopify-eigene KI-Toolkit installiert haben Ohne ihn verfügt der Krallencode oder ein anderer Agent, den Sie verwenden, möglicherweise nicht über die erforderlichen Fähigkeiten und Kenntnisse, um den Theme-Code Kenntnisse Ein weiteres Tool, das Sie ebenfalls hinzufügen könnten, ist das Chrome DevTools MCP Mit diesem Tool kann Code mit Klauen Seiten öffnen und Screenshots erstellen, sodass er seine eigene Arbeit im Browser überprüfen kann seine eigene Arbeit im Browser überprüfen Dies ist ein Tool, das ich derzeit installiert habe, aber ich habe auch vergessen, es später in der Klasse zu erwähnen Vielleicht möchten Sie, dass auch dieses installiert wird. Abgesehen davon sollten Sie, wenn Sie einen KI-Agenten und ein Figma-Abonnement haben , bereit sein, dem zu folgen Obwohl wir uns in diesem Kurs vielleicht stark auf KI verlassen, kann ich Ihnen als jemand mit jahrelanger Erfahrung beim Aufbau von Shopify-Websites versichern , wir diese Tools professionell einsetzen werden, um eine Shopify-Website auf den richtigen Grundlagen zu entwerfen und zu erstellen, anstatt nur eine weitere KI-Slop-Website zu erstellen 3. Moodboarding / Inspiration sammeln: In diesem Video werden wir uns mit Moodboarding befassen. Dabei handelt es sich um die erste Phase im Webdesignprozess, handelt es sich um die erste Phase im bei der visuelle Inspiration erhalten, damit Sie herausfinden können, welche Elemente Sie auf Ihrer Website haben möchten und welche Ästhetik Sie sich für diese Bereiche und die gesamte Website wünschen diese Bereiche und Wie es hier schon heißt, ist ein Moodboard nur eine visuelle Collage aus Bildern, Text, Farben und Texturen, die verwendet wird, um die ästhetische Ausrichtung eines Designprojekts zu definieren und zu kommunizieren In unserer Situation hier tun wir es natürlich für das Webdesign Ich werde mir andere ähnliche Shopify-Websites ansehen, sehen, was sie tun, Screenshots von Abschnitten machen, die uns gefallen, und das in ein Moodboard einfügen, das Sie sich wie ein Sammelalbum vorstellen können Sie benötigen dafür keine spezielle Software, aber da es so aussieht, als würden wir Figma für den Rest des Kurses verwenden , werde ich Ich habe hier bereits eine Designdatei für diese Marke eingerichtet , an der wir arbeiten werden. Es ist dieselbe gefälschte Marke wie die vorherige Klasse, Natürlich machen wir es diesmal anders, aber der Prozess beim Moodboarding ist im Grunde Der erste Schritt besteht natürlich darin, wo Sie nach diesen Inspirationsseiten suchen müssen Wenn Sie möchten, können Sie es einfach googeln oder ein Tool wie Gemini verwenden, das ebenfalls ein Google-Produkt ist Also könnten wir hier, genau wie in der vorherigen Klasse, darauf eingehen und fragen, was die besten MachaPowder-Marken sind , die , Okay. Also das war im Grunde dieselbe Aufforderung, die wir beim letzten Mal in Gemini eingegeben haben, und Sie können hier sehen, dass wir hier verschiedene Kategorien haben. Wie wir beim letzten Mal gesehen haben, sind einige von ihnen sehr japanisch und authentisch, und bei anderen handelt es sich um modernere Macha-Marken an den modernen Also hier sind ein paar, Jadeblatt-Marcha. Und das ist natürlich speziell für Macha-Marken. Sie möchten dies für Ihre Marke ändern. Wenn Sie also Proteinergänzungen verkaufen, sollten Sie sich die führenden Marken für Proteinergänzungen ansehen. Sie können aber auch außerhalb Ihrer Nische nach Designinspirationen suchen . Jede Art von E-Commerce-Websites, die Sie mögen. Jedes Mal, wenn Sie auf anderen E-Commerce-Websites surfen und etwas sehen, das Ihnen gefällt, sollten Sie es auf jeden Fall mit einem Lesezeichen versehen oder in Ihr Moodboard aufnehmen Aber wir machen es hier in einer Sitzung. Also werden wir uns Jade Leaf Marcher als unser erstes Beispiel ansehen Jade Leaf Marcher als unser erstes Beispiel Und ich kann hier schon sagen, genau wie in der letzten Klasse , dass mir einige der Designelemente gefallen Der Unterschied zwischen dieser Klasse und der vorherigen Klasse besteht darin, dass wir alles von Grund auf neu entwerfen werden. Also werde ich mir das allgemeine Designsystem aller Websites notieren, die mir gefallen , denn später im Kurs werden wir für alle Websites, die uns gefallen, ein sogenanntes Design-MD erstellen , beschreiben, was uns an diesen Websites gefällt , und es dann mit unserem eigenen Markensystem kombinieren , um ein Gesamtdesignsystem für unser Webdesign mithilfe von KI zu entwickeln . Okay? Also werde ich nicht nur Screenshots der Abschnitte machen, die mir gefallen, sondern ich werde auch die URLs der Websites notieren , deren allgemeine Ästhetik mir gefällt. Also dieser hier, Jade Leaf, ich mag ihre Ästhetik wirklich. Ich möchte etwas Ähnliches bauen. Also werde ich einfach eine Textbearbeitung öffnen , irgendeine Art von einfacher Textsoftware , und ich werde das einfach dort einfügen. Okay, dann möchte ich die Abschnitte auf meiner Website durchgehen und mir Inspiration für Bereiche holen , die mir gefallen könnten. Wie Sie hier sehen können, haben wir einen Heldenbereich und dann haben wir einen Abschnitt mit ausgewählten Sammlungen. Dies sind die branchenüblichen Bedingungen bei Shopify. Ein Held, den Sie sich als ein großes Banner vorstellen können , das oben auf Ihrer Seite erscheint, und einen Abschnitt mit ausgewählten Kategorien, da er sich auf Shopify bezieht, besteht im Grunde nur aus einer Reihe von Produktkarten, die in einer Reihe wie dieser aufgelistet sind , normalerweise mit einem Das erklärt also nur einen Teil dieser Terminologie. So ziemlich alle E-Commerce-Websites, die Sie sehen werden, beginnen mit einem Helden und einem Abschnitt mit ausgewählten Sammlungen. Und Sie werden sehen, dass dies in die Standardeinstellungen des Tools integriert ist , das wir dann verwenden, um den Plan für unsere Shopify-Storefront zu generieren Okay? Also, während wir runtergehen, gibt es hier noch ein Banner. Hier gibt es verschiedene Kategorien. Hier gibt es also quasi einen Abschnitt mit einer Sammlungsliste , links ein Bild rechts Text. Sie haben hier einen Slider für Rezepte. Auch hier kommt es darauf an, auf welcher Seite Sie sich gerade befinden. In der Regel haben die meisten E-Commerce-Websites von Shopify die Bereiche Hero und Featured Collection, aber danach hängt es wirklich von der jeweiligen Marke Okay, ich möchte, dass du hier , wie ich es gerade getan habe, die Websites auflisten, die dir gefallen ihr gesamtes Designsystem, weil wir es später verwenden werden, um unser Designsystem zu erstellen Zweitens möchte ich, dass Sie sich einige Abschnitte ansehen und sich inspirieren lassen welche Bereiche Sie auf Ihrer Website platzieren können, abgesehen von der Standardsammlung mit Helden und Features. Vielleicht schaust du dir zum Beispiel diesen Rezeptabschnitt hier an und sagst : Oh, wir haben wirklich viele tolle Rezepte mit unserer Marke Marcher Das ist definitiv ein Bereich, den ich auf meiner Website haben möchte Also können wir das hier sogar in unser Textdokument schreiben, Abschnitte, die ich will, oder? Sagen wir, empfohlene Rezepte. Und in Shopify können wir das in einen Blog aufnehmen. Ich glaube, das haben sie wahrscheinlich getan. Ja, sie verwenden also die Artikelvorlage , um all diese Rezepte zu liefern. Es ist im Grunde nur ein Blogbeitrag, okay? Hier gibt es auch einige Klappentexte, was Macha ist, wie man Macha herstellt, welche gesundheitlichen Vorteile Macha Du könntest also sagen, okay, ich will und es dann beschreiben Solange du ihn verstehst und ihn beschreiben kannst, muss er keinen genauen Namen haben, aber ich würde diese, die Produkte auflisten, die vorgestellte Kollektionen oder vorgestellte Produkte auflisten, nennen vorgestellte Kollektionen oder vorgestellte Produkte , und diesen einen Helden, weil die App, mit der wir die Pläne erstellen werden versteht, was ein Bereich mit ausgewählten Kollektionen und ein Heldenbereich ist. Okay, je mehr wir die Standardterminologie verwenden können, desto besser, aber lassen Sie sich nicht zu sehr darauf ein. Beschreiben Sie den Abschnitt so gut Sie können. Was ich für meine Abschnittsliste tun werde, ist ich im Grunde dieselben Abschnitte replizieren werde , die wir auf unserer Wissenschaftswebsite aus dem vorherigen Kurs hatten unserer Wissenschaftswebsite aus dem vorherigen Kurs Wenn Sie sich erinnern, haben wir es einfach nach einem Standardthema eingerichtet es einfach nach einem Standardthema Also, wenn du dir die Website ansiehst, haben wir unseren Helden. Wir haben unsere Produktpalette, unsere vorgestellte Kollektion hier. Wir haben ein paar Klappentexte zu Y Cans Macha. Da es in der WA-Überschrift des Themes keinen Abschnitt mit Text und Symbolen gab , mussten wir hier zwei Abschnitte kombinieren, aber wir müssen nicht zwei Abschnitte kombinieren, um einen Abschnitt zu erstellen, wenn wir ihn individuell entwickeln Das ist also im Wesentlichen ein Abschnitt, die Alleinstellungsmerkmale , und dann dieser Abschnitt mit Testimonials Ich werde auch ein paar andere hinzufügen, wie ich eine Ankündigungsleiste hinzufügen werde , aber in den meisten Fällen werde ich dieselbe Liste von Abschnitten verwenden wie die, die wir in der vorherigen Klasse erstellt haben, okay Ich möchte, dass Sie auf dieser Liste aufbauen, festlegen, welche Art von Abschnitten Sie möchten, und sich auch deren Gestaltung ansehen, okay? Vielleicht haben wir also nicht viele verschiedene Kategorien in unserer Marke Marcher Eigentlich haben wir nur vier Produkte. Es ist eine ziemlich einfache Marke für meine spezielle Testmarke, aber ich mag definitiv den Stil des Headers. Also werde ich einen Screenshot machen, und ich habe ihn so eingerichtet, dass er hier direkt in den Screenshot-Filter aufgenommen wird , oder? Und dann kann ich hier in mein Moodboard gehen und sagen, weißt du, du kannst das einrichten, wie du willst. Ich kann Header-Designs sagen, die mir gefallen. Okay. Und dann kannst du einfach den Screenshot reinbringen. Vielleicht möchtest du diesen Text vergrößern. tue ich auf jeden Fall. Noch größer als das. Also können wir sagen, Leiter der Designs, die ich mag. Ich mag den Pillen-Look. Du kannst sagen, okay, Abschnitte, die ich mag. Okay, nehmen wir an, bei diesem Bild werde ich einfach rauszoomen, damit ich es einfacher aufnehmen kann . Das Verkleinern funktioniert nicht wirklich. Also werde ich versuchen, es so gut wie möglich innerhalb meiner kleinen Bildschirmbreite hier festzuhalten innerhalb meiner kleinen Bildschirmbreite hier Also werde ich mir das schnappen. Und dann sage ich, ich kann diesen Kopf einfach kopieren. Und sag Abschnittsideen, richtig? Wir könnten also einen Abschnitt mit Rezepten erstellen und das in die Sektion Ideen aufnehmen. Weißt du, wir können das in einem Rahmen arrangieren. Also werde ich klicken und ziehen, um einen Rahmen zu erstellen , und diesen dann hier oben als Abschnittsideen einfügen. Eigentlich könntest du das auf einer anderen Seite platzieren, zum Beispiel, wie du dein Moodboard einrichtest, ist dir überlassen. Ich beschreibe nur die Hauptprinzipien dessen, wonach Sie suchen möchten, und lassen davon inspirieren, sodass wir hier einige der vorgestellten Rezepte nennen können , oder? Also, Leiter des Designs, dass Sie mögen Sektionsideen für Ihre eigene Website. Ich bringe diese weiße Flosse einfach ein bisschen mit. Bring es auch auf der linken Seite rein. Versuch einfach , das in die Mitte zu legen. Und natürlich haben wir uns bisher nur eine Website angesehen. Schauen wir uns also einige andere an. Schauen wir uns Incher Macha an. Okay. Und lassen Sie uns dort wieder nach einer sehr schönen Heldenabteilung suchen. Vielleicht machen wir einen Screenshot des Heldenbereichs und schließen dort alle nervigen Popups. Ich mag die Abzeichen hier für Grown in Japan und USDA Also können wir hier sagen, diese Überschrift kopieren und sagen, Heldendesigns, die mir gefallen, und dann den neuesten Screenshot reinbringen Stimmt das? Also machen wir hier einfach ein Mo-Board, genau der gleiche Prozess wie beim letzten Mal, aber dieses Mal sind wir nicht auf die Abschnittsliste innerhalb eines vorgefertigten Themes beschränkt . Wir bauen das alles von Grund auf neu. also jeden Bereich, den Sie mögen, und jeden Look, Wir können also jeden Bereich, den Sie mögen, und jeden Look, den Sie mögen, durch diesen Prozess erreichen , dass wir alles von Grund auf neu erstellen, was entmutigend klingt, aber mit KI können wir so viel wie möglich automatisieren Mir gefällt das allgemeine Designsystem dieses One Peak Marchers nicht , aber ich mag dieses, weil es die Vorteile teilt Also mache ich vielleicht einen Screenshot davon und füge ihn dann hier in meine Rubrik Ideen Ordnung, also gebe ich diesem einen Namen, sagen wir, Bereich „Leistungen“. Und wir können diesen Prozess so oft durchgehen, wie du willst. Je mehr Forschung und Inspiration Sie sammeln, desto besser. Aber ich würde sagen, mindestens eine halbe Stunde damit zu verbringen. Und für meine Zwecke werde ich, wie gesagt, bei derselben Abschnittsliste bleiben, die wir in der vorherigen Klasse erstellt haben, indem wir ein Standarddesign verwenden, nur um die Dinge einfach zu halten. Aber für dich möchte ich, dass du die URLs von Websites durchgehst, die URLs von deren allgemeines Designsystem dir gefällt, eine Liste der gewünschten Abschnitte erstellst und dir auch bestimmte Designs für Abschnitte notierst, und dir auch bestimmte Designs für Abschnitte notierst die du auf jeden Fall aufnehmen wirst oder die du hinzufügen möchtest aufnehmen wirst oder die du hinzufügen möchtest, und darüber nachdenkst was dir an diesem bestimmten Design wirklich gefällt . Auch dies ist ein flexibler Prozess. Es gibt keinen festen Weg, dies zu tun außer der Tatsache , dass wir unsere Lieblingswebsites später in ein Tool laden werden unsere Lieblingswebsites später in ein Tool laden , um ein allgemeines Designsystem zu generieren. Aber wenn Sie sich nur den Kurs ansehen und später mit Ihrer eigenen Marke darauf zurückkommen möchten , können Sie natürlich immer alle Beispiele und das Testprojekt verfolgen , das ich für diesen speziellen Kurs durchführe. Sie können einfach der falschen Marke folgen , die ich bereits erstellt habe, SNS Marcher Okay, das war's fürs Moodboarding. Im nächsten Video werden wir uns tatsächlich Zusammenstellung unseres Website-Plans befassen , der dann zum ersten Wireframe unseres High-Fidelity-Shopper-Fi-Designs wird unseres High-Fidelity-Shopper-Fi-Designs 4. Planung und erste Wireframe-Generierung: In diesem Video werden wir uns mit der Planungsphase befassen, in der wiederum unsere ersten Modelle für unsere Shopify-Website erstellt werden unsere ersten Modelle für unsere Shopify-Website Jetzt basiert die Shopify-Storefront auf einem System Und was dieses Tool, das Sie sich gerade ansehen, ein Tool, das ich speziell für diesen Zweck entwickelt habe , ist, dieses System zurückzuentwickeln , sodass wir unsere Designs auf der Grundlage des tatsächlichen Template-Systems generieren , das in Shopify verwendet wird , sodass wir dieses Designprojekt einfach in echten Code übersetzen können , was für jedes Webdesign-Projekt, unabhängig davon, ob wir KI verwenden oder Okay, wie Sie hier sehen können, sind wir auf Storefront Das ist die URL, über die Sie auf dieses Tool zugreifen können. Und wie Sie sehen können, habe ich meine Zugangsdaten bereits hier, und ich kann einfach auf Anmelden klicken, wenn ich bereit bin. Für Sie müssen Sie ein neues Konto erstellen. Sie klicken also einfach hier, um ein neues Konto zu erstellen . Es ist völlig kostenlos. Der Grund, warum ich das kostenlos tun kann , ist, dass wir weiterhin Aufforderungen an Claude oder an den von Ihnen bevorzugten KI-Assistenten senden werden Aufforderungen an Claude oder an den von Ihnen bevorzugten KI-Assistenten senden oder an den von Ihnen bevorzugten KI-Assistenten Sie benötigen also Ihre eigene KI-Abonnementbestellung , um die eigentliche Figma - und Codegenerierung abzuwickeln Dieses Tool hilft Ihnen jedoch dabei, den Plan zu erstellen , den wir dann an unseren KI-Agenten weiterleiten können Also werde ich mich ohne weitere Umschweife anmelden. Und wie Sie sehen können, gibt es auf der ersten Seite eines neuen Kontos noch keine Projekte, also werde ich einfach auf diese Schaltfläche klicken , um ein neues Projekt zu erstellen. Und wie wir bereits besprochen haben, werde ich dieselbe gefälschte Marke verwenden, die ich in der letzten Skillshare-Klasse kreiert habe, Sance Macha Premium Macha für die Dann klicke ich auf Projekt erstellen. Hier können Sie sehen, dass wir bereits einen Ausgangspunkt für unsere Sitemap generiert haben . Wenn wir also zum Online-Shop-Editor für das Seance-Thema zurückkehren , an dem wir in der vorherigen Skillshare-Klasse gearbeitet haben, sehen Sie hier in diesem Drop-down-Menü, dass an dem wir in der vorherigen Skillshare-Klasse gearbeitet haben, sehen Sie hier in diesem Drop-down-Menü, Sie eine Liste von Vorlagen haben von denen einige alternative Vorlagen zulassen Jede dieser Vorlagen mit dem Chevron daneben ermöglicht eine Standardvorlage dieses Typs mit anderen Dies ist das Shopify-Themensystem, und wenn Sie schon einmal mit Shopify gearbeitet haben, sollten Sie hoffentlich mit diesem System vertraut sein Wir kehren zum Geschäftsplaner zurück. Sie werden feststellen, dass diese Sitemap hier spezifisch für das Shua-Fi-Theme-Entwicklungssystem ist spezifisch für das Shua-Fi-Theme-Entwicklungssystem Und wenn wir mit der Maus darüber fahren, genau wie im Online-Shop-Editor, können wir der Vorlage in der Header-Gruppe neue Abschnitte hinzufügen , und auch bei bestimmten Vorlagen können wir alternative Vorlagen hinzufügen Du kannst also hier sehen, ob ich darauf klicke und sagen wir einfach Bundle Eigentlich werden wir das für unser spezielles Projekt tun . Also mache ich das jetzt. Fügen Sie eine Vorlage für ein alternatives Bundle-Produkt hinzu. Und wenn wir nach unten scrollen, können wir die Gruppe für die Produktvorlage sehen . Hier haben wir unsere Standard-Produktvorlage, aber dann haben wir eine separate alternative Vorlage namens Bundle. Okay. Das kannst du auch für die Seitenvorlage sehen. Das ist sehr typisch für Tuba Fy. Sie haben eine Standard-Seitenvorlage. So könnten Sie beispielsweise eine Seite mit Datenschutzrichtlinien und eine Seite „Über uns“ haben . Sie folgen alle derselben Vorlage, aber dann wird die Kontaktseite ein Kontaktformular enthalten. Das befindet sich also auf einer anderen Vorlage, und Sie können hier für die Standard-Seitenvorlage sehen, wir nur einen Hauptseitenbereich haben, und für den Kontaktformularbereich dass wir nur einen Hauptseitenbereich haben, und für den Kontaktformularbereich haben wir stattdessen einen Kontaktformularbereich. Sie werden hier sehen, dass bei vielen dieser Abschnitte der Hauptteil vorangestellt da diese Abschnitte für den jeweiligen Vorlagentyp verwendet werden ist, da diese Abschnitte für den jeweiligen Vorlagentyp verwendet werden. Die Homepage wird deine flexibelste sein. Wie gesagt, die meisten Projekte haben einen Heldenbereich und einen Abschnitt mit ausgewählten Sammlungen. Aber auf der Sammlungsseite wirst du wahrscheinlich nur ein Sammlungsraster haben, wie es hier der Fall ist, oder auf einer beliebigen Sho Fire-Website, die du findest, gehst du zu einer Sammlungsseite. Es ist normalerweise ein Raster von Produktkarten, die die Produkte in dieser Kollektion zeigen , okay? In diesem Sinne haben wir hier also drei verschiedene Typen. Wir haben diese globalen Abschnitte, also die Kopf- und Fußzeile, wenn ich einfach dorthin navigiere. Genau hier. Also standardmäßig die Kopf- und Fußzeile, aber wir können der Kopf- und Fußzeilengruppe auch neue Abschnitte hinzufügen Kopf- und Fußzeilengruppe Ich könnte das in Zukunft ändern, aber ich habe hier viel fertig eingerichtet Also sag uns, welche Abschnitte wir noch planen müssen. Wir haben unsere Hauptbereiche und entschuldigen uns. Wenn die App ein bisschen langsam ist. Ich habe es gerade erstellt, also denke ich, dass es einige Zeit dauert, bis es warm ist. Hier können Sie die Konfiguration unserer Hauptbereiche sehen. Also zum Beispiel der Hauptproduktbereich, wenn wir zu einer Produktvorlage gehen, werden Sie hier sehen, dass es einen Abschnitt gibt, der nur Produktseite genannt wird. Aber wie Sie hier sehen können, können wir unter dem, was wir normalerweise als Hauptproduktbereich bezeichnen , verschiedene Abschnitte hinzufügen unter dem, was wir normalerweise als Hauptproduktbereich bezeichnen , die Bildergalerie , der Titel, der Preis und alle anderen Details angezeigt , die Sie für das Produkt benötigen. Okay? Dann haben wir andere Bereiche, die alles andere sein können als unsere globalen Abschnitte, die Kopf- und Fußzeile oder unsere Hauptbereiche Wir haben also das Kontaktformular, den Bereich mit der Feature-Sammlung und den Heldenbereich genau hier. Okay? Unser Ziel ist es also, zuerst mit der Sitemap zu beginnen, alle alternativen Vorlagen hinzuzufügen, unsere Liste mit Abschnitten für jede Vorlage hinzuzufügen, und dann geben wir unserem Planer zusätzliche Details in der Kopf- und Fußzeile und den Hauptabschnitten und dann in allen anderen Abschnitten Hier erstellen wir also unsere Vorlagenliste und unsere Abschnittsliste, und dann geben die anderen drei Tabs zusätzliche Details zu diesen Abschnitten Okay, also zwischen den Videos habe ich, wie ich vorgeschlagen habe, dass du es selbst machst, eine Liste der Abschnitte erstellt, die ich aus diesen optionalen Abschnitten haben möchte, und ich habe hier auch eine zweite Inspirationsseite hinzugefügt, die wir später verwenden werden, um unser Designsystem Im Moment konzentrieren wir uns nicht zu sehr auf High-Fidelity-Design Wir versuchen nur, unsere Struktur herunterzukriegen. Also das ist Planung und Wireframing auf hoher Ebene, okay? Also natürlich möchte ich einen Homepage-Helden und einen Abschnitt mit ausgewählten Sammlungen, aber wir wollen einen Abschnitt mit Verkaufsargumenten, im Grunde den Y Sance Marcher-Bereich, auf den ich zuvor hingewiesen habe Ich werde unten auf Ausgewählte Sammlung klicken. Ich verlasse diesen neu erstellten Bereich und nenne ihn dann Verkaufsargumente. Hier möchte ich so gut wie möglich beschreiben, wie es aussehen und wie es funktionieren soll , damit die KI weiß, was sie bauen muss. Also werde ich den Abschnittstitel y Sans Macha mit drei Klappentexten sagen . Sind es drei Klappentexte Eins, zwei, drei, vier, vier. Also werde ich das auf vier Klappentexte darunter ändern. Jeder Klappentext hat ein Symbol, einen Titel und einen Untertext. Und dann klicken wir auf Abschnitt einfügen. Okay, also los geht's. Wir haben hier den Abschnitt mit Verkaufsargumenten hinzugefügt, und der letzte Abschnitt für unsere Homepage war der Abschnitt mit Testimonials, Testimonials Testimonials mit drei Testimonials unsere Homepage war der Abschnitt mit Testimonials, Testimonials und Testimonials mit drei Testimonials. Jedes Testimonial enthält ein Zitat sowie ein Bild und einen Namen für jeden Testimonial-Autor Sagen wir mal. Okay, ich werde auch für den Sammlungsbereich gehen , falls Sie sich erinnern, von unserer vorherigen Website, die wir mit dem Prestige-Thema eingerichtet haben , gibt es hier auch diesen Bereich für Sammlungsbanner. Also klicke ich über den Hauptbereich der Kollektion und nenne ihn „Sammlungsbanner“, „ Hero-Bereich mit Hintergrundbild“, um oben auf den Kategorieseiten über dem Produktraster zu erscheinen. Abschnitt einfügen. Okay, das ist da drin. Was den Warenkorbbereich angeht, ist es ziemlich altmodisch der Kunde auf eine separate Seite gehen muss , um seinen Einkaufswagen zu sehen. Die meisten Einkaufswagen funktionieren jetzt als Schublade, die zur Seite herausspringt und sich in der Kopfzeile befindet Deshalb werde ich mich nicht zu sehr auf diesen konzentrieren. Wir können es einfach im Hauptwagenbereich lassen. Alle Hauptbereiche in diesem Planer haben bereits Beschreibungen, die den Standardeinstellungen entsprechen, aber Sie können diese Standardeinstellungen natürlich ändern, wenn Sie ein ganz bestimmtes Design im Sinn haben ein ganz bestimmtes Design im Das zeige ich dir als Nächstes, wenn wir zum nächsten Tab übergehen. Das Gleiche gilt für die Suchseite, dasselbe für den Blog-Index und den Blogartikel, aber ich habe auch diese Symbole hier gelassen , um diese Vorlagen aus den Wireframes zu löschen , falls Ihre Shopify-Website überhaupt keinen Blog Im Moment behalte ich das einfach hier und verwende den Standard-Blog-Index und den Hauptartikelbereich Um zur Produktvorlage überzugehen, habe ich, wie bereits erwähnt, eine alternative Vorlage erstellt. Ich kann eine weitere alternative Vorlage wie diese erstellen. Oder löschen Sie hier alle alternativen Vorlagen. Ich möchte eine andere Vorlage für ein Bundle-Produkt. Wenn Sie sich an unsere Marke CNS erinnern, haben wir ein viertes Produkt, das tatsächlich alle der vorherigen drei Produkte enthält Ich möchte also eine andere Vorlage erstellen, und der Grund dafür ist, dass ich hier einen anderen Abschnitt mit dem Titel Was ist enthalten, hinzufügen werde , nur für das Bundle-Produkt relevant ist Ich werde also sagen, ein Abschnitt, der die drei Produkte zeigt , die in einem Bundle-Produkt enthalten sind. Für den Hauptproduktbereich und den Bundle-Bereich werde ich also noch einmal die Verkaufsargumente hinzufügen. Und da es sich um einen bestehenden Abschnitt handelt, werde ich ihn nicht bei „Neuen Bereich erstellen“ belassen. Ich werde ihn öffnen und von hier aus Verkaufsargumente auswählen. Ich benötige keine Beschreibung, da ich bereits eine habe, also fügen wir diese hinzu und dann die zugehörigen Produkte darunter. Dann werde ich hier drunter gehen und wir können die ausgewählte Kollektion einfach recyceln Nun, da ich die alternative Vorlage bereits erstellt habe, wird es diese Abschnitte hier natürlich nicht Ich hätte das wahrscheinlich zuerst erstellen und dann abzweigen sollen, aber das ist alles gut Was ich tun werde, ist, dass ich auch den Abschnitt mit den Verkaufsargumenten zu dieser Vorlage hinzufügen auch den Abschnitt mit den Verkaufsargumenten zu dieser Vorlage Und vielleicht lasse ich die vorgestellte Kollektion weil in diesem Paket alle Produkte enthalten sind, also wollen wir sie bei diesem Produkt behalten. Und dann ein ziemlich typisches Muster, wie ich es Ihnen zuvor gezeigt habe, die Seitenvorlage, nur der Hauptseitenbereich , der den Inhalt zeigt , den der Admin-Benutzer in den Inhaltsbereich der Seite im Adminbereich einfügt , und dann dieses Kontaktformular, mit dem wir das Rad nicht wirklich neu erfinden müssen Wir können auch eine Meta-Objekt-Vorlage hinzufügen. Wenn Sie nicht wissen, was das bedeutet, machen Sie sich darüber keine Gedanken, aber das ist nur für den Fall, dass Sie Seiten erstellen möchten, die auf Ihren Metaobjekten basieren. Ordnung, also wenn ich wieder hierher gehe, bin ich so gut wie fertig, außer dass ich der Header-Gruppe einen neuen Abschnitt hinzufügen möchte . Es wird einen Bereich in der Ankündigungsleiste geben, Ankündigungsleiste, und wir können einfach Ankündigungsleisten haben , die wie ein Schieberegler, ein Auswahlfeld, verschiedene Bilder angezeigt ein Auswahlfeld, verschiedene Bilder Aber ich sage einfach einzeilige Textwerbung in einem dünnen Balken In Ordnung, ich klicke auf Abschnitt einfügen. Und jetzt werden Sie sehen, dass all unseren Vorlagen, die dieselbe Header-Gruppe verwenden, die jetzt alle diese Ankündigungsleiste hinzugefügt haben Das ist jetzt also ein globaler Abschnitt, der dadurch definiert wird , dass er zu einer Header-Gruppe oder einer Potter-Gruppe hinzugefügt wurde . Sie werden also sehen, dass jede Vorlage diese Ankündigungsleiste hat. Okay. Wenn du nur in einer der Vorlagen auftauchen möchtest, anstatt sie der Kopfzeilengruppe oder der Fußzeilengruppe hinzuzufügen , würdest du sie einfach in diesem weißen Bereich hier hinzufügen, was die Vorlage ist, okay? Vorausgesetzt, dass dies unser Gesamtplan ist , den wir jederzeit ändern und jederzeit ändern können und wir gerne weitermachen, können wir jetzt zum nächsten Tab „Globale Abschnitte“ übergehen Und gib noch einige weitere Details ein, damit die KI versteht, welche das jeweils sind. Okay? Also werde ich in Ankündigungsleiste auf Informationen bearbeiten klicken. Und wie Sie sehen können, ist es bei dieser Bildschirmhöhe etwas gequetscht Aber Sie können hier in der Ankündigungsleiste sehen, was dieser Abschnitt erreichen will Also können wir hier einen Zweck hinzufügen, sagen wir, für bestimmte Angebote werben, und wie funktioniert das dann? Wenn es sich um einen Slider mit mehreren verschiedenen Nachrichten handelt, die wir anzeigen möchten, möchten wir das hier eintragen. Und wir möchten dieses Kästchen auch für wiederholbare Blöcke von Benutzern aktivieren, da wir es als separate Nachrichten einrichten können , die in verschiedene Blöcke integriert sind und die wir dann im Online-Shop-Editor festlegen können dann im Online-Shop-Editor festlegen In diesem Sinne werden die Daten aus den Abschnitts - und Blockeinstellungen abgerufen Wie Sie hier zur Inhaltsquelle sehen können, können wir Daten aus dem Theme-Datenspeicher eingeben, was bedeutet, dass sie aus dem eigentlichen Store abgerufen werden, nicht aus dem Online-Shop-Editor oder einer Mischung aus beidem. Dies werden definitiv Themendaten sein , da der Benutzer den Text auf der Shopify-Themenebene bearbeiten und es keine Funktionalität gibt Also lasse ich das Feld einfach leer und klicke auf Speichern. Okay, also die Ankündigungsleiste, wir konfiguriert haben, und jetzt gehen wir in die Kopfzeile. Der Header wird hier also einige zusätzliche Felder für die Konfiguration haben . Es wird uns zuerst fragen, was der Header enthalten soll. Normalerweise enthält der Header einen Seitentitel oder ein Logo, eine Navigation und dann diese speziellen Symbole , die auf Shopper Fi verschiedene Dinge auslösen Also werde ich sie alle auswählen. Ich werde ein Kontokartensymbol für die Warenkorbschublade und ein Suchsymbol haben die Warenkorbschublade und ein Suchsymbol , mit dem Benutzer direkt in der Kopfzeile suchen können. Dann werde ich auf Weiter klicken. Und jetzt kann ich einige Entscheidungen darüber treffen, ob ich ein Mega-Menü möchte, das für drei Verschachtelungsebenen geeignet ist, oder ein Drop-down-Menü, das besser für zwei Verschachtelungsebenen ist Sagen wir einfach, für uns machen wir einfach ein Drop-down-Menü, weil wir nicht unbedingt so viele verschiedene Verschachtelungsebenen haben Sie können sich auch dafür entscheiden, eine Nav-Schublade auf dem Desktop zu verwenden. Wenn Sie also auf Mobilgeräten surfen, haben Sie normalerweise keine Navigationselemente mehr in Ihrer Kopfzeile , weil die Breite des Bildschirms so klein ist. Normalerweise haben Sie das Hamburger-Symbol auf der linken Seite. Also eigentlich zeige ich dir das einfach hier. Genau so, normalerweise hast du das Hamburger-Symbol auf der rechten Seite, und das ist das, was als Navigationsleiste bezeichnet wird. Einige Websites verwenden die Navigationsleiste sowohl auf Mobilgeräten als auch auf Desktops. Sie können also hier klicken, um diese Option auszuwählen, oder Sie können hier ein benutzerdefiniertes Verhalten beschreiben Aber ich mache ein Drop-down-Menü, und dann kannst du in diesem optionalen Feld alles hinzufügen, was in der Menüschublade für Mobilgeräte angezeigt wird, der Menüschublade für Mobilgeräte angezeigt wird wenn auf das Hamburger-Symbol getippt wird Eine Sache, die ich hier anmerken möchte, ist, wenn Sie die Antwort auf irgendwas davon nicht wissen, verwirren Sie alles, planen Sie einfach, Wir holen die Wireframes. Sie werden es in einer Figma sehen und dann können Sie es von dort aus bearbeiten Dies sind nur einige allgemeine Designentscheidungen für wirklich gemeinsame Elemente und Muster auf Shopify-E-Commerce-Websites , die wir nur im Voraus abfragen , sodass die KI genau das mit einem Klick im Planer erstellt Okay? Also als Nächstes, wie sollte sich die Suche verhalten, wenn ein Besucher auf das Symbol klickt? Ich würde also sagen, es sollte eine Sucheingabe unter der Kopfzeile öffnen , der der Benutzer seinen Suchbegriff eingibt, Eingabetaste drückt und auf die Suchseite weitergeleitet wird , auf der die Suchabfrage vorausgefüllt ist. Okay. Aber nochmal, was auch immer Sie hier denken, ich denke, Sie können dieses Feld leer lassen, wenn Sie wollen, oder einfach eine Vermutung anstellen. Nun, was sollte das Einkaufswagensymbol bewirken? Auf einigen Websites, die keine Warenkorbschublade haben, wird der Benutzer einfach zur Warenkorbseite weitergeleitet. Aber wir werden ein normales, modernes Shopify-Theme erstellen , sodass die Warenkorbschublade geöffnet wird Dann können wir hier darüber sprechen , wie die Warenkorbschublade funktionieren sollte Lass mich einfach sehen, ob ich das überspringen kann, weil wir mit der Wagenschublade nichts Besonderes wollen . Ja. Und dann alles andere, was wir über den Header beschreiben wollen. Hier können wir zusätzliche Informationen hinzufügen . Andernfalls, wenn wir es nur bei allgemeinen Informationen belassen, erhalten wir ein allgemeines Wireframe, was völlig in Ordnung ist , wenn Sie keine Einwände dagegen haben völlig in Ordnung ist , wenn Sie keine Einwände dagegen Wenn Sie jedoch etwas Bestimmtes wollen, sollten Sie es jetzt besser schreiben, damit Ihre ersten Wireframes Vision, die Sie sich für Ihr Schaufenster vorgestellt haben, näher kommen vorgestellt haben Also werde ich dort auf Speichern klicken und damit ist die Header-Konfiguration abgeschlossen Wie Sie hier sehen können, konfigurieren und gehen Sie dann zur Footer-Gruppe Ich werde dabei auf Konfigurieren klicken. Und wieder wird es mich fragen, welche Elemente ich in meiner Fußzeile haben möchte Also ich denke, ich werde all diese auswählen. Ich möchte ein Seitenlogo. Ich möchte Navigationen. Ich möchte ein E-Mail-Abonnement, soziale Symbole und eine letzte Zeile unter dem Rest der Fußzeile, normalerweise nur der untere Bereich genannt Und wie viele verschiedene Menüs benötigen wir dann? Also zum Beispiel möchte ich dem wieder ein Bild hinzufügen, wenn wir zur Seance Macha aus der letzten Skillshare-Klasse gehen Seance Macha aus der letzten Skillshare-Klasse Sie können hier sehen, dass es nur einen gibt, also füge ich Und was sollte der untere Abschnitt beinhalten? Wie Sie hier sehen können, ist der untere Bereich der vorherigen Website nur urheberrechtlich geschützt. Aber wenn wir auf eine unserer Inspirationsseiten wie Jade Leaf Macha gehen unserer Inspirationsseiten wie , wenn Sie hier runter gehen, sehen Sie, dass es dort drei verschiedene Menüs gibt, eine Newsletter-Anmeldung und auch der untere Bereich enthält nur den Copyright-Text Wir haben also nicht so viele Inhalte, also klicke ich einfach auch auf Copyright-Text, kein zusätzliches Menü, keine Zahlungssymbole, und klicke auf Weiter Und alles, was speziell über die Fußzeile beschrieben wird, ist ein optionales Feld, in das Sie zusätzliche Informationen eingeben können , die nicht abgefragt wurden Ich lasse das Feld leer und klicke auf Speichern. Und jetzt können Sie sehen, wie Kopf Fußzeile und Ankündigungsleiste jetzt konfiguriert sind Nun zu den Hauptabschnitten. Der wichtigste ist, wie hier hervorgehoben wird, der Hauptproduktbereich. Also werde ich auf Konfigurieren klicken. Und welche Elemente werden wir in diesem Hauptproduktbereich haben? Dies sind alles typische Elemente. Also was ich tun werde, ist natürlich, die Bilder hier nicht zu haben weil es davon ausgeht, dass wir sie definitiv haben werden. Produkttitel, ziemlich offensichtlich. Wir werden die Zusammenfassung der Produktpreisrezensionen beifügen . Die Mengenauswahl fügt eine Einkaufswagen-Schaltfläche und einige Akkordeons hinzu. Ich glaube nicht, dass es Abweichungen geben wird, also werde ich die Variantenauswahl nicht einbeziehen und wir werden noch kein Abonnement anbieten, also werde ich kein Abonnement hinzufügen, und ich werde eine Produktbeschreibung hinzufügen Ich kann auch ein eigenes benutzerdefiniertes Element hinzufügen, falls keines davon ein Element beschreibt, das ich in meinem Hauptproduktbereich haben möchte, sodass ich das auch tun kann Andernfalls können wir das später hinzufügen, sobald wir zu den Wireframes kommen Das ist cool. Wo sollte sich die Produktgalerie auf dem Desktop befinden? Normalerweise befindet sie sich auf der linken Seite. Lassen Sie es einfach links, es sei denn, Sie haben eine andere Art von Produktseite und möchten das Bild auf der rechten Seite haben. Und dann können Sie auch auf Ziehen klicken , in welcher Reihenfolge die Galerie links und der Inhalt rechts sind, welche Reihenfolge Sie dafür haben möchten. Also werde ich meine Produktbeschreibung tatsächlich nach oben verschieben. Unter dem Produktpreis. Aber davon abgesehen ist das meine Bestellung. Also werde ich als Nächstes darauf eingehen. Und dann wähle ich mein mobiles Layout, das sich manchmal ändert. Vielleicht ist das Bild wirklich groß, sodass der Benutzer scrollen oder auf der Seite nach unten schauen muss , um andere wichtige Informationen zu sehen. Ein ziemlich typisches Muster besteht also darin, den Produkttitel und Preis auf Mobilgeräten über dem Bild zu platzieren. Also lass uns das machen. Vielleicht möchten wir dort auch die Zusammenfassung der Bewertungen platzieren, damit der Benutzer den Titelpreis und die Bewertungen deutlich sehen kann , bevor er das Bild sieht, und dann für alles andere nach unten scrollen kann. Ordnung. Nun zum Galerie-Stil: Wir können links Miniaturansichten haben, um durch die verschiedenen Produktbilder oder Miniaturansichten unten zu navigieren durch die verschiedenen Produktbilder oder Miniaturansichten unten Wir können einen einzelnen Bildschieberegler oder ein Raster haben. Diese beiden sind am häufigsten. Lassen Sie uns einfach links Vorschaubilder erstellen, oder Sie können einen bestimmten Stil beschreiben , falls keiner davon Ihren Vorstellungen entspricht Und dann, im Stil einer mobilen Galerie, wollen wir unten Vorschaubilder Wollen wir einen Slider ohne Thumbnails? Wollen wir etwas anderes? Wollen wir ein Netz? Ich werde unten auf dem Handy Vorschaubilder machen Okay. Also werden wir diese Informationen speichern, und sobald sie gespeichert und aktualisiert wurden, werden Sie sehen, dass der Hauptproduktbereich konfiguriert ist Wie Sie hier sehen können, muss wahrscheinlich das Layout aktualisiert werden, aber es sagt uns, dass wir, bevor wir sagen können dass wir die Einrichtung durchgeführt und unseren Website-Plan erstellt haben, den Hauptkollektionsbereich und den Hauptproduktbereich erstellt haben und dann die Frage beantworten können, ob wir eine andere Konfiguration für den Hauptproduktbereich auf den alternativen Vorlagen benötigen eine andere Konfiguration für . An dieser Stelle denken Sie vielleicht, dieser ganze Prozess ziemlich mühsam ist Es müssen viele Entscheidungen getroffen werden, aber das wird uns viel Zeit bei der ersten Generierung der Figma-Dateien sparen bei der ersten Generierung der Figma-Dateien Und diese Planungsphase kann so lange oder so wenig dauern, wie Sie möchten können Sie so viele oder so wenige Informationen angeben In diesem Planungsabschnitt können Sie so viele oder so wenige Informationen angeben, wie Sie möchten. Wenn Sie eine bestimmte Idee im Kopf hatten, ist dieses Tool natürlich hauptsächlich dazu gedacht, Sie dazu anzuregen, über diese Entwurfsentscheidungen nachzudenken , bevor wir zur eigentlichen FIGMA-Phase übergehen Aber wenn die Figma einmal erstellt wurde und Sie feststellen , dass Ihnen etwas nicht gefallen hat oder Sie etwas ändern möchten, ist das natürlich feststellen , dass Ihnen etwas nicht gefallen hat oder Sie etwas ändern möchten, auch total cool wir im Voraus etwas planen, können wir den anfänglichen Webdesign-Prozess wirklich automatisieren Und damit wir nicht auf eine leere Figma-Datei starren. Und wie Sie bald sehen werden, werden wir mit den bereits in Figma erstellten Wireframes einen guten Ausgangspunkt haben mit den bereits in Figma erstellten Wireframes einen guten Ausgangspunkt bereits in Figma erstellten Wireframes Anstatt komplett bei Null anzufangen und diese Designentscheidungen im Handumdrehen treffen zu müssen und sie auch manuell in Figma diese Designentscheidungen im Handumdrehen treffen zu müssen und erstellen zu müssen Okay. Nachdem das geklärt ist, beenden wir unsere Planung. Also, hier gibt es noch eine weitere Frage. Da wir zwei Vorlagen haben, wird gefragt, ob der Hauptproduktbereich je nach Vorlage variiert. Ich werde nein sagen, es ist überall dasselbe. Der einzige Unterschied zur Vorlage wird der zusätzliche Abschnitt „Was ist enthalten“ unter dem Hauptproduktbereich sein. Das Design des Hauptproduktbereichs kann jedoch für beide Produktvorlagen gleich bleiben . Und wenn wir uns dann für den Warenkorbbereich entscheiden, wie Sie hier sehen können, wird für viele von wie Sie hier sehen können, wird für viele von ihnen nur eine bestimmte Konfiguration vorausgesetzt, sie sind also optional, aber wir müssen nur einige Entscheidungen rund um den Hauptkollektionsbereich treffen, hauptsächlich darüber, wie viele Spalten das Raster haben soll. Auf dem Desktop stelle ich es also auf ein vierspaltiges Raster und mobil ein zweispaltiges Raster ein. Die nächste Frage lautet: Benötigt die Sammlung Filter? Da wir eine Produktpalette von nur vier Produkten haben, benötigen wir keine Filter. Wenn Sie eine Produktpalette mit vielen verschiedenen Produkten haben , können Filter sehr praktisch sein. Es hängt alles davon ab, wie groß Ihre Produktpalette ist. Also werde ich als Nächstes darauf eingehen. Und dann werden wir die Produktkarte entwerfen, das ist die Kachel, auf der jedes Produkt angezeigt wird und die nicht nur auf Kategorieseiten verwendet wird, sondern auch auf ausgewählten Kollektionen und verwandten Produkten. Diese Produktkarte, um ein anderes Produkt anzuzeigen, wenn Sie nicht auf dieser Produktseite sind, ist ein gemeinsames Element, für das wir einige Entscheidungen treffen müssen. Ich möchte also natürlich das Produktbild oder die Produktbilder. Ich möchte den Produkttitel. Es gibt keine Abweichungen für meine speziellen Projekte, also werde ich das weglassen Ich werde eine Zusammenfassung der Bewertungen und eine Schaltfläche „Zum Einkaufswagen hinzufügen“ haben , und dann kann ich hier auf O klicken, um eine weitere hinzuzufügen, wenn ich möchte Und wenn ich dann unten nach unten scrolle, siehst du, dass ich auch die Bestellung kontrollieren kann. Eigentlich gibt es mir keine Option, aber was ich tun werde, sobald wir es in Figma eingeführt haben, werde ich die Schaltfläche „In den Einkaufswagen“ oben auf dem Bild platzieren Schaltfläche „In den Einkaufswagen“ oben auf dem Bild Aber vorerst lasse ich es einfach in dieser Reihenfolge. Die Reihenfolge kann später leicht geändert werden, also drücke ich einfach auf Speichern. Cool. Also das ist jetzt konfiguriert. Sie werden hier sehen, dass der Hauptkartenbereich, der Hauptseitenbereich und der Hauptartikelbereich alle eine Standardbeschreibung haben. Aber für den Blog-Index stellt sich die Frage, ob es Tags geben wird. Ich werde nicht einmal einen Blog-Bereich erstellen, also werde ich den einfach weglassen. Auch hier müssen Sie nur so viele Details angeben, wie Sie für Ihr Projekt tatsächlich benötigen, und dann können wir hier zu unseren anderen Abschnitten übergehen. Und diese anderen Abschnitte haben keine spezifischen Fragen. Wenn wir in einem dieser Bereiche auf Informationen bearbeiten klicken, geben wir nur an es aussieht und wie es funktionieren soll, und dann auch, woher die Daten stammen. Banner für die Sammlung und wo sich die Inhaltsquelle befindet. Auch hier lasse ich den Zweck einfach leer. Es sind optionale Felder hier. hat nicht wirklich Funktionalität Es hat nicht wirklich Funktionalität und wird aus Themendaten abgerufen. Die Absicht ist also, im Online-Shop-Editor das Bild und den Text festzulegen, der angezeigt wird. Und was das Aussehen angeht, hier ist es schon vorgefüllt. Hier ein Abschnitt mit dem Hintergrundbild oben auf der Kategorieseite über dem Produktraster. Ah, das haben wir schon ausgefüllt, als wir das früher erstellt haben, okay? Also Kontaktformular, wie Sie hier sehen können, Name, E-Mail-Nachricht, mit der eine Kontaktanfrage gestellt Ja, wir müssen nichts davon wirklich bearbeiten. Es ist alles nur Standardfunktionalität. Die Helden-Sektion könnte ich nur spezifizieren. Es sind definitiv Themendaten. Diese Inhaltsquelle wird sich nicht auf die Figma-Modelle auswirken, aber was sie tun wird, ist später, wenn wir zu diesem Tool zurückkehren, um das technische Datenblatt zu holen, damit wir es tatsächlich auf der Website implementieren können. Das ist quasi ein Bonus für diesen Kurs , um Ihnen zu zeigen, wie Sie dieses Design tatsächlich nehmen und in den für das Thema erforderlichen Code einbauen den für das Thema erforderlichen Code einbauen An diesem Punkt werden wir sehen, wie diese Entscheidungen in Bezug auf die Inhaltsquelle sind. Aber im Moment ist alles , was für die Figma-Designgeneration wichtig ist, hauptsächlich das Aussehen, okay? Verkaufsargumente: Es werden auch Themendaten sein. Ich habe das Aussehen bereits in der Beschreibung erwähnt , als ich es in der Sitemap erstellt habe. Es gibt keine Funktionalität. Der Zweck ist ziemlich selbsterklärend, und ich möchte wiederholte Blöcke verwenden Auch hier gelten die Informationen, die ich gerade eingegeben nur für das technische Datenblatt am Ende, wenn wir versuchen zu bauen Es macht keinen wirklichen Unterschied für das Figma-Design. diesem wird es sich auch um Themendaten handeln, die wiederholbare Blöcke verwenden Und was dann wieder enthalten ist, Theme-Daten mit wiederholbaren Blöcken, klicken Sie auf Speichern und fertig Natürlich hängt es davon ab, was Sie in Ihre Sitemap einfügen , welche Abschnitte hier in Global, Maine und anderen Abschnitten angezeigt hier in Global, Maine und anderen Abschnitten Ich glaube nicht, dass Sie weitere Hauptbereiche hinzufügen können, aber Sie könnten, wie wir in diesem Video gezeigt haben, globalen Abschnitten eine Ankündigungsleiste hinzufügen und dann all diese anderen Abschnitte und dann all diese anderen Abschnitte wie Verkaufsargumente, Kundenreferenzen, Helden hinzufügen, die keine Hauptbereiche sind oder globale Abschnitte, Helden hinzufügen, die keine Hauptbereiche sind oder globale Abschnitte zu denen Sie hier gehen Diese Liste wird also natürlich Ihren spezifischen Bedürfnissen abhängen Wenn Sie mein Testprojekt genau verfolgen wollten , würde es auch bei Ihnen so aussehen. Und jetzt können wir von jedem dieser Tabs aus auf diese blaue Schaltfläche klicken, um den Webdesign-Plan zu erstellen. Okay, hier können Sie sehen, wir haben den Webdesign-Plan auf der linken Seite und wir haben das technische Datenblatt auf der Der Webdesign-Plan deckt im Grunde alle Bereiche ab, in denen sie existieren und wie sie aussehen sollten Das technische Datenblatt werden wir später als Ergänzung zu den Wireframes verwenden , um der Kontext rund um die Funktionalität und die Inhaltsquelle zu geben KI den Kontext rund um die Funktionalität und die Inhaltsquelle zu geben, damit sie sie tatsächlich in das Theme einbauen kann Aber vorerst ignorieren wir diese rechte Seite komplett und schauen uns die linke Seite an Hier können wir also diesen Webdesign-Plan exportieren, und zu diesem Zeitpunkt müssen wir noch nicht einmal KI verwenden. Wir können dieses Dokument hier haben , das Sie an einen Designer schicken können, oder Sie können es auf einem zweiten Bildschirm haben, während Sie ein Design manuell auf Figma erstellen Sie müssen KI also nicht wirklich verwenden, wenn Sie nicht möchten, aber da wir all diese Entscheidungen im Voraus getroffen haben , können wir die Erstellung dieses Webdesign-Plans in Figma automatisieren dieses Webdesign-Plans in Figma Okay? Wie Sie hier sehen können, haben wir den Namen der Vorlage, und darin haben wir die verschiedenen globalen Abschnitte, den Hauptbereich und dann den FOOTA-Abschnitt Und für die Homepage haben wir natürlich keinen Hauptbereich Wir haben diese beiden globalen Bereiche und dann unsere vier optionalen Abschnitte dort, okay? In diesem Kurs werden wir die Figma also nicht manuell anhand dieses Webdesign-Plans erstellen Wir werden einfach hier klicken, um die Figma-Anweisungen zu kopieren, und dann werden wir diese Anweisungen in eine Klauencode-Sitzung einfügen wollen . Sie können die Desktop-App hier verwenden, aber ich bevorzuge es, die Klauencode-Erweiterung in meinem bevorzugten Code-Editor auszuführen, bei dem es sich um die Klauencode-Erweiterung in meinem bevorzugten Code-Editor Visual Studio-Code handelt Wenn Sie es jedoch tun möchten, gehe ich einfach hierher, um eine neue Sitzung zu starten Es wird gerade hier geladen. Und genau hier kann ich meine Eingabeaufforderung einfügen, damit ich sie einfügen kann, und dort können Sie die sehr detaillierte Eingabeaufforderung sehen , die Claude alle Informationen geben sollte Claude alle Informationen geben , die er benötigt, um das Wireframe zu erstellen Hier unten habe ich das in Ordnung gebracht, also wird es mich so wenig wie möglich nach Berechtigungen fragen und einfach weitermachen und es erstellen Und damit Claude eine Verbindung zu Figma herstellen kann, muss die Figma-App natürlich geöffnet sein Denken Sie daran, dass Sie mindestens einen Entwicklerplatz benötigen um diese MCP-Funktion nutzen zu können, zumindest zum Zeitpunkt der Aufnahme zumindest zum Zeitpunkt der Aufnahme. Außerdem muss das Die Anweisungen zum Einschalten des MCP haben sich also seit meinem letzten Kurs über Figma-Webdesign geändert MCP haben sich also seit meinem letzten Kurs über Figma-Webdesign Schauen Sie sich also unbedingt die neuesten Anweisungen zur Installation des Figma MCP an Es ändert sich ziemlich oft. Vorausgesetzt, Sie haben bereits das Figma MCP-Setup, können Sie diese Aufforderung einfach im Cloud-Code ausführen Und mal sehen, ob es irgendwelche Fragen gibt. Ansonsten sollte es im Grunde nur die Figma-Datei für uns erstellen Wie Sie hier sehen können, wird es die Fähigkeit zur Generierung von Figma-Designs aus Figma laden die Fähigkeit zur Generierung von Figma-Designs aus und dann einige andere Fähigkeiten und andere MCP-Aktionen auslösen einige andere Fähigkeiten und andere MCP-Aktionen Aber los geht's. Hier ist unsere erste Frage. Es fragt uns, in welchem Figma-Team es die neuen Wireframes erstellen soll Für mich wird das definitiv mein persönliches Team sein , das Team von Christopher Dodd Stellen Sie sicher, dass Sie ein Team mit einem Dev-Set wählen. Natürlich werde ich vieles davon schnell durcharbeiten weil es nur Claude ist, der im Hintergrund arbeitet. Wenn das für dich lange dauert, mach dir keine Sorgen. Das sollte ziemlich viel Zeit in Anspruch nehmen. Ich warte derzeit bis zu 17 Minuten. Aber wenn Sie etwas Interessanteres sehen möchten , können Sie Figma aufrufen, sich die Datei ansehen und in Echtzeit zusehen, wie sie erstellt wird Also werde ich zu dieser Ansicht wechseln, und Sie können jetzt sehen, dass wir einen Rahmen mit unseren Komponenten haben und dass unsere verschiedenen Vorlagen erstellt werden Offensichtlich ist es noch nicht vollständig. Also lasse ich das einfach weiterlaufen , bis es fertig ist. Also gut, nach etwa zehn weiteren Minuten, das waren also etwa 26 Minuten. Sie können also davon ausgehen, dass der gesamte Vorgang in weniger als einer halben Stunde abgeschlossen sein Aber natürlich hängt es davon ab, wie viele Abschnitte Sie aufgenommen haben und all das. Aber für ein Projekt dieser Größe dauerte es ungefähr 26 Minuten. Und wenn ich jetzt zu Figma wechsle, können Sie sehen, dass alle Wireframes generiert wurden Also mach dir keine Sorgen, das wird nicht die endgültige Form sein. Wir werden dafür sorgen, dass das viel besser aussieht, aber das sind im Grunde nur die Low-Fidelity-Mockups Also haben wir unsere Homepage auf dem Desktop. Die mobile Version dieser Homepage. Dann haben wir die Produktseite. Denken Sie daran, dass wir im Voraus einige Designentscheidungen getroffen , dass wir die Produktgalerie auf der linken Seite haben wollten Wir haben die Produktminiaturansichten auf der linken Seite auf dem Desktop und dann haben wir sie unten und diese oben All diese Entscheidungen wurden nun in den Figma-Wireframes berücksichtigt Und wie Sie sehen können, ist Y Suns Macha genau hier, 5. Implementieren eines Designsystems: In dieser Lektion werden wir ein Designsystem erstellen und dieses Designsystem dann an Claude schicken , um dieses Designsystem dann auf unseren derzeit grauen Figma-Wireframes mit niedriger Genauigkeit zu implementieren auf unseren derzeit grauen Figma-Wireframes mit niedriger Genauigkeit Wenn wir uns also ansehen, was wir in der letzten Lektion generiert haben, haben wir all diese langweiligen grauen Figma-Wireframes. Man kann sich kaum vorstellen , dass es sich dabei um eine fertige Website oder ein fertiges Webdesign handelt, weil ein paar Webdesign handelt, weil Erstens fehlt das Designsystem , es fehlt Farbe, es fehlen Es fehlen auch einige Bilder und Ikonographie. Außerdem müssen wir bestimmte Teile passendere Platzhalter einfügen und wenig überarbeiten Aber man sieht schon, wie dieses Design viel lebendiger wird, wenn man einfach ein Designsystem darauf anwendet Jetzt, im Zeitalter der KI, haben wir etwas, das Design Dot D genannt wird. Was ist das genau? Ich glaube, es wurde von Google entwickelt und ist ein Designsystemdokument, das KI-Agenten verwenden können um eine einheitliche Benutzeroberfläche für Ihr Projekt zu lesen und zu generieren. Im Grunde ist es also so, als ob das Designsystem, das in einer Markdown-Datei mit Punkt d lebt , Markdown ist, was im Grunde nur ein Dokument ist das für KI-Agenten leicht lesbar ist Und wenn wir in den Projektordner schauen, wenn ich hier in unseren Markenidentitätsordner gehe, können wir sehen, dass wir hier können wir sehen, dass wir bereits eine Markenidentität haben Lassen Sie mich das einfach in den Rahmen bringen. Sie können hier sehen , dass wir bereits unsere Farbpalette und unsere Schriftarten haben. Ein Designsystem geht viel detaillierter vor. Aber für dieses Projekt halten wir es einfach, und wir können daraus tatsächlich eine Design-MD-Datei erstellen. Und dann werde ich mich an die Inspirationsseiten erinnern , die Sie zuvor gefunden haben? Nun, hier nochmal im Hinterkopf. Ich habe Jade Leaf Marcher und Morning Made. Ich habe genau hier ein Tool namens Designsystem Mixer erstellt ein Tool namens Designsystem Mixer Wir werden eine von mir erstellte Chrome-Erweiterung namens Design MD Extractor verwenden mir erstellte Chrome-Erweiterung namens Design MD Extractor Wir werden das Designsystem extrahieren und von jeder dieser Websites eine Design-DotD-Datei erstellen , und dann werden wir sie mit unserem eigenen Design Dot MD mischen, um eine neue Remixd-Design-DotD-Datei zu erstellen Das ist eines der mächtigen Dinge, in denen KI gut ist. Es ist gut darin, Dinge miteinander zu vermischen, und wenn wir das Design-Dotmd-Format verwenden, bedeutet das, dass wir ein Format verwenden, das von einem riesigen Unternehmen wie Google entwickelt wurde von einem riesigen Unternehmen wie Google entwickelt wurde Okay. Als Erstes werde ich also eine Design-MD-Datei aus den Dateien generieren, die ich bereits in meinem Projekt habe. Okay? Also, was ich tun werde, ist, daran zu denken, dass ich das hier in diesem Fenster hier ausgeführt habe. Das ist mit keinem Ordner verbunden. Also werde ich hier auf diese Schaltfläche klicken , um einen Ordner zu öffnen, und dann wähle ich hier den CNS-Ordner für Markenidentität aus, öffne ihn und jetzt wird er Kontext innerhalb dieses Ordners haben Ich glaube, es wird tatsächlich ein ganz neues Fenster geöffnet, und ich muss eine neue Sitzung mit Klauen erstellen , aber das ist Wie du hier sehen kannst. Wenn ich eine Klauencode-Sitzung starte, wird sie jetzt in diesem Ordner ausgeführt, sodass sie Zugriff auf alle Assets in diesem Ordner hat Alles klar? Also werde ich es bitten, eine Design-Dot-MD-Datei zu generieren , die auf den Dateien in diesem Ordner basiert. Nämlich das Logo. Sie können hier also das At-Symbol verwenden, um auf bestimmte Dateien innerhalb des Ordners zu verweisen. Also ich kann nämlich das Logo sagen, das habe ich halt wortwörtlich geschrieben Sans, es reagiert leider nicht gut auf Dateien mit seltsamen Akzenten Also öffne ich einfach das At hier und finde es dann in der Liste. Hier gibt es viele verschachtelte Ordner. Aber da haben wir's. Der Leitfaden zur Markenidentität und das Dokument zu Farben und Schriftarten. Ich bin auch so, dass es den Kontext davon hat, was eine Design Dot MD-Datei ist, füge das ein. Also werde ich hier hineinzoomen, damit Sie sehen können, was das ist. Schreiben Sie das einfach Wort für Wort. Erstellen Sie daraus einen Designpunkt d gemäß der kanonischen Google Lab-Spezifikation an der Github-Adresse der Design-MD-Datei und spiegeln die Struktur des Referenzbeispiels im Okay? Ich gebe ihm nur dieses zusätzliche Detail, damit es genau weiß, was wir hier versuchen, und dann drücke ich die Eingabetaste und lasse Claude Code seine Magie entfalten. Währenddessen können wir zu unseren Beispiel-Websites gehen und deren Design-MD extrahieren. Gehen wir also zu dieser Seite auf meiner Website, christopher dow.com, DesignMD Mixer Und unten verlinkt es auf eine andere Seite, DesignMDetractor Ich öffne das einfach in einem NewTab und Sie können hier sehen , dass wir diese Chrome-Erweiterung herunterladen können Es funktioniert also so, dass Sie eine beliebige Website öffnen und dann auf das Design MD Extractor-Symbol klicken In Ihrer Chrome-Symbolleiste werden dann alle berechneten Stile und CSS-Variablen mit Namen übernommen und sie dann in eine Design Dot MD-Datei eingefügt Um es zu installieren, müssen wir die Datei herunterladen und entpacken und dann zu den Chrome Colon-Erweiterungen wechseln, Entwicklermodus aktivieren und dann die entpackte Datei laden, auf Load Unpacked klicken und den entpackten Design MD Extractor-Ordner auswählen Extractor-Ordner In Ordnung, also ein bisschen Setup hier. Wir gehen hier einfach auf unseren Desktop und geben das Design DMDetractor Design DMDetractor Dann werden wir diese Zip-Datei entpacken. Und hier können Sie den entpackten Ordner sehen, der die Weberweiterung enthält Dann können wir zu den Chrome Colon Dash-Erweiterungen gehen. Schalten Sie den Entwicklermodus hier oben rechts ein, Minus ist bereits aktiviert. Klicken Sie hier links auf Unpacked laden, navigieren Sie zu dem Ordner mit dem Namen Design MD Dash Extractor, den wir gerade entpackt haben, klicken Sie dort navigieren Sie zu dem Ordner mit dem Namen Design MD Dash Extractor, den wir gerade entpackt haben, auf Auswählen und dann heißt es Erweiterung Und wie Sie hier sehen können, habe ich es zweimal bekommen, also werde ich nur das neueste entfernen Ich brauche nicht mehrere davon. Chrome-Erweiterungen sind heutzutage aufgrund von KI sehr einfach zu erstellen. Ich habe also einige , die ich zuvor erstellt habe und die sich bereits hier in meinem Chrome-Konto befinden. Und dann werde ich zu dieser Adresse navigieren. Also die erste, Jade Leaf Macha, und ich habe ein paar verschiedene Erweiterungen Ich muss darauf klicken , um die vollständige Liste der Erweiterungen zu öffnen Und dann suche ich nur nach Design Dot D Extractor. Klicke darauf. Und dann überprüfe ich noch einmal, ob der Markenname korrekt ist, entnehme und kopiere ihn. Dadurch wird Cloud in einem neuen Tab geöffnet. Wir können es entweder hier im Internet tun oder wir können hier zu unserer Cloud-Code-Sitzung zurückkehren hier zu unserer Cloud-Code-Sitzung und eine neue Sitzung erstellen. Aber lass es uns einfach im Internet machen, weil es einfach genug ist. Wir müssen hier eigentlich nichts lokal ausführen. Also füge ich einfach genau diese Eingabeaufforderung ein und klicke darauf auf Ausführen. Dann können wir zum nächsten gehen, nämlich Morning Made.com Dies ist ein weiteres Design, das ich für eine Macha-Website mag. Also dann gehen wir hier rüber. Wir werden wieder zu Design Dot D Extractor übergehen. Bei diesem kommt der falsche Name durch. Da steht zeremoniell. Also müssen wir das nur auf Morning Made ändern . Dann klicken wir auf Extrahieren und Kopieren. Bring das in eine neue Klauensitzung. Drücken Sie die Eingabetaste, so einfach ist das. Und dann gibt jede dieser Sitzungen mit Klauen eine Design-Dot-Datei zurück Okay? Also wenn ich zurück zu meiner Sitzung hier drüben gehe, sieht es so aus, als ob sie jetzt beendet ist. Es heißt also, ich habe eine MD-Datei mit Designpunkten im Ordner Brand Identity Sans erstellt , blah, blah, blah, blah, blah Schauen wir also in unseren Ordner. Gehen Sie in die Markenidentitäts-Seance und wir haben die Design-Dot-Datei genau dort Wenn wir es in Visual Studio-Code oder was auch immer unser Code-Editor ist, öffnen , ist das eine kleine Vorschau darauf, wie es aussieht Sie können die generierten Variablen für alle Farben und Schriftarten hier sehen. Dort wurden auch einige andere Details abgeleitet. Halten Sie einige allgemeine Informationen über den Inhalt der Marke bereit Wenn Sie dies überprüfen und hier etwas ändern möchten, weil es nicht wirklich mit dem übereinstimmt, was Sie sich für die Marke vorgestellt haben , machen Sie natürlich weiter. Wenn dies jedoch auf gesperrten Markenidentitätsdateien basiert , die bestätigt wurden, dann sollte das alles korrekt sein. Also haben wir jetzt diese Designdatei. Wir gehen wieder rein. Ich gehe zurück zu eigentlich nicht dieser Seite. Wir haben bereits unseren Extraktor, und dann werden wir hier im Design MD Mixer damit beginnen, die Design Dot MD-Datei unserer eigenen Marke hochzuladen Design Dot MD-Datei unserer eigenen Marke Also klicke ich dort auf Öffnen und die Details werden einfach in dieses Feld hier kopiert Und dann werden wir unsere Inspirationsseiten haben. Hier kannst du sehen, dass ich das schon gemacht habe. Ich habe hier also schon den Morgen gemacht. Ich glaube, es hat meine vorherigen Eingaben hier zwischengespeichert. Aber jetzt können Sie in diesen Claude-Sitzungen sehen, beide jetzt fertig zu sein scheinen, also können Sie sehen, dass wir ein Design-MD haben , für welches ist das ? Ich habe den Namen vergessen. Also dieser ist für Jade Leaf Marcher, also werde ich ihn herunterladen Und anstatt es Design MD zu nennen, werde ich es Jade Leaf Design Dot MD nennen Wir können das ablegen, wo immer wir wollen, und dann werde ich dieses herunterladen, das ist Morning Made Design MD. Also habe ich jetzt beide und dann kann ich wieder hierher gehen. Für den Morgen, den ich gemacht habe, werde ich einen Schritt zurückgehen. Eigentlich waren es zwei Schritte zurück, das vom Morgen gemachte Design hineingelegt. Und wie Sie hier sehen können, habe ich eine zusätzliche Box für das, was Ihnen am Design dieser Website gefällt . Wenn die KI also diese neu mischt, behält sie bei, was Ihnen an den einzelnen Designsystemen gefällt Was mir an Morning Make gefallen hat, wenn ich noch einmal darauf zurückkomme, war, dass ich diese Art von Papier mochte, die wie eine Hintergrundfarbe aussah, und ich mochte auch die Abstände und Trennlinien Wenn ich dann zu Jade Leaf Macha gehe, lade den Designpunkt D für Jade Leaf Macha hoch. Was hat mir gefallen? Mir gefielen der p-förmige Header, Randradien und die Ikonographie Also, wenn du zu Jade Leaf Marcher gehst. Mir hat dieser Pillen-Header gefallen. Wie Sie hier sehen können, schwebt das über der Oberseite und dem Grenzradius Also die geschwungenen Kanten haben mir hier besonders gut gefallen. Also, was ich hier hinzufüge , ist, Claude wissen zu lassen, dass er sich diese Teile genau ansehen soll, wenn es um den Aufbau unseres neuen Designsystems geht ist, Claude wissen zu lassen , dass er sich diese Teile genau ansehen soll . Wie Sie hier sehen können, können wir dann auf Eingabeaufforderung generieren klicken. Es wird eine ziemlich große Eingabeaufforderung mit 34.000 Zeichen generiert 34.000 Zeichen Und dann werden wir, genau wie wir es mit dem Planungstool gemacht haben, diese Aufforderung kopieren und dann direkt zu Claude zurückkehren Genau hier in demselben Fenster, in dem ich mein Design-MD für meine Marke erstellt habe, kann ich es entweder direkt in derselben Sitzung tun oder eine neue Sitzung erstellen. Ich mache eine neue Sitzung und füge dann die Eingabeaufforderung ein, um die kombinierte Design-Punkt-D-Datei zu generieren , die von dieser anderen Site inspiriert ist, sie aber letztendlich mit Ihrer eigenen Design-MD kombiniert , um eine neue Design-Dotmd-Datei zu erstellen eine neue Design-Dotmd-Datei der sie alle Informationen enthält, die in der sie alle Informationen enthält, die Claude benötigt, um die Figma-Wireframes neu zu gestalten. Drücken Sie dort die Eingabetaste. Okay, jetzt, das in demselben Ordner erstellen wo es sieht, dass wir das in demselben Ordner erstellen, in dem wir den ursprünglichen Designpunkt D haben, fragt es uns, ob wir diese Datei überschreiben oder als neue Datei speichern möchten diese Datei überschreiben oder als neue Datei speichern Es ist nicht wirklich wichtig. Ich werde auf Als neue Datei speichern klicken nur für den Fall, dass wir das Original aus irgendeinem Grund benötigen, aber das sollten wir nicht, also sieht es so aus, als ob es jetzt fertig ist. Wenn ich in den Ordner schaue, ist das die synthetisierte Designversion , die sie gerade erstellt Ich werde also zur ursprünglichen Sitzung zurückkehren Sie können wahrscheinlich eine neue Sitzung erstellen, aber diese Sitzung, von der ich zumindest weiß hat bereits etwas mit Figma gemacht, also hat sie bereits den Kontext Also mache ich es lieber direkt hier, und alles, was ich tun möchte, ist, die folgende einfache Aufforderung zu schreiben Bitte nehmen Sie dieses Designsystem und wenden Sie es auf unsere aktuellen Figma-Modelle Okay. Dann muss ich die Datei natürlich anhängen, also klicke ich auf Vom Computer hochladen. Schnappen Sie sich das synthetisierte Design DotMD, solange es das gleiche Format wie Design Dot MD Es muss nicht exakt Design Dot MD heißen Und dann werde ich nur noch die Eingabetaste drücken und dann sollten unsere Figma-Modelle in Echtzeit neu gestaltet werden, okay ? und dann sollten unsere Figma-Modelle in Echtzeit neu gestaltet werden, okay Ich bin versucht, direkt zu Figma zu wechseln und zu sehen, wie das live passiert, Figma, aber es könnten einige Fragen von Claude auftauchen, also möchte ich, wenn möglich, beide gleichzeitig überprüfen, aber es sieht so aus, als Figma zu wechseln und zu sehen, wie das live passiert, Figma, aber es könnten einige Fragen von Claude auftauchen, also möchte ich, wenn möglich, beide gleichzeitig überprüfen , ob bisher alles gut läuft, also lasse ich es vorerst hier, damit wir diese Aktualisierung in Echtzeit sehen können. Okay, jetzt ist es fertig und Sie können sehen, dass diese leblosen Figma-Designs jetzt ganz anders aussehen. Wie Sie sehen können, verwendet es unsere Markenfarben von Es hat diesen papierfarbenen Hintergrund implementiert. Es implementierte das Pillendesign für den Header , von dem ich sagte, dass es mir von Jade Leaf Marcher gefiel Die Produktkarten sehen viel schöner aus. Die Schriften sollten jetzt zu meinen Markenschriften passen. Also wenn wir nachschauen, haben wir Inter und Seance Body. Es verwendet also Sans Body, was auch sein sollte, wenn ich die Verbindung aufhebe, ist es Inter Also vielleicht müssen wir die Überschriften aktualisieren wenn wir wollen, dass sie lauten. Nun, eigentlich ist die Überschrift hier korrekt, aber der Produkttitel verwendet Also das sollte auf Brand mit Tennis Sands sein. Ja. Okay, es verwendet also die meiste Zeit die richtigen Schriften. Vielleicht möchten wir dort ein bisschen überprüfen, ob es funktioniert. Und wie Sie sehen können, haben wir zumindest Farbe und Randradius in unseren Figma-Designs implementiert Also werde ich es für dieses Video zur Implementierung des Designsystems dabei belassen zur Implementierung des Designsystems Und im nächsten Video bringen wir einige unserer Bilder und unsere Ikonographie mit ein und überarbeiten möglicherweise das Design noch ein bisschen mehr, und überarbeiten möglicherweise das Design noch ein bisschen mehr weil es bestimmte Teile gibt, die definitiv etwas Arbeit benötigen 6. Bilder und Ikonographie: Okay, in den beiden vorherigen Videos haben wir unseren Storefront Planner und KI verwendet, haben wir unseren Storefront Planner und KI verwendet um unsere Wireframes zu erstellen, und dann haben wir unser Designsystem auf die Wireframes angewendet Sie sehen jetzt viel lebendiger aus, aber es gibt noch Und wir können KI dafür für bestimmte Teile davon verwenden. Zum Beispiel könnten wir KI anweisen, die Symbole hier zu aktualisieren und ihnen genau zu sagen , wo sie suchen sollen. Aber KI ist natürlich nicht kostenlos. Wir müssen Tokens verwenden und warten, bis Claude zu uns zurückkommt oder welches KI-Tool auch immer du verwendest. Dafür werde ich also hauptsächlich Handarbeit machen. Aber Sie können hier sehen, dass der Großteil der Arbeit, die wir automatisieren könnten, bereits für uns erledigt wurde. Als Erstes füge ich unser Logo hinzu, denn Sie werden sehen dass hier nur Sans Marcher steht, wo auch immer das Logo erscheinen soll Und wenn Sie sich erinnern, habe ich in der letzten Lektion über Komponenten und Instanzen in Figma gesprochen Also hier ist eine Instanz des Headers. Gehen Sie hier rüber, wir haben eine weitere Instanz des Headers, den Desktop-Header. Wenn wir an allen Instanzen etwas ändern wollen, müssen wir zur Master-Komponente gehen, die sich hier drüben befindet , und Sie können sehen, dass es sich um hier drüben befindet , und Sie können sehen, eine Master-Komponente handelt. mit der Maus darüber fahren, wird Komponente angezeigt, aber auch dieses Symbol hier. Das ist also für Komponenten. Und wenn wir uns das ansehen, ist dieser Diamant hier zum Beispiel. Wenn Sie also eine Änderung vornehmen möchten, die sich nur auf einer Instanz bezieht, machen wir das auf der Instanz, aber wenn wir wollen, dass sie sich auf alle Header oder alle Instanzen dieser Komponente auswirkt, tun wir das auf der Komponentenebene Also lass uns das machen. Anstelle von Sans Macha werden wir es durch das Logo ersetzen Also, ich öffne meinen Ordner hier, schnappe mir das Logo und ziehe es dann einfach an diese Position Jetzt müssen wir hier ein bisschen arbeiten um die Höhe hier zu ändern, um den Container zu füllen Es wird natürlich die Höhe des Containers ausfüllen, was in HTML sowieso der Fall ist. Dann können wir den Text löschen, der Platzhalter für das Logo war Es könnte ein bisschen klein aussehen. Ich muss es vielleicht im wirklichen Leben sehen, aber vielleicht ist es ein bisschen klein. Also könnte ich einfach die Mindesthöhe erhöhen. Ich gehe hier zur Höhe, klicke, um eine Mindesthöhe hinzuzufügen, und sagen wir einfach, ich möchte, dass sie mindestens 30 ist. Okay? Also jetzt wird das ein bisschen größer sein. Und jetzt, wo ich sehe , dass das durchkommt, glaube ich, dass ich vielleicht ein bisschen mehr Polsterung auf der linken Seite brauche vielleicht ein bisschen mehr Polsterung auf der linken Seite Also werde ich gleich hier eine Anpassung an der Polsterung vornehmen gleich hier eine Anpassung an der Polsterung Es ist derzeit bei 24, was mit einer bestimmten Variablen verknüpft ist, nämlich dem Container-Padding Vielleicht lasse ich das jetzt einfach stehen. Nun, das ist nicht passiert, als ich das vorher gemacht habe, aber die Anordnung der Komponenten ist ein bisschen anders. Einige von ihnen überschneiden sich. Lassen Sie mich einige dieser Komponenten hier in einen eigenen Bereich verschieben , damit sie sich nicht mit anderen Komponenten überschneiden Und dann ist das hier die Akkordeon-Zeilenkomponente. Vielleicht möchten Sie diese beschriften oder sie einfach so lassen, wie sie sind. Aber wie Sie hier sehen können, enthält dieser Rahmen unsere Hauptkomponenten. Und für jede Komponente wird es eine Desktop- und eine mobile Version geben. Das ist in der finalisierten Codeversion des Themes offensichtlich nicht der Fall , aber Figma, da wir eine Trennung zwischen dem Desktop - und dem mobilen Design haben , wird es eine Version für Mobilgeräte und eine Version für den Desktop geben für Mobilgeräte und eine Version für Also werde ich hierher gehen und dasselbe tun, um das Logo hier zu ersetzen Geh rüber, fülle den Behälter für die Höhe und entferne den vorhandenen. Und dann, wie Sie hier sehen können, ist es immer noch ein bisschen zu groß. Haben wir also eine obere und untere Polsterung? Also müssen wir hier vielleicht ein wenig mit der Breite arbeiten? Und reduziere es auf sagen wir 100. Wie Sie hier sehen können, schneidet es hier ab. Wir haben kein festes Seitenverhältnis ausgewählt. Also wähle ich ein festes Seitenverhältnis und reduziere dann die Breite auf 100, und da kannst du sehen, dass es etwas besser funktioniert, aber es ist nicht in der absoluten Mitte angeordnet Ich könnte es also aus dem automatischen Layout herausnehmen , indem ich hier auf diese Schaltfläche klicke, um die absolute Positionierung vorzunehmen Dadurch wird das automatische Layout ignoriert, und dann kann ich es einfach in der Mitte platzieren, okay, falls wir das wollten. Eigentlich sieht es ein bisschen abwegig nach rechts aus oder ich bilde mir das nur ein Ich finde, da sieht es besser aus. Okay, jetzt sollten Sie sehen können, dass das Logo auf alle Designs übertragen wurde , die diese Komponente verwenden, was so ziemlich alle sind, weil es sich um einen globalen Bereich handelt was so ziemlich alle sind, weil es sich um einen globalen Bereich handelt. Und was den Header angeht, er sieht ziemlich gut aus. Es hat irgendwie die Symbole herausgefunden ohne dass ich ihm irgendwelche Symbole gegeben habe. Vielleicht hat es tatsächlich in den Ordner geschaut. Wenn wir also zu dem Ordner zurückkehren und sie tatsächlich nicht hier sind, aber wenn wir wieder rausgehen und in aber wenn wir wieder rausgehen und diesen Ordner hier schauen, haben wir Webseiten-Symbole. Also hat es vielleicht außerhalb des Ordners gesucht , um sie zu finden. Ich bin mir nicht sicher. Manchmal funktioniert KI auf eine Weise , die Sie nicht ausdrücklich angewiesen haben, aber wir müssen die Symbole hier für IG, Facebook und Tik Tok ersetzen , Facebook und Tik Tok Ich werde also in den Ordner mit den sozialen Symbolen hier gehen , wo ich diese Symbole habe Der erste ist IG, also werde ich Instagram genau dort einfügen. Sieht aus, als wäre es nicht in die richtige Position gefallen . Oh, ich verstehe. Ich bearbeite die Instanz gerade hier. Also möchte ich tatsächlich hierher gehen und die eigentliche Komponente bearbeiten. Lassen Sie mich das also noch einmal auf Komponentenebene machen. Das ist ein guter. Das ist ein kleines Problem. Es sieht so aus, als ob es in diesem Kreis neben dem IG-Text positioniert diesem Kreis neben dem IG-Text Ich werde diesen IG-Text entfernen, und ich will den Kreis überhaupt nicht. Also lass uns das aus dem Rahmen ziehen und es einfach dort platzieren. Dann mache ich dasselbe für Facebook. Es ist ziemlich schwierig, sie auf einem kleinen Design wie diesem genau dort zu platzieren , wo Sie sie benötigen, aber los geht's. Sie können sie immer einfach verschieben, sobald wir sie platziert haben. Versuche TikTok da rein zu werfen. Da haben wir's. Und da haben Sie es, die drei sozialen Symbole ohne die Kreise um sie herum. Aber sie sind etwas kleiner als das, was wir beabsichtigt hatten. Die Kreise waren 28 mal 28, also werde ich all diese Symbole 28 mal 28 machen. Aber zuerst muss ich das Seitenverhältnis korrigieren. Klicken Sie erneut hier, um das Seitenverhältnis zu korrigieren. Und dann noch einmal auf dem TikTok-Symbol. Wir wollen dort keinen weißen Hintergrund haben, das war also ein kleiner Fehler von der KI, also werde ich die Füllung einfach so entfernen , und da kannst du sehen. Also wir wollen vielleicht, dass sie weiß sind , also könnten wir hier reingehen. Hier gibt es eine Füllung, sodass wir die Farbe ändern können, da es sich tatsächlich um SVGs handelt Aber ich mag es eigentlich schwarz. Eigentlich glaube ich, dass es ein unscharfes Schwarz , das wir wahrscheinlich irgendwo als Variable gespeichert haben. Also werde ich die Füllung hierher verschieben, sie hier öffnen und versuchen, unseren Bibliotheken die passende Farbe zu finden. Wir haben hier also eine ganze Reihe von Farbvariablen, die in der vorherigen Phase implementiert wurden . Was ist mit der Sekundarstufe? Also, ja, es hat ungefähr dieselbe Farbe , aber etwas anders. Also lass uns die auf Sekundarstufe machen. Es ist immer gut, Variablen zu verwenden. Lass uns sehen. Ja, wenn ich die Variable lösche, wirst du sehen, dass sie fast schwarz ist Sie ist fast schwarz. Es ist also besser, konsistente Variablen zu verwenden , damit unsere Farben konsistent sind. Und wie Sie in der Fußzeile sehen werden, gibt es dort auch ein Logo Also werde ich das durch unser Website-Logo ersetzen. Auch hier müssen wir die Höhe festlegen, also könnte ich die Breite einfach auf 100 reduzieren, vielleicht etwas mehr als 100, also sagen wir 150. Cool. Und dann ähnliches hier für die mobile Version der Fußzeile Auch dieser kann auf dem Handy wahrscheinlich 100 sein. Okay. Und dann müssen wir verschieben, wir können wahrscheinlich einfach kopieren und einfügen, was wir hier bereits getan haben , um uns etwas Zeit zu sparen , und dann diesen Rahmen einfach entfernen. 28 scheint ein bisschen groß zu sein, also ändern wir diese Zahl auf dem Handy auf 20. Und weil wir all diese Änderungen an der Komponente vornehmen, sollte sich das auf alle unsere mobilen Designs auswirken, okay? Eine weitere Komponente sind hier die Produktkarten. Also dieser Bereich hier, wir werden unser Produktbild haben, damit wir die Farbe ignorieren können . Das wird anders aussehen. Aber wie Sie sehen können, haben wir diese geschwungenen Ränder mit einem Schatten. Das willst du vielleicht oder auch nicht. Ich finde, es sieht okay aus, also lasse ich es vorerst stehen. Was ich tun möchte und das habe ich in einem früheren Video erwähnt , ist, dass ich die Schaltfläche „ Schnelles Hinzufügen“ über dem Bild platzieren möchte . Also werde ich mir diese Schaltfläche schnappen und wir können sie beschriften , wenn wir wollen. Wir können „Schnell hinzufügen“ sagen, den Namen des Frames ändern, wenn wir wollen, und dann klicke ich auf „Ziehen“. Eigentlich muss ich das hier in der Seitenleiste machen. Und ich werde auf Drag it up hier klicken. Das Problem dabei ist, dass wir jetzt diesen kleinen Rahmen für das Bildsymbol haben. Damit werden wir nicht wirklich live gehen. Das war nur ein Symbol, das auf einen Platzhalter hinwies. Also werde ich das einfach komplett löschen. Und dann nehme ich diese Schaltfläche, die Hintergrundfarbe der Schaltfläche und die Farbe des Bildraums sind identisch, sodass wir hier den Umriss nicht sehen werden. Aber was ich tun werde, ist, dass ich hier einfach etwas Polsterung hinzufügen werde hier einfach etwas Polsterung hinzufügen Und dann werde ich den Knopf nach unten positionieren Also werde ich hier der Reihe nach klicken. Eigentlich muss ich das für den übergeordneten Frame machen, die Ausrichtung auf den unteren Rand setzen, und dann werden Sie hier die Grenzen der Schaltfläche sehen. Vielleicht füge ich einfach einen Rahmen hinzu, um das etwas deutlicher zu machen. Es sieht also so aus, als hätte es einen Strich, aber vielleicht hat der Strich dieselbe Farbe wie der Hintergrund. Lassen Sie mich den Strich also einfach auf etwas anderes ändern, sagen wir, auf der Primärseite. Okay, jetzt können Sie das sehen. Sobald ich das implementiert habe, werde ich dafür sorgen, dass diese Schaltfläche nur auf Ha angezeigt wird. Aber im Moment zeigt das ungefähr an, was ich will. Denken Sie daran, dass dieser Bereich hier durch Bilder ersetzt wird, und ich bin mir nicht sicher, ob ich in der Planungsphase danach gefragt habe oder nicht, aber bei dieser Karte scheint auch der Preis zu fehlen. Also werde ich einfach den Produkttitel duplizieren und hier einen Produktpreis angeben. Und das ist einfach zu groß. Eigentlich denke ich, dass ich sie zusammenfassen werde. den Rahmen aus, machen Sie daraus einen automatischen Layoutrahmen, legen Sie die Richtung wie folgt fest, richten Sie sie so aus, dass sie gleichmäßig verteilt sind, und legen Sie dann die Breite so fest, dass sie den Container ausfüllt Wenn Sie Figma noch nie benutzt haben und sich nicht ganz sicher sind, was ich gerade gemacht habe, schauen Sie sich auf jeden Fall den Figma-Webdesign-Kurs Ich möchte mich in diesem Kurs nicht wiederholen , wenn du zurückgehen und dir den ansehen kannst In diesem Teil behandle ich mehr über die praktischen Aspekte der Verwendung von Figma, okay? Also werde ich das auf 12 setzen , anstatt auf das, was es jetzt als Produkttitel ist Also ich glaube, ich werde das auf dem Desktop auf 16 und den Preis auf 14 erhöhen . Und dann muss ich hier natürlich etwas Ähnliches tun. Es ist ziemlich klein hier drüben. Lassen Sie mich sehen, wie es in den tatsächlichen Entwürfen aussieht, weil wir in den Plan aufgenommen haben, dass es zwei Spalten haben sollte. Das ist nicht viel Speicherplatz, also müssen wir diese Lücke auf Mobilgeräten möglicherweise verringern. Im Moment lasse ich es einfach so wie es ist. Und weil es auf Mobilgeräten kein Erntedatum gibt, lasse ich die Schaltflächen zum schnellen Hinzufügen darunter. Oder vielleicht werden Sie sie einfach ganz los . Also werde ich das nicht in einer Instanz tun. Ich mache das hier in der Master-Komponente und lösche das einfach aus dem mobilen Erlebnis. Okay? Okay, das sind also im Grunde die Hauptkomponenten. Ich habe sie ein bisschen aktualisiert. Ich habe das Logo und die Icons eingefügt, aber ich habe noch keine Bilder gemacht. Also hier drüben werde ich das Heldenbild aktualisieren. Also werde ich das anklicken und dann zum Ausfüllen übergehen. Und entfernen Sie diese Farbfüllung und ersetzen Sie sie durch eine Bildfüllung. Also werde ich das von meinem Computer in Webseitenbilder hochladen . Ich habe meine Helden-Sektion genau dort, also füge ich sie ein, und dann kann ich sie so positionieren, wie es mir gefällt, also so. Jetzt ist es ein bisschen hell, also wenn ich den Text überstreiche, ist er vielleicht etwas schwer zu erkennen. Ich füge eine weitere Füllung hinzu, und Figma ist gut darin Es weiß, was ich versuche zu tun. Es fügt bei 20% eine schwarze Überlagerung hinzu, und dann ändere ich diese Farbe von einer dunklen Farbe für die Textfüllung in eine helle Farbe Und da alle unsere Variablen eingerichtet sind, empfehle ich Ihnen, die Farbe hier nicht mit einem Hexadezimalwert festzulegen, die vorhandenen Variablen zu verwenden Also ich denke an primär und dann hier auch an primär. Und du kannst sehen, dass das ganz nett aussieht, okay? die andere Sache ist , dass ich wollte, dass die Kopfzeile der Pille den Helden überlagert Also, was ich tun werde , ist diesen Header auf dem Desktop zu erstellen, speziell auf dem Homepage-Desktop-Frame weil ich möchte, dass das nur für diese Seite gilt Ich werde das automatische Layout entfernen und diese Position absolut beibehalten. Okay? Also, jetzt geht es vorbei, und dann muss ich nur mein Bild ein bisschen anpassen. Also werde ich es so ziehen. Jetzt können Sie sehen , dass ich diesen schönen Header im Pillenstil habe , dass ich diesen schönen Header im Pillenstil , den ich von Jade Leaf gesehen habe und der mir gefallen hat. Okay? Lass uns dasselbe Heldenbild auf unserer mobilen Version einbauen. Also klicken wir einfach hier, gleiche Helden-Sektion. Dieses Panel blockiert es irgendwie, aber du kannst es hier sehen, ich bin damit zufrieden und wir wollen hier die gleichen Farben haben. Also war es nur auf der Primärseite und dann dasselbe für hier auf der Primärseite. Und ich habe vergessen, das Overlay einzufügen, also drücke ich einfach diese Taste, um eine zusätzliche Füllung hinzuzufügen, die 20% -ige Überlagerung, und ich lasse es so, okay? Wir werden die Kopie etwas später einfügen, aber lassen Sie uns diese Produktkarten mit Produktbildern versehen . Natürlich werden diese Informationen aus dem Backend von Shopify abgerufen, wenn sie live gehen Aber zu Visualisierungszwecken im Design werden wir die Füllung hier wieder in der Instanz ersetzen , nicht in der Komponente, da jede Komponente eine andere Füllung haben wird , um jeweils ein anderes Produkt darzustellen Wir werden uns mit den Bildern der Website befassen. Wir werden uns Fotos von innen ansehen, und ich habe hier Produktbilder. Wir werden uns die primären Produktbilder ansehen. Ich werde zuerst das Matcha-Pulver vorstellen, wie Sie hier sehen können Jetzt können wir sehen, dass unsere Schaltfläche keine Füllung mehr hat, sobald wir sie über einem Bild und nicht über diesem Hintergrund platziert haben sie über einem Bild und nicht über diesem Hintergrund platziert Also gehe ich zurück zur Komponente hier und stelle sicher, dass sie etwas Füllung hat. Also ich denke, ich werde diese Farbe genau hier verwenden. Eigentlich passt das überhaupt nicht gut zu dem Grün. Also vielleicht nur, um an die Oberfläche zu kommen. Schauen wir uns das mit einem Bild an. Okay. Ich glaube, damit bin ich ziemlich zufrieden. Ändern Sie den Produkttitel. Auch hier handelt es sich um dynamische Informationen, sodass Sie das nicht wirklich tun müssen. Aber je nachdem, ob Sie diese Informationen zur Visualisierung benötigen oder ob Sie sie jemand anderem präsentieren möchten . Ich werde den Titel aktualisieren. Der Name des Produkts lautet, wenn wir hier darauf eingehen, öffnen Sie es einfach im neuen Tab damit wir uns beide gleichzeitig ansehen können. Wenn wir hierher gehen, haben wir unsere Produktliste genau hier. Also das Premium-Matcha-Pulver, 100 Gramm. Ich werde einfach den 100-Gramm-Teil loswerden , weil wir dafür keinen Platz haben Und hier können wir tatsächlich sehen, dass wir vielleicht nicht genug Platz für all die Details haben. Also müssen wir vielleicht zur Karte hier, der Komponente, zurückkehren und sie wieder reduzieren, oder 16 ist schon ziemlich klein. Vielleicht erhöhen wir hier einfach die Breite des Containers , um ihm mehr Platz zu geben. Derzeit sind es also 1.200. Es gibt ziemlich viel Polsterung. Sie können hier tatsächlich sehen, dass es sich nicht über die gesamte Breite des Containers erstreckt, zu korrigieren also könnte ich versuchen, das hier im Produktraster Also werde ich sie zur Mitte hin ausrichten und sie gleichmäßig verteilen. Es passt immer noch nicht ganz gut. Also ich denke, ich werde sagen, ja, wir haben keinen Platz, um den Preis auf der rechten Seite zu platzieren, also werde ich das einfach ändern diesen Preis unter den Produkttitel senken. Und jetzt brauchen wir den Rahmen nicht mehr , also können wir ihn einfach entfernen. Auch diese Dinge tauchen beim Entwerfen auf, aber mit einem Tool wie Figma können Sie das alles manuell machen, können Sie das alles manuell machen, und mit dem Figma MCP können Sie auch KI einsetzen, um bei den grundlegenderen Dingen zu helfen Der Preis dieses Produkts beträgt also, wenn wir uns die Produktliste ansehen, Da können Sie also sehen, wie die Karte auf der Website angezeigt wird Fahren wir mit den anderen Produktkarten fort. Ich möchte das schnell machen , weil ich mich nicht zu sehr damit verzetteln möchte Es ist einfach immer wieder derselbe Prozess. Also vielleicht machen wir als Nächstes die Schüssel. Und weil diese Titel dynamisch veröffentlicht werden , werde ich sie hier nicht bearbeiten. Aber auch hier solltest du vielleicht das tun, sie auf den richtigen Namen aktualisieren. Eigentlich möchte ich das Zubehör noch ein letztes Mal machen, also werde ich Schneebesen machen und dann werde ich das Zubehörset machen Okay. Vielleicht aktualisiere ich die Titel hier. Ich sage einfach Keramikschale, Zeremonienbesen und Set. Okay. Also das sieht auf dem Desktop ziemlich gut aus. Ich werde die vorgestellte Kollektion auf unsere Produktpalette umstellen auf unsere Produktpalette und dann gehe ich hierher und mache dasselbe auf dem Handy. Ich mache nur die Bilder für das Handy. Aber für Ihr Design möchten Sie vielleicht auch die Produkttitel und Preise aktualisieren . Mir ist gerade aufgefallen, dass wir einen Aufpreis für die gesamte Komponente haben , also werde ich das auch tun. Der nächste war Bowl. Dann sehe ich, dass die Handykarte das immer noch hat, ich will das nur entfernen. Und dann füge den Preis hinzu. Also nehme ich das einfach, füge es hier und mache es dann natürlich kleiner , weil wir auf dem Handy sind. Ordnung, wir können also hierher zurückkehren, diese Bilder über die Fill-Eigenschaft aktualisieren und da ist dein Paket. Okay? Das deckt also im Grunde die ersten beiden Abschnitte ab. Wenn wir auch die Kopie des Heldenbereichs aktualisieren möchten , habe ich hier das Dokument zur Webkopie als Referenz. Es war also Premium-Macha für den modernen Wellness-Lifestyle Also werde ich das einfach ersetzen , weil wir jetzt sehen können, dass es entweder zu groß ist oder wir auf zwei Zeilen aufteilen müssen Es ist also gut, die eigentliche Kopie da rein zu legen, nur um zu sehen. Also werde ich das auf eine dieser Variablen reduzieren. Das ist besser. Und dann gehe ich zu dem, was bei dem anderen auf Qualität und Reinheit geachtet wurde. Okay, also wir gehen hier rein, legen das da rein. Und eigentlich werde ich die Schriftgröße einfach so belassen. Das Gleiche hier drüben, bring die Überschrift rein. Das wird viel zu groß für Mobilgeräte sein, glaube ich. Also wollen wir es kleiner machen und dann können wir hier Zeilenumbrüche verwenden, aber es ist immer noch ein bisschen zu groß. Also werde ich hier einfach aus den Variablen ausbrechen und 24 machen. Dann hier drüben, die andere Webkopie, die darunter liegt. Ich werde dort auf jeden Fall auch einen Zeilenumbruch brauchen. Also werde ich wahrscheinlich zwei solche Zeilenumbrüche machen. Vielleicht reduzieren wir auch die Schriftgröße. Wie Sie sehen können, ist das quasi der Arbeitsablauf. Wir fügen die Bilder ein, wir fügen die Symbole den eigentlichen Inhalt ein und nehmen alle Änderungen vor, die wir unterwegs entdecken und die wir korrigieren müssen Ich werde nicht alle Vorlagen erstellen, da bei vielen von ihnen die Bilder aus Themendaten abgerufen und Daten gespeichert werden aus Themendaten abgerufen und Daten gespeichert Viele dieser Informationen gehen also verloren, wenn wir bauen. Und es basiert auf dem, was ich dir gerade gezeigt habe. Wenn wir zum Beispiel auf die Produktseite wollen , nochmal dasselbe. Wir nehmen einfach den Bereich, in den das Bild gehen soll. Wir werden das nervige kleine Symbol dort los. Weil das ein Problem sein wird. Wir ersetzen diese Hintergrundfüllung ein echtes Produktbild oder ein beliebiges Bild , je nachdem, wo Sie sich befinden, durch ein echtes Produktbild oder ein beliebiges Bild, je nachdem, wo Sie sich befinden, und Sie fahren damit fort die Bilder zu aktualisieren und die Kopie zu ersetzen, schauen, was kaputt geht, sehen, was sich ändert, und aktualisieren das nach und nach. Die eine Sache, die ich auf Video zeigen möchte, ist unser Y CNS Macha nicht besonders gut aussieht und unsere Testimonials auch Also ich möchte das umgestalten und was auch enthalten ist, ist die Verwendung von enthalten ist, ist die Verwendung Produktkarten, also möchte ich Aber der Rest sieht ziemlich gut aus. Wir müssen nur den fehlenden Inhalt ausfüllen. Aber ansonsten sieht es ziemlich okay aus. Schauen wir uns hier unsere globalen Bereiche an. Ja, es sieht ziemlich gut aus. Es hat sogar die Symbole hier in der mobilen Navigation. Anstatt also alle Vorlagen durchzugehen und Bilder und Texte hinzuzufügen , ich Sie vielleicht einfach im führe ich Sie vielleicht einfach im nächsten Video durch den Abschnitt mit den Verkaufsargumenten und dem Abschnitt, was enthalten ist denn das erste KI-Ergebnis, das erzielt wurde, wird ein wenig Arbeit erfordern Und wenn Sie die restlichen Wireframes durchgehen und sie mit Ihren Bildern befüllen möchten , können Sie das auch tun Vielleicht mache ich das etwas später auch selbst für dieses Testprojekt Ich werde das in ein neues Video aufteilen, und wir können im nächsten Video über diese zusätzlichen Abschnitte sprechen , an denen etwas gearbeitet werden muss. 7. Manuelle Figma-Konstruktion: Wie wir im letzten Video gesehen haben, hat KI einige Abschnitte gemeistert Ich finde, der Heldenbereich und der Abschnitt mit den ausgewählten Sammlungen sehen ziemlich gut aus Aber im Bereich Y CNS Marcher kann ich die Vision noch nicht wirklich sehen Und genau hier braucht auch der Abschnitt mit den Testimonials ein Es wurde also nicht ganz verstanden was enthalten ist, weil ich nicht beabsichtige , dass der Kunde einzelne Produkte zur Karte hinzufügt , wenn er auf der Produktseite des Ich möchte nur die verschiedenen Produkte vorstellen , die im Paket enthalten sind, wenn sie auf dieser Seite angezeigt werden. In diesem Video werden wir diese Abschnitte also manuell korrigieren. Aber zunächst sieht es für die Verkaufsargumente so aus, Claude das nicht als Komponente erstellt hat, und ich möchte, dass diese Änderungen jede Vorlage gelten , die sie verwendet. Ich kann den Abschnitt natürlich einfach löschen und dann übernehmen, aber ich hätte lieber, dass es eine Komponenteninstanz ist. Ich denke, das hilft auch bei der Codegenerierung, zu erklären, dass es für jeden dieser Abschnitte derselbe Code ist, nur mit potenziell unterschiedlichem Inhalt. Anstatt das Problem selbst zu beheben, werde ich hier zu Claude zurückkehren, und das ist etwas, das Sie tun können, egal in welcher Phase des Projekts Sie sich befinden. Claude kann tatsächlich jederzeit über das MCP in Figma eintauchen jederzeit über das MCP in Figma Und wenn es etwas ist , das du leicht erklären kannst und das Claude leicht interpretieren kann, ist das eine gute Claude-Aufforderung Anstatt die manuelle Arbeit unbedingt selbst erledigen zu müssen . Also werde ich die Namen dieser Abschnitte kopieren und dann zu meiner Claude-Code-Sitzung innerhalb von Visual Studio-Code zurückkehren . Ich werde sagen, Sie haben den Abschnitt mit den Verkaufsargumenten implementiert. Tatsächlich erscheint der Testimonial-Bereich nur auf der Homepage Ich sage also einfach, dass Sie den Abschnitt mit den Verkaufsargumenten als reguläre doppelte Abschnitte implementiert Abschnitt mit den Verkaufsargumenten als reguläre doppelte Abschnitte Ich möchte, dass es ein Bestandteil von Figma ist. Okay, ich weiß nicht, ob ich mich so gut erkläre, aber es scheint verstanden zu haben, was ich meinte, es wird den Abschnitt mit den Verkaufsargumenten in eine richtige wiederverwendbare Komponente verwandeln in eine richtige wiederverwendbare Komponente Also wird es untersuchen, was gerade in der Figma-Datei steht , und es für uns ändern Okay, es heißt also, dass es etwas Unerwartetes bemerkt hat und es denkt, dass jemand anderes die Datei bearbeitet hat, seit sie das letzte Mal überprüft Also werde ich nur sichergehen , dass Claude das versteht. Ja, ich habe die Datei bearbeitet , seit Sie die Wireframes zum ersten Mal generiert Bitte mache meine Arbeit nicht rückgängig. Okay. Hoffentlich versteht es das und macht nicht die Arbeit rückgängig , die wir bereits geleistet haben Ich glaube nicht, dass es so sein wird, solange wir es klarstellen. In Ordnung, jetzt sieht es so aus, als ob es erledigt ist. Lassen Sie mich auf Figma eingehen, und ja, es sieht so aus, als ob Verkaufsargumente jetzt eine gemeinsame Komponente sind Ich bin mir nicht sicher, wo sich die Komponente befindet, da dies immer noch eine Instanz ist Also müssen wir herausfinden, wo es ist. Auch hier überschneidet es sich mit den anderen Inhalten, aber ich könnte das einfach hinbekommen Und um ehrlich zu sein, hat das mit Claude etwa 6 Minuten gedauert In dieser Situation wäre es vielleicht einfach schneller für mich gewesen, es selbst zu tun, was zeigt, dass manche Dinge einfach besser mit KI und manche Dinge einfach besser manuell erledigt werden können. Das ist also ein gutes Beispiel , das 6 Minuten gedauert hat und eine Menge Geld in Tokens ausgegeben hat. Manchmal ist es einfach besser, es manuell zu machen. Jetzt, wo das erledigt ist, können wir den Abschnitt mit den Verkaufsargumenten an einem Ort bearbeiten , und diese Informationen werden in , und diese Informationen werden alle Vorlagen übernommen, die sie verwenden. Okay, also was ich tun werde, ist natürlich diese winzigen Kreise durch das Symbol zu ersetzen . Und wenn wir als Beispiel die Website verwenden, die wir in der vorherigen Skillshare-Klasse erstellt haben in der vorherigen Skillshare-Klasse , sind diese Symbole mit 40 Pixeln etwas größer Also wenn ich mir das hier ansehe, 64 mal 64, ist das wahrscheinlich ungefähr die richtige Größe, die wir wollen Also, anstatt das einfach auf 64 mal 64 zu ändern, werden wir es trotzdem ersetzen. Also werde ich die Icons reinbringen. Die erste war radikale Verteidigung. Also lass mich herausfinden, wo das ist. Also innerhalb von Webseitenbildern innerhalb von Icons, das ist das erste, also werde ich das hier reinziehen. Wird riesig rauskommen. Ich möchte das Seitenverhältnis korrigieren und es dann auf 64 setzen und dann den Punkt dort entfernen. Ich werde einfach schnell dasselbe für die anderen machen. Schnelle Weiterleitung, weil es für jeden Klappentext genau derselbe Vorgang Ich werde das auch für die mobile Version tun. Okay, cool. Und dann fülle ich einfach auch die vorgestellten Titel und Beschreibungen aus. Also kopiere ich einfach das von der Website, Radical Defense, Sustained Ritual, Metabolic Spark, Vivid Detox und dann die Beschreibungen Das steht auch in der Webkopie. Wenn Sie es also nicht wie ich von der Website übernehmen, können Sie es hier aus dem Webkopie-Dokument übernehmen. S, anhaltendes Ritual. Ich werde zur Webkopie wechseln , weil Sie vielleicht keinen Zugriff auf die Website aus dem vorherigen Kurs hatten, aber hier ist es genau derselbe Inhalt. Und vielleicht ist es erwähnenswert, dass wir diese Phase wahrscheinlich hätten vermeiden wenn wir diese Informationen am Anfang einfach an Claude weitergegeben hätten. Aber da hast du's. Ich habe ein paar Minuten länger gebraucht, aber jetzt haben wir diese Informationen geladen, und ich möchte sie jetzt in der tatsächlichen Instanz sehen. Wie Sie sehen können, gibt es ein paar Dinge, die geändert werden müssen. Ich möchte, dass all diese Klappentexte zentriert sind, also gehe ich zu jedem dieser Klappentexte und zentriere den Inhalt Und ich glaube, ich will das auch hier auf dem Handy haben. Lass mich es mir an Ort und Stelle ansehen. Ich glaube, ich möchte vielleicht auch eine andere Hintergrundfarbe. Also werde ich die Hintergrundfarbe hier ändern, sagen wir, Weiß, aber ich werde nicht normales Weiß wählen. Ich werde die Hintergrundvariable wählen, eigentlich die Hintergrundvariable. Es sah hier weiß aus, aber es ist nicht wirklich weiß. Versuchen wir es mit Surface. Nein. Ich mache Surface Bright. Und dann hier auch Surface Bright füllen. Ja, ich glaube, so gefällt es mir besser, und der Text ist nicht mittig ausgerichtet. Es ist nach links ausgerichtet. Gehen Sie hier einfach für jeden Klappentext auf die Ausrichtung des Textes ein und richten Sie ihn in der Mitte Schauen wir uns das jetzt noch einmal an. Es sieht ziemlich okay aus, aber der Text ist ein bisschen zu groß, also möchte ich hier einen Max WIP-Container für den Textinhalt haben hier einen Max WIP-Container für den Textinhalt Also, genau hier werde ich einen Max WIP festlegen, indem ich auf den Chevron neben dem WIP klicke, ein Max With-Wert von hinzufüge, mal sehen, wie 200 aussieht Okay, vielleicht 250, vielleicht 260. Ja. Also werde ich sie alle auf Max WIP 260 auf dem Handy einstellen. Und auf dem Desktop vielleicht auch 260. Lass uns damit experimentieren. 250 sieht aus, als ob es nicht verpackt ist. Ich muss hier nur die Regeln für die Größenänderung ändern. Ja, mir gefällt nicht, wie es sich so wickelt. Ja, ich denke, ich werde es für den Max mit 260 tun. Also dieser auch, alle auf 260 setzen. Einige davon werden sich nicht ändern, weil sie schon klein genug waren, aber das sind responsive Regeln , die sich gut ins Internet übertragen lassen und auch, wenn wir die Größe an verschiedene Bildschirmbreiten Okay, jetzt können Sie sehen, dass wir Y CNS Macha haben und dass all unsere Änderungen für jedes Template gelten, und dass all unsere Änderungen für jedes Template gelten das es verwendet Okay? Lass mich auch die Schrift überprüfen. Es wird also Inter heißen. Ich möchte hier die Schriftart für die Überschrift verwenden, also werde ich auch das ändern. Ich kann hier auch eine Variable verwenden. Ich kann hier oben klicken, um auf die Variable umzuschalten, oder ich sollte dazu in der Lage sein. Ich schwöre, ich habe schon einmal eine Variable für Überschriften gesehen. Seance-Überschrift Überschrift MD. Okay, ich muss nur hier reingehen und ich denke, klicken Sie hier um Stile anzuwenden. Das ist es, wonach ich suche. Also werde ich Headline MD machen und diesen Stil auf der ganzen Linie anwenden. Es gibt auch Title MD, das ich verwenden kann. Aber lassen Sie uns einfach sehen, wie die Überschrift MD aussieht. Es könnte ein bisschen zu groß sein. Ja, ich denke, es wird wahrscheinlich ein bisschen zu groß sein. Ja, vielleicht tun wir das. Anstelle dieses Stils ändern wir den Stil in etwas anderes. Also tippe MD und dann vielleicht genau wie auf der Website, die Großschreibung sieht mit dieser Schrift nicht gut aus. Also vielleicht setze ich es auf MD, aber entferne einfach die Verknüpfung, reduziere die Schriftgröße auf 24 oder wir können zum Stil selbst gehen und ihn auf Stilebene ändern Wenn ich also hier draufklicke, um den Stil zu bearbeiten, kann ich den Wert auf ein paar Pixel reduzieren, vielleicht auf 24. Und das wird es überall ändern. Denken Sie also daran, hier haben wir es auf 24 reduziert. Wir können das jetzt wahrscheinlich wieder in den Stil bringen , den es vorher war, und ich bevorzuge das, weil dadurch nur die Konsistenz auf der gesamten Website mithilfe dieser Variablen aufrechterhalten wird. Also muss ich die Stile auch hier anwenden, Überschrift MD. Und eine letzte Änderung, die ich hier vornehmen möchte, ist, dass ich mehr Abstand zwischen dem Header und dem Container haben möchte. Also werde ich den Abstand einfach auf, sagen wir, 48 vergrößern und vielleicht diese Überschrift anstelle von MD groß machen , los geht's. Vielleicht fügen Sie hier ein Fragezeichen hinzu. Mach das bei beiden. diesem möchte ich zentriert sein, also stelle ich hier einfach die Ausrichtung ein, und damit bin ich ziemlich einverstanden. Also werde ich es dabei belassen und lassen Sie uns als Nächstes am Abschnitt mit den Testimonials arbeiten Dieser erscheint also nur einmal, also wird er keine Komponente sein, aber wir können ihn natürlich wie eine Komponente behandeln Also werde ich all diese Platzhalter für Bilder durch Fotos der Kunden selbst ersetzen all diese Platzhalter für Bilder . Dieselben Fotos, die wir in der vorherigen Klasse verwendet haben , auch hier werden sie riesig werden. Also müssen wir sie auf das reduzieren, was wir für bessere Abmessungen halten. Ich denke, 200 sind vielleicht genug. Und dann wollen wir einen Eckenradius hinzufügen. Wir haben hier unseren Eckenradius, Variablen. Da wir also überall Radien verwenden, denke ich, dass wir sie hier verwenden sollten Entferne das. Lassen Sie uns ein konkretes Zitat abgeben. Also nehme ich das aus der Webkopie. Das kann Sarah sein. Also kopiere ich auch ihren Autorennamen. Und ja, so toll sieht es nicht aus. Ich denke, wir werden es eher wie eine Produktkarte aussehen lassen wollen . Also werde ich hier etwas Füllung hinzufügen. Also werde ich in meine Bibliotheken gehen. Lass uns einen Blick darauf werfen. Lassen Sie uns den Hintergrund machen. Es wird nur den Seitenhintergrund im Hintergrund und die Oberfläche hell machen, und die Oberfläche hell machen, wie wir es hier oben gemacht haben, ohne das Gefühl zu haben, Eva. Ich fühle etwas, das ein bisschen weißer ist. Vielleicht, wenn ich hier wieder einen Eckradius einfüge und dabei eine der Standardvariablen verwende. Und dann lassen Sie uns alles in diesem Rahmen zentrieren und etwas Polsterung in diesem Rahmen Ich denke, das ist eine Sache , die definitiv fehlt. Mal sehen, ob wir irgendwelche Variablen für den Abstand haben. Ja, also Containerpolsterung. Lass uns das benutzen. Okay, das sieht ein bisschen besser aus. Und dann auch hier eine Lücke. Derzeit gibt es nur einen Abstand von zehn Pixeln. Also lass uns das auf 20 setzen. Und jetzt muss ich das nebeneinander gestapelt sehen , um zu sehen, ob es gut aussieht Also werde ich duplizieren. Okay. In Ordnung. Ich glaube, das gefällt mir. Also werde ich einfach den Platzhalter entfernen und dieses Duplikat verwenden. Und noch einmal, wenn wir technisch werden würden, sollten wir das hier vielleicht auch zu einer Komponente machen . Wenn wir also Änderungen vornehmen , gilt das für alle Komponenten hier. Lassen Sie mich das einfach jetzt machen. Ich werde Komponenten erstellen, das hier in unseren Komponentenbereich ziehen, das entfernen und dann eine Instanz dieser Komponente einfügen. Und inzwischen solltest du wissen, was uns das ermöglicht, ist, die Karte einmal hier in unseren Komponenten zu bearbeiten, und dann werden diese Änderungen auf alle Testimonial-Karten übertragen, okay? Also nenne ich diese Karte statt Testimonial One Testimonial Card Desktop Und dann werde ich das einfach zweimal duplizieren . Okay. Mir gefällt der Anblick, abgesehen davon, dass hier etwas mit diesem Ausschnitt passiert Ich bin mir sicher, warum es sich beim letzten überschneidet und bei den anderen nicht Die Karte selbst überlappt sich. Wir wollen also WIP den Inhalt umarmt, aber dann ein Minimum an Peitsche hinzufügen, damit es nicht zu Also vielleicht 300. Und dann können wir sie jetzt in der Mitte ausrichten. Wir könnten sie mit gleichem Abstand ausrichten, wenn wir wollten. Ich werde sie einfach so anordnen. Und ich denke nicht, dass das Bild so groß sein muss, also könnte ich es auf 150 reduzieren und das Testimonial vielleicht ganz oben platzieren Ich denke, all diese Testimonials sind wahrscheinlich zu viel Text, aber lassen Sie uns unseren Text noch nicht neu erfinden Also werden wir diesen ersetzen. Offensichtlich bearbeiten wir derzeit die Instanzen, weil wir nicht möchten, dass diese Änderung für alle unsere Komponenteninstanzen gilt . Dann müssen wir das nur noch in diese Instanz ziehen. Es ist nicht so, dass ich ein neues Bild hineinziehe, also aktualisiere ich hier einfach die Füllung und ersetze dann den Inhalt der letzten Instanz hier, Ava dann natürlich, du musst das Bild hier des dritten Profils ersetzen Okay, ich denke, das ist vorerst gut. Ich denke, wenn ich mehr Zeit damit verbringen würde, könnte ich das definitiv in Ordnung bringen. Ich denke, diese Vororte sind wahrscheinlich diese Testimonials wahrscheinlich zu lang sind oder möglicherweise ein bisschen anders präsentiert werden müssen , aber ich bin vorerst glücklich genug, und ich werde das Gleiche hier für Mobilgeräte tun Also werde ich eine mobile Version dieser Testimonial-Karte erstellen eine mobile Version dieser Also habe ich die Komponente einfach dupliziert und nenne sie mobil, richtig, ziehe sie weg, damit wir wissen, dass sie anders ist, und dann wähle ich die Option Um das einzufügen, löschen Sie die anderen, die Platzhalter, und duplizieren Sie das dann zweimal Wie Sie hier sehen können, ist es nicht in der Mitte zentriert, also werde ich es in der Mitte ausrichten Und mir ist einfach klar, dass wir keine Überschrift haben, also muss ich über dieser Testimonial-Zeile eine Überschrift platzieren Eigentlich kopiere ich einfach die Überschrift hier oben und platziere sie hier oben. Dann brauchen wir eine Lücke in unserem Bereich mit den Testimonials. Ich glaube, die Lücke, die ich zuvor genutzt habe, was war sie? Lassen Sie uns eine konsistente Lücke schaffen. Es waren 48, ich glaube, ich habe hier 48 verwendet, dann war ich perfekt. Okay. Dann das Gleiche hier drüben, wir kopieren das auf unser Handydesign, setzen es nach oben und ich komme mit diesen Karten eigentlich ziemlich gut zurecht. Also werde ich den Inhalt einfach noch einmal ersetzen. Okay. Also, wie Sie hier sehen können, sieht das ziemlich gut ausgefüllt aus. Es enthält tatsächlichen Inhalt, sodass Sie sehen können, wie es auf der endgültigen Website aussehen wird. Das waren also die beiden Abschnitte der Homepage, die ich ansprechen wollte. Der Abschnitt mit den Verkaufsargumenten befasst sich auch mit der Produktvorlage, sodass auch die Produktvorlage behandelt wird. Aber schließlich wollte ich das, was im Paket enthalten ist, behandeln und reparieren . Ich möchte nicht, dass das wie eine Produktkarte aussieht, also kann ich die Instanz hier tatsächlich trennen, sodass es sich nicht um eine Instanz der Produktkarte Dann werde ich die anderen hier entfernen und einfach duplizieren, was ich hier erstelle. Ich möchte nicht, dass es eine Produktkarte ist. Es kann ein bisschen ähnlich sein. Ich werde die Schnellanzeige entfernen. Ich werde den Produkttitel Premium-Marcha-Pulver eintragen und diesen natürlich durch das Bild ersetzen natürlich durch das Bild Ich werde das entfernen. Füge eine Bildfüllung hinzu. Wir möchten zu unseren Produktfotos zurückkehren. Unsere Hauptprodukte, fügen Sie das Machopulver hinzu. Und statt Bewertungen und all dem möchte ich eine Beschreibung des Produkts angeben Also ich denke, ich habe es vielleicht in der Webkopie hier. Lassen Sie uns eigentlich ein paar Punktpunkte machen. Also werde ich ein neues erstellen, lass uns das einfach duplizieren, dann wollen wir hier natürlich nicht fett werden. Sieht so aus, als hätte ich hier versehentlich die AI-Eingabeaufforderung ausgelöst . Da haben wir's. Also möchte ich das zu einer eigenen Rahmenauswahl zusammenfassen . Ich möchte ein automatisches Layout hinzufügen. Ich möchte es in der Mitte ausrichten, damit dieser Titel größer wird. Also werde ich diesen Stil anwenden. Braucht offensichtlich eine gewisse Lücke. Ich füge eine Lücke von 16 Pixeln hinzu. Die Höhen werden nicht festgelegt. Es wird ein riesiger Inhalt sein und ich werde diesen Rahmen umbenennen, was in der Karte enthalten ist Machen Sie eine größere Überschrift, große Überschrift, zentrieren Sie alles im Container Und hier gibt es natürlich viele persönliche Vorlieben, Design, wie auch immer Sie gestalten möchten. Und ich mache das offensichtlich schnell durch, weil, weißt du, du es vielleicht auf eine ganz andere Art gestalten möchtest . Aber nur um diese Lektion zu beenden und das Ganze ein bisschen besser an das anzupassen, was ich für die eigentliche Website vorgestellt habe, mir für die eigentliche Website vorgestellt habe, werde ich diese automatisch anordnen, sie mit Leerzeichen dazwischen biegen und dann hier in die anderen Produkte umbenennen, die, wenn wir in der Produktliste nachschauen, hatten wir den eleganten Marcher-Schneebesen. Lassen Sie uns jeden Produkttitel zu zwei Zeilen machen , sodass sie übereinstimmen, und dann eine Zeilenmitte als Text angeben Natürlich müssen wir das Bild ersetzen, und dann wird das letzte Bild die Schale sein, und dann müssen wir uns den Namen dieser Schale schnappen, die Premium-Marcher-Keramikschale Und hier habe ich noch keinen Inhalt, also werde ich das vorerst als Platzhalterinhalt belassen und das dann zwischen den Videos bereinigen, bevor wir bereit sind, den Code zu generieren Es gibt etwas , das den Bereich hier wirklich groß macht , also lass mich einfach versuchen herauszufinden, was das ist Ich glaube, wir haben hier eine feste Höhe für den Container. Wenn ich das auf „Inhalt umarmen“ umstelle, nein. Lass es mich einfach manuell aufrufen, und ich denke, das ist gut genug für unsere Bundles-Seite Auch hier könnte ich auf viele weitere Korrekturen und Updates für all diese verschiedenen Vorlagen eingehen , aber das würde einen wirklich langen Kurs bedeuten, und vieles davon hängt von den persönlichen Vorlieben von Ihnen als Designer ab In diesem Video wollte ich dir also nur zeigen, wie ich bestimmte Abschnitte bereinigen würde. Offensichtlich muss ich die mobile Version davon machen. Ich mache das zwischen den Videos. Aber ich zeige Ihnen, wie Sie Ihre Wireframes erstellen können, Sie können sie mit Ihrem eigenen Designsystem neu gestalten, und danach können wir weitermachen Und führen Sie unseren normalen Figma-Designprozess manuell , jetzt, wo wir die Grundlagen für uns geschaffen haben Ich denke, du wirst mir zustimmen , dass wir viel Zeit sparen, wenn wir die Wireframes im Voraus einrichten und Claude mit der Implementierung unseres Designsystems beauftragen Claude mit der Implementierung unseres Designsystems beauftragen. Dadurch haben wir mehr Zeit, uns auf die wichtigen Dinge zu konzentrieren, auf die kleinen kleineren Updates, über die wir in diesem und dem vorherigen Video gesprochen haben Nach diesem Video werde ich diese Designs weiter bereinigen , sie auf der Live-Website genau so aussehen lassen, aussehen lassen wie ich sie haben möchte, und dann werden wir diese High-Fidelity-Figma-Designs sowie das Datenblatt verwenden, das wir zuvor erstellt haben. Genau hier, um fortzufahren und den Code für unsere Shopify-Storefront zu generieren 8. Generierung von Themencode: Okay, also wie zwischen den Videos erwähnt , wollte ich das Figma-Design aufräumen wenn wir bis zur Produktseite, zur Bundle-Produktseite, zur Sammlungsseite gehen Bundle-Produktseite, zur Sammlungsseite . Sie werden sehen, dass jetzt alles fertig ist Kontaktiere uns. Daran musste ich keine Änderungen vornehmen. Ich habe hier Bilder und aktuelle Informationen für die Warenkorbseite eingegeben. Warenkorbseite ist nicht allzu wichtig da nicht viele Leute darauf zugreifen werden, da wir eine Warenkorbschublade haben. Die Suchseite auf Desktop und Handy und dann haben wir hier unsere Blogseiten, die ich nicht ausgefüllt habe. Ich werde in dieser Klasse keinen Blog implementieren, also werde ich einfach all diese Vorlagen komplett löschen . Denken Sie daran, dass ich im Planungsvideo erwähnt habe , dass Sie diese einfach aus Ihrem Plan löschen können , wenn Ihre Shopify-Website überhaupt keinen Blog Ich wollte sie nur einbeziehen, um dir zu zeigen, wie sie sich als Wireframe durchsetzen Aber ich werde diese Wireframes einfach komplett löschen weil wir nicht wirklich eine Blog-Vorlage benötigen Und du kannst hier unsere Schubladen sehen. Also die Einkaufswagenschublade auf dem Desktop, die im Grunde das gleiche Design wie auf dem Handy hat, und unsere Navigationsschublade hier. Wir haben jetzt im Grunde unsere Figma-Datei erstellt . Sie enthält alle Vorlagen , die wir zum Erstellen benötigen. Wie Sie hier aufgelistet sehen können. Alles ist gut strukturiert in Abschnitte mit automatischem Layout und Komponenten mit Instanzen, genau wie wir es in der Figma-Webdesign-Klasse getan haben Und genau wie in der Figma-Webdesign-Klasse werden wir jetzt den Code für dieses Shuberfi-Thema generieren den Code für dieses Shuberfi-Thema Im Gegensatz zur Figma-Webdesign-Klasse , die plattformunabhängig war, basierte sie nicht auf Shopify oder so Es basierte nur auf HTML und CSS. In dieser Situation werden wir tatsächlich ein Shopify-Theme erstellen, bei dem es sich um einen sehr spezifischen Satz von Codedateien handelt , die nur in Shopify-Shops ausgeführt Deshalb haben wir die Planung am Anfang mit dem Planer durchgesehen am Anfang mit Das alles wurde speziell für Shopify entwickelt, und dann wurden diese Wireframes speziell auf der Grundlage dieser Planzuweisung auf bestimmte Vorlagen innerhalb eines Themes eingerichtet , wobei das Theme das System ist, das die Storefront darstellt Also, zusammen mit diesen fertigen High-Fidelity-Mockups und dem Datenblatt, das, wenn wir zu unserem Schaufensterplaner zurückkehren und neben unserem Webdesign-Plan schauen, können wir hier unser Datenblatt sehen, wir haben genug Informationen, um einer KI wie Claude die Anweisungen zu geben , dieses Theme zu erstellen. Bevor wir das tun, wollen wir nur überprüfen welche möglichen Fragen während des Builds auftauchen könnten Sie können hier sehen, dass ich diesen orangefarbenen Teil oben im Datenblatt habe Dies wird Dinge abdecken, die wir in unserem Plan nicht wirklich abgedeckt Es fragt also nach dem Abschnitt „ Ausgewählte Sammlung“, ist der Inhalt des Abschnitts, Quelle, Themendaten, Speicherdaten oder Mischung. Es sieht also so aus, als hätten wir die Inhaltsquelle nicht ausgefüllt. Also gehe ich zurück zum Projekt und stelle sicher, dass dieser Teil spezifisch ist. Also werde ich in andere Abschnitte gehen, zur ausgewählten Sammlung gehen und Informationen bearbeiten. Und Sie können hier sehen, dass ich die Inhaltsquelle nicht festgelegt habe. Ich würde also sagen, eine Mischung aus Themendaten und Speicherdaten, weil die Produkte aus der Kollektion stammen werden, aber die spezifische Kollektion, die ausgewählt wird, wird in den Abschnittseinstellungen ausgewählt. Also speichere ich diese Informationen, gehe zurück zur Erstellung des Webdesignplans und kopiere dann die Anweisungen zum Erstellen des Themes. Bevor ich das mache, möchte ich es eigentlich umbenennen und Ihnen Zugriff auf diese Datei geben. Nehmen wir an, das Macha Skillshare-Klassenprojekt seance falls Sie darauf zugreifen möchten Also klicke ich hier auf Teilen und dann kopiere ich den Link und versuche, ihn irgendwo in der Klasse einzufügen Im schlimmsten Fall, wenn ich nirgends gepostet habe, erstelle ich hier einfach eine Notiz, kann hier eine Pause machen, einen Screenshot machen und dann den Textinhalt hier abrufen . Okay? Okay, also zurück zu hier, ich werde die Anweisungen zum Erstellen des Themes erneut kopieren und ein neues Fenster im VS-Code öffnen Sie können dies in dem Code-Editor oder der IDE tun, die Sie bevorzugen Für mich ist es Visual Studio-Code, und ich verwende Visual Studio-Code in all meinen Klassen Also werde ich ein neues Fenster in Visual Studio Code erstellen . Eigentlich muss ich es auf einen bestimmten Ordner verweisen. Also öffne ich hier mein Finder-Fenster, gehe hier zurück zu meinem Desktop-Ordner und erstelle einen Ordner namens Custom Theme Okay. Dann gehe ich hierher und klicke auf diese Schaltfläche namens Explorer. Und wie hier steht, habe ich noch keinen Ordner geöffnet, also werde ich diesen Ordner öffnen. Natürlich ist dieser Ordner leer, aber jetzt gilt alles, was wir in diesem Ordner tun , für diesen Ordner. Okay? Also werde ich hier drüben klicken , um eine Claude-Code-Sitzung zu öffnen. Und dann füge ich nur noch die Figma-Anweisungen ein und dann muss ich auch das Datenblatt anhängen. Also gehe ich hier runter und lade es als Markdown herunter. Markdown ist für KIs einfacher zu lesen. Word-Dokumente sind eher für Menschen. Also werde ich das Suns Marcher-Datenblatt in denselben Ordner herunterladen Marcher-Datenblatt in denselben Ordner Dann drücke ich darauf, um das von meinem Computer hochzuladen Wählen Sie das SNS Marcher-Datenblatt aus, und das sollte ausreichen, und das sollte ausreichen Erstellung des Themes fortzufahren Jetzt kann ich hier tatsächlich lesen. Es gibt ein paar Dinge, die ich erwähnen muss. Bevor Sie beginnen, muss dies zuerst getan werden. Es steht in der Eingabeaufforderung, also werden Sie trotzdem aufgefordert, dies zu tun Sie benötigen die Shopify-CLI, um die Theme-Dateien in Ihren Shopify-Shop zu übertragen Ich denke, Sie können sich dafür entscheiden, einfach das Theme zu erstellen, darauf zu vertrauen, dass es funktioniert, es zu komprimieren und es dann hochzuladen aber ich würde Ihnen empfehlen, dies mit der CLI zu tun Wenn Sie also mit der Shopify-CLI nicht vertraut sind, steht CLI einfach für Command Line Interface Sie können einfach nach Shopify CLI bei Google suchen. Es sollte Sie zu einer Seite wie dieser weiterleiten, und dann können Sie sie einfach installieren, falls Sie sie noch nicht installiert Okay? Die anderen Voraussetzungen, die Sie benötigen, sind ein Shopify MCP-Connector Diese Aufforderung sollte Iclaud Sie auffordern , dies einzurichten und eine Verbindung zu einem Geschäft herzustellen Natürlich benötigen Sie ein Geschäft, mit dem Sie sich verbinden können. Ich werde dieses Theme direkt in demselben Shop bereitstellen wie in der vorherigen Klasse, Sansmchatmshofy Wie du hier sehen kannst, haben wir das Horizon-Theme und wir haben das Prestige-Theme getestet, das ist das Theme, auf dem wir unsere Storefront in der vorherigen Klasse aufgebaut haben . uns also mit diesem Shop verbinden, wird er das Theme, das wir gerade erstellen, zusammen mit den Theme-Entwürfen veröffentlichen wir gerade erstellen, zusammen mit den Theme-Entwürfen Okay, ich denke, das sind alle Voraussetzungen, aber noch einmal, wenn wir diese Aufforderung ausführen, sollte Claude uns sagen, was wir brauchen, falls uns sowieso etwas fehlt. Okay? Also zoome ich rein und drücke dann auf Senden. Währenddessen können wir uns unser Design ansehen und uns einige der dynamischen Inhalte ansehen , die wir in unserem bestehenden Shopper Fire Store benötigen werden in unserem bestehenden Shopper Fire Store benötigen Zum Beispiel die Menüs und die Produkte, okay? Also, hier oben in unserer Kopfzeile können Sie sehen, dass wir diese Menüelemente haben, und sie haben jeweils einen Chevron, was bedeutet, dass, wenn es Unterelemente gibt, Mauszeiger darüber bewegen, die Unterelemente geöffnet werden Derzeit haben wir ein sehr einfaches Menü in unserem Shop. Wenn ich also in den Inhaltsbereich des Amen gehe , wirst du das Hauptmenü sehen, wirst du das Hauptmenü sehen, es gibt nur drei Links ohne Verschachtelung Für ein Geschäft mit nur vier Produkten macht das Sinn, aber in der realen Welt haben Sie vielleicht 100 Produkte, also würden Sie möglicherweise Menüs haben wollen, die zwei oder drei Ebenen tief verschachtelt sind zwei oder drei Ebenen tief verschachtelt und mehr Menüelemente enthalten Das Gleiche gilt für die Fußzeile. Wenn wir also hier nach unten scrollen, können Sie sehen, dass es all diese Menüelemente Dies wird aus demselben Abschnitt im Adminbereich abgerufen. Sie werden also sehen, wenn wir das veröffentlichen, dass diese leer sind und wir sie mit den richtigen Menülinks verknüpfen müssen . Es könnte also sein, dass es in diesem Sinne nicht genau wie das Design aussieht , mit den Platzhalter-Menüelementen hier. Dann bezieht sich natürlich jeder von ihnen auf ein anderes Produkt Also müsste jedes dieser Produkte als Produkt konzipiert werden. Aber ich glaube, das haben wir schon in der vorherigen Klasse gemacht. Wenn ich also hier zu meinem Produktbereich gehe, können Sie sehen, dass wir die vier Produkte bereits geladen haben . Und wenn Sie den letzten Kurs nicht besucht haben und diesen noch nicht geladen haben, ist das völlig in Ordnung. Wenn wir zum Projektordner gehen, bin ich mir ziemlich sicher, dass ich in der Produktliste geblieben bin. Sie können also einfach oben auf der Produktseite im Amin auf Import klicken und dann eine CSV-Datei im Shoo Five-Format importieren, und schon wird genau dieselbe Produktliste Okay. Auch die Sammlungen. Also ich denke ziemlich einfach, aber ich habe ein Geschäft oder eine Sammlung. macht nicht wirklich Sinn, noch mehr Kollektionen als diese zu haben noch mehr Kollektionen als diese , wenn man nur vier Produkte im Laden hat. Aber wenn Sie viele Produkte in Ihrem Geschäft haben, möchten Sie diese natürlich in Kollektionen zusammenfassen. Ich glaube also, das ist der Großteil der dynamischen Daten. Solche Sachen werden aus den Abschnittseinstellungen kommen. Also müssen wir das nur einrichten, oder das Theme wird diese Standardeinstellungen enthalten, sodass es sofort einsatzbereit Offensichtlich stammt alles in diesem Abschnitt vom Produktobjekt selbst Was enthalten ist , muss sich nirgends auf der Website wirklich ändern. Dies bezieht sich offensichtlich auf eine bestimmte Sammlung, und die Suche bezieht sich offensichtlich auf Produkte oder andere Ressourcen Ihrer Website, basierend auf Ihrem Suchbegriff Okay? Lassen Sie mich jetzt auf unsere Code-Instanz mit Klauen zurückblicken und sehen, wo sie sich befindet Und es fragt uns, ob wir mit einer MCP-Abfrage oder -Aktion fortfahren möchten mit einer MCP-Abfrage oder -Aktion fortfahren Ich kann mich nicht erinnern , wie es heißt. Und natürlich wollen wir ja sagen. Wir müssen das Shopify MCP verwenden , um eine Verbindung zu unserem Also warten wir einfach darauf, dass es zurückkommt und uns auffordert, eine Verbindung herzustellen Okay, also los geht's. Was brauchen wir, bevor wir anfangen? Es benötigt die genaue Store-Domain. Also hole ich mir das einfach für unser Beispiel hier. Es wird Sans marcher.mishabify.com sein. Also werde ich Nummer eins sagen. Nummer zwei, Shopify CLI-Login. Also klicke ich, um ein neues Terminal zu öffnen , und führe diesen Befehl hier aus, deinen Shop durch Sans Macha zu ersetzen Natürlich sollten Sie hier Ihr eigenes Geschäft einrichten. Okay, wir haben uns hier einen Fehler ausgedacht. Ich denke, das ist ein bisschen veraltet. So konnte man sich früher in ein Geschäft einloggen. Stattdessen gehe ich einfach zu Shopify Theme Dev. Store entspricht und gib dann Sans Macha dot my shoafi.com Und das öffnet ein neues Browserfenster, in dem ich mich anmelden Browserfenster Wir werden diesen Code einfach mit dem abgleichen was er in unserem Terminal anzeigt. Ja. Bestätigen Sie und melden Sie sich an . Es wird angezeigt, dass wir erfolgreich verbunden sind , sodass wir wieder hierher zurückkehren können Ordnung, also sage ich Nummer zwei, ich habe mich erfolgreich authentifiziert, und hier unten sage ich Ja, um Es wird nach dem Shop-Passwort gefragt. Okay, wir sind also noch nicht ganz fertig. Das Shop-Passwort finden Sie im Vertriebskanal des Onlineshops unter Einstellungen. Ich habe das Passwort gefälscht, also gebe ich es einfach ein. Falsch. Und das sollte ausreichen, um tatsächlich eine Verbindung zum Geschäft herzustellen. Okay, es heißt Nein, weil ich denselben Befehl bereits mit einem anderen Store ausführe. Das ist ziemlich typisch für mich als Shopify-Entwickler Ich arbeite in einer Vielzahl von Geschäften. Ich habe das gerade geklärt, also führe ich das nochmal durch. Ja, ich möchte fortfahren. Okay. Und jetzt scheint es funktioniert zu haben, aber es versucht, dieses Thema tatsächlich hochzuladen, und da ist nichts. Also ja, es wird noch nicht wirklich funktionieren. Dann ist Nummer drei der Figma-Frame-Link. Also werde ich den Link , den ich zuvor kopiert habe, auch in diesen Claude-Chat kopieren Also der Link zum Teilen genau hier. Dann Shopify MCP Connector, ich werde fragen, ob Claude Code selbst mich verbinden kann Bitte verbinde mich. In Ordnung. Und das ist das Gute an KI: Wenn du zu irgendeinem Zeitpunkt blockiert bist, wird sie dir sagen, dass du blockiert bist, und dir sagen, was du brauchst, um die Blockierung aufzuheben Folgen Sie also einfach dem, was der KI-Agent Ihnen sagt, und es sollte Ihnen gut gehen Ansonsten können Sie wie immer den Diskussionsbereich der Skillshare-Klasse verwenden den Diskussionsbereich der Skillshare-Klasse Ich werde das ein wenig minimieren damit wir mehr von dem sehen können, was hier oben passiert Und ich kann anhand der Logs sehen, die mir gerade zeigen, dass es bereits anfängt, die Figma zu lesen, herauszufinden, was darin enthalten ist, und bald sollte es mit dem Build beginnen Wenn ich auf diese Schaltfläche klicke, um mir den Explorer anzusehen, kannst du sehen, dass noch keine Dateien erstellt wurden, aber das wird bald passieren, da wir dieses Theme mithilfe dieser Master-Eingabeaufforderung mit einem Datenblatt erstellen . Okay, ich werde also nach den Frames für den Blog und die Artikelvorlage gefragt , die ich gerade gelöscht Es fragt mich also, ob es eine Standardkonvention erstellen oder vorerst einfach überspringen soll . Ich werde vorerst auf Skip klicken. Ordnung, nach weiteren 15 Minuten ist das, was es getan hat, jetzt erledigt Und wie Sie hier sehen können, wurden alle Dateien in den verschiedenen Ordnern, aus in den verschiedenen Ordnern denen ein Shopify-Theme besteht Okay? Scrollen wir also ein bisschen nach oben und lesen, womit es zurückgekommen ist. Es heißt, ich habe jetzt alle acht Vorlagen erstellt und validiert , die Figma-Abdeckung bieten Hier ist ein vollständiger Statusbericht. Anstatt das Zeile für Zeile vorzulesen, werde ich nur die wichtigsten Punkte behandeln. Es hat also verstanden, dass bestimmte Abschnitte in jeder Vorlage gemeinsam genutzt werden. Also hat es diese erstellt. Es hat die verschiedenen Vorlagen erstellt. Es versteht sich, dass es eine alternative Vorlage gibt. Für die Kontaktseite und für das Produktpaket. Wie Sie hier sehen können, erwarte ich nicht, dass Sie den Shuba Fi-Theme-Code vollständig verstehen, aber wenn Sie das tun, können Sie hier allein anhand des Dateinamens sehen, dass dies definitiv eine alternative Vorlage ist definitiv eine alternative Vorlage allein anhand des Dateinamens die Vorlagen für Blogartikel übersprungen, weil sie aus der Figma entfernt wurden, dann bestimmte Annahmen, die sie beim Variantenwechsel getroffen haben, zum Beispiel wurde dafür keine Figma-Benutzeroberfläche angezeigt, also wurde eine minimale niedrige Designauswahl hinzugefügt, nur für also wurde eine minimale niedrige Designauswahl hinzugefügt den Fall, dass eine Variante durchkommt. Für das schnelle Hinzufügen zum Einkaufswagen wurde daraus abgeleitet, dass es direkt in den Einkaufswagen und nicht in eine Einkaufswagenschublade gehen sollte . Das müssen wir möglicherweise ändern. Das werden wir uns ansehen . Sammlung sortieren, es wird mit Ajax nach der Sammlungsseite sortiert , was im Grunde bedeutet, dass die Seite nicht neu Es hat keine Filterfacetten erfunden. Auch hier haben wir dem Planer am Anfang nicht gesagt dem Planer am Anfang , dass wir Sammlungsfilter benötigen, also hat er das einfach nicht berücksichtigt Auf der Warenkorbseite wird Ajax verwendet, um die Menge zu ändern , wenn wir die Menge auf der Warenkorbseite aktualisieren Und die Suchseite ist nur auf Produkte beschränkt. Der Bereich Fixtured Collection enthält noch keine Live-Daten. Der Store hatte bereits zwei Themes, Horizon, und da steht, Entwicklung hier, das muss das bedeuten , das gerade mit der CLI läuft Es hat nichts gepusht. Sag mir, ob ich zu diesem vorhandenen Dev-Theme wechseln oder ein neues erstellen soll. Technisch gesehen existiert dieses Entwicklungsthema nur in der CLI. Sobald wir die CLI ausschalten , existiert sie nicht mehr. Also müssen wir es bitten, auf ein neues Thema umzusteigen. Dann ist immer noch eine manuelle visuelle Qualitätssicherung erforderlich, was völlig in Ordnung ist. Okay? Also werde ich sagen, für das Bereitstellungsziel, das Theme bitte in einem brandneuen Theme bereit. Bitte stellen Sie den Code für ein brandneues Theme bereit. Dieses, das wir hier in Shopify Theme Dev ausführen hier in Shopify Theme Dev ist immer noch das, das bereits erwähnt wurde , dieses Entwicklungsthema Wenn Sie also mit der CLI vertraut sind, können wir ein Entwicklungsdesign ausführen, um Codeänderungen zu testen , ohne diese tatsächlich in den Store zu übertragen Während es also das Theme in den Store bringt, schauen wir uns das an. Wir können also normalerweise jedes Mal dieselbe Adresse finden Wenn wir das Terminal aufrufen, können wir sehen, um welche es sich handelt. Also ist es normalerweise diese Adresse. Also kopiere ich die Adresse, füge sie hier ein und es sieht so aus, als hätten wir einen Vier-oh-Vier-Fehler. Ich werde einfach unsere vorherige Sitzung beenden, indem ich Strg C drücke und sie dann neu starte Wir haben es zuerst gestartet, es gab überhaupt keine Themendateien, also ist das wahrscheinlich das Problem Und jetzt können Sie sehen, dass es durchgekommen ist. Wie Sie hier sehen können, ist einiges davon gut, manches nicht gut. Unser grundlegendes Framework ist da, aber es gibt einige Dinge, die wir korrigieren müssen. Nämlich, wir haben hier diesen seltsamen Container. Ich bin mir nicht sicher, was genau vor sich geht, aber es scheint, dass die Seite nicht bis zum linken und rechten Bildschirmrand reicht. Wir können Figma zwar verwenden, um unser erstes Thema zu erstellen, und wenn wir auf eine Produktseite gehen , wird dies einfacher, wenn wir den Online-Shop-Editor aufrufen Also werde ich mir den zweiten Link hier ansehen. Auf diese Weise können wir zu den verschiedenen Vorlagen navigieren und auch fehlende Themendaten hinzufügen. Wenn wir hier zur Produktseite gehen, sollten wir das sehen können, und das ist eine sehr kleine Bildschirmgröße. Ich werde die Ansicht etwas verkleinern, und Sie werden sehen, dass die erforderlichen Abschnitte erstellt wurden, aber hier gibt es noch einiges zu bereinigen Wie Sie sehen können, finden Sie hier unsere kleinen Produktkarten. Bevor wir das bereinigen, werde ich die fehlenden Daten hinzufügen . Für die vorgestellte Sammlung hat es also richtig verstanden, dass wir eine Sammlung hinzufügen wollen, aber wir müssen auswählen, um welche Sammlung es sich handelt, okay? Nachdem wir das getan haben, werden die Informationen aufgefüllt. Ich werde dafür auf Speichern klicken. Und im nächsten Video werde ich Sie durch die Bereinigung der Ausgabe führen , die bei der KI-Codegenerierung entstanden ist . 9. Bereinigen des Themencodes: Okay, im letzten Video haben wir den Shopify-Theme-Code für unsere Storefront generiert Aber wie wir gesehen haben, ist es ein bisschen kaputt und ein bisschen unvollständig rübergekommen kaputt und ein bisschen unvollständig rübergekommen werden wir also einige Zeit damit verbringen In dieser Lektion die Ergebnisse der KI so gut wie möglich zu korrigieren. Wenn Sie sich aus dem Figma-Webdesign-Kurs erinnern, waren wir in der Lage, mit der KI-Codegenerierung einen fairen Weg zu finden, vorausgesetzt, die Figma-Dateien wurden richtig eingerichtet , wir mussten dabei noch einige kleine Verbesserungen vornehmen, und das ist nicht anders und das ist Tatsächlich ist es wahrscheinlich etwas schwieriger, da es auf einer Plattform basiert, auf der viele Daten von verschiedenen Orten abgerufen werden Zum Beispiel bezieht sich der Bereich „Ausgewählte Produkte“ auf der Startseite auf die Daten der einzelnen Bereiche. Und Sie werden feststellen, dass hier die Produktliste fehlt. Das ist eine einfache Lösung. Manchmal fehlen Daten, die wir tatsächlich in das Theme einfügen müssen. Eines der Probleme, mit denen wir konfrontiert werden , ist, dass dieses Thema , das wir uns hier ansehen , ein Entwicklungsthema ist, das verschwinden wird , sobald wir die CLI ausschalten, ebenso wie dieser Online-Shop-Editor hier. Also werde ich das jetzt nicht verwenden , während ich das Theme aktualisiere, und stattdessen das Theme in dem Shop ansehen , den es erstellt hat. Und Macha Um die Änderungen vorzunehmen, werden wir Claude auffordern, aber wir müssen Claude am Ende jeder Sitzung bitten , die Änderungen an diesem Thema in den Store zu übertragen die Änderungen an diesem Thema in den Store zu , damit wir sie tatsächlich sehen können Und das ist ein kleines Problem mit Shopify. Die Daten des Themes, in dem wir hier im Online-Shop-Editor bearbeiten , und der Code befinden sich beide in denselben Ordnern Aber wenn wir die Daten hier bearbeiten, kehren sie nicht automatisch zu dieser Themenversion auf unserem lokalen Computer zurück , okay? Für den Moment mache ich das im Store, und dann werde ich eine Liste mit Änderungen zusammenstellen, die ich korrigieren möchte, schicke sie und dann werde ich eine Liste mit Änderungen zusammenstellen, die ich an Claude, und dann kann Claude diese Änderungen an das Theme übertragen Okay? Also gehe ich hier zum Abschnitt mit den ausgewählten Sammlungen und lade eine Sammlung hoch. Wie Sie hier sehen können, wurde die Generierung des Theme-Codes erfolgreich in den Anpassungseinstellungen hinzugefügt. Wie Sie hier sehen können, können wir den Titel anpassen. Wir könnten also sagen, dass es sich um eine Sonderkollektion handelt, oder wir können es bei unserer Produktpalette belassen. Und wenn wir andere Kollektionen in unserem Geschäft hätten, könnten wir auch andere Kollektionen zeigen, okay? Das kommt richtig durch. Wie Sie hier sehen können, haben wir Verkaufsargumente. Ich werde die Ansicht hier ein wenig verkleinern, sodass wir links die Verkaufsargumente und dann die Details zu den einzelnen Blöcken sehen können . Also können wir das ändern. Wir können das Symbol aktualisieren. Es sieht so aus, als ob das Symbol gezogen und direkt zum Thema hinzugefügt wurde. Aber im Idealfall wollen wir das nicht tun. Ich lasse das vorerst so wie es ist. Es sieht so aus, als könnten wir hier das Symbol in etwas anderes ändern , wie wir hier sehen können. Aber wenn wir das nicht hinzufügen , werden immer noch standardmäßig diese Bilder verwendet. Und wenn wir hier runter gehen, ist das auch so, also kann ich das Bild hier ändern. Dieser Shop hat bereits Bilder aus der vorherigen Klasse, deshalb siehst du sie hier in der Bibliothek, aber du kannst deine Bilder jederzeit in diesen Bereich hochladen. Eigentlich werde ich das als mein erstes Feedback geben. Wenn wir in den Assets-Ordner gehen, sollten wir alle Bilder sehen , die in das Thema aufgenommen wurden. Im Idealfall möchten wir keine Bilder im Theme selbst installiert haben . Also werde ich hier einfach eine Feedback-Aufforderung erstellen. Erstens, speichere keine Bilder im Theme. Alle Bilder sollten aus Speicherdaten oder aus Themendaten stammen . Okay, das ist mein erstes Feedback, denn die Bilder im Theme zu haben die Bilder im Theme bedeutet, dass wir ein umfangreicheres Theme erstellen Wir wollen nur den Code hier haben und wir wollen, dass die Fotos tatsächlich in den Dateibereich unseres Shabafi Amin hochgeladen den Dateibereich unseres Shabafi Okay, das ist das Erste, was ich hier in der Kopfzeile ändern werde. Sie werden sehen, dass es auf das Hauptmenü verweist sind also eigentlich die Menülinks, die wir in unserer Linkliste für das Hauptmenü haben. Wie Sie hier sehen können, gelangen wir, wenn ich auf Bearbeiten klicke, zum Menübereich des Adminbereichs, den wir bearbeiten können. Ich glaube also, dass diese Links korrekt sein sollten , wenn ich jetzt einfach darauf zurückkomme, basierend auf der Arbeit, die wir beim letzten Mal gemacht haben. Ja, also diese Links sollten funktionieren. Das Logo zeigt wieder ein Logo, ohne dass wir etwas darauf hochladen Dieses erste Feedback sollte also auch das beheben. Und dann ist das wirklich eklatante Ding, wenn ich nur hier hingehe, um eine Vorschau des Themes zu sehen, sage ich einfach, dass das gesamte Layout links und rechts eingerückt ist links und rechts eingerückt Versuche hier so anschaulich wie möglich zu sein. Ich bin Entwickler, also kann ich mir den Code quasi ansehen und etwas aussagekräftiger sein Wir können wahrscheinlich herausfinden, was dieser Einzug ist, indem wir uns den Code hier ansehen Wir haben hier also dieses seltsame Content-Raster-System mit Inhaltsrändern im Einsatz Das ist normalerweise nicht so, wie ich es einrichten würde , aber Sie können hier sehen, ich glaube, dass sich der Hauptteil in einer Art Raster befindet. Aber lass uns einfach Claude bitten, es zu reparieren. Das gesamte Layout ist links und rechts eingerückt . Der linke Rand jedes Abschnitts stimmt nicht mit dem linken Rand des Viewports überein und umgekehrt auf der Okay, wir wollen Hova-Status auf den Buttons haben. Ich würde also sagen, implementieren Sie Hova-Zustände auf allen Schaltflächen und Links Also ja, die Website fühlt sich an, als ob sie nicht sehr interaktiv ist, weil nichts passiert, wenn wir mit der Maus über Schaltflächen und Links Und hier drüben ist die Lücke zwischen den Symbolen auf der rechten Seite der Kopfzeile inkonsistent Die Lücke zwischen den Symbolen auf der rechten Seite der Kopfzeile ist inkonsistent Ich bin mir nicht sicher, was das verursacht hat. Und dann sollte diese pillenförmige Kopfzeile, die pillenförmige Kopfzeile auf der Homepage über dem ersten Abschnitt positioniert werden . Dann kenne ich mich mit CSS aus, ich werde sagen, klebrig oder absolut positionieren so detailliert du es hier geben kannst , ich bin vielleicht nicht so viel, wie ich liefern kann, aber gib einfach dein bestes. Ich glaube, für das FOD fehlen uns die Links hier. Also für Instagram füge ich einfach instagram.com hinzu, weil das keine echte Marke ist, aber es wird das Symbol nicht so zeigen, wie es aussieht Es sei denn, wir fügen einen Link ein. Also sage ich einfach instagram.com. Ja, und wie Sie sehen können, entsteht dadurch der Link, facebook.com und dann TikTok, was meiner Meinung nach einfach tiktok.com ist Und wenn ich dann diese Links einfüge, erscheinen die Symbole Nun, was den Newsletter-Bereich angeht, ich bin mir nicht sicher, warum dort so viel Platz ist. Lassen Sie mich einen Blick auf die Figma-Designs werfen oder wie sie aussehen sollen Okay, ich sage also, es gibt eine große Lücke in der Fußzeile zwischen dem Bleiben auf dem Laufenden und der E-Mail-Eingabe In Ordnung, wie geht es weiter? Das Logo ist in der Fußzeile aufgezogen. Das Logo ist in der Fußzeile horizontal gestreckt. Okay, das ist also nur die Homepage allein. Wenn ich auf die Produktseite gehe, wirst du hier sehen, ehrlich gesagt, gar nicht so schlimm. Aber auch hier sind die Abschnitte in der Kollektion für die verwandten Produkte irgendwie eingerückt, ich lade sie einfach ein, aber sie werden links sein Ich sage also, wenn es drei Artikel oder weniger im Bereich „Ausgewählte Kollektionen“ gibt , die Produktkarten mittig Wenn Sie mit dynamischen Daten arbeiten, ist es gut, hier Bedingungen zu haben Nur weil es jetzt drei Elemente sind, heißt das nicht, dass es in Zukunft drei Elemente sein werden Sie möchten also nicht, dass es kaputt geht , wenn neue Artikel hinzugefügt werden. Und wie ich bereits erwähnt habe, wollte ich die Schaltfläche „Schnelles Hinzufügen“. Wenn ich also hier aktualisiere, sollte die Schaltfläche „ Schnelles Hinzufügen“ auf den Produktkarten nur angezeigt werden, wenn der Mauszeiger über Schaltfläche „ Schnelles Hinzufügen“ auf die Produktkarte bewegt wird, und die Breite der Schaltfläche sollte 100% 100% betragen , was bedeutet, dass sie 100% des verfügbaren Platzes beansprucht Bewertungen, die wir ohne eine spezielle Bewertungs-App nicht implementieren können , also müssten wir zuerst eine Bewertungs-App einfügen Lassen Sie uns nun sehen, was passiert, wenn wir auf unsere Kontoschaltfläche klicken. Okay. Ja, das scheint zu funktionieren. Die Suche führt uns auf eine neue Seite. Ich möchte idealerweise, dass die Suche ein Fenster unter der Kopfzeile öffnet. Wenn Sie also auf das Suchsymbol in der Kopfzeile klicken, sollte eine Sucheingabe direkt unter der Kopfzeile geöffnet werden , um den Suchbegriff zu erfassen. Und ja, in Ihrer Situation könnte das Feedback natürlich anders sein. Das würde ich erwarten. Außerdem scheint es so, als ob sich das Warenkorbsymbol und das Kontosymbol gegenüber befinden. Ich würde sagen, Bedienung des Warenkorbsymbols, und das Kontosymbol ist von hinten nach vorne. Außerdem ist die Position auch von hinten nach vorne. Und wenn Sie auf das CRT-Symbol klicken sollte immer die Warenkorbschublade geöffnet und nicht zur Warenkorbseite navigiert Also ja, geh einfach das komplette Theme durch. Natürlich wird es jedes Mal anders sein , wie viele Änderungen wir vornehmen müssen Lass mich einfach zur Produktseite gehen. Oh ja, wir haben es uns hier angesehen, nicht wahr? Ja. Okay. Und jetzt schauen wir uns die Sammlungsseite an. Die Sammlungsseite sieht okay aus. Und dann haben wir unsere Kontaktseite mit dem Kontaktformular. Ich finde das total cool und wir haben keine Blogbeiträge. Die Standardseite sieht so aus. Auch damit bin ich ziemlich zufrieden. Lassen Sie mich vorerst einfach mit diesem Feedback weitermachen. Ich entferne dort den 13. Punkt und drücke dann die Eingabetaste. Okay, das hat eine beträchtliche Menge Zeit in Anspruch genommen, so viel Zeit, dass ich nach etwa 15 Minuten einfach beschloss, ins Fitnessstudio zu gehen und später darauf zurückzukommen. Also ist es abgeschlossen. Hier ist die Zusammenfassung. Ich habe auch den Chat komprimiert. Das ist etwas, was Sie tun, wenn Sie mit KI-Agenten sprechen , um den Kontext ab und zu zusammenzufassen Deshalb sehen Sie genau hier diesen komprimierten Chat Aber wenn wir wieder nach oben scrollen und sehen, was es hier geschrieben hat, ohne dass wir danach fragen, alle Korrekturen auf dasselbe unveröffentlichte Thema übertragen Es hat alle Bilder aus dem Assets-Ordner entfernt , wie ich gefragt habe, und alles abgedeckt. Gehen wir also einfach zurück und überprüfen, ob es tatsächlich die Dinge getan hat, von denen es behauptet, dass es erledigt ist, und das Problem behoben ist. Okay? Also können wir zum exakt gleichen Thema zurückkehren und sofort sehen wir, dass ein Flüssigkeitsfehler vorliegt Sie können also einfach den Liquid-Fehler nehmen und ihn direkt in den Chat einfügen, und normalerweise weiß er, was zu tun ist Währenddessen wirst du sehen, dass wir, sobald wir zur Startseite zurückkehren, haben überall dort, wo kein Bild gesetzt wurde, den Standard-Bildplatzhalter SVG Gehen wir also zurück zum Online-Shop-Editor und legen diese Bilder erneut Also gehe ich hier auf die Startseite und füge unser Logo hinzu, das sich bereits in unserer Bibliothek befinden sollte , seit wir diese Website das letzte Mal eingerichtet haben, und jetzt können Sie sehen, dass das von uns ausgewählte Logo genau hier ist. Wir gehen gleich hier auf den Helden ein und laden das Heldenbild gleich hier hoch. Richtig? Anstatt die Bilder also aus dem Theme-Ordner ziehen zu lassen, was normalerweise nicht das ist, was Sie tun, stellen wir sicher, dass es sich um Dateien im Shopper Fi-Shop handelt , die wir dann über die Theme-Einstellungen in das Theme übernehmen, okay? Als Verkaufsargumente für jeden Klappentext fügen wir das entsprechende Symbol hinzu, und ich glaube, das waren diese Und lassen Sie uns das speichern und hier einen kurzen Blick zurück werfen. Der Fehler wurde behoben und behoben. Hoffentlich hat das unsere Daten nicht überschrieben. Sieht aus, als hätte es Gott nicht gegeben. Und Sie können sehen, dass der Header den Helden auf der Homepage auf dem Desktop überlagert . Das ist gut Wenn ich hier auf das Warenkorbsymbol klicke, sieht es so aus, als ob wir zum Kontobereich weitergeleitet werden, und das Kontosymbol bringt uns zum Einkaufswagen und dann haben wir diese Suche hier. Es schwebt ein bisschen mitten im Nirgendwo davon , also ist das nicht ideal. Die Schaltfläche hat jetzt den Status „Hover“, aber sie ist nicht perfekt, Eva, und die Schaltflächen für schnelle Anzeigen werden nur angezeigt, wenn der Mauszeiger darüber bewegt Das ist gut, aber sie verlängern sich nicht bis mit. Und zu diesem Zeitpunkt ist es vielleicht einfacher, den Code selbst zu bearbeiten oder den Code zu überprüfen und detailliertere Anweisungen zu geben, wenn Sie über das nötige Entwicklungswissen verfügen es vielleicht einfacher, den Code selbst zu bearbeiten oder den Code zu überprüfen und detailliertere Anweisungen zu geben, wenn Sie über das . Ich gehe in diesem Kurs nicht davon aus, dass Sie Kenntnisse im Programmieren oder im Shopify-Theme-Entwicklungssystem haben Kenntnisse im Programmieren oder im Shopify-Theme-Entwicklungssystem Wenn Sie das lernen möchten, können Sie natürlich auf meine früheren Kurse zu diesen Themen zugreifen Aber hier werde ich mit dem Laden der Bilder fortfahren. Ich glaube, das waren Sarah M, Maya K und Ava L. Offensichtlich sind das fiktive Menschen, also ist es nicht wirklich wichtig. Klicken Sie dabei auf Speichern Und dann für die Fußzeile das Logo laden. Und es sieht so aus, als ob wir die Daten verloren haben, die im Bereich mit den sozialen Symbolen befanden, also werden wir sie einfach neu auffüllen Und das ist die Sache, vor der man vorsichtig sein muss. diesem Grund verwende ich gerne die Github-Integration, die eher etwas für Entwickler ist, aber die Github-Integration hält alles synchron und minimiert das Risiko eines solchen Datenverlusts. Deshalb bevorzuge ich es, meine Themes mit Github bereitzustellen. Sie können sehen, dass die Lücke, um deren Behebung wir gebeten haben , behoben wurde. Und gehen wir jetzt zu dem, was wir in unserer Liste noch gefragt haben? Wenn ich also zurück zum Anfang scrolle, anstatt zu sehen, was dort steht, dass es getan wurde, lass mich sehen, worum wir es gebeten haben. Okay. Also ja, hier sind eine Menge Logs zum Durchstöbern Oh, los geht's. Wir können einfach nach oben gehen, um Feedback zu erhalten. Also, ja, es hat alle Bilder aus dem Theme entfernt. Es gab dieses Problem mit den Einrückungen links und rechts. Es sieht so aus, als ob das jetzt komplett behoben ist. Gott sei Dank. Wir wollten Hovstts auf allen Buttons und Links Es gibt Hovstts, aber der Stil, den es daraus abgeleitet hat, gefällt mir nicht besonders, aber das hat es getan aber Der Abstand zwischen den Symbolen auf der rechten Seite der Kopfzeile ist inkonsistent Das wurde behoben. Die perlenförmige Kopfzeile auf der Homepage sollte über dem Abschnitt positioniert werden. Ja. Es gibt eine große Lücke in der Fußzeile. Ja, das reparieren wir Das Logo ist in der Fußzeile horizontal gestreckt. Das ist nicht mehr der Fall. Wenn sich im Bereich „Ausgewählte Kollektion“ drei oder weniger Artikel befinden, senden Sie diese an die Produktkarten. Okay, wir können jetzt auf eine Produktseite gehen und schauen, ob das erledigt ist. Also müssen wir die Bilder tatsächlich wieder auffüllen. Also werde ich hier in meine Produktvorlage gehen, und dieses Produkt muss tatsächlich der alternativen Vorlage zugewiesen werden der alternativen Vorlage zugewiesen Lassen Sie mich also wieder darauf eingehen. Möglicherweise muss ich dieses Thema tatsächlich im Haupt-Slot veröffentlichen dieses Thema tatsächlich , um diese Vorlage auszuwählen. Aber da es sich um einen Development Store handelt, der nicht live ist, wird das überhaupt kein Problem sein. Und dann werde ich das komplette Marcher-Set einrichten Ich zoome hier rein. Ich werde es so einstellen, dass es die Bundle-Vorlage verwendet, nicht die Standardvorlage. Okay? Wenn wir jetzt einfach zur Startseite zurückkehren und dann zur Standard-Produktvorlage zurückkehren würden . Das Bundle-Produkt sollte uns nicht mehr angezeigt werden, da es sich auf einer anderen Vorlage befindet. Okay? Hier werden wir diese Bilder wieder hinzufügen und auch die verwandten Produkte hinzufügen . Ich werde dabei auf Speichern klicken. Denken Sie daran, wir haben geprüft, ob sie dadurch in der Mitte ausgerichtet sind. Das hat es nicht getan Das ist also eine Sache , die es nicht getan hat. Ich repariere hier nur die Symbole für die Verkaufspläne. Klicken Sie dabei auf Speichern. Jetzt gehe ich zur alternativen Bundle-Vorlage. Wenn ich mir den Hauptproduktbereich ansehe, funktioniert er ziemlich gut. Was enthalten ist, müssen wir nur mit den Bildern ändern. Ich werde das Bild des Premium-Macha in das erste Bild des Schneebesen einfügen , ich glaube, es war im zweiten Artikel Jep. Und dann der dritte Artikel, bei dem es sich ausschließlich um Blöcke im Online-Shop-Editor handelt, da wir vermuten würden, dass es sich um die Schüssel handelt. Da hast du's. Und 100% dieser Inhalte können im Online-Shop-Editor bearbeitet und gelesen werden, was wir erwarten würden Nochmals, Verkaufsargumente. Ich glaube, dies ist der letzte Ort, an dem es Also nur noch ein Ort, an dem man das machen kann. Okay, ich habe sie von hinten nach vorne gebracht. Klicken Sie dort auf Speichern und gehen Sie zu unserer Sammlungsseite. Wir haben also nur eine Standardsammlung. Für hier werde ich das Landschaftsbild hinzufügen. Wenn wir uns hier die Bilder unserer Shopify-Website ansehen, Fotos von einer Sourcing-T-Felder-Version zwei, glaube ich, genau die , die wir wollten Klicken Sie auf Fertig und wir können die Überschrift hier auf etwas anderes anpassen. Wenn wir wollen. Andernfalls wird standardmäßig der Titel der Sammlung verwendet, wie wir es erwarten würden Und dann haben wir hier unser Sammlungsraster. Ich werde dort auf Speichern klicken. Und was sonst? Wir haben unsere Standardseite. Ich glaube nicht , dass es irgendwelche Probleme mit dieser und unserer Kontaktseite gab , mit Eva hatten wir keine wirklichen Probleme. Es sei denn, wir wollten hier etwas Inhalt reinstellen, aber das überlasse ich dir. Okay? Jetzt werde ich mir alles in der mobilen Vorschau ansehen. Also ja, nicht zu 100% perfekt. Auf jeden Fall können wir einige Dinge verbessern, aber nichts ist wirklich kaputt , was ich hier sehen kann. Wenn ich auf die Nav-Schublade klicke, wird sie erfolgreich geöffnet. Wenn ich jetzt zur Produktseite gehe, werden Sie feststellen, dass die Bestellung, die wir angegeben haben, nicht richtig war. Ich glaube an das Design, wir hatten den Titel und den Preis oben. Also müssten wir Claude dieses Feedback auch geben . Vorlage für die Sammlung. Ja, du kannst sehen, wohin ich damit will. Ich schaue mir nur die verschiedenen Seiten an. Und wenn Sie Feedback haben, können Sie das buchstäblich einfach wieder in Claude einfügen und ihn bitten, das Problem zu beheben. Ich werde nur die offensichtlichen Fehler in diesem Video korrigieren. Also sage ich zum Beispiel zusätzliches Feedback. Erstens, Kontaktformular-Bereich, wie heißt er? Bereich „Kontaktformular“ sollte auf Mobilgeräten stapeln und nicht hintereinander angeordnet werden. Also werde ich das als echten Bug bezeichnen. Was gab es sonst noch? Das große Problem war, wenn ich einfach damit ausbreche, ist das kein großer Bug, wenn das nicht mittendrin ist. Ich werde keine große Sache daraus machen. Es gibt jedoch einen großen Fehler in Bezug darauf, warum das Kontosymbol den Warenkorb auslöst und das Warenkorbsymbol das Konto auslöst Ich werde also sagen, dass das Warenkorbsymbol die Kontoverbindung auslöst und das Kontosymbol die Warenkorbschublade auslöst Es sollte das Gegenteil sein. Lassen Sie mich die Funktionalität des Hinzufügens in den Warenkorb überprüfen . Wenn ich diese Schüssel also schnell in meinen Einkaufswagen legen wollte, war die Interaktion nett, aber die Einkaufswagenschublade wurde dadurch nicht geöffnet. Oh, und mir ist gerade eingefallen, dass das nicht wirklich ein Hinweis auf den Einkaufswagen hier Es ist tatsächlich an der falschen Stelle platziert. Aber wie Sie sehen können, haben wir diese nette kleine Einkaufswagenschublade, die aktualisiert wird. Das einzige Problem ist, dass wir sie aktualisieren mussten , um sie zu sehen. Also werde ich das schreiben. Nach dem Hinzufügen zu CRT sollte die Warenkorbschublade automatisch aktualisiert und geöffnet Und die Anzeige auf dem Symbol sollte ebenfalls synchron erscheinen Ich bin mir nicht sicher, wie man synchron genau buchstabiert . Hartes Wort Ich gebe es einfach in Google ein, um es automatisch zu korrigieren. Also werde ich es abschicken. Eigentlich werde ich nur noch einmal auf der Produktseite nachschauen. Klicken Sie darauf, wie „Einkaufswagen hinzufügen“ funktioniert. Ja. Auch hier sieht es so aus, als müssten wir unsere Seite aktualisieren, um die aktualisierte Karte zu sehen , was nicht ideal ist. Also schicke ich das einfach ab. Ich glaube, dass 0.3 beide Situationen betrifft , in denen wir den Schnelleinkaufswagen und die Werbekarte auf der Produktseite haben . Lassen Sie uns einfach überprüfen, ob unsere Produktgalerie funktioniert. Das ist es, aber langsam, sodass wir das definitiv optimieren können. Aber ich führe sie einfach aus, und das Hauptprinzip, das Sie daraus mitnehmen möchten daraus mitnehmen ist, dass es wahrscheinlich nicht perfekt herauskommen wird, und Ihre Lösung, es perfekt zu machen, besteht darin mit Claude weiter darüber zu iterieren , was repariert werden muss Als Entwickler bei Shopify seit 2019 weiß ich natürlich, wie man den Code manuell schreibt, aber selbst ich spreche jetzt mit Claude, anstatt selbst zu programmieren Daher empfehle ich diesen Ansatz. Je mehr technisches Wissen Sie haben und je besser Sie es beschreiben können , desto besser werden Ihre Ergebnisse natürlich sein. Aber tu es einfach so gut du kannst, und meistens sollte es verstehen, wovon du sprichst. Gehen Sie nicht einfach so lange hin und her, bis es soweit ist. Also warte ich jetzt, hoffentlich, das dauert keine weiteren 20 Minuten, und ich melde mich bei dir, wenn es fertig ist. Okay, nach etwa vier weiteren Minuten haben wir das verstanden. Also mach weiter mit dem Live-Theme. Es heißt, Sans Matre ist jetzt das unveröffentlichte Live-Thema. Sollen wir diese Änderungen dort vorantreiben? Es stellt mir diese Frage, denn wenn es eine Live-Site wäre, wäre das natürlich ziemlich riskant. Ich werde zuerst sicherstellen, dass unsere Daten nicht gelöscht werden. Ich werde also etwas anderes tun, und ich werde sagen, ja, Push to Live, aber ich habe einige Änderungen im Online-Shop-Editor vorgenommen Online-Shop-Editor denen ich möchte, dass Sie sie beibehalten. Löschen Sie nicht meine Arbeit in den JSON-Dateien. Für diejenigen unter Ihnen, die nicht all diese Informationen kennen, alle Werte im Online-Shop-Editor in diese JCN-Dateien übernommen Deshalb sage ich, löschen Sie nicht meine Arbeit in den JCN-Dateien Hoffentlich folgt es dieser Anweisung und kann die Codeänderungen mit den JSON-Änderungen auf der eigentlichen Website zusammenführen die Codeänderungen mit den JSON-Änderungen auf der eigentlichen Website Okay, es sieht also so aus, als ob es fertig ist. Schauen wir uns an, was da stand. Alle drei Probleme wurden behoben, live verifiziert und mit dem einzigen Flag per Push übertragen , sodass nur die Liquid - und SVG-Dateien geändert Also wurden keine deiner am Theme bearbeiteten JSON-Änderungen geändert. Okay. Die Hauptsache war also das Symbol in der Kopfzeile. Okay, jetzt sieht es so aus, als ob es das richtige Symbol ist. Es ist nur die falsche Position. Stimmt, aber zumindest beziehen sich die Symbole jetzt auf den richtigen Ort. Und jetzt werde ich sie hoffentlich tatsächlich aus dem Einkaufswagen nehmen, wie Sie sehen können. Und wenn ich dann auf Zum Einkaufswagen hinzufügen klicke, wird der Einkaufswagen automatisch aktualisiert, ebenso wie die Nummer. Lassen Sie uns auf der Homepage noch einmal überprüfen , ob Quick Add dasselbe tut. Ist, ich möchte ein bisschen animierter sein , wenn die Einkaufswagenschublade ein- und herausspringt Aber es funktioniert. Und wie ich bereits erwähnt habe, gibt es auch diese Seite Unsere Geschichte, die in diesem aktuellen Thema derzeit leer ist. Ich lasse das vorerst leer. Wenn Sie in diesem Kurs dieselbe Marke verwendet haben, Sans Macha, mit all den gleichen Vorlagen, überlasse ich Ihnen die Seite Unsere Geschichte als zusätzliches Projekt, mit dem Sie weitermachen Füge ein paar zusätzliche Frames für Desktop und Mobilgeräte für die Seite „Unsere Geschichte“ Und dann können Sie nachahmen, was hier im Prestige-Thema für diese bestimmte Seite erstellt wurde hier im Prestige-Thema für diese bestimmte Seite Alle Bilder im Projektordner mit der Kopie für all das Sie können also versuchen dies in Figma mit KI zu erstellen oder nicht, und es dann in einem Shopify-Shop zu implementieren Aber was den fertigen Aufbau unseres kundenspezifischen Designs angeht, werde ich es hier belassen Offensichtlich gibt es noch mehr zu tun. Aber auch hier geht es nur darum, mit Claude hin und her zu gehen , um das Problem zu beheben. Und da ich selbst Shopify-Entwickler bin, kann ich damit natürlich ziemlich detailliert vorgehen und ins Unkraut eintauchen Aber im Allgemeinen können Sie hier sehen, dass wir unser eigenes benutzerdefiniertes Theme von der Planungsphase bis hin zu einem funktionierenden Theme in einem echten Shopify-Shop mit echten Geschäftsdaten erstellt haben unser eigenes benutzerdefiniertes Theme von der Planungsphase hin zu einem funktionierenden Theme in einem echten Shopify-Shop mit echten Geschäftsdaten Und das Schöne daran ist es zu 100% unser eigenes Theme ist Im Gegensatz zu dem vorherigen Thema, dem Prestige-Thema, bei dem wir, wenn wir mit diesem Thema live gehen wollten, das Theme tatsächlich kaufen mussten, was meiner Meinung nach 300 bis 400$ kostet Also ja, wir haben zwar eine Menge Tokens in Cloyd ausgegeben um einen Webseitenplan zu erstellen und ein vollständig benutzerdefiniertes Theme zu erstellen, dieses Theme ist jetzt unser eigenes, und wir sparen das Geld jede andere kundenspezifische Entwicklung, die wir möglicherweise anschaffen müssen, egal ob das die Einstellung eines Entwicklers oder die Bezahlung für ein Standard-Theme. Also hier werden wir im Grunde die Reise für diesen Kurs beenden die Reise für diesen Kurs Im letzten Video werden wir die Dinge zusammenfassen und ich werde dir einige Details zu deinem Klassenprojekt geben. 10. Bonus: Fertiggestellter Theme-Code: Bevor wir zum Fazit kommen, wollte ich hier nur ein kleines Bonusvideo einbauen. Zwischen den Videos habe ich das Thema aktualisiert und bereinigt. Wie Sie hier sehen können , brauchte dieser Such-Header etwas mehr Arbeit, aber jetzt sieht er gut aus. Mir wurde klar, dass ich wahrscheinlich nicht nach einem Geschäft suchen muss , das nur vier Produkte anbietet, aber los geht's. Auch hier werden all diese Daten aus dem eigentlichen Geschäft abgerufen. Also die Produkte und die Speisekarte hier oben und auch die Speisekarte hier unten. Aber wenn ich wollte, dass dieses Thema genau zur Storefront passt, würde ich natürlich reingehen und die Geschäftsdaten aktualisieren Menüs befinden sich natürlich im Laden, nicht im Theme Und weil wir keine O-Story-Seite erstellt haben, werde ich sie einfach aus dem Hauptmenü und aus der Speisekarte löschen . Wenn ich jetzt wieder hierher zurückkehren würde, würdest du sehen, dass sich das an unserem Thema ändern würde. Ich hoffe, Sie verstehen inzwischen, dass einige der Änderungen, die Sie in Ihrem Shopify-Shop vornehmen werden , auf Filialebene erfolgen Das Ändern von Dingen wie Menüs, Produkten, Kollektionen und einigen anderen erfolgt also auf Themenebene Und damit meine ich, wenn du dein Theme verwendest, diese verschiedenen Einstellungen genau hier, all das kann neu bestellt werden, wie es bei allen Shopify-Themes der Fall ist Also sollte das Theme theoretisch flexibel genug sein, um in jedem Shop mit irgendwelchen Daten zu funktionieren, okay? Und vor diesem Hintergrund habe ich meine gesamte Arbeit diesem GitHub-Repo hier gewidmet, nur für den Fall dass ihr auf den endgültigen Theme-Code zugreifen wollt , wo ich gelandet bin Dies ist auf meinem GitHub-Konto von Christopher Dodd verfügbar . Die Adresse finden Sie hier, Die Adresse finden Sie hier falls Sie den direkten Link benötigen Wenn du dieses Theme zum Beispiel als Theme erstellen würdest , das du im Theme Store verkaufen möchtest , das für jedes Theme funktionieren sollte, musst du es in verschiedenen Stores testen und sehen, wie es funktioniert In diesem Video haben wir speziell für dieses Geschäft gebaut, das Sans Marcher Pulverlager liegt also an Ihnen, wie flexibel Sie das Thema gestalten möchten Ich habe zum Beispiel für ein Unternehmen gearbeitet, das keinerlei Abschnittsdaten hatte. Sie würden in den Online-Shop-Editor kommen und es gäbe überhaupt keine Abschnitte . Es wäre nur Code. Und so können Sie das natürlich auch tun, oder Sie können es hochgradig anpassbar machen , sodass jemand dieses Thema verwenden kann , ohne Code zu schreiben, und es trotzdem so weit anpassen kann, wie er benötigt. Ja, ich wollte nur dieses zusätzliche Video erstellen, um dir Zugriff auf den endgültigen Theme-Code zu geben, auf dem ich gelandet bin. Das ist definitiv nicht das Ende. Sie können hier reinkommen, von diesem Theme-Code abzweigen und Claude-Code oder einen beliebigen KI-Agenten verwenden , um ihn dann weiterzuentwickeln, zu verbessern und nach Ihren Anforderungen zu erstellen Und das ist der beste Teil dieses ganzen Prozesses. Wir verwenden den gleichen Standard-Entwicklungsprozess wie in der realen Welt. Wir verwenden KI nur, um einen Großteil der grundlegenden Arbeit zu planen und zu automatisieren. Nachdem das gesagt ist, werde ich Sie in der Schlußfolgerung wiedersehen. 11. Schlussbemerkung und Kursprojekt: Damit ist dieser Kurs über KI-automatisiertes Shopify-Webdesign Für dein Kursprojekt ermutige ich dich, das Webdesign für deinen Shopify-Shop Figma mit den Techniken zu erstellen deinen Shopify-Shop Figma , die wir in diesem Kurs behandelt haben, Plan für deine Wireframes zu entwerfen, den Filialplaner zu verwenden und dann die originalgetreuen Modelle in Figma zu erstellen Wenn du dein Design fertiggestellt hast, lade es in den Bereich Klassenprojekte hoch, um deine Arbeit mit anderen Schülern zu teilen lade es in den Bereich Klassenprojekte hoch, um deine Arbeit mit anderen Schülern zu teilen oder um Feedback von mir zu erhalten. Wenn dir dieser Kurs gefallen hat, hinterlasse eine positive Bewertung und sieh dir einige meiner anderen Kurse hier auf skillshare.com an, wo ich mich eingehender mit Konzepten wie Webentwicklung, Shopify und anderen modernen Tools beschäftige Danke wie immer fürs Zuschauen und wir sehen uns beim nächsten