Case Study
Shadow Cartels
How I co-created an AI-driven noir strategy interface that balances complex data with 1930s cinematic atmosphere.
Project Vision
Shadow Cartels is a browser-based strategy game where the player manages a criminal empire in a procedural Noir world. My goal was to design a system capable of handling massive procedural events without letting the 1930s aesthetic overshadow critical gameplay data.
Key Tech
Gemini AI, SVG Data-Map, Tailwind
Core Challenge
Zero-latency feedback for procedural events.
⚠️ Desktop Recommended: Heavy dynamic SVG rendering is optimized for desktop. The mobile version is currently under development and may experience performance issues.
Live Data Visualization:
The Procedural Map
The map isn't a static asset—it's a Living Data Structure. Every district is a unique SVG object tied to a real-time graph of neighbors, ownership, and police presence.
- // Zero-latency updates for events.
- // Dynamic AI-generated world layers.
The Origin Story
From Mac OS 8.6
to AI-Co-Creation
As a designer, I've always followed others' visions. The Google AI Studio Build gave me the first chance to realize my own fantasy—testing how far a designer with zero coding knowledge can push the boundaries.
Technical Evolution
Optimizing Base64 SVG assets and preventing AI context overflows through modular assets.ts architecture.
Constraints
Testing the token limits of LLMs and managing strategic prioritization in a design-to-code workflow.
The Roadmap
Future integration of Rive animations and native deployment for iOS and Android.
Creative Autonomy
Owning the entire theme, atmosphere, and mechanics. A synthesis of code and high-end Noir aesthetics.
Accelerated
Architecture
AI as a Co-Creator
terminal Managing Complexity
Working without a developer meant bridging the gap between design and logic through Design-to-Code architecture.
Data Structure
Separating SVG coordinates into assets.ts to ensure rapid rendering and avoid memory overload.
Global Deployment
Mastering GitHub and Netlify to create high-performance, pixel-perfect interactive products.
"From idea to interactive product in record time—leveraging AI to break technical barriers."
By acting as a "Director", I focused on strategic UX decisions while the AI handled the boilerplate structure.
Prototyping
Foundation
Lessons from the Noir.
Shadow Cartels proved that AI-assisted workflows are most powerful when guided by strong UX/UI judgment, system thinking, and clear product direction.