Summary
Category
Developer Experience
Org
Concept Project
Product
Claude Code via VS Code
Role
Sole Designer, Prototyper
Core Challenge
- 01 Users lose agency when forced to approve a wall of confusing commands
- 02 Users lose track of their progress over time
Impact
- 01 Shipped a React simulator to test the flow without waiting for backend development
- 02 Tested alternative designs before building the final layout
I noticed a gap in the agentic coding workflow: I hated the feeling of being forced to approve walls of commands before understanding them.
I started a concept project to reimagine how we can maintain agency and control while coding with AI agents.
Tool
VS Code
Front-end Development
Figma
Design System, Prototyping
GitHub
Version Control
Claude Code
Agentic Coding
Key Workflows
- Action Summarization
- Progressive Disclosure
- Mutation-level Tracking
- State Restoration
Problem Space
Users lose their sense of agency when:
- 01 A coding agent asks them to approve a step that they don't understand
- 02 Overwhelmed by a whole wall of details and code
- 03 Lose track of what they've achieved
Constraints
Stay inside Claude Code's existing design system and the VS Code environment, so the changes work for every expertise level with minimal disruption.
The 3 things I changed
01
Before
Ambiguous Text Hierarchy
React Simulator
After
Bordered One-verb Summary
Proposed React Simulator
Summarize actions, technical or non-technical, with one verb (think, read, edit, run, etc.)
02
Before
Design feels like a black box
Actual Claude Code interface (via VS Code)
"I feel bypassed, like I'm becoming the agent for the AI, because I just kept pressing the auto-accept button."
After
Progressive disclosure of increasing level of detail and technicality
Proposed React Simulator
01 Provide a high-level summary of what the command is about to do
02 2-sentence risk assessment beforehand, colored with yellow for low risk, red for high risk
03 Technical part comes last
03
New Feature
Session History logs session-level activity (already exists).
Live Change Log now captures mutation-level precision (new!).
- 01 Records every mutation with timestamp
- 02 Updates ongoing agent actions in real time with instant, scannable summaries
- 03 Lets developers snap back to a prior historical state instantly
Use cases
Scenario 01
What happens if the user clicks reset?
Consequence
If the user clicks reset for log B, mutations that happened after B (C, D, E, F, G) would be reset as well. It shows up as a Modify action in the chat.
Guardrail
The user is warned and needs to explicitly confirm the state reset.
Scenario 02
What happens if the user wants to undo it (e.g., a misclick)?
Consequence
The user can “undo” the reset.
Guardrail
The agent would still show the reset and the state, even though the changes are discarded.
Video Prototype
The feature development workflow demonstrates how you work with coding agents that provide more visibility into their actions.
Clickable Prototype
Guidelines
- 01 Interact directly with the prototype to experience the proposed UX live.
- 02 Explore two distinct scenarios via the top simulator tabs: feature development and troubleshooting.
- 03 Click the "Ask Claude..." input in the chat panel to launch the active interactive flows.
The Alternative Experiment
Before proposing UI at all, I tested whether CLAUDE.md instructions could solve this without interface changes.
Before
With CLAUDE.md
Proposed UX
Are UI changes needed if you can personalize CLAUDE.md?
| Problem | Asked to approve an action they don't understand | Feel overwhelmed by a wall of details | Lose track of what they've achieved | Misfit mental model |
|---|---|---|---|---|
| CLAUDE.md | Partial | Partial | Partial | Yes |
| Proposed UI | Yes | Yes | Yes | Partial |
Summary
- 01 Coding agent UX is more than just text prompts and responses. UI changes are needed too.
- 02 These complement CLAUDE.md files instead of competing with them.
Becoming a better designer
I challenge my own answer before anyone else can.
Before proposing any UI, I tested the counterargument: could better CLAUDE.md instructions solve this with no interface changes at all? Mapping exactly where they fall short is what made the final design defensible instead of just plausible.
Given more time, I'd design what the change log becomes when you share it: a structured session summary a developer can hand to teammates, covering what changed, why, and what needs review, instead of a raw list of results.
Read more
The capture dashboard behind Codec Avatars
Meta
Redesigning the internal tool that orchestrates 300+ camera and sensor streams, as the team's only designer and a daily operator of the system. (Details abstracted under NDA)
A 0-to-1 video annotation platform for dancers
tanmigo
Bridging the gap between video discovery and physical practice with a seamless, one-stop annotation experience, designed and built in code with an engineer.