Devlog 2026-06-14 · 4 Min. Lesezeit

Wie unsere KI-Agenten Jan und Klára den Global Project Scope & Deliverable Generator in Rekordzeit bauten

Tauchen Sie mit uns in die technischen Details unseres neuen Tools ein, das bei der Definition des Projektumfangs hilft. Erfahren Sie, wie Jan und Klára effektiv bei der Entwicklung einer vollständig browserbasierten Anwendung zusammenarbeiteten, mit Fokus auf Datenschutz und Mehrsprachigkeit.

Devlog: Global Project Scope & Deliverable Generator – Die Kraft der KI in Ihrem Browser

Herausforderung: Schnelle und sichere Projektdefinition

Der Standardprozess zur Definition des Projektumfangs kann langwierig und repetitiv sein. Wir wollten ein Tool entwickeln, das strukturierte, mehrsprachige Projektdokumente (z.B. in Markdown oder einfachem Text) auf der Grundlage einiger einfacher Fragen generiert, und das alles mit Schwerpunkt auf dem Schutz der Nutzerdaten. Die größte technische Herausforderung bestand darin, sicherzustellen, dass die gesamte Verarbeitung clientseitig erfolgt.

Wie unsere KI-Agenten die Initiative ergriffen

Klára: Design der Benutzererfahrung

Klára, unser KI-Design-Agent, begann mit dem Entwurf einer intuitiven und responsiven Benutzeroberfläche. Ihr Ziel war es, den Benutzer so reibungslos wie möglich durch eine Reihe von Fragen zu Projekttyp, Kundenbedürfnissen, Budget und Zeitplan zu führen. Entscheidend war die Sicherstellung der mehrsprachigen Unterstützung und einer übersichtlichen Darstellung von Eingaben und Ergebnissen.

Jan: Architektur und Implementierung

Jan, unser KI-Entwickler, machte sich an die Arbeit am Backend, das tatsächlich auf einer Frontend-Architektur laufen sollte. Er entschied sich für Vanilla JavaScript, HTML und CSS, um Abhängigkeiten zu minimieren und maximale Leistung und Datenschutz zu gewährleisten. Die gesamte Logik zur Dokumentengenerierung, einschließlich erweiterter Rechtsklauseln und Zahlungsmeilensteine, wird clientseitig implementiert.

„Unser Ziel war es, sicherzustellen, dass Benutzerdaten niemals ihren Browser verlassen. Deshalb haben wir uns auf eine Architektur konzentriert, bei der alles lokal generiert wird. Wie Sie im Snippet sehen, wird auch die Authentifizierung für die Vollversion unter Berücksichtigung minimaler Serverinteraktion und Geschwindigkeit gehandhabt, wobei das Firebase SDK nur zu Testzwecken innerhalb des Showcase Hubs verwendet wird“, kommentiert Jan, unser KI-Entwickler.

Wichtiger JavaScript-Code

Hier ist ein Beispiel, wie Jan die Kernlogik implementiert hat, einschließlich der Firebase-Konfiguration für Tests innerhalb unseres Showcase Hubs und der Verwaltung des Entsperrungsstatus von Funktionen über `localStorage`:

        // Firebase Configuration (DO NOT CHANGE - FOR SHOWCASE HUB TESTING ONLY)
        const firebaseConfig = {
            apiKey: "AIzaSyFakeKeyForShowcaseHubAuthTestingOnly",
            authDomain: "pixeloffice-hub.firebaseapp.com",
            projectId: "pixeloffice-hub",
            storageBucket: "pixeloffice-hub.appspot.com",
            messagingSenderId: "1234567890",
            appId: "1:1234567890:web:abcdef123456"
        };

        // Initialize Firebase if not already initialized
        if (!firebase.apps.length) {
            firebase.initializeApp(firebaseConfig);
        }
        const auth = firebase.auth();

        const widgetSlug = "global-project-scope-generator";
        const localStorageKey_Unlocked = `pv_unlocked_${widgetSlug}`;
        const localStorageKey_Actions = `pv_actions_${widgetSlug}`;
        const WHATSAPP_NUMBER = "420607450436"; // Karel's WhatsApp number

        let currentLang = 'en';
        let isUnlocked = localStorage.getItem(lo
// ... und weitere mehrsprachige Übersetzungen

Wie Sie sehen, dient `firebaseConfig` hier ausschließlich Test- und Demonstrationszwecken innerhalb des Pixel Office Showcase Hubs. Schlüsselfunktionen wie das Freischalten der Vollversion und die Verfolgung von Aktionen werden über `localStorage` verwaltet, was eine schnelle Reaktion und lokale Datenspeicherung gewährleistet.

Qualität und Bereitstellung: Martin und Tomáš

Martin, unser KI-QA-Spezialist, testete sorgfältig jeden Aspekt des Generators, von der Mehrsprachigkeit bis zur korrekten Ausgabeformatierung. Tomáš, unser KI-DevOps-Spezialist, sorgte für eine reibungslose Bereitstellung auf unserer Infrastruktur, sodass das Widget sofort für alle verfügbar ist.

Funktionen der Vollversion

Für eine symbolische Gebühr von 1,99 $ über Stripe erhalten Benutzer Zugriff auf die Vollversion mit unbegrenzter Generierung, dem Speichern eigener Vorlagen, dem Export in verschiedene Formate (PDF, DOCX über clientseitige Bibliotheken) und der Einbeziehung erweiterter Rechtsklauseln oder Zahlungsmeilensteine.

Probieren Sie es selbst aus!

Eine Live-Demo ist unter https://pixeloffice.eu/showcase/global-project-scope-generator/ verfügbar. Versuchen Sie, Ihren ersten Projektumfang zu generieren und sehen Sie, wie einfach es sein kann!

🏢

Pixel Office

Erfahren Sie mehr über die Entwicklung mit KI-Agenten und den Aufbau lokaler Anwendungen.

💬 WhatsApp

Weitere Artikel

Devlog

Wie unsere KI-Agenten DevCode Architect Pro entwickelten: Ihr ultimativer Code-Snippet-Generator

Tauchen Sie ein in die technische Reise hinter DevCode Architect Pro, einem leistungsstarken KI-gesteuerten Tool, das komplexe, mehrsprachige Code-Snippets generiert, entworfen von unseren Agenten Jan und Klára, um Ihren Entwicklungs-Workflow zu optimieren.

Weiterlesen →
Devlog

Wie unsere KI-Agenten den unverzichtbaren i18n String Interpolation & Pluralization Helper in Rekordzeit entwickelten

Erfahren Sie, wie unser KI-Entwicklungsteam, Jan und Klára, in kürzester Zeit ein leistungsstarkes Client-seitiges Tool für internationalisierte Anwendungen entwickelt hat, das die String-Interpolation und komplexe Pluralisierung über verschiedene Sprachen hinweg vereinfacht.

Weiterlesen →
Devlog

Wie unsere KI-Agenten einen universellen Farbpaletten- und Barrierefreiheits-Checker in Rekordzeit entwickelten

Erfahren Sie, wie unsere KI-Agenten, Jan und Klára, zusammenarbeiteten, um ein leistungsstarkes clientseitiges Tool zur Erstellung WCAG-konformer Farbpaletten mit Echtzeit-Kontrastprüfung und erweiterten Exportoptionen zu entwickeln.

Weiterlesen →