Website mit Design- und Programmier-Agent entwerfen

Kapitelübersicht

Dieses Kapitel zeigt, wie Design und Entwicklung durch AI perfekt zusammenarbeiten. Sie spielen die Rolle des Produktmanagers, leiten den "Design-Agent" bei der Erstellung von Logo-Design, Farbschema und Seitenlayout an und koordinieren dann den "Programmier-Agent" bei der Umsetzung der visuellen Entwürfe in lauffähigen Code. Von der Ideenfindung bis zum Website-Launch erleben Sie den vollständigen AI-gestützten Entwicklungsprozess und werden zu einem Ein-Personen-Team.

---

1. Erste Schritte

1. Tutorial-Einführung

Lassen Sie uns AI Design Agent und Coding Agent verwenden, um eine vollständige Website von Grund auf zu erstellen.

• Design-Agent: Verantwortlich für die Erstellung von Logo, Seitenlayout, Farbschema und anderen visuellen Elementen
• Coding-Agent: Schreibt tatsächlichen Code (HTML/CSS/JS etc.) basierend auf Ihren Anforderungen an Funktionen und Layout und erstellt eine lauffähige Website

2. Design-Agent und Coding-Agent

• Design-Agent: AI, die basierend auf Ihren Prompts Bilder, Seitenmodelle oder Designstile generiert.
• Mastergo
• Lovart
• Figma MCP
• Coding-Agent: AI, die basierend auf Ihren Funktions- und Layoutanforderungen tatsächlichen Code (HTML/CSS/JS etc.) schreibt.
• Z.AI
• Trae
• Cursor
• Lovable

---

2. Logo mit Design-Agent erstellen

1. Wichtige Aspekte beim Logo-Design

Das Logo ist eines der Schlüsselelemente, die den ersten Eindruck Ihrer Website bestimmen. Um vom AI Design-Agent zufriedenstellende Ergebnisse zu erhalten, müssen Sie in Ihrem Prompt klar beschreiben, welche Art von Logo Sie möchten.

1. Markenname / Text

• Text, der im Logo erscheinen muss (z.B.: Website-Titel, Markenname).

2. Stil (Stimmung / Atmosphäre)

• Das Gesamtgefühl oder die Atmosphäre, die das Logo vermitteln soll.
• Beispiele: Minimalistisch, niedlich, schlicht, modern, Retro, futuristisch etc.

3. Farbschema (optional)

• Am besten die Logo-Farben mit dem Gesamtton der Website abstimmen.
• Spezifische Hex-Codes oder grobe Farbtöne (kalt, warm etc.) angeben.
• Beispiele: #171721 (Schwarz), #FF7130 (Orange).

4. Form (Gestalt / Struktur)

• Klären, ob das Logo eine bestimmte Form oder Komposition benötigt.
• Beispiele: Text innerhalb eines Kreises, Icon + Text-Kombination, Icon-dominiertes Logo etc.

5. Icon / Symbol-Elemente (optional)

• Grafiken oder Symbole, die im Logo erscheinen sollen.
• Beispiele: Bücher-Icon, Blitz-Symbol, AI-bezogene Grafik, abstrakte geometrische Formen etc.

2. Logo-Design-Prompt schreiben

Beispiel-Prompt

"Bitte entwerfe ein minimalistisches Logo mit dem Markennamen 'My First Website'.
Verwende Schwarz (#171721) und Orange (#FF7130) und platziere den Text innerhalb eines Kreises."

"Bitte entwerfe ein Logo mit dem Markennamen 'AIID'.
Der Gesamtstil soll futuristisch, sauber und schlicht sein, Hauptfarben Blau und Weiß.
Kombiniere ein abstraktes AI-Symbol mit dem Text und exportiere als PNG mit transparentem Hintergrund."

3. Design beim Agent anfordern

• Obigen Prompt eingeben → Mehrere Designentwürfe des Agents vergleichen.

4. Endgültiges Logo bestimmen

• Die bevorzugte Version aus den Entwürfen auswählen und herunterladen.

---

3. Website-Struktur planen

1. Grundlegende Bereiche verstehen

Bevor Sie mit der Website-Erstellung beginnen, ist es wichtig zu planen, welche Menüs (Bereiche) Sie einfügen wollen. Das Menü-Design hängt davon ab, was Sie den Besuchern zeigen möchten und welche Aktionen Sie von ihnen erwarten. Generell besteht eine Website aus Grundbereichen wie Home / About / Contact.

2. Selbst eine Struktur-Skizze zeichnen (optional)

Sie können zunächst basierend auf dem Website-Ziel eine einfache Menüstruktur entwerfen.

Grundmenü

1. Home
   1. Die Hauptseite, die Besucher nach dem Betreten der Website zuerst sehen
   2. Enthält normalerweise Logo, Hero-Bereich und einen kurzen Slogan oder eine Einleitung
2. About
   1. Vorstellung, wer Sie sind oder Zweck des Projekts / Service
   2. Persönliches Portfolio: Selbstvorstellung + kurzer Lebenslauf
   3. Service-Website: Vision, Ziele und Kernfunktionen
3. Contact
   1. Kontaktinformationen wie E-Mail, Telefonnummer, Social-Media-Links etc.
   2. Auch ein einfaches Kontaktformular möglich

Optionale Menüs

4. Services / Projects

   1. Präsentation Ihrer Dienstleistungen oder Projekte / Portfolio
   2. Normalerweise als Liste oder Karten dargestellt

5. Gallery

   1. Zur Anzeige von Bildern, Fotos oder Designarbeiten

6. Blog / News

   1. Für Artikel, Updates oder Logs

7. FAQ

   1. Häufig gestellte Fragen und Antworten kompakt zusammengefasst

3. Farbschema wählen (optional)

Wenn Sie bereits ein Logo haben oder bestimmte Farben für das Website-Design verwenden möchten, können Sie die Farbcodes direkt im Prompt angeben.

Beispiel: #171721, #872B97, #FF7130, #FF3C68

Auch ohne eigenes Farbschema können Sie über Farb-Websites oder Suchbegriffe Inspiration finden.

• Farbreferenz-Websites
  • https://colorhunt.co/
  • https://coolors.co/

• Farbsuche über Google-Schlüsselwörter

4. Website-Design-Prompt schreiben

Beispiel-Prompt

"Bitte entwerfe eine One-Page-Website mit den Bereichen Home, About und Contact.
Verwende die Farben #171721, #FF7130 und #FF3C68.
Der Gesamtstil soll modern und schlicht sein."

---

4. Website mit Design-Agent entwerfen

1. Prompt eingeben → Designentwürfe generieren

• Die geplante Struktur und das gewählte Farbschema im Prompt angeben.

Mastergo Prompt-Beispiel

2. Designentwürfe prüfen und Änderungswünsche stellen

Sie können dem Agent Feedback geben, z.B.:

• "Zu verspielt, den Gesamtstil schlichter machen."
• "Eine andere Schriftart verwenden."
• "Farbkombination anpassen."
• "Diesen Bereich entfernen."

3. Endgültiges Design bestimmen

Wenn Sie den Designentwurf nach mehreren Änderungsrunden zufrieden sind, können Sie das Design in Code umwandeln, den der Coding-Agent verstehen und weiterverarbeiten kann.

Die Methode zur Umwandlung von Design in Code variiert je nach Plattform, erfolgt aber normalerweise über die Installation und Nutzung bestimmter Plugins innerhalb der Design-Plattform.

Mastergo-Beispiel

1. Mastergo Plugin-Website öffnen und nach seal suchen.

2. Zurück zur Design-Seite, auf das Quadrat-Icon (Plugins) klicken.

3. Den Design-Bereich, den Sie in Code umwandeln möchten, auswählen und auf Generate klicken, um den Code zu generieren.

---

5. Website mit Coding-Agent erstellen

1. Grundkonzepte von HTML/CSS/JS verstehen

Eine Website besteht im Wesentlichen aus drei Sprachen:

• HTML (HyperText Markup Language) → Struktur (Skelett)
• CSS (Cascading Style Sheets) → Stil (Erscheinungsbild)
• JavaScript (JS) → Funktionalität (Interaktion)

Diese drei arbeiten zusammen und bilden die komplette Webseite, die wir sehen.

1. HTML (Struktur)

• Definiert, "was auf der Seite angezeigt wird"
• Platzierung von Text, Bildern, Buttons, Links etc.
• Vergleichbar mit Wänden und Rahmen eines Gebäudes

Beispiel

<h1>Hallo!</h1>
<p>Das ist meine erste Website.</p>
<a href="contact.html">Kontakt</a>

2. CSS (Stil)

• Bestimmt, "wie der Inhalt angezeigt wird"
• Steuert Schriftgröße, Farbe, Abstände, Hintergrund, Button-Form etc.
• Gibt dem HTML "Kleidung" und visuellen Stil

Beispiel

h1 {
  color: #FF7130;   /* Textfarbe */
  font-size: 36px;  /* Schriftgröße */
  text-align: center; /* Zentrierte Ausrichtung */
}

body {
  background-color: #171721; /* Hintergrundfarbe */
  color: white; /* Standard-Textfarbe */
}

3. JavaScript (JS) (Funktionalität)

• Ermöglicht der Webseite, mit Nutzern zu interagieren
• Kann Button-Klicks, Menü-Aufklappen, Bilderkarussells, Formular-Übermittlung etc. umsetzen
• Wenn HTML/CSS das statische Skelett und Aussehen sind, dann ist JS das Gehirn, das die Webseite "lebendig" macht

Beispiel

function showAlert() {
  alert("Der Button wurde geklickt!");
}

<button onclick="showAlert()">Klick mich</button>

2. Coding-Agent Code generieren lassen

Beispiel-Prompt

"Bitte schreibe HTML und CSS für eine One-Page-Website mit Home-, About- und Contact-Bereichen.
Verwende die Farben #171721, #FF7130, #FF3C68.
Schwarzer Hintergrund, weißer Text."

3. Website starten

Nachdem der Entwurfscode generiert wurde, startet der Agent normalerweise automatisch das Projekt und zeigt die generierte Website-Seite an.

Wenn Sie den Agent neu gestartet haben oder die Website-Anzeige nicht erscheint, können Sie einen Prompt wie diesen eingeben:

"Please activate the project"

Damit lässt der Agent das Projekt neu starten und öffnet die Vorschauseite, damit Sie den aktuellen Stand sehen können.

4. Einfache Änderungen vornehmen

Sie können den Entwurf weiterhin über natürliche Sprache feinjustieren, z.B.:

• "Den Button größer machen."
• "Schriftstärke erhöhen."

5. Website-Textinhalte ändern

Die vom Agent generierte Erstversion enthält meist automatisch generierten Platzhaltertext. Um sie näher an Ihrem realen Szenario zu bringen, können Sie den tatsächlichen Inhalt vorbereiten und den Agent ihn ersetzen lassen.

Anwendungsbeispiel: About-Seite der AIID-Website aktualisieren

1. Zunächst den Inhalt, den Sie auf der About-Seite zeigen möchten, aufschreiben. Für besseres Agent-Verständnis kann der Inhalt im Markdown-Format gespeichert werden.

2. Dann im Dialog dem Agent mitteilen, den Inhalt der Datei auf der angegebenen Seite anzuwenden.

3. Die aktualisierte Version nach der Inhaltsanwendung ansehen.

6. Bilder einfügen

Wenn Sie bestimmte Bilder einfügen möchten (z.B. Logo, Hintergrundbild), können Sie diese zunächst in den Projektordner hochladen und im Prompt angeben, an welcher Stelle der Seite diese Bilder verwendet werden sollen.

• Beispiel:

• Ergebnis:

---

6. Design und Code integrieren

1. Design-Dateien mit Website-Code integrieren (optional)

Wenn Sie vom Design-Agent Codedateien heruntergeladen haben, können Sie diese in das aktuelle Projektverzeichnis verschieben und den Coding-Agent bitten, diesen Design-Code mit dem bestehenden Projekt zu mergen.

• Beispiel:

• Ergebnis:

title: 'Eine Website mit Design- und Coding-Agents bauen' description: 'Von Idee bis Launch: Design-Agent fuer Visuals, Coding-Agent fuer Umsetzung. Ein wiederverwendbarer Workflow fuer Solo-Entwicklung.'