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
Mobile, Tablet und Desktop folgen den echten `.section` Breakpoints.
`--radius`, `--radius-sm`, `--radius-xs` steuern Cards, Buttons und Inputs.
Cards, HeroMedia und Formulare verwenden die zentralen Shadow-Tokens.
Service-, Pricing- und Ressourcen-Grids übernehmen die Startseiten-Breakpoints.
Atoms
Typografie, Buttons, Inputs und Icons
KogNaut
KI nutzen, ohne dein Denken abzugeben.
KogNaut hilft Selbstständigen und kleinen Teams, KI sinnvoll in ihre Arbeit zu integrieren — mit klaren Workflows, menschlichen Prüfpunkten und Strategien gegen Tool-Abhängigkeit.
Für produktive KI-Nutzung ohne Blindflug.
States
Navigation, Overlays und Utilities
Molecules
Echte Startseiten-Komponenten
ServiceCard
KogNaut Check
Ein nüchterner Blick auf deine aktuellen Aufgaben, Tools und Risiken. Danach weißt du, wo KI sinnvoll hilft, wo Scheinproduktivität entsteht und welche Prüfpunkte du brauchst.
KogNaut Workshop
Wir bauen keinen Demo-Prompt, sondern einen echten Workflow aus deinem Arbeitsalltag: produktiv, dokumentiert und mit klaren Qualitätschecks.
KlarLoop Sprint
Aus einzelnen KI-Versuchen wird ein belastbares Arbeitssystem mit Workflows, Vorlagen, Prüfpunkten, Playbook und Exit-Strategie gegen Tool-Abhängigkeit.
Team Guardrails
Klare Regeln für KI im Team: Tool-Liste, Datenschutzgrenzen, Qualitäts-Checkliste, Rollen, Quellenlogik und Umgang mit sensiblen Daten.
FeatureCard
Klären
Welche Aufgabe soll KI wirklich verbessern — und welche Qualität muss erhalten bleiben?
Bauen
Aus einem Use Case wird ein konkreter Workflow mit passenden Prompts und klarer Rollenverteilung.
Prüfen
Quellen, Logik, Tonalität und Qualität werden abgesichert, bevor Ergebnisse weiterverwendet werden.
Erhalten
Wichtige Fähigkeiten bleiben beim Menschen: Urteil, Kontext, Stil und Entscheidungshoheit.
Entkoppeln
Der Prozess funktioniert nicht nur mit einem einzigen Tool. Alternativen und Fallbacks sind Teil des Systems.
BenefitItem
Scheinproduktivität: Du erzeugst mehr Output, aber nicht automatisch bessere Arbeit.
Tool-Abhängigkeit: Wenn ein Tool teurer, schlechter oder geschlossen wird, darf dein Prozess nicht wegbrechen.
Qualitätsverlust: Ohne Prüfpunkte übernehmen sich Fehler, Halbwissen und generische Sprache.
Denk-Outsourcing: Wenn KI jede Vorarbeit übernimmt, trainierst du deine eigene Urteilskraft weniger.
DetailCard
Early-Adopter-Vorteile mitnehmen
Nutze KI dort, wo sie echten Mehrwert bringt — bevor schlechte Gewohnheiten und Tool-Chaos zum Standard werden.
Qualität absichern
Menschliche Prüfpunkte verhindern, dass falsche Quellen, generische Sprache oder schwache Argumente einfach durchrutschen.
Unabhängig bleiben
Workflows, Fallbacks und Tool-Alternativen sorgen dafür, dass dein Prozess nicht an einer Plattform hängt.
Playbook statt Bauchgefühl
Am Ende stehen dokumentierte Abläufe, Prompts, Regeln und Checks, die wiederholbar genutzt werden können.
PackageCard
KogNaut Check
90 MinutenKlarheit über sinnvolle Use Cases, Risiken, Tool-Auswahl und nächste Schritte. Für Einzelpersonen oder kleine Teams.
KogNaut Workshop
3 StundenEin dokumentierter KI-Workflow für eine echte Aufgabe: inklusive Prompts, Prüfpunkten, Tool-Empfehlungen und manueller Fallback-Option.
KlarLoop Sprint
4 WochenWorkflows, Vorlagen, Prüfpunkte und ein KogNaut Playbook für ein belastbares KI-Arbeitssystem.
Team Guardrails
Halbtag / TagKI-Nutzungsregeln, Qualitäts-Checkliste, Datenschutzgrenzen, Rollen, Verantwortlichkeiten und Umgang mit Shadow-AI.
JournalGrid
GEO ohne Blindflug: Wie KI-Antworten dein Angebot wirklich verstehen
KI-Sichtbarkeit funktioniert nicht über Keyword-Hektik, sondern über klare Antworten, belastbare Quellen und Inhalte, die ein System prüfen kann.
KI-SucheKI-Agenten brauchen Grenzen: Was du delegieren kannst und was nicht
Agenten werden erst nützlich, wenn Aufgabe, Datenzugriff, Freigabe und menschliche Entscheidung sauber getrennt sind.
KontrolleMCP verstehen: Mehr Kontext für KI, ohne alles freizugeben
Das Model Context Protocol kann KI mit Tools und Daten verbinden. Entscheidend ist nicht der Anschluss, sondern die Grenze.
Tool-UnabhängigkeitWarum gute KI-Arbeit nicht bei Prompts endet
Prompts helfen beim Start. Wirklich belastbar wird KI-Arbeit erst mit klaren Workflows, Prüfpunkten und Fallbacks.
WorkflowsStepItem & FAQItem
Use Case klären
Workflow bauen
Prüfpunkte definieren
Skill-Erhalt sichern
Tool-Lock-in vermeiden
Ist KogNaut ein KI-Workshop?
Nicht nur. Workshops sind ein Teil davon. Eigentlich geht es um nachhaltige KI-Adoption: sinnvolle Workflows, klare Prüfpunkte und weniger Tool-Abhängigkeit.
Brauche ich Vorkenntnisse?
Nein. Ein konkreter Arbeitskontext reicht. Wir arbeiten nicht an Spielzeug-Beispielen, sondern an echten Aufgaben.
Geht es nur um ChatGPT?
Nein. ChatGPT kann Teil davon sein, aber KogNaut ist nicht an ein einzelnes Tool gebunden. Der Prozess ist wichtiger als das Tool.
Ist das anti-KI?
Nein. Im Gegenteil. KogNaut hilft dir, KI besser zu nutzen — aber bewusst, prüfbar und souverän.
Was bedeutet KlarLoop?
KlarLoop ist die Methode hinter KogNaut. Sie sorgt dafür, dass KI-Workflows nicht blind automatisiert werden, sondern mit menschlichen Prüfpunkten, Skill-Erhalt und Tool-Unabhängigkeit funktionieren.
Parity
Startseite ↔ Styleguide
| Startseitenbereich | Komponentenname | Variante | Props/Data | Status |
|---|---|---|---|---|
| Header / Navigation | Navigation | Desktop + Mobile | site.navigation, site.hero.navCta | identisch |
| Hero Section | Hero + HeroMedia | 3 Slides + 01/03 Progress | site.hero, site.hero.slides | identisch |
| KogNaut Prinzip | OutcomeStrip | Band | site.outcomeStrip | identisch |
| Einführung | PraxisProfileSection | Profil + Nutzenliste | site.intro, site.insight, site.benefits | identisch |
| Leistungen | ServicesSection / ServiceCard | 2er Editorial Image Grid | site.services + media assets | identisch |
| Blog | ResourcesPreviewSection / JournalGrid | Home 2x2 · Index 1/2/3 | resourceArticles | identisch |
| Ressourcen & Ablauf | FocusSection / FeatureCard + StepItem | Label Cards + Startprozess | site.builderFeatures.items, site.process | identisch |
| Einblicke | ImageShowcaseSection / Gallery | Bildboxen | site.media.gallery | identisch |
| Angebote | PracticeDetailsSection + PackagesSection + FAQSection | Details, Pakete, FAQ | site.details, site.pricing, site.faq | identisch |
| CTA Band | CTASection | Secondary CTA | site.cta | identisch |
| FAQ | FAQSection / FAQItem | Static list | site.faq | identisch |
| Kontakt | Contact / ContactInfo + Form | Info + Form | site.contact | identisch |
| Footer | Footer | Legal + Noindex | site.project, site.contact, site.legal | identisch |
Sections
Startseiten-Architektur als echte Komponenten
KogNaut
KI nutzen, ohne dein Denken abzugeben.
KogNaut hilft Selbstständigen und kleinen Teams, KI sinnvoll in ihre Arbeit zu integrieren — mit klaren Workflows, menschlichen Prüfpunkten und Strategien gegen Tool-Abhängigkeit.
Für produktive KI-Nutzung ohne Blindflug.

Nicht mehr Tools.
Mehr Klarheit.Problem
KI spart Zeit. Bis sie dein Urteil ersetzt.
Viele starten mit KI, weil sie schneller schreiben, recherchieren oder planen wollen. Am Anfang funktioniert das oft erstaunlich gut. Aber genau dort beginnt das Risiko: Wenn Ergebnisse nur noch übernommen werden, geht langsam verloren, was eigentlich wertvoll ist — Urteilskraft, Kontext, Erfahrung und eigene Sprache.
KogNaut setzt nicht bei Tool-Hype an, sondern bei Verantwortung: Was darf KI übernehmen? Was musst du selbst können? Wo brauchst du Quellen, Checks und klare Grenzen? Das Ziel ist kein Autopilot. Das Ziel ist ein System, das dich unterstützt, ohne dich abhängig zu machen.
Scheinproduktivität: Du erzeugst mehr Output, aber nicht automatisch bessere Arbeit.
Tool-Abhängigkeit: Wenn ein Tool teurer, schlechter oder geschlossen wird, darf dein Prozess nicht wegbrechen.
Qualitätsverlust: Ohne Prüfpunkte übernehmen sich Fehler, Halbwissen und generische Sprache.
Denk-Outsourcing: Wenn KI jede Vorarbeit übernimmt, trainierst du deine eigene Urteilskraft weniger.
Damit KI dich schneller macht, aber nicht abhängig.
Angebote
Angebote für souveräne KI-Nutzung
KogNaut Check
Ein nüchterner Blick auf deine aktuellen Aufgaben, Tools und Risiken. Danach weißt du, wo KI sinnvoll hilft, wo Scheinproduktivität entsteht und welche Prüfpunkte du brauchst.
Check startenKogNaut Workshop
Wir bauen keinen Demo-Prompt, sondern einen echten Workflow aus deinem Arbeitsalltag: produktiv, dokumentiert und mit klaren Qualitätschecks.
Workshop anfragenKlarLoop Sprint
Aus einzelnen KI-Versuchen wird ein belastbares Arbeitssystem mit Workflows, Vorlagen, Prüfpunkten, Playbook und Exit-Strategie gegen Tool-Abhängigkeit.
Sprint anfragenTeam Guardrails
Klare Regeln für KI im Team: Tool-Liste, Datenschutzgrenzen, Qualitäts-Checkliste, Rollen, Quellenlogik und Umgang mit sensiblen Daten.
Team-Workshop planenKlarLoop Methode
Ein einfacher Ablauf für nachhaltige KI-Adoption.
KlarLoop ist kein Prompt-System und kein Tool-Kurs. Es ist ein Arbeitsprinzip: KI unterstützt, aber der Mensch bleibt im Loop.
Klären
Welche Aufgabe soll KI wirklich verbessern — und welche Qualität muss erhalten bleiben?
Bauen
Aus einem Use Case wird ein konkreter Workflow mit passenden Prompts und klarer Rollenverteilung.
Prüfen
Quellen, Logik, Tonalität und Qualität werden abgesichert, bevor Ergebnisse weiterverwendet werden.
Erhalten
Wichtige Fähigkeiten bleiben beim Menschen: Urteil, Kontext, Stil und Entscheidungshoheit.
Entkoppeln
Der Prozess funktioniert nicht nur mit einem einzigen Tool. Alternativen und Fallbacks sind Teil des Systems.
Für wen
Für Menschen, die KI nutzen wollen — aber nicht blind.
KogNaut ist für Selbstständige, Kreative, kleine Teams und Wissensarbeiter:innen, die produktiver arbeiten wollen, ohne ihre eigene Qualität zu verlieren.
Expertise behalten
Baue KI-Workflows, die dir Arbeit abnehmen, ohne deine Stimme und Expertise zu verwässern.
Konzept bleibt bei dir
Nutze KI für Recherche, Ideen, Struktur und Varianten — aber behalte Qualität und Entscheidungshoheit.
Gemeinsame Regeln
Schaffe Guardrails, damit KI nicht zur unsichtbaren Schatten-Infrastruktur wird.
Schneller mit Checks
Beschleunige Denken, Schreiben und Recherchieren — mit klaren Prüfpunkten statt blindem Vertrauen.
Warum jetzt
Jetzt ist der richtige Moment — aber nicht für blinden Hype.
KI-Tools sind billig, schnell und überall verfügbar. Genau deshalb lohnt es sich, sie früh zu nutzen. Aber wer jetzt alles ungeprüft auslagert, baut Abhängigkeiten auf: von Tools, Preisen, Plattformen und Ergebnissen, die überzeugend klingen, aber nicht automatisch richtig sind.
Early-Adopter-Vorteile mitnehmen
Nutze KI dort, wo sie echten Mehrwert bringt — bevor schlechte Gewohnheiten und Tool-Chaos zum Standard werden.
Qualität absichern
Menschliche Prüfpunkte verhindern, dass falsche Quellen, generische Sprache oder schwache Argumente einfach durchrutschen.
Unabhängig bleiben
Workflows, Fallbacks und Tool-Alternativen sorgen dafür, dass dein Prozess nicht an einer Plattform hängt.
Playbook statt Bauchgefühl
Am Ende stehen dokumentierte Abläufe, Prompts, Regeln und Checks, die wiederholbar genutzt werden können.
Formate
Wähle den passenden Einstieg
KogNaut Check
90 MinutenKlarheit über sinnvolle Use Cases, Risiken, Tool-Auswahl und nächste Schritte. Für Einzelpersonen oder kleine Teams.
KogNaut Workshop
3 StundenEin dokumentierter KI-Workflow für eine echte Aufgabe: inklusive Prompts, Prüfpunkten, Tool-Empfehlungen und manueller Fallback-Option.
KlarLoop Sprint
4 WochenWorkflows, Vorlagen, Prüfpunkte und ein KogNaut Playbook für ein belastbares KI-Arbeitssystem.
Team Guardrails
Halbtag / TagKI-Nutzungsregeln, Qualitäts-Checkliste, Datenschutzgrenzen, Rollen, Verantwortlichkeiten und Umgang mit Shadow-AI.
FAQ
Fragen? Antworten.
Ist KogNaut ein KI-Workshop?
Nicht nur. Workshops sind ein Teil davon. Eigentlich geht es um nachhaltige KI-Adoption: sinnvolle Workflows, klare Prüfpunkte und weniger Tool-Abhängigkeit.
Brauche ich Vorkenntnisse?
Nein. Ein konkreter Arbeitskontext reicht. Wir arbeiten nicht an Spielzeug-Beispielen, sondern an echten Aufgaben.
Geht es nur um ChatGPT?
Nein. ChatGPT kann Teil davon sein, aber KogNaut ist nicht an ein einzelnes Tool gebunden. Der Prozess ist wichtiger als das Tool.
Ist das anti-KI?
Nein. Im Gegenteil. KogNaut hilft dir, KI besser zu nutzen — aber bewusst, prüfbar und souverän.
Was bedeutet KlarLoop?
KlarLoop ist die Methode hinter KogNaut. Sie sorgt dafür, dass KI-Workflows nicht blind automatisiert werden, sondern mit menschlichen Prüfpunkten, Skill-Erhalt und Tool-Unabhängigkeit funktionieren.
Kontakt
Starte mit einem KogNaut Check
Sag kurz, welche Aufgabe du mit KI verbessern willst und wo du aktuell unsicher bist.







