An exploration of transforming a sci-fi HUD into a functional, browser-based game experience through AI-development

prototype

Paramount Parks partnered with Heavenspot to create a series of Star Trek-themed experiential games designed to feel console-worthy yet approachable for a wide range of park visitors.

case study

SCPXL partnered with Paramount Pictures to support their animated feature Paws of Fury: The Legend of Hank with a creative, character-driven, anime/manga inspired social media content piece.

As the storyboard artist, I helped bring the campaign’s anime-inspired vision to life by translating ideas into clear, visual narratives. I mapped out pacing, character expressions, and scene transitions, giving the animation and design teams a blueprint to work from. My goal was to ensure every moment felt dynamic, cohesive, and true to the film’s playful tone while staying optimized for social media engagement.

case study

I explored how AI could extend my existing Figma workflow beyond static design and into functional, browser-based experience. Using the NYSF's Match-3 game as a test case, I prepared the Figma file and design system, connected Claude Code to Figma through the Figma MCP server, and used GitHub to manage and serve the resulting code.

The goal wasn't simply to recreate a design with AI, but to establish a workflow where my existing design system could become a foundation for building and iterating on a live digital desktop game experience.

Figma → MCP → Claude Code → GitHub → Live Experience

Throughout the process, I worked iteratively with Claude Code—providing structured direction, evaluating the output, and refining the experience through successive rounds of instruction and feedback. This experiment allowed me to move fluidly between design and development—using Figma to define the visual language, AI to accelerate implementation, and the browser as the final environment for testing, refining, and experiencing the responsive work.

prototype

The New York State Fair's puzzle game offers a fun, casual match‑3 experience infused with the charm and attractions of the fair. It blends playful design with promotional storytelling, making it both entertaining and educational—an ideal gateway for fairgoers to explore the spirit of the Great New York State Fair.

As UI Lead for the NYS Fair Match-3 game, I shaped the visual language—from icons and colors to animations and layouts—while ensuring a fun, accessible player experience. On the UX side, I documented user flows, wireframes, and gameplay strategy, defining level goals, scoring systems, and progression mechanics. The result was a cohesive, easy-to-play game that combined engaging visuals with smart design strategy to capture the spirit of the New York State Fair and keep players coming back.

case study

The City of San Clemente proposed homepage concept, designed in Figma, is now a working responsive site made of HTML (written as React components), CSS (Tailwind CSS v4 plus a design-token stylesheet), and JavaScript/TypeScript that Vite bundles for the browser.

‍Figma → MCP → Claude Code → GitHub → Live Experience

The prototype covers the whole homepage from utility bar to footer and adapts across phone, tablet and desktop. The Figma concept reimagines the city's homepage around its tagline, "The Spanish Village by the Sea": a full-bleed aerial photo of the coastline and pier, a warm parchment page background, and navy and ocean-blue accents.

The brief in the project is a functional homepage concept that works on desktop and mobile screens. The layout reads top to bottom as a sequence of resident tasks, from finding a service to checking what is happening in town.

prototype

The New York State Fair Mobile App is a comprehensive digital companion designed to enhance the experience of fairgoers by providing real-time access to essential event information.

As the lead UI and Visual Designer, I shaped the app’s look and feel—developing the color palette, typography, layouts, and iconography to create a cohesive visual system that blended the Fair’s brand identity with agricultural tones. In addition, I contributed on the UX side by helping define user flows, building wireframes, and translating usability feedback into intuitive navigation and interactive prototypes, ensuring a seamless user experience.

case study

To ensure consistency and scalability across the New York State Fair Mobile App, I developed a comprehensive design system that unified visual language and interaction patterns across the product. This included a structured color palette blending brand and agriculture-inspired tones, a mobile-optimized type scale for clarity and hierarchy, and a standardized spacing system to maintain alignment and visual rhythm across screens.

I built a library of reusable components—such as navigation patterns, cards, buttons, and form elements—paired with clear CSS references and usage guidelines to streamline developer handoff and implementation. This system reduced design inconsistencies and enabled faster iteration across features.

Using Figma Make, I incorporated AI-generated outputs to rapidly translate design foundations into a scalable system and interactive prototype. This approach allowed for quick validation of component behavior and user flows, improving collaboration across design and development.

Impact: The design system improved team efficiency, reduced redundancy, and accelerated the design-to-development process, while delivering a cohesive and intuitive mobile experience for fairgoers.

design system

I explored how AI could extend my existing Figma workflow beyond static design and into functional, responsive, browser-based experiences. Using the VX platform as a test case, I prepared the Figma file and design system, connected Claude Code to Figma through the Figma MCP server, and used GitHub to manage and serve the resulting code.

The goal wasn't simply to recreate a design with AI, but to establish a workflow where my existing design system could become a foundation for building and iterating on live digital experiences across screen sizes.

‍Figma → MCP → Claude Code → GitHub → Live Experience

‍Throughout the process, I worked iteratively with Claude Code—providing structured direction, evaluating the output, and refining the experience through successive rounds of instruction and feedback.

This experiment allowed me to move fluidly between design and development—using Figma to define the visual language, AI to accelerate implementation, and the browser as the final environment for testing, refining, and experiencing the responsive work.

ai-prototype

Studio City PXL partnered with Paramount Pictures to develop a customized metaverse platform that aims to bridge the gap between digital interactivity and real-world engagement.

As Lead UI Designer, I redesigned the platform's interface to be more intuitive and brand-adaptable. I introduced modular components for chat, media, and navigation, streamlining interactions while enhancing accessibility, performance, and immersive storytelling for large-scale fan events.

case study

I developed a cohesive design system for the Paramount VX project, establishing clear foundations for color, type scales, spacing, and reusable components to ensure consistency and scalability. Designed in Figma and extended using Figma Make, leveraging ai-generated outputs to rapidly prototype, iterate, and validate the components in a functional environment.

design system

I explored how AI could extend my existing Figma workflow beyond static design and into functional, responsive, browser-based experiences. Using the Lead from Behind as a test case, I prepared the Figma file and design system, connected Claude Code to Figma through the Figma MCP server, and used GitHub to manage and serve the resulting code.

The goal wasn't simply to recreate a design with AI, but to establish a workflow where my existing design system could become a foundation for building and iterating on live digital experiences across screen sizes.

Figma → MCP → Claude Code → GitHub → Live Experience

Throughout the process, I worked iteratively with Claude Code—providing structured direction, evaluating the output, and refining the experience through successive rounds of instruction and feedback. This experiment allowed me to move fluidly between design and development—using Figma to define the visual language, AI to accelerate implementation, and the browser as the final environment for testing, refining, and experiencing the responsive work.

ai-prototype

Studio City PXL partnered with Maximum Effort to help develop an awareness campaign for the Colorectal Cancer Alliance designed to reshape public perception of colon cancer. Through creative storytelling, data-backed outreach, and inclusive health equity strategies to save lives, efforts were focused to reinforce the site as a trusted health resource that encouraged screening across communities.

As the lead UI and visual designer, I was responsible for shaping the look, feel, and usability of the Lead From Behind digital experience. My role combined art direction and hands-on design execution, ensuring the website captured the campaign’s bold, stigma-breaking tone while delivering a seamless user journey.

case study

To ensure consistency and scalability across the Lead From Behind experience, I developed a comprehensive design system that unified the visual and functional language of the site. This system established a clear foundation across color, typography, spacing, grids, and reusable components, enabling a cohesive and efficient design process.

The color palette was intentionally bold and high-contrast to reflect the campaign’s energetic tone, while a structured type scale ensured clarity and hierarchy across all screen sizes. I defined a flexible spacing system and grid framework to support a modular, mobile-first layout, allowing content to adapt seamlessly across devices.

On the component level, I created a library of reusable UI elements—including buttons, cards, and content modules—designed for both consistency and rapid iteration. To accelerate development and prototyping, I leveraged Figma Make, using AI-generated outputs to help translate design decisions into a scalable system and interactive prototypes. This approach streamlined collaboration with developers and allowed for faster validation of user flows.

The result was a flexible, future-proof design system that balanced expressive visual design with practical usability, supporting both the campaign’s bold identity and its performance goals.

design system

I explored how AI could extend my existing Figma workflow beyond static design and into functional, responsive, browser-based experiences. Using the Sherri Show TV as a test case, I prepared the Figma file and design system, connected Claude Code to Figma through the Figma MCP server, and used GitHub to manage and serve the resulting code.

The goal wasn't simply to recreate a design with AI, but to establish a workflow where my existing design system could become a foundation for building and iterating on live digital experiences across screen sizes.

‍Figma → MCP → Claude Code → GitHub → Live Experience

‍Throughout the process, I worked iteratively with Claude Code—providing structured direction, evaluating the output, and refining the experience through successive rounds of instruction and feedback.

This experiment allowed me to move fluidly between design and development—using Figma to define the visual language, AI to accelerate implementation, and the browser as the final environment for testing, refining, and experiencing the responsive work.

ai-prototype

Studio City PXL partnered with Debmar-Mercury to develop a digital hub for Sherri, a nationally syndicated daytime talk show hosted by Emmy-winning comedian and actress Sherri Shepherd. The website is design to connect fans with content, ticket requests, social media integration, merchandising and more.

As the Lead UI Artist, I shaped the website’s visual identity, ensuring the design reflected a vibrant energy and approachable tone. My work included developing a cohesive UI system, designing layouts for key pages, and crafting engaging, conversion-focused visual elements. On the UX side, I created wireframes and user flow diagrams to map intuitive journeys, as well as developed detailed user personas to guide design decisions and align the experience with audience needs.

case study

I explored how AI could extend my existing Figma workflow beyond static design and into functional, responsive, browser-based experiences. Using the LA Kings Insider as a test case, I prepared the Figma file and design system, connected Claude Code to Figma through the Figma MCP server, and used GitHub to manage and serve the resulting code.

The goal wasn't simply to recreate a design with AI, but to establish a workflow where my existing design system could become a foundation for building and iterating on live digital experiences across screen sizes.

‍Figma → MCP → Claude Code → GitHub → Live Experience

‍Throughout the process, I worked iteratively with Claude Code—providing structured direction, evaluating the output, and refining the experience through successive rounds of instruction and feedback.

This experiment allowed me to move fluidly between design and development—using Figma to define the visual language, AI to accelerate implementation, and the browser as the final environment for testing, refining, and experiencing the responsive work.

ai-prototype

Studio City PXL partnered with Troika to develop a website that provides fans with in-depth coverage detailing the day-to-day activities of the Los Angeles Kings organization. Fans on a daily are treated with NHL and AHL (Ontario Reign) updates, development camp news, player profiles, prospect tracking and behind-the-scenes content.

As the Lead UI Artist, I guided the website’s visual direction, ensuring a clean, content-first design that aligned with the LA Kings’ brand identity. My focus was on crafting a modern, cohesive interface—balancing editorial depth with fan accessibility across desktop and mobile. In addition, I contributed on the UX side by developing key user flows and wireframes, helping shape intuitive navigation and content organization that supported both hardcore fans and new readers.

case study

To support the evolving digital presence of Los Angeles Kings, I developed a scalable design system for the LA Kings Insider platform, the team’s official digital hub for news, analysis, and fan engagement. The goal was to create a cohesive visual framework that aligned with the Kings’ brand identity while improving consistency, readability, and usability across editorial content and interactive features.

The system defined core brand color tokens, typography scales optimized for sports journalism, and a structured spacing and layout framework that improved content hierarchy and scannability for articles, game updates, and multimedia content. I also designed reusable UI components—including article cards, video modules, navigation elements, and call-to-action blocks—to streamline production and ensure visual consistency across the site.

To accelerate the process, I leveraged Figma Make, using AI to translate foundational design elements into a structured system with reusable components, CSS reference variables, and a responsive prototype. This approach enabled faster iteration, clearer developer handoff, and a flexible design framework capable of supporting the high-frequency content updates typical of a sports media platform.

The result was a modern, scalable design system that strengthened the LA Kings’ digital brand presence while improving efficiency for both designers and developers maintaining the platform.

design system

Studio City PXL partnered with the City of Santa Monica to redesign a robust, accessible, and service-rich resource that centralizes civic, governmental, and community information.

As the lead UI and Visual Artist, I designed the look and feel of a proposed Big Blue Bus microsite integration, creating a clean, mobile-first interface that balanced clarity, accessibility, and real-time functionality. I developed the visual design system—from color palette and typography to iconography—aligned with Big Blue Bus branding while ensuring WCAG compliance and multilingual support.

case study

I developed a comprehensive design system to ensure consistency, scalability, and efficiency across the Big Blue Bus microsite. This system included a thoughtfully defined color palette, accessible type scale, and a flexible spacing framework that established clear visual hierarchy and rhythm. I created a modular set of UI components—including buttons, cards, alerts, and navigation patterns—paired with a responsive grid system to support seamless layouts across devices.

Using Figma Make, I translated these elements into an ai-generated system, rapidly iterating and refining components while building an interactive prototype. This approach accelerated production, ensured alignment between design and development, and created a cohesive, scalable foundation for future enhancements.

design system

As the main UI designer, I crafted the game’s visual interface and player experience, ensuring every element felt approachable, intuitive, and true to the Disney Princess brand.

From game boards and menus to power-up visuals, I designed a cohesive system that balanced playful storytelling with functional clarity, translating complex mechanics into a seamless, visually engaging journey for players.

case study