Cursor Threads

Seamlessly pair program with AI


Work

Interaction Design

UX/UI

Timeline

1 Week

Role

Interaction Designer



Introduction

This is a personal exploration of Cursor, an AI-powered version of VS code. Cursor has separate interfaces for chat and code generation. Keeping track of threads and code context isn't immediately obvious and the chat takes up a lot of screen real estate. In this project, I designed a version of Cursor that works more like commenting on a Google Doc.

Existing Version of Cursor

Problems

Separate Interfaces Inline code generation and chat are two separate interfaces. This requires users to re-input context when having conversations about AI generated code and also makes it difficult to add code from the chat.
Keeping Track of Chats and Context When users want to find chat threads that are relevant to code or vice-verse, they have to dig around menus an files.
Screen Real Estate The chat takes up a lot of screen space.

Goals


Unify the chat and code generation interfaces.



Always display conversations and context together.



Create a more compact interface for the AI.


The Design

Cursor Threads

Combined Chat & Code Generation

The chat and code generation are combined into a single 'comment-like' interface. You can easily ask questions about and give follow up instructions on code as they generate it.

See Your Chat Threads in Context

Easily find your chat threads from your code and vice-verse. No need to dig through previous chats to find already answered questions.

Compact View

Close the AI panel for more screen space. You can still navigate your threads and chat with the AI inline with your code.


Reflections

This project was super fun and the feedback from many of my developer friends was great. I build a couple Figma plugins to make the code animations possible. Whenever I get the chance, I plan to clean up the code and make them public to the Figma community. In the future, I also would probably structure my files in a way that could be broken up more easily. The typing animations tool a lot of memory and by the end of the project, I was very close to the limit.