01Wie sich das von einer Vorlagenauswahl unterscheidet
Vorlagengalerien zeigen Ihnen ein fertiges Design und fragen, ob es Ihnen gefällt oder nicht. Dieses Tool geht eine Ebene tiefer: Jede der sechs Richtungen unten basiert auf einem echten, funktionierenden Fotografen-Portfolio, das tatsächlich untersucht wurde (Screenshots, Live-Layout, berechnete Farben, berechnete Schriften), und nicht auf einer Palette, die sich jemand ausgedacht hat, damit sie als Farbfeld gut aussieht. Die Richtung Editorial verwendet zum Beispiel EB Garamond, weil das buchstäblich die Schrift ist, in der die Website einer echten Modefotografie gesetzt ist, ermittelt durch direkte Untersuchung der Seite.
Zwei Muster tauchten fast überall in den echten Websites auf, aus denen dies gebaut wurde, und sie sind in jede Richtung hier eingebaut: eine Navigation hinter einem einzelnen Hamburger-Symbol ohne sichtbare Linkliste, auch am Desktop, und jeweils ein großes Bild statt eines Rasters. Die Farbe der Oberfläche bleibt durchgehend nahe null: Die Fotografie liefert die Farbe, nicht die Oberfläche.
02Was Sie am Ende bekommen
Ein einziger, strukturierter Prompt, der die Gesamtrichtung, exakte Hex-Farben, Schriftnamen und -kombination, Seitenliste, Navigationsverhalten, Galerie-Layout und Bildrahmung, die einzubindenden Funktionen, eine Hosting-Empfehlung mit echten Kostenabwägungen und einen festen Satz an Anforderungen an die Bauqualität (barrierefreie Alt-Texte, responsive Breakpoints, keine fest eingebauten Geheimnisse, Lazy-Loading für Bilder) abdeckt. Fügen Sie ihn in die KI-Coding-App Ihrer Wahl ein, und sie hat alles, was sie zum Start braucht.
03Vom Prompt zur Live-Website: die ganze Anleitung
Der Prompt ist das Design-Briefing, nicht die Ziellinie. Hier ist jeder Schritt zwischen dem Kopieren und einer echten URL, die Sie auf eine Visitenkarte drucken können, kostenlos oder fast.
Den Prompt kopieren und eine KI-Coding-App öffnen
Claude, Cursor, Claude Code, Windsurf oder der KI-Agent von Replit funktionieren alle, alles, was Dateien für Sie schreiben und speichern kann, nicht nur chatten. Wenn Sie noch nie eine genutzt haben, braucht eine browserbasierte Option wie claude.ai oder Replit keine Installation: Fügen Sie den Prompt als erste Nachricht ein.
Bauen lassen und dann wirklich ansehen, was entstanden ist
Bitten Sie sie, die Website als statisches HTML/CSS/JS zu bauen (oder wie im Hosting-Abschnitt des Prompts angegeben) und Ihnen eine Vorschau zu zeigen. Prüfen Sie die sechs Dinge, die der Prompt verlangt hat (Farben, Schriften, Galerieverhalten, Navigation, Rahmung, Seiten), bevor Sie weitermachen. Eine falsche Akzentfarbe lässt sich jetzt viel billiger beheben als nach dem Einbinden der Fotos.
Echte Fotos, Bio und Kontaktdaten einsetzen
Ersetzen Sie jedes Platzhalterbild und jede Zeile Fülltext. Bitten Sie Ihre KI-App, nebenbei für jedes Foto ein echtes, konkretes Alt-Attribut zu schreiben, nicht „image1.jpg“, sondern eine tatsächliche Beschreibung, denn das ist sowohl eine Barrierefreiheitsanforderung als auch ein kleiner SEO-Vorteil. Das ist auch der Moment, noch einmal zu prüfen, ob das Kontaktformular wirklich an eine E-Mail-Adresse geht, die Sie lesen.
Auf einem kostenlosen Host veröffentlichen
Wenn Sie die Stufe „Statisch & kostenlos“ gewählt haben, bitten Sie Ihre KI-App, Sie beim Verbinden des Projektordners oder GitHub-Repos mit einem der Hosts auf der Seite Hosting im Menü oben anzuleiten. Alle vier bauen und veröffentlichen automatisch bei jeder Änderung, die Sie pushen; sobald die Verbindung steht, gibt es keinen manuellen Upload mehr.
Eine eigene Domain verbinden (optional, aber lohnenswert)
Eine kostenlose Subdomain (wie yourname.netlify.app) reicht für den Anfang völlig aus. Wenn Sie bereit für yourname.com sind, ist es ein Domainkauf plus eine DNS-Änderung, weiter unten ausführlich beschrieben.
04Welchen kostenlosen Host sollten Sie nutzen?
Jeder davon bringt eine statische Website kostenlos online, mit kostenlosem HTTPS und einem kostenlosen Tarif, der den Traffic eines persönlichen Portfolios locker abdeckt. Die Grenzen der kostenlosen Tarife ändern sich recht oft, betrachten Sie die Zahlen auf der Seite Hosting also als grobe Richtgröße statt als exakte aktuelle Werte, und prüfen Sie die Preisseite jedes Anbieters, bevor Sie sich festlegen.
Bitten Sie Ihre KI-Coding-App, die eigentlichen Veröffentlichungsschritte mit Ihnen zu gehen: „Verbinde dieses Projekt mit Netlify“ ist eine völlig normale Bitte, und sie kann Sie meist in ein paar Minuten durch die Kontoerstellung und die erste Veröffentlichung führen.
05Eine eigene Domain verbinden
Eine Domain kostet eine kleine jährliche Gebühr (typischerweise 10 bis 20 $ pro Jahr je nach Endung), getrennt vom Hosting, das kostenlos bleibt. Die drei Teile:
- Die Domain kaufen. Namecheap, Cloudflare Registrar oder der Nachfolger von Google Domains (Squarespace Domains).
- Einen DNS-Eintrag hinzufügen. Ein CNAME (oder A-Record), der Ihre Domain auf Ihren Host zeigen lässt, im Dashboard des Registrars angelegt. Das sind zwei Zeilen in der Tabelle des Registrars: ein
CNAMEfürwww, der auf die Adresse zeigt, die Ihnen Ihr Host nennt, etwayour-portfolio.netlify.app, und einA-Record für die nackte Domain, der auf die IP des Hosts zeigt. - Beim Host eintragen. Fügen Sie dieselbe Domain in die Einstellungen „Custom domain“ Ihres Hosts ein; HTTPS richtet sich von selbst ein.
Jeder Host auf der Seite Hosting hat einen Tab „Custom domain“ oder „Domains“, der Ihnen den exakten Eintrag nennt, den Sie hinzufügen sollen: Kopieren Sie ihn, tragen Sie ihn bei Ihrem Registrar ein und warten Sie. DNS-Änderungen brauchen typischerweise Minuten bis wenige Stunden, gelegentlich bis zu 24 bis 48 Stunden. Ihre KI-Coding-App kann Sie durch das Dashboard Ihres konkreten Registrars führen, wenn Sie nicht weiterkommen; machen Sie einen Screenshot der Einstellungsseite und fragen Sie, worauf Sie klicken müssen. Das Schloss wird angezeigt, keine Warnung „Nicht sicher“: Das ist die Ziellinie.
06Checkliste vor dem Start
Fünf Minuten mit dieser Liste fangen das meiste ab, was ein Portfolio unfertig aussehen lässt. Die Prüfpunkte stehen auf der Seite Vor dem Start im Menü oben; haken Sie sie nach und nach ab.
07Häufige Fragen
Nein. Sie treffen visuelle Entscheidungen, das Tool schreibt einen ausführlichen Prompt in einfacher Sprache, und Ihre KI-Coding-App macht daraus die eigentliche Website.
Jede Richtung basiert auf einem echten, funktionierenden Fotografen-Portfolio, das direkt untersucht wurde und nicht von Grund auf erfunden ist, bis hin zu einer exakt von einer echten Website übernommenen Schrift.
Kein Konto, keine Anmeldung, nichts zu bezahlen. Fotos, die Sie auf den Wiedergabe-Index ziehen, werden in Ihrem Browser auf eine Canvas gezeichnet und verlassen ihn nie.
8 bis 20 Ihrer besten Bilder, exportiert als optimierte JPG- oder WEBP-Dateien, eine kurze Bio und, falls vorhanden, ein Logo. Die Randnotizen unter der Wand führen es auf.