Zap-Code: KI-Code-Generator, der Kindern echte HTML/CSS/JS beibringt

Was Zap Code macht
Zap Code ist ein KI-gestützter Code-Generator, der aus einfachen englischen Beschreibungen funktionierenden HTML-, CSS- und JavaScript-Code erstellt. Entwickelt für Kinder im Alter von 8 bis 16 Jahren, soll es die Lücke zwischen blockbasierten Programmierwerkzeugen wie Scratch und echter Programmierung überbrücken, indem Kinder zunächst mit echten Code-Ergebnissen interagieren und dann nach und nach den zugrundeliegenden Code kennenlernen.
Technische Umsetzung
Die Plattform verwendet ein Next.js-Frontend mit einem Node.js-Backend. Die Codebearbeitung erfolgt in einem vereinfachten Monaco-Editor, der für jüngere Nutzer angepasst wurde. Der generierte Code wird in einer abgeschotteten Iframe-Umgebung ausgeführt, die externe API-Aufrufe verhindert und so für Sicherheit sorgt. Eine Engine für fortschreitende Komplexität nutzt ein Fähigkeitsmodell, um zu entscheiden, wann fortgeschrittenere Funktionen den Nutzern angezeigt werden.
Kerninteraktionsmodi
- Nur visuelle Anpassungen: Kinder können Farben und Layouts ändern, ohne Code zu berühren
- Schreibgeschützte Code-Ansicht mit Anmerkungen: Zeigt den generierten Code mit Erklärungen
- Vollständige Codebearbeitung mit KI-Autovervollständigung: Ermöglicht direkte Codeänderungen mit Unterstützung
Arbeitsablauf-Beispiel
Ein Kind gibt "mache ein Weltraum-Shooter-Spiel" in einfachem Englisch ein. Die KI generiert den HTML-, CSS- und JavaScript-Code, und eine Live-Vorschau rendert ihn sofort. Das Beispiel aus der Quelle zeigt: "Mache ein Space-Invader-Spiel, bei dem ich eine Pizzascheibe bin, die Pepperoni auf Alien-Burger schießt", was zu einem spielbaren Spiel führt.
Sicherheit und Überwachung
Inhalte werden auf Altersangemessenheit gefiltert, obwohl die Quelle anmerkt, dass dies nicht perfekt ist. Ein Eltern-Dashboard ermöglicht die Überwachung von Aktivitäten und verbrachter Zeit. Alle geteilten Projekte in der Galerie werden moderiert, es gibt keine Werbung, kein Tracking und keine Weitergabe von Daten an Dritte.
Aktuelle Einschränkungen
- KI-generierter Code ist nicht immer sauber oder idiomatisch
- Kollaborationsfunktionen sind noch grundlegend
- Die Komplexitäts-Engine benötigt mehr Daten, um gut eingestellt zu werden
- Die Inhaltsfilterung ist nicht perfekt
Preise und Projekte
Die kostenlose Stufe umfasst 3 Projekte. Die Pro-Version kostet 9,99 $/Monat mit zusätzlichen Funktionen.
Was Kinder bauen können
Web-Apps, Spiele, interaktive Geschichten, Quizze, Rechner, Kunstwerkzeuge, To-do-Listen und mehr. Jedes Projekt erzeugt echten HTML-, CSS- und JavaScript-Code, der in einer Community-Galerie veröffentlicht werden kann, wo andere spielen, den Quellcode ansehen und Projekte remixen können.
📖 Read the full source: HN AI Agents
👀 Siehe auch

AgentRoom: Desktop-App visualisiert KI-Codierungsagenten als Pixelcharaktere mit Sitzungssuche
AgentRoom ist eine Desktop-App, die Claude Code-, Codex- und Gemini-Sitzungen in animierte Pixel-Charaktere in einem virtuellen Büro verwandelt, mit Volltext-Semantiksuche über alle Sitzungen. Das Repo enthält eine eigenständige Claude Code-Skill zum Durchsuchen vergangener Sitzungen aus jeder Konversation.

Agint: Ein Rust-CLI-Tool, das Widersprüche in KI-Agenten-Anweisungsdateien erkennt
Agint ist ein kostenloses, quelloffenes Rust-CLI-Tool, das Anleitungsdateien wie CLAUDE.md und AGENTS.md auf Widersprüche, fehlende Dateiverweise und Synchronisationsprobleme überprüft. Es nutzt statische Analyse für strukturelle Probleme und optional Claude-API-Aufrufe zur Erkennung semantischer Widersprüche.

Token Enhancer reduziert den Tokenverbrauch von Webseiten für KI-Agenten.
Ein Entwickler stellte fest, dass rohes HTML von Webabrufen übermäßig viele Tokens im KI-Agenten-Kontext verbraucht, wobei Yahoo-Finance-Seiten 704.000 Tokens verwendeten. Durch den Einsatz von Token Enhancer als MCP-Server konnte dies auf 2.600 Tokens reduziert werden.

CRMy: Open-Source-CRM und Customer-Context-Engine für OpenClaw
CRMy ist eine Open-Source-CRM- und Customer-Context-Engine, die speziell für OpenClaw-Agenten entwickelt wurde. Sie umfasst eine vollständige CLI, ein OpenClaw-Plugin mit 12 CRM-Tools, ein PostgreSQL-Backend und eine Self-Hosted-Bereitstellung mit zwei Befehlen.