Zum Inhalt

RD-06 · Templates

Templates ohne den Default

Paste in Cursor. Lock sitzt schon in jedem Brief. Plus oder Studio auf der Abo-Seite wählen.

Plus

3 Starter

01

Atelier

Type-led Broschüre für Studio, Praxis, Handwerk. Plus.

Plus

Liegt in Plus. Auf der Abo-Seite Plus wählen — kein Login, keine Zahlung.

Abo wählen

atelier
Baue eine deutsche Broschüre (Typ A, Astro + Tailwind, Netlify Forms) namens Atelier.

DESIGN.md zuerst:
- Signatur: type-led
- Canvas #EFE8DC, ink #1A1612, muted #5A5348, accent #7A2E24 (nicht die Fingerprint-Hexes)
- Display: Cabinet Grotesk lokal, Body: Switzer lokal. Kein Inter/Geist, kein Google-Fonts-CDN.
- Keine drei Icon-Karten. Kein Bento als Features. Kein Fade-up-Spam.
- Du-Anrede, Sentence Case. Eine primäre Handlung im ersten Viewport.

Seiten: Start, Leistungen (Liste), Kontakt, Impressum, Datenschutz.
Erster Viewport: Wer, konkrete Leistung (Nomen), Telefon oder Anfrage. Echtes Foto der Arbeit wenn vorhanden, sonst reine Typo.
Sticky Anruf auf Mobile ≥44px.
Zentrale Config: Name, Telefon, E-Mail, Adresse.
Platzhalter klar markieren. Keine erfundenen Reviews.
netlify.toml + README auf Deutsch.

02

Edition

Editorial für Magazin, Label, Verlag. Plus.

Plus

Liegt in Plus. Auf der Abo-Seite Plus wählen — kein Login, keine Zahlung.

Abo wählen

edition
Baue eine deutsche Editorial-Site (Typ A, Astro + Tailwind) namens Edition.

DESIGN.md zuerst:
- Signatur: editorial
- Canvas #F4F0E8, ink #16130F, accent #A61F14 auf ca. 5 % der Fläche
- Display: Newsreader oder Source Serif 4 lokal, Body: IBM Plex Sans lokal.
- Serif darf groß sein, weil der Inhalt editorial ist — nicht als Universal-Skin für SaaS.
- Maß 60–70ch. Regeln statt Karten. Kein Logo-Wall, kein Ghost „Mehr erfahren“.

Seiten: Start (Inhaltsverzeichnis-Logik), eine Artikel-Vorlage, Kontakt, Impressum, Datenschutz.
Start: Ausgabe, Datum, 3–6 echte oder klar als Platzhalter markierte Beiträge.
Kein Fake-Abo-Checkout. Wenn Newsletter: nur DOI-Hinweis, kein Tracker.
Fonts lokal. README: wie man eine Ausgabe anlegt.

03

Werk

Product-UI ohne zinc-Glow. Plus.

Plus

Liegt in Plus. Auf der Abo-Seite Plus wählen — kein Login, keine Zahlung.

Abo wählen

werk
Baue eine Product-Marketing-Seite plus App-Shell-Skizze (Typ C-Optik, aber statisch) namens Werk.

DESIGN.md zuerst:
- Signatur: product-UI
- Canvas #F2F3EF, ink #16181C, accent #2C5850 — nicht zinc-950, nicht indigo
- Display: Bricolage Grotesque lokal, Body: IBM Plex Sans, Mono nur in der echten UI-Skizze
- Echte oder klar markierte Screenshots, kein Fake-Terminal, kein Glow.

Marketing: wer, was das Produkt tut (Nomen), eine Handlung (Demo anfragen).
App-Shell-Skizze: dichte Tabelle oder Inbox-Leerezustand, Fehlermeldung mit Recovery — nicht eine zweite Landing.
Keine unangetasteten shadcn-Defaults. Tokens in einer Datei.
Impressum/Datenschutz für tatsächlichen Stack. Kein Art.-50-Badge, kein Chatbot.
README: Token-Datei, wie man den Screenshot austauscht.

Studio

3 Starter

04

Praxis

Lokaler Fachbetrieb mit NAP und sticky Call. Studio.

Studio

Liegt in Studio. Auf der Abo-Seite Studio wählen — kein Login, keine Zahlung.

Abo wählen

praxis
Baue eine deutsche Praxis-/Handwerk-Broschüre (Typ A) nach Mode 3, mit dem Schärfegrad von Mode 2 (echte Angaben, nichts erfinden).

DESIGN.md zuerst. Signatur: photo-led wenn echte Arbeitsfotos da sind, sonst type-led.
Palette aus dem Gewerk ableiten, nicht aus Tailwind. Fonts lokal.

Pflicht:
- NAP aus einer zentralen Config
- Leistungen als Definitionsliste
- Sticky Call + Anfrage auf Mobile
- Zwei-Klick-Karte, kein Google-Maps-iframe beim ersten Hit
- Impressum § 5 DDG, Datenschutz = Hosting + Formular + lokale Fonts
- Keine KI-Gesichter als Team

Wenn der Auftraggeber eine Live-URL nennt: erst Audit (Keep/Improve/Drop), dann bauen.
Handoff: README mit Deploy (Netlify Git oder Dist-Drop), wo NAP liegt, Anwalt-TODOs.

05

Kunden-Handoff

Was du nach einem Redesign mitgibst. Studio.

Studio

Liegt in Studio. Auf der Abo-Seite Studio wählen — kein Login, keine Zahlung.

Abo wählen

handoff
Erzeuge ein ehrliches Handoff-Paket für ein Kunden-Redesign (kein Marketing-Nebel).

Schreibe in README oder /handoff.md:

1. Was live ist (URLs, Formulare, Telefon)
2. Keep / Improve / Drop aus dem Audit
3. Welche MotionSites-Free-Prompts als Rezept dienten (Name + URL) — oder „keine“
3b. Welche Craft-Assets (Unicorn, Rive, Shader, GSAP, …) — Lizenz/free, remap, Mobile-Fallback
4. Fonts: Dateinamen, Lizenz, self-host
5. Farben in Hex, warum der Akzent
6. Was Platzhalter bleibt (HRB, USt-IdNr., Fotos)
7. Wie man Texte und NAP ändert (eine Config)
8. Deploy: Netlify Git und alternativ Dist-ZIP
9. Anwalt-TODOs, residual risk, BFSG-Flag falls relevant
10. Was bewusst nicht gebaut wurde (Cut-Liste)

Kein Fake „seit 2014“. Keine erfundenen Reviews. Ton: intern, knapp, Du oder Sie wie im Projekt.

06

Kante

B2B-Lead / Agentur-Landing: Foto-Ebenen, ein Ambient, Conversion-Spine, Handy zuerst. Studio.

Studio

Liegt in Studio. Auf der Abo-Seite Studio wählen — kein Login, keine Zahlung.

Abo wählen

kante
Baue eine deutsche Conversion-Landing (Typ A, Astro + Tailwind, Netlify Forms) im Mood Kante.

Lies und befolge prompts/WOW-CONVERSION.md und prompts/SUBTLE-MOTION.md. Architektur einer teuren Foto-Landing studieren — Copy, Fotos, Rive-Files, Palette, Webflow **nicht** klonen.

DESIGN.md zuerst:
- Signatur: photo-led
- Palette: Canvas #161412, surface #221E1A, ink #F3EEE4, accent #B84A28 (Nacht & Oxid). Nicht Teal eines anderen Studios, nicht zinc-950, nicht Inter.
- Display: Bricolage Grotesque lokal, Body: IBM Plex Sans lokal.
- Radius klein, keine Drop-Shadows — Tiefe aus Foto-Ebenen.
- Fluid type mit clamp und Mobile-Max (Utopia). html lang=de.

Erster Viewport: echtes Foto (Rechte müssen da sein, sonst klarer Platzhalter) → optional ein Ambient (freie Rive/Lottie/Shader, pointer-events none) → Typ und **eine** CTA. Typ im Stillstand lesbar.

Spine (nicht aufblähen, nichts erfinden):
1. Hero (Versprechen + eine Handlung)
2. Proof — nur echte Logos oder benannte Ergebnisse. Sonst weglassen.
3. Problem-Stack — 2–4 konkrete Schmerzen, keine drei Icon-Karten
4. Angebot als Liste
5. Methode: 3–5 Schritte **oder** eine Systemgrafik
6. FAQ = Einwände
7. Dieselbe CTA nochmal. NAP in der Nähe.

Motion-Budget: ein Wow, ein Ambient, Micro per CSS. Kein Lenis. Ein Live-Canvas max. prefers-reduced-motion = Still.

Handy (390×844 vor Ship): overflow-x 0, kein zweites Canvas, H1 umbrechen, sticky = die primäre Handlung ≥44px, Marquee wird Grid oder geclippt.

Heilmittelwerbegesetz wenn Gesundheit. Keine erfundenen Reviews. netlify.toml + README auf Deutsch inkl. Asset-Log.