Seamlessly pair program with AI
Work
Interaction Design
UX/UI
Timeline
1 Week
Role
Interaction Designer
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
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.
Unify the chat and code generation interfaces.
Always display conversations and context together.
Create a more compact interface for the AI.
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.
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.