Anleitungen
Wie du mit KI eine Website baust, sie gut aussehen lässt und online stellst. Prompts zum Kopieren, einfache Regeln und Checklisten, die mit Claude, ChatGPT und jeder KI funktionieren.
Neu hier? Fang hier an
Drei Leitfäden führen dich in dieser Reihenfolge von einer Datei im Chat zu einer Website, die du stolz teilst.
- Mach aus der Datei deiner KI einen echten LinkWarum sie sich nur auf deinem Computer öffnet und wie du das behebst.
- Prompt für eine Website, die gestaltet aussiehtDie Designregeln, die du deiner KI beim Bauen mitgibst.
- Prüf sie, bevor du sie teilstZwanzig schnelle Checks oder ein Prompt, der die meisten davon erledigt.
Der Spickzettel für KI-Websites
Jede Regel auf einer druckbaren Seite, dazu 70 Prompts nach Aufgaben gruppiert: Website starten, Handy-Ansicht reparieren, Texte umschreiben, Kaputtes reparieren und launchen.
Online gehen
Von einer Datei im Chat zu einer Adresse, die alle öffnen können.
Online gehen7 Min.
Claude hat mir eine HTML-Datei gegeben. Wie bekomme ich sie unter einen echten Link?
Öffne sie, repariere kaputte Bilder und teile sie mit allen, wenn du willst, auf deiner eigenen Adresse.
Zum Leitfaden →
Doku5 Min.
Eigene Domain nutzen
Bring deine Website auf eine Adresse wie deincafe.de, Schritt für Schritt, egal bei welchem Domain-Anbieter.
Zu den Docs →
Design
Formuliere die Regeln aus, und deine KI wendet sie jedes Mal an.
Design16 Min.
Die Prompt-Checkliste für eine schöne Website
Designprinzipien in einfachen Worten, ein Prompt für jede Entscheidung und schnelle Korrekturen, wenn das Ergebnis austauschbar wirkt.
Zum Leitfaden →
Design12 Min.
Design-Briefing für KI-Assistenten
Die Regeln, denen ein erfahrener Designer folgt, geschrieben für deine KI: zuerst 12 Kernregeln, dann Details und eine Checkliste vor der Abgabe. Verlinke es oder kopiere es in jeden Chat.
Briefing lesen →
Design11 Min.
Farben und Schriften wählen, die funktionieren
Fertige Paletten mit geprüftem Kontrast, Schriftkombinationen, die du siehst, Schriftgrößen und Dark Mode.
Zum Leitfaden →
SpickzettelZum Ausdrucken
Der Spickzettel für KI-Websites
Jede Regel und 70 Prompts auf einer Seite zum Ausdrucken.
Spickzettel öffnen →
Texten
Worte, die nach dir klingen, nicht nach einer Vorlage.
Launch und Sicherheit
Die Checks, mit denen eine Website für alle funktioniert.
Launch6 Min.
Vor dem Start: eine Checkliste mit 20 Punkten für deine Website
Handy-Test, Titel, Vorschauen beim Teilen, Links, Formulare, Datenschutz und Cookies. Hake sie hier ab oder füg einen Prompt ein.
Zum Leitfaden →
Launch8 Min.
Deine KI-Website schnell und barrierefrei machen
Die Zielwerte, kostenlose Tools zum Messen, Prompts für Audits und ein Fünf-Minuten-Test, den du selbst machen kannst.
Zum Leitfaden →
Launch7 Min.
Ist es sicher, KI-geschriebenen Code zu veröffentlichen?
Was öffentlich wird, wo geheime Schlüssel sich verstecken, riskante Skripte und ein Fünf-Minuten-Check, bevor du teilst.
Zum Leitfaden →
Für Kunden arbeiten
Für Freelancer:innen, die Websites für andere bauen.
Der Tipp, den die meisten Anfänger übersehen
Deine KI kennt Designprinzipien, wendet sie aber deutlich konsequenter an, wenn du sie ausformulierst. Sag „mach es modern“ und du bekommst etwas nahe an der durchschnittlichen Website. Nenn Hierarchie, Abstände, Kontrast und Mobilgeräte, und du bekommst eine Website, die gestaltet aussieht. Füg das in deinen nächsten Prompt ein:
Design this like a senior product designer: clear visual hierarchy with one focal point per section, a consistent spacing scale, two fonts at most, text contrast of at least 4.5:1, mobile-first with 44 px tap targets, subtle motion that respects reduced-motion settings, and accessible to WCAG 2.2 AA. Before coding, ask me any questions you need, then describe the design direction in five bullets and wait for my OK. More details: pagelemon.com/guides/design-brief
Bereit, sie online zu stellen?
Füg Starte meine Website auf PageLemon.com in den KI-Chat ein, in dem du deine Website gemacht hast.