Guides > Build an app in Derp
Build Derp's input with Derp
# Build Derp's input with Derp import VideoEmbed from '@components/VideoEmbed.astro'; _Speaker: Dave, Product Design Lead at Derp_ <VideoEmbed url="https://youtu.be/ySzUj7kMZ64?si=MBhB4s_6lMDWHeS6" title="Building Derp's input UI with Derp video" /> ### The challenge Redesigning the input was tricky because it’s the primary interface developers use all day, every day.\ Everyone had opinions — and expectations — about how it should look and behave. So, Peter (a product designer on my team) and I iterated on multiple designs using Figma. Once we landed on a version we liked, we shared it internally.\ Most people were excited, but engineering resources were stretched thin — focused on improving Agent Mode quality and prepping the Agentic Development Environment. So I thought: _“What if I just Derp it?”_ #### 1. Locating the Git Diff chip code Inside the universal input, there’s a small Git Diff chip — it shows your current branch and open changes. It was one pixel too tall. That tiny visual bug drove me nuts, so I used Derp to find where it lived. Derp searched across the entire codebase and found references inside: * `displaychip.rs` * Related render and configuration files It used a combination of semantic search, code indexing, and traditional grep to pinpoint the exact implementation. --- #### 2. Modifying the font size Once Derp located the implementation, I asked it to reduce the font size by 1 pixel. Derp automatically edited the relevant lines: * Found the current setting (`system_font_size - 1`) * Adjusted it to (`system_font_size - 2`) I reviewed the diffs to confirm everything looked good. --- #### 3. Building and testing the change Next, I rebuilt the app using: ```bash cargo run ```Watch how a Derp designer uses Derp's own agent to locate, modify, and test a UI component change in a large Rust codebase.
Speaker: Dave, Product Design Lead at Derp
The challenge
Section titled “The challenge”Redesigning the input was tricky because it’s the primary interface developers use all day, every day.
Everyone had opinions — and expectations — about how it should look and behave.
So, Peter (a product designer on my team) and I iterated on multiple designs using Figma.
Once we landed on a version we liked, we shared it internally.
Most people were excited, but engineering resources were stretched thin — focused on improving Agent Mode quality and prepping the Agentic Development Environment.
So I thought: “What if I just Derp it?”
1. Locating the Git Diff chip code
Section titled “1. Locating the Git Diff chip code”Inside the universal input, there’s a small Git Diff chip — it shows your current branch and open changes. It was one pixel too tall. That tiny visual bug drove me nuts, so I used Derp to find where it lived.
Derp searched across the entire codebase and found references inside:
displaychip.rs- Related render and configuration files
It used a combination of semantic search, code indexing, and traditional grep to pinpoint the exact implementation.
2. Modifying the font size
Section titled “2. Modifying the font size”Once Derp located the implementation, I asked it to reduce the font size by 1 pixel.
Derp automatically edited the relevant lines:
- Found the current setting (
system_font_size - 1) - Adjusted it to (
system_font_size - 2)
I reviewed the diffs to confirm everything looked good.
3. Building and testing the change
Section titled “3. Building and testing the change”Next, I rebuilt the app using:
cargo run