agentic-ventures-brand-kit — Standard-Stack-Layer fuer Kunden-CI
Standard-Stack-Baustein der bei jedem Design-affinen Kunden ausgerollt wird. Wiederverwendbar wie _index, nicht One-Off.
Problem
Wenn ein Kunde einen AI-Assistenten bekommt der Designs/Mockups/Slides/Cards/Social-Posts generiert (siehe vf-sonnet v2.10 <inline_visualisierungen>), redet der Assistent per Default in Anthropic-Cream-Stil. Das ist Standard-Fallback aber nicht das Brand des Kunden.
Pro Kunde muss der Assistent „im CI bleiben” — VF in VF-Farben + VF-Fonts + VF-Tonalitaet, Becker in Becker-CI, etc. Ohne dass wir jedes Mal manuell den System-Prompt patchen.
Loesung — Brand-Kit als Layer
Pro Kunde ein strukturiertes Brand-Kit-File das alles enthaelt was der Assistent fuer Design-Anfragen braucht:
- Farben (Primaer/Sekundaer/Akzent/Background/Text als Hex + OKLch)
- Typografie (Headline-Font, Body-Font, Skala, Letter-Spacing)
- Logo-Varianten (URL + Mindestgroesse + Schutzraum + Helle/Dunkle-Regel)
- Tonalitaet-Adjektive (z.B. „kantig, direkt, ohne Floskeln, B2B-tauglich”)
- Bild-Style-Beschreibung (Foto-Stilrichtung, Illustration-Stil)
- UI-Pattern (Buttons, Cards, Border-Radius, Spacing-Rhythmus)
- Anti-Patterns (was der Kunde nicht will — z.B. „kein Serif fuer Headlines, kein 70er-Jahre-Orange”)
Architektur — drei Layer-Optionen, hybrid empfohlen
| Layer | Wo lebt das CI | Wann gecallt | Token-Kosten | Wann nutzen |
|---|---|---|---|---|
A — Inline-Block in _base.txt | Markdown-Block im System-Prompt | jeder Request | +500-800 Tokens immer | klein (1-2 Tenants), schnell |
| B — Open WebUI Knowledge-Base (RAG) | PDF/MD im Knowledge-Store | per Retrieval bei Design-Tasks | nur on-demand | viele Tenants, gross |
| C — Brand-Kit-MCP | YAML/JSON pro Tenant, gespeichert in S3 oder Vault | bei Tool-Call brand_get_colors() etc. | nur on-demand | viele Tenants, programmatisch |
Empfehlung: Hybrid — A fuer aktive Tenants + Skeleton fuer C als Folge-Stack
- A startet sofort, ist 30-Min-Job pro Kunde, sofort wirksam
- C wird gebaut sobald 3+ Kunden aktiv sind — dann wird das Inline-Pattern unwirtschaftlich (jeder Kunde traegt seine 500-800 Tokens in jedem Request)
File-Format — brand-kit.yaml
# brand-kit.yaml — Source-of-Truth pro Kunde
tenant_id: vibe-factory
tenant_name: VibeFactory GmbH
website: https://vibe-factory.de
last_discovery: 2026-05-19
schema_version: 1
colors:
primary: { hex: "#XXXXXX", oklch: "...", role: "Logo + Akzent" }
secondary: { hex: "#XXXXXX", oklch: "...", role: "Sekundaer-Buttons" }
accent: { hex: "#XXXXXX", oklch: "...", role: "CTA + Highlights" }
bg_light: { hex: "#FFFFFF", oklch: "...", role: "Default-Hintergrund" }
bg_dark: { hex: "#000000", oklch: "...", role: "Hero-Sections" }
ink: { hex: "#1A1A1A", oklch: "...", role: "Body-Text" }
ink_soft: { hex: "#666666", oklch: "...", role: "Sekundaer-Text" }
typography:
headline: { font: "...", weight: 700, scale: "clamp(2.5rem, 5vw, 4.5rem)" }
body: { font: "...", weight: 400, line_height: 1.6, size: "1rem" }
mono: { font: "..." }
logo:
primary_url: "https://vibe-factory.de/logo.svg"
wordmark_only: true
min_height_px: 24
protected_space_factor: 0.5
tone_of_voice:
adjectives: [kantig, direkt, ohne_floskeln, B2B-tauglich, lokal_geerdet, mega_bock]
examples_dos:
- "Der VibeFaktor macht dein Event unvergesslich"
- "Drei Typen mit HAMMer Wurzeln"
examples_donts:
- "Im Rahmen unserer Möglichkeiten..."
- "Wir freuen uns mitzuteilen..."
image_style:
photography: "cinematisch, hell-warm, Event-On-Stage-Feel, B2B-Corporate"
illustration: "minimal, line-icons bevorzugt, keine 3D-Render-Cliparts"
ui_patterns:
border_radius: "8px"
button_style: "solid, no-gradient, hover: -2px y-shift"
card_spacing: "24px-grid"
anti_patterns:
- "Keine Comic-Sans, kein Standard-Tailwind-Default-Blau (#3b82f6)"
- "Keine generischen Stock-Fotos mit Suit-mit-Tablet"
- "Kein Em-Dash in deutschen Texten"Discovery-Workflow (pro Kunde, ~30 Min)
- Website scrapen — vibe-factory.de via WebFetch + CSS-Variablen + Computed-Styles + OG-Tags
- Screenshots der Hero-Section, Pricing-Section, Footer + Hero-Bild zur Farbsamplung
- Section-Copy einlesen — 10 Headlines + 5 Body-Paragraphen extrahieren → Tonalitaet-Cluster
- Logo-Asset herunterladen — direkt von der Website oder Kunde liefert SVG-Master
- Anti-Patterns vom Kunden — Andre/Christoph: „was nervt euch in Standard-AI-Designs?” — Liste
Output: brand-kit.yaml plus screenshots in intern/kunden/<slug>/brand-assets/.
Bau-Aufwand
| Phase | Beschreibung | Aufwand |
|---|---|---|
| 1 | Schema-Definition + Validator (Pydantic / Zod) | 0.5 Tag |
| 2 | Discovery-Script (Playwright-basiert, scrapet CSS + OG + Screenshots) | 1 Tag |
| 3 | YAML → System-Prompt-Block-Renderer (Jinja oder string-template) | 0.5 Tag |
| 4 | VF als 1. Kunde durchziehen | 1 Tag (Discovery + manuelle Pflege + Deploy v2.11) |
| 5 | Brand-Kit-MCP (Tool-Variante fuer Layer-C) — optional, spaeter | +1 Tag |
| Gesamt initial | ~3 Tage (ohne MCP-Layer) |
Pro Folge-Kunde: ~30 Min Discovery + manuelle Pflege.
DSGVO + Compliance
- Brand-Kit enthaelt keine Personenbezogenen Daten (nur Marken-Assets + Style-Rules)
- Logo-URLs zeigen auf Kunden-eigene Server / SharePoint
- Speicherort pro Kunde:
intern/kunden/<slug>/design-system.mdoder im Kunden-eigenen SharePoint (je nach Tenant-Modell)
Zusammenspiel mit Open Design
Das Open-Source-Repo nexu-io/open-design hat:
- 152 fertige Design-Systems (Anthropic, Linear, Stripe, Apple, Brutalism, Swiss-International, …)
- 5 Visual Directions als Default-Picks (Editorial Monocle, Modern Minimal, Warm Soft, Tech Utility, Brutalist Experimental)
- 131+ Skills mit Anti-Slop-Patterns
Verzahnung: unser brand-kit.yaml ist agentic-ventures-spezifisch + kundenkonkret. Open-Design liefert die generischen Direction-Templates als Fallback wenn ein Kunde noch kein eigenes CI hat. Per Tenant entscheidet das Brand-Kit:
- Custom-CI verfuegbar → System-Prompt-Block nutzt diesen
- Kein Custom-CI → fragt den User „welche von den 5 Open-Design Directions soll ich nehmen?”
Status
Status: partial-vf-done. VF als 1. Tenant durchgezogen 2026-05-18:
- Brand-Kit-File: design-system
<vf_brand>-Block deployed in vf-sonnet v2.15 (Dark + Neongelb + Futura PT)- VF-Icon-Assets unter README
- UI-Branding (Favicon-URL + CUSTOM_NAME) via Stack-Env-Vars deployed 2026-05-18 — Webflow-CDN-URL des VF-Icons
Standard-Stack-Library + Discovery-Script + MCP-Layer noch nicht gebaut (~3 Tage offen, Trigger: 2.+ Kunde).
Discovery-Beispiel — wie VF lief
- WebFetch auf
vibe-factory.de— initiale Brand-Analyse (Hex-Codes nicht direkt, aber Hinweise auf Stil + Tonalitaet) - CSS-Bundle parsen via
curl + grep -oE '#[0-9a-fA-F]{6}'auf das verlinkte Webflow-CSS — lieferte 19 Hex-Codes + Custom-Properties mit Tokens (--base-color-brand--neongelb-400,--bg-primary, etc.) - Logo-URLs extrahieren via
grep -oE 'cdn.prod.website-files.com.*\.(png|svg)'aus dem HTML - Tonalitaet aus Section-Copy ableiten — 5-7 Adjektive aus Headlines + Hero-Text
- Strukturiert ablegen in
intern/kunden/<slug>/design-system.md+ Asset-Dateien inassets/customers/<slug>/branding/ - System-Prompt erweitern um
<vf_brand>-Block (analog) + altes Default ersetzen - Stack-Env-Vars fuer
WEBUI_FAVICON_URL+ optionalWEBUI_LOGO_URL(haengt von Open-WebUI-Build ab) + Redeploy
Discovery-Aufwand pro Kunde Stand jetzt manuell: ~30-45 Min (war bei VF so). Discovery-Script wuerde das auf <5 Min druecken.
Cross-Refs
- welle-4-capability-rollout — Welle 4 Item 4.9 (VF als 1. Kunde fuer dieses Pattern)
- _index — Schwester-Standard-Stack-Capability
- produkt-bundle — Standard-Stack-Eintrag
- image-gen-provider-vergleich — verwandtes Design-Provider-Wissen