HomeCasa Eine komplette professionelle Website erstellen
Erzeugen Sie Struktur, Texte und HTML/CSS-Code für eine responsive, professionelle Unternehmenswebsite mit Basis-SEO und Barrierefreiheit. Entwickelt für ChatGPT, Claude und Gemini. Er enthält 7 anpassbare Variablen und lässt sich kostenlos mit einem Klick kopieren.
Fortgeschritten · Code · Redaktionelle Prüfung ausstehend
Prompt
Handle als erfahrener Webentwickler und UX-Designer mit Schwerpunkt auf Websites für kleine Unternehmen.
Ich möchte die professionelle Website für {{business}} erstellen, ein Unternehmen aus der Branche {{industry}} mit Sitz in {{location}}.
Zielgruppe: {{audience}}.
Hauptziel der Website: {{goal}}.
Liefere in dieser Reihenfolge:
1. Eine Sitemap mit den nötigen Seiten und dem Zweck jeder Seite.
2. Für die Startseite: den Aufbau der Abschnitte (Hero, Nutzenversprechen, Leistungen, Social Proof, Handlungsaufforderung, Kontakt) mit echten, sofort nutzbaren Texten im Ton „{{tone}}“.
3. Semantisches HTML5 und modernes CSS (Flexbox/Grid, CSS-Variablen, Mobile-first) für die Startseite in einem einzigen Block, ohne externe Frameworks.
4. SEO-Tags: Title (max. 60 Zeichen), Meta-Description (max. 155) und strukturierte JSON-LD-Daten vom Typ LocalBusiness mit Beispielfeldern, die mit [AUSFÜLLEN] markiert sind.
5. Eine Checkliste zur Barrierefreiheit (Kontrast, Alternativtexte, Tastaturbedienung), angewendet auf den Code.
Vorgaben:
- Erfinde keine Kontaktdaten, Preise oder Bewertungen: Nutze Platzhalter wie [AUSFÜLLEN].
- Farbpalette: {{colors}}.
- Erkläre jede wichtige Designentscheidung kurz.So verwenden Sie ihn
- Tragen Sie die Variablen mit den echten Daten Ihres Unternehmens ein.
- Fügen Sie den Prompt in Ihren KI-Assistenten ein.
- Prüfen Sie den Code in einem Editor und ersetzen Sie vor der Veröffentlichung jeden Platzhalter [AUSFÜLLEN].
- Bitten Sie um gezielte Anpassungen: „Mach den Hero auf dem Smartphone kompakter“ oder „Füge einen FAQ-Bereich hinzu“.
Anwendungsbeispiel
Unternehmen: Physio Lumen · Branche: Sportphysiotherapie · Standort: Leipzig · Ziel: Buchungen für den ersten Termin gewinnen.
Beispielergebnis
1. Sitemap
- Startseite: das Studio vorstellen und zur Angebotsanfrage führen.
- Leistungen: Komplettrenovierung, Einrichtungsplanung, Beratung auf Stundenbasis.
- Projekte: Vorher-nachher-Bilder echter Wohnungen.
- Kontakt: Anfrageformular und Kontaktdaten [AUSFÜLLEN].
3. Code der Startseite (Auszug)
<header class="hero">
<h1>Ihre erste Wohnung – geplant, um mit Ihnen zu wachsen</h1>
<p>Studio Aurora plant Renovierungen für junge Familien in Hamburg: helle, praktische Räume, die zu Ihrem Alltag passen.</p>
<a class="btn" href="#angebot">Unverbindliches Angebot anfragen</a>
</header>
<style>
:root {
--gebrochenes-weiss: #f7f5f0;
--salbei: #8a9a7b;
--schwarz: #1c1c1c;
}
body { margin: 0; background: var(--gebrochenes-weiss); color: var(--schwarz); font-family: system-ui, sans-serif; }
.hero { display: grid; gap: 1rem; padding: 4rem 1.25rem; max-width: 60rem; margin: auto; }
.btn { justify-self: start; background: var(--schwarz); color: var(--gebrochenes-weiss); padding: .9rem 1.4rem; border-radius: .5rem; }
.btn:focus-visible { outline: 3px solid var(--salbei); outline-offset: 3px; }
@media (min-width: 48rem) { .hero { padding: 6rem 2rem; } }
</style>Der Button ist schwarz auf gebrochenem Weiß (Kontrast deutlich über 4,5:1); Salbeigrün bleibt Akzenten und dem Fokusrahmen vorbehalten, weil es auf hellem Grund für Fließtext zu schwach ist.
4. SEO
- Title: Studio Aurora | Innenarchitektur & Renovierung Hamburg
- Meta description: Renovierung und Innenarchitektur für junge Familien in Hamburg. Helle, praktische Räume. Jetzt unverbindliches Angebot anfragen …
Wichtige Fakten
- Kategorie
- Programmierung & Entwicklung · Websites erstellen
- Ausgabetyp
- Code
- Niveau
- Fortgeschritten
- Entwickelt für
- ChatGPT, Claude und Gemini
- Verifiziert in
- Redaktionelle Prüfung ausstehend
- Variablen
- Name des Unternehmens, Branche, Standort, Zielgruppe, Ziel der Website, Ton und Markenfarben
- Sprache
- Deutsch
- Preis
- Kostenlos, ohne Anmeldung
- Aktualisiert
- 07.11.2026
Häufig gestellte Fragen
Kann ich den von der KI erzeugten Code direkt veröffentlichen?
Verwenden Sie ihn als Grundlage: Prüfen Sie den Code in einem Editor, testen Sie die Website auf Smartphone und Desktop, ersetzen Sie die Platzhalter [AUSFÜLLEN] und kontrollieren Sie Kontraste und Alternativtexte, bevor Sie veröffentlichen.
Funktioniert das auch für WordPress oder andere Baukästen?
Ja. Sitemap, Texte und SEO-Tags lassen sich in jeden Baukasten übertragen. HTML und CSS dienen als Designvorlage oder für eine statische Website.
Wie viele Seiten sollte die Website eines kleinen Unternehmens haben?
Das hängt vom Ziel ab, meist genügen Startseite, Leistungen, Über uns, Kontakt und die rechtlichen Seiten. Der Prompt schlägt eine auf Ihren Fall zugeschnittene Sitemap vor.
Wofür ist dieser Prompt gedacht?
Erzeugen Sie Struktur, Texte und HTML/CSS-Code für eine responsive, professionelle Unternehmenswebsite mit Basis-SEO und Barrierefreiheit.
Mit welchen KI-Tools funktioniert er?
Er ist für ChatGPT, Claude und Gemini entwickelt. Wir haben ihn in diesen Tools noch nicht überprüft, daher können die Ergebnisse variieren.
Wie passe ich den Prompt an?
Klicken Sie auf „Anpassen“ und füllen Sie die Variablen aus (Name des Unternehmens, Branche, Standort, Zielgruppe, Ziel der Website, Ton und Markenfarben). Der Text wird sofort aktualisiert und lässt sich anschließend mit einem Klick kopieren. Die Werte werden nur in Ihrem Browser gespeichert.
Brauche ich Erfahrung, um ihn zu verwenden?
Er ist für Fortgeschrittene: Es hilft, das Thema zu kennen, um guten Kontext zu liefern und das Ergebnis kritisch zu prüfen.
Ist dieser Prompt kostenlos?
Ja. Jeder Prompt von HomeCasa Prompts ist kostenlos, ohne Anmeldung und ohne Abonnement. Sie können ihn auch in beruflichen Projekten verwenden.
Kann ich der KI-Ausgabe vertrauen?
Betrachten Sie sie als hochwertigen Entwurf: Prüfen Sie Daten, Zahlen und wichtige Aussagen immer, bevor Sie etwas veröffentlichen oder Entscheidungen treffen.