This content originally appeared on DEV Community and was authored by KasiaKab
This post is my submission for DEV Education Track: Build Apps with Google AI Studio.
๐งฉ What I Built
I built AI Roadmap Visualizer โ a chat-based web app that transforms any roadmap text (like a README.md or project plan) into a visual learning path.
It parses milestones, generates cards for each phase, and even creates pixel-style art for every milestone using the Imagen API in Google AI Studio.
I wanted a tool that could visualize my own engineering roadmap โ from Java monolith to cloud-ready platform โ in a creative yet structured way.
๐ช Core prompt used in Google AI Studio:
Create a web assistant that visualizes engineering roadmaps as a sequence of milestones with AI-generated art. Each milestone should have title, dates, focus, and deliverables. Keep the aesthetic neon-violet and pixel-tech inspired.
๐จ Demo
Hereโs how it works in action:
1๏ธโฃ I paste my roadmap text roadmap-2025-2027/README.md.
2๏ธโฃ The AI parses milestones, dates, and goals.
3๏ธโฃ It generates visuals for each stage โ Architecture, DevOps, AWS, etc.
4๏ธโฃ I can click on a card to open weekly details.
๐ก I also tested how the app adapts to different roadmap styles โ from Frontend to Data Science and Creative AI paths:
๐ Demo: AI Roadmap Visualizer โ Google AI Studio Applet
โจ My Experience
Building this project was a short but valuable dive into prompt-driven app design.
Google AI Studio makes it surprisingly easy to go from idea โ prompt โ working prototype.
This content originally appeared on DEV Community and was authored by KasiaKab
KasiaKab | Sciencx (2025-10-20T13:14:02+00:00) ๐ AI Roadmap Visualizer โ turning engineering plans into pixel-perfect art. Retrieved from https://www.scien.cx/2025/10/20/%f0%9f%9a%80-ai-roadmap-visualizer-turning-engineering-plans-into-pixel-perfect-art/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.






