Möchtest du in Rekordzeit professionelle Mockups für deine Webseite erstellen, ganz ohne Programmierkenntnisse? Dieses Snip zeigt dir, wie du mit Claude AI und dem Claude Artifacts Feature beeindruckende Mockups für deine Ideenentwicklung machst.
Ergebnis: Nach diesem Snip wirst du in der Lage sein, mithilfe von Claude AI detaillierte und ansprechende Mockups für Webseiten zu erstellen, die du mit Kollegen oder Entwicklern teilen kannst.
-
- Starte Claude.ai:
- Öffne die Webseite Claude.ai und beginne einen neuen Chat.
- Wähle das 3-5-Sonnet-Modell:
- Wähle das 3-5-Sonnet-Modell für dein Projekt, um die richtige Struktur zu starten.
- Erstelle den Prompt:
- Formuliere deinen Prompt detailliert. Beispiel:
- Definiere den Header mit deinem Unternehmensnamen und Logo.
- Erstelle drei Spalten für Workshops, den KI-Führerschein und die SnipKI-Mitgliedschaft.
- Füge Call-to-Actions unter jede Spalte hinzu.
- Achte darauf, Überschriften, Icons und Platzhalter-Bilder zu spezifizieren.
- Formuliere deinen Prompt detailliert. Beispiel:
- Antworten auf Rückfragen:
- Claude wird nach Details wie Logos, Farben, Buttons oder interaktiven Elementen fragen. Beantworte diese Fragen präzise.
- Code generieren und erste Version prüfen:
- Claude generiert den ersten Code. Öffne die Vorschau, um den ersten Entwurf zu begutachten.
- Verbesserungen am Design vornehmen:
- Passe das Layout an, z.B. Logo-Position oder zentrierte Navigation.
- Nutze Prompts wie: „Das Logo soll oben links erscheinen und die Buttons zentralisiert sein.“
- Finales Mockup verfeinern:
- Du kannst zusätzliches Design hinzufügen, wie ein Farbschema oder ein anderes Seiten-Layout, indem du z.B. einen Screenshot deiner gewünschten Vorlage hochlädst und anpasst.
- Seite veröffentlichen und teilen:
- Klicke auf “Publish”, kopiere den Link und teile dein Mockup mit deinem Team.
- Starte Claude.ai:
- Erfahren, wie man Claude AI zur Erstellung von Webseiten-Mockups verwendet.
- Lernen, wie man effektive und detaillierte Prompts erstellt.
- Verstehen, wie man Claude AI anweisen kann, Designs und Layouts anzupassen.
- Üben, wie man Feedback-Schleifen nutzt, um den finalen Entwurf zu optimieren.
- Wissen, wie man fertige Mockups teilt und weiterentwickelt.
- Landing Page Designs: Erstelle ansprechende Landing Pages für verschiedene Marketingkampagnen.
- Produktseitenmockups: Visualisiere und optimiere Produktseiten für deinen Online-Shop.
- Portfolio-Website: Entwerfe eindrucksvolle Portfolio-Websites für Kreative und Freiberufler.
- Eventseiten: Generiere Designs für Event-Websites, um Besucher zu informieren und anzumelden.
- Blog-Layouts: Verbessere dein Blog-Layout, um Inhalte besser und ansprechender zu präsentieren.
