Design System

Component Parity Styleguide

Diese Referenz rendert die echten Produktionskomponenten der Startseite. Keine Lookalikes, keine generischen Platzhalter: alle Sections nutzen dieselben Component-Dateien, Klassen, Tokens und Daten wie die Live-Startseite.

Foundations

Tokens, Raster und Breakpoints

Primary#0A0A0A
On Primary#FFFFFF
Surface#FBFAF7
Background#FBFAF7
Accent#6C5CE7
Highlight#ECE8FF
Band#11112A
SpacingSection 72/88/104px

Mobile, Tablet und Desktop folgen den echten `.section` Breakpoints.

Radius8 / 6px

`--radius`, `--radius-sm`, `--radius-xs` steuern Cards, Buttons und Inputs.

Shadowsm / lg / xl

Cards, HeroMedia und Formulare verwenden die zentralen Shadow-Tokens.

Grid1 → 2 Spalten

Service-, Pricing- und Ressourcen-Grids übernehmen die Startseiten-Breakpoints.

Atoms

Typografie, Buttons, Inputs und Icons

KI-Bar

KI für Macher:innen. Machbar für dein Business.

KI-Bar ist für Selbstständige und kleine Teams, die nicht noch einen Tool-Kurs suchen, sondern ins Machen kommen wollen: mit KI, Workflows, Automatisierung und besseren Abläufen.

Live, online und vor Ort · direkt an deinen echten Aufgaben

Ich möchte eine Demo

States

Navigation, Overlays und Utilities

Brand
KI-Bar
Theme Toggle
Hero Pagination
Scroll Top

Molecules

Echte Startseiten-Komponenten

ServiceCard

Live-Workshop

In 3 Stunden baust du einen ersten KI-Workflow für Content, E-Mails, Angebote oder Recherche.

KI-Sprint

Vier Wochen Umsetzung in kleiner Gruppe. Am Ende steht dein eigenes KI-Arbeitssystem.

1:1 Setup

Wir bauen mit dir Prompts, Vorlagen und Abläufe, die direkt zu deinem Business passen.

FeatureCard

01

Use Case wählen

Du startest mit einer Aufgabe, die dir wirklich Zeit, Sichtbarkeit oder Sicherheit bringt.

02

Workflow bauen

Wir gehen an echte Aufgaben: Texte, Ideen, Angebote, Planung, Recherche, Kund:innen-Kommunikation und Sichtbarkeit.

03

Systematisieren

Aus einzelnen Prompts werden wiederholbare Abläufe, Vorlagen und kleine Routinen.

04

Sicherer entscheiden

Du lernst, welche Ergebnisse brauchbar sind, wo du prüfen musst und wie du KI verantwortungsvoll nutzt.

05

Dranbleiben

Mit Workshops, Sprint und 1:1-Setup findest du den Einstieg, der zu deinem Tempo passt.

BenefitItem

01

KI ohne Technikjargon, aber mit echtem Ergebnis.

02

Beispiele aus Selbstständigkeit, KMU, Marketing und Kund:innen-Arbeit.

03

Konkrete Abläufe statt Tool-Listen, die morgen wieder veraltet sind.

DetailCard

1. Verstehen

Wir schauen auf deine Aufgaben, Ziele, Werkzeuge und die Stellen, an denen gerade Zeit verloren geht.

2. Fokus setzen

Wir wählen einen konkreten Use Case: Content, Angebote, Recherche, Planung oder Kund:innen-Kommunikation.

3. Workflow bauen

Aus deinem Use Case wird ein klarer Ablauf mit Prompts, Vorlagen und Prüfpunkten.

4. Anwenden

Du testest den Workflow an echten Aufgaben und schärfst ihn so nach, dass er in deinem Alltag bleibt.

PackageCard

Am beliebtesten

Live-Workshop

79–179 EUR

3 Stunden online oder vor Ort. Du baust einen ersten Workflow für Content, Angebote, E-Mails oder Recherche.

Option

KI-Sprint

399–799 EUR

Vier Wochen in kleiner Gruppe. Du entwickelst dein eigenes KI-Arbeitssystem mit Feedback und Struktur.

Option

1:1 Setup

690–1.500 EUR

Persönliche Begleitung für Prompts, Vorlagen, Tools und Abläufe, die zu deinem Business passen.

Option

Team-Workshop

1.200–4.500 EUR

Halb- oder Ganztagesformat für kleine Unternehmen, Verbände, Netzwerke und Teams.

JournalGrid

StepItem & FAQItem

1

Use Case wählen

2

Workflow bauen

3

Vorlagen sichern

4

Im Alltag nutzen

Brauche ich Vorkenntnisse?

Nein. KI-Bar ist genau für Einsteiger:innen gemacht, die noch keine KI-Erfahrung haben.

Welche Tools brauche ich?

Nur einen Laptop und Internet. Alles andere zeigen wir dir im Workshop.

Kann ich auch ohne Workshop starten?

Ja, mit unseren Selbstlern-Formaten oder dem 1:1 Setup findest du deinen eigenen Einstieg.

Für wen ist KI-Bar gedacht?

Für Selbstständige, kleine Teams und Menschen, die KI praktisch in ihren Arbeitsalltag bringen wollen. Der Fokus liegt auf zugänglichen Formaten, klarer Sprache und echten Workflows statt Tool-Hype.

Parity

Startseite ↔ Styleguide

StartseitenbereichKomponentennameVarianteProps/DataStatus
Header / NavigationNavigationDesktop + Mobilesite.navigation, site.hero.navCtaidentisch
Hero SectionHero + HeroMedia3 Slides + 01/03 Progresssite.hero, site.hero.slidesidentisch
KI-Bar PrinzipOutcomeStripBandsite.outcomeStripidentisch
EinführungPraxisProfileSectionProfil + Nutzenlistesite.intro, site.insight, site.benefitsidentisch
LeistungenServicesSection / ServiceCard2er Editorial Image Gridsite.services + media assetsidentisch
BlogResourcesPreviewSection / JournalGridHome 2x2 · Index 1/2/3resourceArticlesidentisch
Ressourcen & AblaufFocusSection / FeatureCard + StepItemLabel Cards + Startprozesssite.builderFeatures.items, site.processidentisch
EinblickeImageShowcaseSection / GalleryBildboxensite.media.galleryidentisch
AngebotePracticeDetailsSection + PackagesSection + FAQSectionDetails, Pakete, FAQsite.details, site.pricing, site.faqidentisch
CTA BandCTASectionSecondary CTAsite.ctaidentisch
FAQFAQSection / FAQItemStatic listsite.faqidentisch
KontaktContact / ContactInfo + FormInfo + Formsite.contactidentisch
FooterFooterLegal + Noindexsite.project, site.contact, site.legalidentisch

Sections

Startseiten-Architektur als echte Komponenten

KI-Bar

KI für Macher:innen. Machbar für dein Business.

KI-Bar ist für Selbstständige und kleine Teams, die nicht noch einen Tool-Kurs suchen, sondern ins Machen kommen wollen: mit KI, Workflows, Automatisierung und besseren Abläufen.

Live, online und vor Ort · direkt an deinen echten Aufgaben

Selbstständige im KI-Workshop am Laptop
01BauenDein erster Workflow
22%der KI-Fachkräfte sind Frauen12%der KI-Forschenden sind Frauen18%der Tech-Konferenz-Speaker:innen sind Frauen66%der Arbeitgeber setzen KI-Kenntnisse voraus
KI-Bar Prinzip

Nicht mehr nur ausprobieren.

Baue dir ein System, das bleibt.

Warum jetzt?

Der Gender AI Gap ist real. Aber er ist nicht fix.

Nur 22% der KI-Fachkräfte, 12% der KI-Forschenden und 18% der Sprecher:innen auf großen Tech-Konferenzen sind Frauen. Gleichzeitig setzen viele Arbeitgeber und Auftraggeber:innen KI-Kenntnisse voraus. Diese Zahlen sind kein Grund, sich ausgeschlossen zu fühlen. Sie sind eine Einladung: Du kannst KI für deine Arbeit nutzbar machen.

Warum KI-Bar anders ist

KI-Bar ist kein generischer Tool-Kurs. Wir übersetzen KI in deine Aufgaben: Angebote schreiben, Content planen, Kund:innen-Kommunikation verbessern, Recherche strukturieren und wiederkehrende Arbeit vereinfachen.

01

KI ohne Technikjargon, aber mit echtem Ergebnis.

02

Beispiele aus Selbstständigkeit, KMU, Marketing und Kund:innen-Arbeit.

03

Konkrete Abläufe statt Tool-Listen, die morgen wieder veraltet sind.

KI-Bar gibt es, weil KI gerade die Arbeitswelt verändert, aber viele Frauen dabei noch zu selten mitgedacht werden. Die Lücke entsteht nicht, weil Frauen weniger können. Sie entsteht, wenn Zugänge fehlen, Sprache abschreckt und Technikräume nicht für alle offen wirken. Hinter KI-Bar steht [VORNAME]. [HINTERGRUND IN 1 SATZ] Wir glauben: KI darf nicht nur denen gehören, die sowieso schon nah an Technik sind. Du sollst verstehen können, was möglich ist, ohne dich klein zu fühlen oder dich durch Fachsprache kämpfen zu müssen. KI-Bar macht KI greifbar, praktisch und menschlich, damit du sie selbstbewusst für deine Arbeit nutzen kannst.

Dein Angebot

Wie du KI nutzbar machst

Live-Workshop

In 3 Stunden baust du einen ersten KI-Workflow für Content, E-Mails, Angebote oder Recherche.

Workshop anfragen

KI-Sprint

Vier Wochen Umsetzung in kleiner Gruppe. Am Ende steht dein eigenes KI-Arbeitssystem.

Sprint vormerken

1:1 Setup

Wir bauen mit dir Prompts, Vorlagen und Abläufe, die direkt zu deinem Business passen.

Setup anfragen

Ressourcen

So wird KI greifbar

Du lernst nicht alles auf einmal. Du startest mit den Aufgaben, die dir heute Zeit, Sichtbarkeit oder Sicherheit bringen.

01

Use Case wählen

Du startest mit einer Aufgabe, die dir wirklich Zeit, Sichtbarkeit oder Sicherheit bringt.

02

Workflow bauen

Wir gehen an echte Aufgaben: Texte, Ideen, Angebote, Planung, Recherche, Kund:innen-Kommunikation und Sichtbarkeit.

03

Systematisieren

Aus einzelnen Prompts werden wiederholbare Abläufe, Vorlagen und kleine Routinen.

04

Sicherer entscheiden

Du lernst, welche Ergebnisse brauchbar sind, wo du prüfen musst und wie du KI verantwortungsvoll nutzt.

05

Dranbleiben

Mit Workshops, Sprint und 1:1-Setup findest du den Einstieg, der zu deinem Tempo passt.

Für wen

Das ist für dich, wenn…

KI-Bar ist für dich, wenn du KI nutzen willst, aber keine Lust auf Fachsprache, Tool-Chaos oder Kurse hast, die an deinem Alltag vorbeigehen.

Du bist selbstständig

Du willst Zeit sparen

Du willst Angebote, Content, Planung oder Kund:innen-Kommunikation schneller vorbereiten, ohne Qualität zu verlieren.

Du führst ein kleines Team

Du willst mitreden

Du willst verstehen, was KI für dein Unternehmen bedeutet, ohne dich auf Tech-Floskeln verlassen zu müssen.

Du hast schon getestet

Du willst Struktur

Du hast ChatGPT oder andere Tools ausprobiert, aber noch keinen Ablauf, der wirklich hängen bleibt.

Du startest bei null

Du darfst einfach anfangen

Du brauchst kein Vorwissen. KI-Bar holt dich dort ab, wo du stehst.

Ressourcen

Einblicke & Materialien

Warum KI-Bar?

Wie läuft es ab?

Zuerst verstehen wir deine Aufgaben und Alltagssituation. Danach entsteht Schritt für Schritt ein Ablauf, den du wirklich im Alltag nutzt.

1. Verstehen

Wir schauen auf deine Aufgaben, Ziele, Werkzeuge und die Stellen, an denen gerade Zeit verloren geht.

2. Fokus setzen

Wir wählen einen konkreten Use Case: Content, Angebote, Recherche, Planung oder Kund:innen-Kommunikation.

3. Workflow bauen

Aus deinem Use Case wird ein klarer Ablauf mit Prompts, Vorlagen und Prüfpunkten.

4. Anwenden

Du testest den Workflow an echten Aufgaben und schärfst ihn so nach, dass er in deinem Alltag bleibt.

Formate

Wähle deinen Einstieg

Am beliebtesten

Live-Workshop

79–179 EUR

3 Stunden online oder vor Ort. Du baust einen ersten Workflow für Content, Angebote, E-Mails oder Recherche.

Option

KI-Sprint

399–799 EUR

Vier Wochen in kleiner Gruppe. Du entwickelst dein eigenes KI-Arbeitssystem mit Feedback und Struktur.

Option

1:1 Setup

690–1.500 EUR

Persönliche Begleitung für Prompts, Vorlagen, Tools und Abläufe, die zu deinem Business passen.

Option

Team-Workshop

1.200–4.500 EUR

Halb- oder Ganztagesformat für kleine Unternehmen, Verbände, Netzwerke und Teams.

Bereit für deinen ersten KI-Workflow?

Der nächste Workshop ist in Planung. Trag dich ein und wir informieren dich, sobald Termine feststehen.

Zum Kontakt

FAQ

Fragen? Antworten.

Brauche ich Vorkenntnisse?

Nein. KI-Bar ist genau für Einsteiger:innen gemacht, die noch keine KI-Erfahrung haben.

Welche Tools brauche ich?

Nur einen Laptop und Internet. Alles andere zeigen wir dir im Workshop.

Kann ich auch ohne Workshop starten?

Ja, mit unseren Selbstlern-Formaten oder dem 1:1 Setup findest du deinen eigenen Einstieg.

Für wen ist KI-Bar gedacht?

Für Selbstständige, kleine Teams und Menschen, die KI praktisch in ihren Arbeitsalltag bringen wollen. Der Fokus liegt auf zugänglichen Formaten, klarer Sprache und echten Workflows statt Tool-Hype.

Kontakt

Dein nächster KI-Schritt

Sag kurz, wo du stehst. Wir melden uns mit dem passenden Einstieg: Live-Workshop, KI-Sprint, 1:1-Setup oder Team-Format.

Dies ist eine Demo. Es wird keine Nachricht versendet.