Vier Teile, ein Ablauf.

Kiekkist arbeitet wie ein kleines Studio in deinem KI-Agenten. Das Skill führt den Ablauf, das Tool misst, die Galerie liefert fertige Systeme, das Launch-Paket bringt die Seite online.

Skill

Die Anleitung für den Agenten: Gedächtnis, Briefing, Recherche mit 12 bis 20 echten Referenzen, Moodboard, drei Richtungen als echte HTML-Seiten, Entscheidung, Designsystem, Ausrollen auf Web, Folien, Social und App, Prüfung, Ablage.

MIT, kostenlos

Tool

MCP-Server und Kommandozeile: Referenzen erfassen, Boards anlegen, Themes ablegen, prüfen, exportieren nach HTML, Astro, React, WordPress (Block-Theme, erste Version) und Elementor (Design-Ebene).

AGPL-3.0, kostenlos

Galerie

Fertige, geprüfte Designsysteme mit ganzem Seitenset, Social und Folien, Prüfbericht und Lizenz für Kundenprojekte. Dein Agent sucht und holt sie über den Connector.

Design oder All-Access

Launch-Paket

Checkliste und Prüfungen für den Livegang: Domain, Hosting, Rechtsseiten-Vorlagen, Formulare, Analyse ohne Cookies, Barrierefreiheitserklärung, Performance-Budget.

im Tool enthalten

Ein Projekt von vorne bis hinten

  1. Gedächtnis

    Der Agent liest dein Geschmacksprofil, frühere Themes und die Markenregeln des Kunden, bevor er an Farben denkt.

  2. Briefing

    Fragen in kurzen Runden: Angebot, Zielgruppe, Versprechen, Belege, Ton, und was es auf keinen Fall werden soll.

  3. Recherche und Moodboard

    Echte Seiten aus Branche und Nachbarfeldern, sortiert nach Mechanismus, mit einer Szene: wer sieht die Seite, wann?

  4. Drei Richtungen

    Sicher, mittel, mutig. Drei echte HTML-Seiten mit den echten Inhalten des Kunden, verschieden auf mindestens drei von fünf Achsen.

  5. Entscheidung

    Du entscheidest oder dein Kunde über einen Link ohne Anmeldung. Der Grund wird wörtlich festgehalten.

  6. System und Ausbau

    Die Richtung wird zu DESIGN.md und Tokens, dann zu Seiten, Folien, Social-Grafiken und App-Screens.

  7. Prüfung

    Erst misst Kiekkist, dann gibt ein zweiter Agent, der den Bau nicht gesehen hat, seine Kritik. Höchstens zwei Korrekturrunden.

So kommt es in deinen Agenten

Sortiert nach Aufwand. Nimm den ersten Weg, der zu deiner Umgebung passt.

  1. Remote-MCP-URL

    Für jeden MCP-Client: deinen KI-Assistenten im Browser, im Terminal oder im Editor. Galerie-Suche und kostenlose Designs ohne Konto, Bezahl-Designs mit Lizenzschlüssel.

    • Im Assistenten: Einstellungen, Connectors bzw. MCP-Server, eigenen Server hinzufügen, URL einfügen.
    • Terminal-Clients, zum Beispiel: claude mcp add --transport http kiekkist https://kiekkist.heidrich-digital.de/mcp-gallery
    https://kiekkist.heidrich-digital.de/mcp-gallery
  2. Skill als ZIP

    Für Assistenten, die Skills als Upload annehmen, wenn du ohne Connector arbeiten willst. Der Ablauf legt alles im Projekt ab.

    • Einstellungen, Skills, ZIP hochladen.
    • Im Chat: „Nutze kiekkist-agency für eine neue Website für …“
    kiekkist-agency.zip
  3. Skill-Ordner im Repo

    Für Cloud-Sessions, die ein Repository auschecken. Kein Server nötig.

    • Ordner nach .claude/skills/kiekkist-agency/ kopieren und committen.
    • Die nächste Session findet das Skill von selbst.
    .claude/skills/kiekkist-agency/
  4. npx für lokal

    Das ganze Tool auf deinem Rechner, mit Prüfer und Export. Braucht Node 22.

    • npx kiekkist mcp startet den lokalen MCP-Server (stdio).
    • npx kiekkist check ./dist/index.html prüft eine fertige Seite.
    npx kiekkist mcp

Repository und npm-Paket werden zum Start öffentlich.

Was du brauchst

Einen KI-Assistenten, der Code schreiben und ausführen kann und MCP-Server oder Skills einbindet. Oder jemanden, der Astro, HTML oder WordPress beherrscht.

Was mit deinen Daten passiert

Gerendert wird bei dir. Deine Texte, Bilder und Kundendaten bleiben in deinem Projekt. Konten gibt es nicht. Der Kiekkist-Server kennt nur Bestellung, Lizenz und registrierte Projektnamen.

Updates

Fehler- und Sicherheitskorrekturen bekommen alle, dauerhaft. Dein Agent fragt neue Versionen ab und zeigt dir das Änderungsprotokoll, bevor etwas übernommen wird.

Was in einem Design-Paket liegt

  • DESIGN.md
  • tokens.css, tokens.json
  • pages/ (alle Seiten)
  • slides/
  • social/
  • app/ (wenn vorhanden)
  • assets/fonts/ mit Lizenztexten
  • LICENSE.md mit Lizenz-ID
  • report/ (Prüfbericht)
Kiekkist-Tool: Theme-Übersicht mit Prüfnote je Theme
Kiekkist-Tool: Theme-Übersicht mit Prüfnote je Theme
Galerie ansehen