PMGenie

PMs spend days creating mockups, wire framing, feedback implementation, and ticket manipulation. In regulated industries like banking, this delays the production, so we present to y'all– PMGenie!

Comment

Inspiration

Our inspiration came from the PNC Challenge: AI-Powered Productivity for Product Managers and the Nvidia Challenge: Building an Agentic AI system using Nemotron. We wanted to tackle a real-world bottleneck in the product development lifecycle: the slow, manual process of creating and iterating on mockups. Our goal was to build a tool that supports Product Managers in the Prototyping & Testing phase, empowering them to instantly visualize ideas, gather feedback, and accelerate their team's speed to market by reducing manual design work. On the other hand, the NVIDIA Challenge inspired us to think beyond a simple generator and build a true, multi-step intelligent agent that understands context and orchestrates a complex workflow.

What it does

PM GENIE is an end-to-end dashboard that supercharges the product management workflow. It allows a PM to:

Generate Mockups Instantly: Create HTML mockups from natural language prompts using NVIDIA Nemotron.

Add Context: Nemotron model analyzes the existing mockup and generates context-aware mockups that fit the project's style.

Edit with AI: Refine the mockup using an AI-powered (Nemotron) natural language editor (e.g., "make all buttons larger" or "change the header to dark mode") or a traditional code editor.

Manage Projects: All mockups and edits are persistently saved in a SQLite database and are viewable in a "Past Projects" dashboard as Story Points.

Automate Developer Handoff: This tool makes decisions and identifies the necessary changes, and automatically creates multiple, prioritized developer tickets in Jira, complete with difficulty scores and acceptance criteria.

Secure Authentication: User login and route protection handled by Auth0.

How we built it

We built this as a full-stack application, integrating multiple powerful services:

  • Frontend: A responsive and modern UI built with Tailwind CSS and JavaScript. It handles the dashboard, past projects list (Story Points), real-time preview, JIRA Dashboard, and both the code and AI-powered editors, along with the Feedback window and quick refining functionality.

  • Backend: A robust Flask (Python) server that acts as the central brain. It manages all API endpoints, orchestrates the different services, and handles database operations and JIRA integration.

  • AI Core: We used the NVIDIA Nemotron model (nvidia/llama-3.3-nemotron-super-49b-v1.5)_ for all intelligent tasks: initial generation, AI-powered editing, repository analysis, and smart ticket generation.

  • Database: We used SQLite for simple and effective persistent storage, allowing us to save all projects and edits locally.

Challenges we ran into

Our biggest challenge was API orchestration. We weren't just using one API, but 2 complex, distinct services (NVIDIA Nemotron & Jira) that all needed to work together in a single, seamless workflow.

The logic for Smart Ticket Generation was the most complex component. The AI analyzes a new HTML mockup, identifies the features and implementation steps required to make it production-ready, and generates multiple prioritized tickets with accurate difficulty scores. This process required advanced prompt engineering and a well-defined logical framework.

Accomplishments that we're proud of

We're incredibly proud of the complete, end-to-end workflow we built. We've successfully automated the PM's journey from a vague idea to a set of developer-ready Jira tickets, which feels like a massive leap in productivity.

The Smart Jira Integration is our biggest accomplishment. It's the feature that provides the most business value, turning a simple design tool into a true productivity and project management accelerator.

We are also very proud of the Context-Aware Generation using the NVIDIA Nemotron Model. Making the AI "smarter" by giving it real-world context from a codebase is a significant step beyond generic AI generators and makes the tool far more practical.

What we learned

This project was a deep dive into building complex, multi-modal, integrated AI systems. We learned:

  • How to be API Wranglers: We learned how to orchestrate multiple, disparate services (AI, code hosting, and project management) to create a single, cohesive application.

  • AI is More Than Generation: We learned that the real power of modern AI isn't just generating content, but analyzing, editing, and reasoning about it. Our AI editor and Jira ticket analyzer are testaments to this.

  • Context is Important: The feedback feature taught us how crucial context is. Providing the AI with chat history data resulted in far better, more relevant mockups than a simple prompt ever could.

  • Full-Stack Persistence: We gained hands-on experience in building a complete, data-persistent application from the ground up, linking a Javascript frontend, Flask backend, and a SQLite database.

What's next for PMGenie

We have a clear roadmap to take this from a hackathon project to a polished, production-ready tool. Our next steps include:

  • RAG Integration for Design Systems: Implement Retrieval-Augmented Generation (RAG) to allow the AI to query internal documentation (like Product Requirements Documents, user research, or a company's design system guidelines) for hyper-contextual, on-brand mockup generation.

  • Version Control: Implementing a versioning system for mockups, allowing PMs to track changes, compare iterations, and revert to previous versions.

  • Real-Time Collaboration: Adding features for multiple users to comment on and edit mockups simultaneously.

  • Export to Figma/Sketch: Creating an "Export" feature to bridge the gap between our AI-generated HTML and traditional wireframe design tools.

  • Enhanced Jira Integration: Allowing users to track the story line integrating JIRA Dashboard into the web application.

Built With

Share this project:

Updates