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 (Art Deco/Noir) overshadow critical gameplay data.
Key Tech
Gemini AI, SVG Data-Map, Tailwind
Core Challenge
Zero-latency feedback for procedural events.
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 procedural events like Police Raids.
- // Dynamic SVG layers that respond to Gemini AI-generated world events.
The Origin Story
From Mac OS 8.6
to
AI-Co-Creation
Everything started 20 years ago. I remember playing a Risk-style game on my first iMac running Mac OS 8.6. That atmosphere never left me.
As a designer with 20+ years of experience in game UI, 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 of product development today.
Technical Evolution
Megtanultam a határokat: az SVG kódok Base64 konvertálásától kezdve az AI "crash"
elkerüléséig. Megértettem, hogyan kell egy komplex assets.ts struktúrát
felépíteni, hogy a logika és a vizualitás ne lassítsa le az AI modellt.
Constraints & Pivots
A projekt mérete próbára tette az ingyenes AI modellek kapacitását. Bár a mobil böngészős optimalizálás még várat magára, minden akadály egy újabb lecke volt a rendszerarchitektúráról és a prioritások kezeléséről.
The Roadmap
A jövőben Rive animációkkal, valódi dobókocka-fizikával és világkörüli térképekkel (Chicagótól Budapestig) bővítem a projektet. A végső cél: egy teljes értékű Android/iOS natív App Store megjelenés.
Pure Creative Freedom
Végre én választhattam témát, hangulatot és játékmenetet. Ez a projekt nem csak kódolásról szólt, hanem arról, hogyan válik a design a technológia hajtóerejévé.
Atomic Noir Architecture
To ensure scalability, I built a modular UI library based on the Atomic Design methodology. This allowed us to iterate with AI in record time.
Atoms
Custom Typography (Cinzel/Oswald), Rank Icons, Noir Cursors.
Molecules
Interactive Boss Cards, Dynamic Unit Counters.
Organisms
The HUD & Financial Dashboards, Real-time Market Data.
Feature Focus
Procedural
Vector Mapping
The core challenge was to create a map that acts as a living data dashboard. Instead of static textures, I developed a system where districts are unique SVG objects tied to a real-time data graph.
-
analytics
Real-time status updates: territorial changes are reflected instantly through dynamic SVG fills.
-
data_object
Modular Data Structure: Using a custom
assets.tsto manage hundreds of district coordinates without performance drops.
Contextual State: Reinforce
Inactive Phase: Combat
UI elements only appear during relevant gameplay phases.
Fighting Information Overload
Strategy games are notoriously data-heavy. My approach was to implement Context-Aware UX, ensuring that the interface is never noisier than necessary.
Phase-Locked Interaction
Buttons and sliders for unit management only reveal themselves during reinforcement phases, keeping the tactical view clean.
Narrative Data Feedback
Instead of raw spreadsheets, AI-generated "Newspaper" alerts provide vital tactical feedback through immersive storytelling.
The Future of Design
AI as a Co-Creator:
Accelerated Architecture
terminal Managing Complexity
Working without a traditional developer meant I had to bridge the gap between design and logic. This journey was a deep-dive into Design-to-Code architecture.
Data Structure Optimization
Learned to manage scale by separating SVG coordinates into dedicated
assets.ts files, avoiding AI memory overload and ensuring rapid
rendering of procedural elements.
Dynamic Assets Injection
Mastered Base64 vector embedding and dynamic asset injection, enabling a truly portable single-page experience without traditional server-side dependencies.
"From idea to interactive product in record time—leveraging AI to break technical barriers."
By acting as a "Director" for the AI, I was able to focus on strategic UX decisions and high-fidelity storytelling while the AI handled the boilerplate structure of the system.
Development & Strategy
Technical Ownership:
From Vision to Global Deployment
smartphone Mobile HUD Re-Engineering
Adapting a data-heavy RTS for mobile wasn't just about scaling—it was about radical reconstruction. I had to rethink the entire HUD architecture to ensure the gameplay remains "digestible" on smaller touch screens while maintaining technical depth.
Architecture: assets.ts
By mastering Base64 embedding and offloading data to an
assets.ts, I optimized the AI workflow to handle massive vector
loads without performance degradation.
"Stepping out of the 'Wix prison' into the world of professional deployment."
This project was a turning point. I learned to bridge the gap between design and production by mastering a professional workflow: **GitHub** version control and **Netlify** automated deployment.
This technical awakening allowed me to leave limited "no-code" builders behind and create this very portfolio—pixel-perfect, high-performance, and fully owned by me.
Product Owner Insights
AI as a Design Partner
This project proved that a Senior Designer using AI as a "Co-pilot" can handle the workload of an entire product team. From logic structures to narrative-driven UX, the synergy allowed for rapid prototyping and technical depth that would normally take months—completed in record time.
Rapid Prototyping: 3x Acceleration achieved.
Lessons from the Noir.
Shadow Cartels proved that 20 years of UI experience, combined with AI, creates a new kind of "Technical Artist." A professional who doesn't just design buttons, but builds functional, scalable ecosystems. This journey from Mac OS 8.6 nostalgia to a modern GitHub-deployed product is just the beginning.