Sieben Skills
Du schreibst, was du willst. Deine KI weiß, wie es geht
- start
- template-aufbau
- copywriting
- design-system
- seo
- qualitaetspruefung
- systemwissen
Die Kaffeebar, die den Becher im Querschnitt zeigt
Versalien mit kursivem Wort, Barista vor Backstein
Gebäck wählen, der Becher zeigt den passenden Kaffee
Zwölf Getränke von der Tafel mit Preis und Notiz
Rösterei, Kurse, Frühstück, Backstube, Brührechner
Ofenzeiten und Abendpreis, ein Punkt zeigt jetzt
Stimmen, Café und Rösterei mit Öffnungsstatus
Der Becher zeigt den Kaffee, der dazu passt
Espresso, Milch, Schaum, Eis, Cold Brew
Der Becher wird oben weiter, die Füllung auch
Von 20 ml Espresso bis 260 ml Cold Brew
Du schreibst, was du willst. Deine KI weiß, wie es geht
Die Regeln des Templates für deine KI
Nicht nur zusammengeschoben
Strategie und Bauplan im Projekt
In einem Satz auf deine Marke umgestellt
Kaffeebars mit Backstube und Frühstück
Betriebe mit Rösterei, Bohnenverkauf und Kursen
Agenturen, die Café-Websites planbar ausliefern
Sichere Zahlung über Stripe, das ZIP kommt direkt danach
Lieber fertig übernehmen?AI Website Service · 899 €Erste Schritte in der Doku Template, Service und Custom im Preisvergleich
Ein aufgeschnittener Becher zeigt die Schichten eines Kaffees in Millilitern. Auf der Startseite stehen links drei Gebäcke und rechts drei Kaffees. Wer eines antippt, sieht das passende Paar, den Becher mit Espresso, Milch und Schaum und einen Satz, warum beides zusammenpasst. Auf der Karte stehen neun Getränke im Schnitt nebeneinander, von 20 ml Espresso bis 260 ml Cold Brew.
Ja, sie folgen den Rezepten der Karte. Ein Cappuccino hat 36 ml Espresso, 90 ml Milch und 60 ml Schaum, ein Flat White 36, 120 und 15. Der Becher fasst 265 ml bis unter den Deckel und wird nach oben weiter, deshalb rechnet src/lib/becher.ts die Höhe jeder Schicht aus dem Volumen und nicht linear. Die Rezepte stehen in src/data/site.ts, eine Fachprüfung hat sie im Oktober 2026 nachgerechnet.
Alle fünf sind für Cafés mit eigener Röstung gebaut, aber jedes beantwortet eine andere erste Frage. Tellhoven findet mit acht Antworten den passenden Kaffee, Brennhoven sortiert eine lange Karte mit einem Geschmackskonfigurator, Holm rechnet den Bedarf für ein Bohnen-Abo, Darnholt erklärt den Röstgrad auf einer Skala. Brösling zeigt, was im Becher steckt und welches Gebäck dazu passt, und stellt die Backstube gleichrangig neben die Rösterei, hell in Mehlweiß mit Kruste als Signal.
Methode wählen, Wassermenge und Stärke einstellen, und der Rechner nennt Gramm Kaffee, Verhältnis, Esslöffel und Brühzeit. Handfilter und French Press rechnen mit 1 zu 18, 1 zu 16,7 oder 1 zu 15, die Cezve mit 1 zu 10, 1 zu 9 oder 1 zu 8. Jede Methode hat dazu eine eigene Seite mit einem Timer, der mitläuft und den aktuellen Schritt hervorhebt, drei Minuten für den Handfilter, neun für die French Press samt Ruhe und vier für die Cezve.
Eine Uhr über 72 Stunden folgt beim Scrollen sechs Stationen vom Vorteig bis zum Ofen. Ein Faltrechner zeigt von null bis vier Touren, wie aus einer Butterlage nach drei einfachen Touren 27 werden, mit den Teiglagen daneben. Dazu ein Langtext, der die Rechnung erklärt und sagt, warum eine vierte Tour das Croissant nicht besser macht, sechs Zutaten mit Herkunft und der Morgen in sechs Blechen mit Uhrzeit und Preis.
Datum, eins bis acht Personen, Uhrzeit und Bereich. Die freien Zeiten kommen aus den Öffnungszeiten, im Halbstundentakt bis eine Stunde vor Schluss und für heute erst ab zwei Stunden nach jetzt. Ab neun Personen führt die Seite ins Kontaktformular. Eine Skizze des Cafés hebt den gewählten Bereich hervor, eine Platzwahl gibt es bewusst nicht. Verschickt wird noch nichts, den Versand richtet deine KI ein.
Nein, bezahlt wird nicht auf der Seite. Sechs Kaffees lassen sich mit Größe und Mahlung in einen Korb legen, der sich im Browser merkt, was drin ist. Der Knopf Bestellung anfragen führt mit dem Korb ins Kontaktformular, und der Betrieb meldet sich mit Röstdatum und Zahlungsweg. Wer einen Shop anbinden will, lässt deine KI die Knöpfe dorthin führen.
Neben jedem Preis einer Tüte steht der Grundpreis je Kilogramm, am Shop dazu inklusive Mehrwertsteuer und zuzüglich Versand. Die Fragen auf der Bohnenseite nennen das Widerrufsrecht von 14 Tagen ab Erhalt, wenn per Mail oder Formular bestellt wird, und dass die Belehrung mit der Bestätigung kommt. Was rund um eine eigene Rösterei sonst gilt, steht in der Wissensschicht. Diese Hinweise sind keine Rechtsberatung.
Die Karte markiert vegane Getränke und Speisen und hat einen Filter dafür. Ein Kasten nennt Gluten, Milch, Ei und Spuren von Schalenfrüchten und sagt, dass die Liste der 14 Hauptallergene an beiden Tresen ausliegt. Diese Liste führst du im Laden, bei loser Ware ist sie Pflicht. Hafer- oder Mandeldrink kostet 40 Cent mehr.
Karte, Rezepte, Öffnungszeiten, Bohnen, Kurse, Team und Standorte stehen in src/data/site.ts, die langen Texte der Backstube und der Anleitungen in src/data/langtexte.ts. Die Öffnungszeiten stehen einmal und speisen Kopf, Fuß, Öffnungsstatus, Tageslauf und die freien Zeiten der Reservierung. Ein Gebäckpreis steht an mehreren Stellen, auf der Karte und im Blechplan der Backstube, deine KI zieht alle mit.
Kopf und Startseite rechnen aus den Öffnungszeiten, ob das Café gerade offen hat und bis wann, nach deutscher Zeit. Der Tageslauf setzt einen Punkt auf die aktuelle Stunde, die Woche auf der Reservierungsseite markiert heute. Ohne Skript stehen die Öffnungszeiten als Liste da.
Angefragt, nicht gebucht. Die Kursseite zeigt vier Formate mit Filter, alle Termine im November und Dezember als Kalender und ein Formular mit Haken für einen Gutschein. Bezahlt wird nach der Bestätigung. Die Absageregel steht dabei, bis sieben Tage vorher kostenlos, danach Ersatzperson oder Umbuchung. Termine und Preise sind Beispieldaten.
Nein. Betrieb, Menschen, Preise, Termine, Kennzahlen, Lieferanten und Stimmen sind erfunden, und die Seite sagt das an Ort und Stelle, an jeder Stimme, auf der Karte, bei den Kursterminen, auf der Teamseite, an den Lieferanten und im Fuß jeder Seite. Die Kaffeehändlerstraße und der Kanalspeicher sind erfunden, Telefon und Mail ersetzt du durch deine. Südvorstadt, Plagwitz, die Karli und die Tram stehen als echte Lage da.
Fremde Menschen auf Beispielmotiven von Pexels. Die Lizenz erlaubt die kommerzielle Nutzung, ein Model-Release liegt nicht vor. Deshalb steht das Team als Kürzel statt mit Porträts auf der Seite, und die Bilder aus Backstube und Kursraum zeigen nur Hände. Vor dem Livegang ersetzt du die Fotos mit Menschen durch eigene Aufnahmen mit schriftlicher Einwilligung, die Teamseite sagt, wo eure Teamfotos hingehören.
Die 38 Fotos stammen von Pexels und dürfen kommerziell genutzt werden. Sie zeigen keinen echten Betrieb. src/data/bildnachweis.json nennt zu jedem Motiv Fotografin oder Fotograf, Quelle und Lizenz, das Impressum listet alle Namen. Becher, Röstkurve, Teiguhr, Wegskizze, Tüte und das Croissant-Zeichen sind eigene Zeichnungen des Templates.
Als Platzhalterseiten mit Anleitung, nicht als vorformulierte Rechtstexte, und bis zum Ausfüllen mit noindex und ohne Eintrag in der Sitemap. Die Anleitung nennt, was bei Café, Bäckerei und Bohnenversand hineingehört, etwa Handwerkskammer und Meistertitel, Umsatzsteuer-Identifikationsnummer, Verbraucherstreitbeilegung und die Widerrufsbelehrung für den Versand. Darunter steht der Bildnachweis. Diese Hinweise sind keine Rechtsberatung.
Nein. Antonio und Lora liegen in public/fonts/, die Fotos im Projekt, die Wegskizze ist gezeichnet, und es wird keine Karte eingebettet. Im Browser läuft eigenes JavaScript ohne Bibliothek. Das Cookie-Fenster schreibt die Wahl in den dataLayer, Statistik und externe Medien sind mit keinem Dienst belegt.
Ja. Jede Seite hat eigenen Titel, Beschreibung und Brotkrumen, dazu ein Schema CafeOrCoffeeShop mit beiden Adressen, Öffnungszeiten und Speisekarte mit Preisen. Die Seiten ergänzen HowTo für die Anleitungen, Course für die Kurse, Product für die Bohnen, FAQPage, AboutPage und ContactPage. Die Teilen-Bilder in 1200 mal 630 Pixeln baut Astro beim Bauen aus einem Foto der jeweiligen Seite.
Ja. Jede Überschrift und jeder Text steht ohne Skript da. Der Querschnitt zeigt dann das Paar aus Croissant und Cappuccino, die Rechner ein festes Beispiel, Fragen sind aufgeklappt, Reiter stehen untereinander, und das Menü am Telefon öffnet sich. Die Wahl im Becher, Timer, Korb, freie Zeiten und Öffnungsstatus brauchen JavaScript.
Durchgehend Du, der Betrieb spricht als wir. Die Sätze der Rechner, Timer und Formulare stehen in src/data/texte.ts, die Seiten unter src/pages/ tragen ihre Texte selbst. Deine KI stellt auf Sie um, wenn ihr eure Gäste siezt.
Der Aufbau ja. Wer nur bäckt, nimmt Rösterei und Zubereitung heraus und behält Querschnitt, Backstube und Frühstück. Eine Rösterei ohne Café streicht Frühstück und Reservierung und rückt Bohnen und Kurse nach vorn. Mit nur einer Adresse fasst deine KI die beiden Standorte zusammen.
Überall, wo statische Dateien liegen dürfen. Astro baut die Seite in einen Ordner mit fertigem HTML, den du bei deinem Hoster hochlädst. Vorher setzt deine KI die eigene Domain in astro.config.mjs und in robots.txt ein.
Ja. Einmal zahlen, für immer deins, für eigene Projekte und Kundenprojekte. Du bekommst den vollständigen Quellcode ohne Wasserzeichen.
Ja. Im englischen Paket ist die ganze Website englisch, mit englischer Wissensschicht und englischen Skills. Zahlen, Euro, Uhrzeiten und Datum formatieren die Skripte in der Sprache der Seite.
Nein. Du sagst deiner KI im Projektordner, was sich ändern soll, und sie findet die Stelle über CLAUDE.md und die sieben Skills. Wer selbst Hand anlegen will, findet Karte, Rezepte und Öffnungszeiten in src/data/site.ts und die Becherform in src/lib/becher.ts.
Neu im Marktplatz Das Café mit Backstube, dessen Raumplan jedem Gast den passenden Platz zu Kaffee und Franzbrötchen empfiehlt.
Für Kaffeebars, die mehr verkaufen als den Kaffee im Becher.
Für Häuser mit einer Karte, die länger ist als die Geduld am Tresen.
Wir möchten mit Google Analytics verstehen, wie diese Seite genutzt wird, geladen über den Google Tag Manager. Vor deinem Ok wird nichts geladen und kein Cookie gesetzt. Deine Wahl kannst du jederzeit im Datenschutz ändern.
Wähle selbst, was aktiv sein darf. Deine Auswahl kannst du jederzeit im Datenschutz ändern.