Wie man mit AI eine Portfolio-Website erstellt

Bevor du den Builder öffnest, notiere dir den minimalen Umfang. Die meisten persönlichen Portfolios brauchen nicht viele Seiten, aber sie brauchen klare Inhalte.

Eine typische Struktur ist:

• Startseite mit Name, Rolle, kurzem Intro und einigen ausgewählten Projekten
• Projektseite oder Projektabschnitte mit Screenshots, Zusammenfassungen, verwendeten Tools und Ergebnissen
• Über-mich-Seite mit Hintergrund, Fähigkeiten und Arbeitsweise
• Kontaktbereich mit E-Mail, Social Links und optional einem Formular

Lege außerdem fest, für wen die Website gedacht ist:

• Personalverantwortliche, die schnell Arbeitsproben sehen wollen
• Kundinnen und Kunden, die prüfen, ob du zu ihrem Projekttyp passt
• Mitstreiterinnen und Mitstreiter, die deinen Prozess und deinen Geschmack sehen wollen

Liste dann die Inhalte auf, die du bereits hast:

• Projekttitel
• 1–3 Screenshots pro Projekt
• Kurze Beschreibungen
• Links zu Live-Arbeiten oder GitHub
• Bio und Profilbild

Wenn du das zuerst erledigst, hat die AI genug Kontext, um beim ersten Versuch etwas Nutzbares zu bauen, statt dir nur eine generische Vorlage zu liefern.

In Moremade beschreibst du die Website in natürlicher Sprache. Der AI Agent schreibt den Quellcode, zeigt dir eine Live-Vorschau, und du kannst die Seite anschließend per Chat weiter anpassen.

Dein erster Prompt sollte Folgendes abdecken:

• Um was für ein Portfolio es sich handelt
• Welche Seiten oder Abschnitte benötigt werden
• Welche Inhalte enthalten sein sollen
• Die visuelle Richtung
• Eventuelle Funktionen, etwa ein Kontaktformular oder Links

Bleib konkret. Wenn du nur sagst: „Mach mir ein Portfolio“, musst du später viel mehr korrigieren.

Beispiel für einen ersten Prompt:

Erstelle eine persönliche Portfolio-Website für eine freiberufliche Produktdesignerin namens Maya Chen. Nutze ein klares, minimalistisches Layout mit starker Typografie, gedeckten Farben und großzügigen Abständen. Erstelle eine Startseite mit kurzem Hero-Intro, ausgewählten Projekten, einem Über-mich-Bereich, einem Platzhalter für Testimonials und einem Kontaktbereich. Füge eine Projektseite mit 4 Case-Study-Karten hinzu. Jedes Projekt soll Titel, eine Ein-Zeilen-Zusammenfassung, verwendete Tools und einen Button für mehr Details zeigen. Integriere Navigation, Footer, ein mobilfreundliches Layout und ein Kontaktformular. Verwende React und Tailwind Stilkonventionen und gestalte die Seite professionell statt verspielt.

Für ein schlichtes Portfolio solltest du zuerst nach den Kernseiten und einem sinnvollen Standardlayout fragen. Die visuellen Details kannst du verfeinern, nachdem du die Vorschau gesehen hast.

Sobald die erste Version generiert ist, prüfe die Live-Vorschau genau. Achte zuerst auf die Inhaltsstruktur, dann auf das visuelle Feintuning.

Prüfe diese Punkte:

• Ist die Hierarchie im ersten Bildschirm klar?
• Lassen sich die Projekte schnell erfassen?
• Wirkt der Über-mich-Bereich persönlich genug?
• Sind Buttons, Abstände und Textgrößen konsistent?
• Wirkt irgendwo Text wie Füllmaterial, das du ersetzen solltest?

Moremade erlaubt Änderungen per Chat und bietet außerdem einen visuellen Inspector, mit dem du auf ein Element zeigen und es bearbeiten kannst. Nutze kurze Folge-Prompts, die sich immer nur auf ein Problem beziehen.

Drei hilfreiche Beispiele:

• „Reduziere die Höhe des Hero-Bereichs, rücke die ausgewählten Projekte weiter nach oben und formuliere den Intro-Text knapper.“
• „Mache aus den Projektkarten Case-Study-Vorschauen mit einem Thumbnail oben, Tool-Tags und einer kurzen Ergebniszeile unter jeder Zusammenfassung.“
• „Nutze eine wärmere neutrale Farbpalette, erhöhe den Kontrast des Fließtexts und mache den Kontaktformular-Button nur auf Mobilgeräten über die ganze Breite.“

Diese Phase geht meistens schneller, wenn du kein komplettes Redesign verlangst, solange die Grundstruktur nicht eindeutig falsch ist.

Viele Portfolios brauchen keine Datenbank, keinen Login und keine Zahlungen. Wenn die erste Version schlicht bleibt, ist sie leichter fertigzustellen.

Nutze Supabase nur dann, wenn das Portfolio Funktionen braucht wie:

• Ein Kontaktformular, das Einsendungen speichert
• Geschützte Inhalte hinter einem Login
• Ein kleines CMS-ähnliches Setup, um Projekte aus Daten heraus zu pflegen

Nutze Stripe nur dann, wenn das Portfolio auch etwas verkauft, zum Beispiel:

• Bezahlte Designvorlagen
• Beratungstermine
• Digitale Downloads

Moremade hat integrierte Verbindungen zu Supabase und Stripe sowie zu E-Mail-Anbietern wie Resend und SendGrid. Wenn du eines davon hinzufügst, formuliere die Anforderung klar.

Zum Beispiel:

• „Verbinde das Kontaktformular mit Supabase, sodass Einsendungen mit Name, E-Mail und Nachricht gespeichert werden.“
• „Füge eine Stripe-Checkout-Seite für eine 60-minütige Portfolio-Bewertung mit dem von mir festgelegten Preis hinzu.“

Wenn dein Ziel eine professionelle persönliche Website ist, lass diese Integrationen weg, solange sie keinen echten Nutzen haben.

Ein Portfolio wird oft zuerst auf dem Handy angesehen, besonders über einen Link in E-Mails oder Social Profiles. Mobile-Probleme sind einer der einfachsten Wege, gute Arbeit nachlässig wirken zu lassen.

Prüfe in der Vorschau:

• Verhalten des Navigationsmenüs
• Umbruch des Hero-Texts
• Abstände der Projektkarten
• Bildausschnitte
• Größe der Buttons und Touch-Ziele
• Abstände der Felder im Kontaktformular
• Lesbarkeit der Footer-Links

Bitte um präzise Anpassungen, statt nur zu sagen: „Mach Mobile besser.“

Beispiele:

• „Auf Bildschirmen unterhalb der Mobilbreite soll der Hero-Inhalt vertikal gestapelt werden und die Überschrift eine Stufe kleiner werden.“
• „Mach alle Projekt-Thumbnails im gleichen Seitenverhältnis und verhindere, dass die Captions auf dem Handy auf drei Zeilen umbrechen.“
• „Vergrößere den Seitenabstand im Kontaktbereich und mache den Absende-Button auf kleinen Bildschirmen leichter antippbar.“

Moremade bietet dir außerdem eine Code-Ansicht, falls du genau prüfen möchtest, was sich im React- und Tailwind-Code geändert hat.

Wenn die Website gut aussieht, veröffentliche sie. Moremade kann mit einem Klick auf eine kostenlose yourname.moremade.ai-Subdomain veröffentlichen. In kostenpflichtigen Tarifen kannst du eine eigene Domain verbinden. Domains können auch direkt in Moremade gekauft werden.

Ein sinnvoller Ablauf für den Launch ist:

• Zuerst auf die kostenlose Subdomain veröffentlichen
• Die Live-Website auf Desktop und Smartphone öffnen
• Letzte Inhalte oder Abstandsprobleme korrigieren
• Die eigene Domain verbinden, falls du einen kostenpflichtigen Tarif hast

Moremade erstellt echten React + Tailwind-Code für Websites. Du kannst jederzeit den vollständigen Quellcode als ZIP exportieren oder auf GitHub pushen. Das ist für ein Portfolio wichtig, weil du die Website später vielleicht anderswo hosten, an eine Entwicklerin oder einen Entwickler übergeben oder außerhalb der Plattform weiterentwickeln möchtest.

Wenn du die Website voraussichtlich öfter ändern wirst, ist die Versionshistorie in den kostenpflichtigen Tarifen nützlich, um Änderungen zu vergleichen und zurückzusetzen.

Das Hauptproblem ist nicht technischer Natur. Es ist ein Portfolio zu veröffentlichen, das zwar fertig aussieht, aber kaum etwas aussagt.

Achte auf diese häufigen Probleme:

• Zu viele Abschnitte auf der Startseite ohne klare Priorität
• Vage Projektzusammenfassungen, die nie erklären, was du getan hast
• Generische visuelle Prompts, die zu einer Vorlagen-Optik führen
• Stripe-, Login- oder Datenbank-Funktionen ohne echten Anwendungsfall
• Mobile-Review überspringen
• Platzhaltertext, Stockbilder oder leere Case-Study-Seiten veröffentlichen

Ein gutes Portfolio macht meistens ein paar einfache Dinge gut:

• Es sagt, wer du bist und welche Art von Arbeit du machst
• Es zeigt ausgewählte Projekte, nicht alles
• Es liefert genug Details, um deine Denkweise beurteilen zu können
• Es macht es leicht, dich zu kontaktieren

Nutze die AI, um schnell zu einem starken Entwurf zu kommen, und investiere dann deine Zeit in den Inhalt.