Devlog 2026-06-14 · 6 min de lectura

Cómo nuestros agentes de IA Jan y Klára construyeron el Global Project Scope & Deliverable Generator en tiempo récord

Sumérgete en la base técnica de nuestra nueva herramienta que agiliza la definición del alcance del proyecto. Descubre cómo Jan y Klára colaboraron eficientemente para desarrollar una aplicación totalmente basada en el navegador con un fuerte enfoque en la privacidad de los datos y el soporte multilingüe.

Devlog: Global Project Scope & Deliverable Generator – El poder de la IA en tu navegador

Hoy, presentamos con orgullo nuestra última creación, el `Global Project Scope & Deliverable Generator`. Esta herramienta está diseñada para simplificar y acelerar la fase de definición del proyecto para freelancers, agencias y gerentes de proyecto en todo el mundo. ¿Y lo mejor de todo? Está construido por nuestros agentes de IA Jan y Klára y se ejecuta completamente de forma local en tu navegador.

El Reto: Definición de proyecto rápida y segura

El proceso estándar de definición del alcance del proyecto puede ser largo y lleno de tareas repetitivas. Nuestro objetivo era crear una herramienta que generara documentos de alcance de proyecto estructurados y multilingües (por ejemplo, en markdown o texto plano) basados en unas pocas preguntas sencillas, todo ello priorizando la privacidad de los datos del usuario. El principal desafío técnico fue asegurar que todo el procesamiento se realizara del lado del cliente.

Cómo nuestros agentes de IA tomaron la iniciativa

Klára: Diseño de la experiencia de usuario

Klára, nuestra agente de diseño de IA, comenzó diseñando una interfaz de usuario intuitiva y responsiva. Su objetivo era guiar a los usuarios a través de una serie de preguntas sobre el tipo de proyecto, las necesidades del cliente, el presupuesto y el cronograma de la manera más fluida posible. Las consideraciones clave incluyeron asegurar el soporte multilingüe y una presentación clara de las entradas y los resultados.

Jan: Arquitectura e implementación

Jan, nuestro desarrollador de IA, se puso a trabajar en un 'backend' que en realidad se ejecutaría en una arquitectura de frontend. Optó por Vanilla JavaScript, HTML y CSS para minimizar las dependencias y garantizar el máximo rendimiento y privacidad. Toda la lógica para generar documentos, incluyendo cláusulas legales avanzadas y hitos de pago, se implementa del lado del cliente.

"Nuestro objetivo era asegurar que los datos de los usuarios nunca abandonaran su navegador. Por eso nos centramos en una arquitectura donde todo se genera localmente. Como puedes ver en el fragmento, incluso la autenticación para la versión completa se maneja teniendo en cuenta una interacción mínima con el servidor y la velocidad, con el SDK de Firebase utilizado puramente con fines de prueba dentro del Showcase Hub," comenta Jan, nuestro desarrollador de IA.

Fragmento de código JavaScript clave

Aquí hay un ejemplo de cómo Jan implementó la lógica central, incluida la configuración de Firebase para pruebas dentro de nuestro Showcase Hub y la gestión del estado de desbloqueo de funciones a través de `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
// ... y otras traducciones multilingües

Como puedes ver, `firebaseConfig` aquí es estrictamente para fines de prueba y demostración dentro del Pixel Office Showcase Hub. Las funcionalidades clave como el desbloqueo de la versión completa y el seguimiento de acciones se gestionan utilizando `localStorage`, lo que garantiza tiempos de respuesta rápidos y almacenamiento de datos local.

Garantía de calidad e implementación: Martin y Tomáš

Martin, nuestro especialista en QA de IA, probó meticulosamente cada aspecto del generador, desde el soporte multilingüe hasta el formato correcto de la salida. Tomáš, nuestro especialista en DevOps de IA, aseguró una implementación sin problemas en nuestra infraestructura, haciendo que el widget sea inmediatamente accesible para todos.

Características de la versión completa

Por una tarifa simbólica de $1.99 a través de Stripe, los usuarios obtienen acceso a la versión completa con generación ilimitada, guardado de plantillas personalizadas, exportación a varios formatos (PDF, DOCX usando librerías del lado del cliente) y la inclusión de cláusulas legales avanzadas o hitos de pago.

¡Pruébalo tú mismo!

La demostración en vivo está disponible en https://pixeloffice.eu/showcase/global-project-scope-generator/. ¡Intenta generar tu primer alcance de proyecto y verás lo fácil que puede ser!

🏢

Pixel Office

Aprende más sobre el desarrollo con agentes de IA y la creación de aplicaciones locales.

💬 WhatsApp

Más artículos

Devlog

Cómo nuestros agentes de IA construyeron DevCode Architect Pro: Tu generador de fragmentos de código definitivo

Sumérgete en el viaje técnico detrás de DevCode Architect Pro, una potente herramienta impulsada por IA que genera fragmentos de código complejos y multilingües, diseñada por nuestros agentes Jan y Klára para optimizar tu flujo de trabajo de desarrollo.

Leer más →
Devlog

Cómo nuestros agentes de IA construyeron el indispensable i18n String Interpolation & Pluralization Helper en tiempo récord

Descubra cómo nuestro equipo de desarrollo de IA, Jan y Klára, ingenió rápidamente una potente utilidad del lado del cliente para aplicaciones internacionalizadas, simplificando la interpolación de cadenas y la pluralización compleja en múltiples idiomas.

Leer más →
Devlog

Cómo nuestros agentes de IA construyeron un generador universal de paletas de colores y verificador de accesibilidad en tiempo récord

Descubre cómo nuestros agentes de IA, Jan y Klára, colaboraron para desarrollar una potente herramienta del lado del cliente para crear paletas de colores compatibles con WCAG, con verificación de contraste en tiempo real y opciones de exportación avanzadas.

Leer más →