Microsoft VS Code: Copilot – A tri-modal interface overhaul designed for high-state visibility in hybrid engineering.

Deliverables


Concept

Product Design

Motion

Prototype



Tech Stack


Figma

Variable Logic

The brief


Current AI integration within Visual Studio Code lacks environmental distinction, leading to high cognitive load and accidental token waste. The interface fails to differentiate between manual execution and autonomous generation, creating friction for specialized user workflows.



Goal


To bridge the gap between AI-assisted generation and high-stakes manual engineering by introducing a modal architecture that empowers user-specific workflows, reduces interaction friction, and optimizes token efficiency.



The solution


A tri-modal interface overhaul that utilizes high-state visibility to segment user intent. By implementing Copilot (AI), Test (AGI), and Code (Manual) modes, the platform explicitly defines the human-model relationship, optimizing the workspace for specific engineering tasks.

Empower coders, not add friction



Duolingo ASL user interface design mockup

Environmental Segmentation


The interface utilizes a tri-modal toggle to morph the IDE based on active intent, ensuring the platform services the user's immediate workflow requirements.



copilot img

Copilot Mode : Tailors the environment for AI-assisted generation and pair-programming.

copilot img

Agentic Mode : Enables high-level testing and autonomous agent execution for complex debugging.

copilot img

Code Mode : A distraction-free environment optimized for senior engineers and manual logic execution.

The Logic of Reduced Cognitive Load


Drawing inspiration from Figma’s modal architecture, this system adopts a proven UX pattern to mitigate information density. By deconstructing the traditionally cluttered VS Code interface into specific user states, the platform eliminates "noise" and surfaces only the tools necessary for the task at hand.

Duolingo ASL Lin Sign My Name What in ASL Sprite Sheet

To create an effective modal toggle, we must first analyze the primary user groups.

I have defined a spectrum of three user archetypes to better understand the evolving mental models of modern coders. As AI becomes deeply integrated into the development process, traditional roles like PMs, Engineers, or Designers are shifting. We must design for User-Enabled Thinking—an approach that prioritizes how much autonomy a user grants to the AI at any given moment.

Duolingo ASL Lin Sign My Name What in ASL Sprite Sheet

Reflections

Growth Opportunities

Design with AI in mind

As AI is going to be a key part of our daily interactions in creating prototypes, applications and more, we need a poewrful paltform to help enable that.

Ths project help me see how we can reshape AI tools in a helping hand not leaving behind in the VSC platform.

Scaling design to maxmize impact

As working on this case study, it was a challange to create a platofrm that is easy to navagate vs what users can understand.

Next Project

Apple Live Captions — A unified approach to accessibility across all Apple devices.