Designing spec-driven development inside the code editor

Writing the spec first and letting the editor build from it.

As part of Juspay’s new AI initiatives, I designed IWE (Integrated Workplace Environment).

Rethinking the code editor as a space where context lives alongside code, and agents work with you, not around you.

Role: Product Designer
Team: Harshvardhan Agarwal, Shekhar Gurav (PM) and Harsh Sharma (Design Engineer)

Some project snapshots

Unified Search

One search bar across your code, threads, and tickets. So you stay in flow and focus on the problem, not the tooling.

IWE's search over a code editor: a list of channels to open, such as xyne-spaces, qa-automation and bug-triage.

Native VSCode Experience

Built as a VSCode extension, it follows the editor’s native architecture and UI conventions. Slotting in like it was always there, with room to grow as your workflow does.

The IWE sidebar inside VSCode: the workspace, activity, bookmarks, DMs, tickets, starred items and channels.

Integrated Communication

Conversations surface right alongside the code they reference. The decision stays attached to the implementation, not buried in another tab.

A ticket thread inside the editor: a ticket card marked Completed and Critical, with the replies under it.

Tickets at a Glance

Your full Linear queue lives in the sidebar — scan what’s open, triage priorities, and jump into a ticket without bouncing between the browser and the editor. Better DX, fewer context switches.

A list of tickets in the editor's sidebar with their status, priority and dates.

Visualising activity

While working on this, we tried multiple ways to visualise what your activity could look like. Here is one exploration, made by Harsh Sharma, a crazy good design engineer.