The 5-Minute Claude Code UI Iteration Loop

"This button's alignment is off. Can you fix it?" That's what Sarah, our designer, just pinged me on Slack. She attached a screenshot. It's a decent screenshot, but it's just... a screenshot. No context. Is it the primary CTA? The tertiary action? What file is it even in? My brain cycles through Button.tsx, maybe PrimaryButton.tsx, possibly buried in components/ui/buttons/. I'd have to hunt. Then I'd try to describe the surrounding elements, guess the CSS class, and then ask Claude Code. This dance takes minutes. Sometimes, it takes longer than the actual fix. It's stupid.

The Old Way Sucks. And It's Slow.

We've all been there. A designer points out a UI flaw. You get a Slack message. Maybe an email. Usually, it's a screenshot. "The spacing here is wrong." "This text is too small." "The icon doesn't match." You look at the screenshot. You look at your code. You start guessing. "Okay, which Card component are we talking about? The one in src/components/cards/ or src/features/dashboard/components/Card.tsx?" You try to find the exact CSS class. Is it .card-wrapper? .css-1abcde? .MuiCard-root? You might draw an arrow on the screenshot. Scribble some notes. "Align this thing to the left of that other thing." This isn't communication; it's charades. It breeds errors. It kills momentum. You spend more time deciphering the request than fixing the actual problem. It’s a bottleneck built on ambiguity. It’s inefficient. You're basically playing detective, not developer.

AI Promises Speed, But You Still Need Context

AI coding assistants like Claude Code are supposed to change the game. They can write boilerplate, refactor code, even suggest entire components. And they do speed things up. But only if you feed them the right data. Sending an AI a vague request like "fix the button on this page" is like asking a world-class chef to create a Michelin-star dish with only a picture of a potato. They can't see your screen. They don't know your component hierarchy. They can't magically know which Button component you mean, or what its parent element looks like. The AI isn't the bottleneck; your inability to translate the visual UI into structured, actionable data for the AI is. You're still doing the manual inspection, the guesswork, the context-gathering. The AI just does the coding part. The manual extraction remains. It’s like having a super-fast car but no fuel.

Markagent: Click. Annotate. Ship.

This is where tools like markagent come in. It's a Chrome extension. You're browsing your app. You see something. You hit the shortcut: Cmd+Shift+. on Mac, Ctrl+Shift+. on Windows/Linux. A little overlay appears. You click the element you care about. That's it. Markagent does the heavy lifting. It automatically captures:

• The React Component: If it can detect it (e.g., PrimaryButton). This tells the AI the likely name of the component file.
• The Source File Path: Crucial for AI. It might show /src/components/ui/buttons/PrimaryButton.tsx if your dev server is running and source maps are enabled. This is gold. No more greping your entire project.
• The DOM Context: The element's path in the DOM tree, like div > div > button.primary-cta. This tells the AI about the element's immediate surroundings and its place in the structure.
• A Stable CSS Selector: Not a brittle, auto-generated class name, but a reliable selector that points to that specific element. Think #dashboard-section > div.controls > button.primary-cta. This allows the AI to target the correct styling.
• The Page URL: So the AI knows where the problem is occurring.
• The Viewport Dimensions: Useful for responsive issues or understanding the user's screen size context.
• A Screenshot: Either of the full page or cropped precisely to the element you clicked. Visual confirmation is key.

It bundles all this into a structured markdown prompt. No more hunting for file paths. No more guessing selectors. It’s concrete. It’s immediate. It’s 100% local, too. Your code, your data – never leaves your browser. This is essential for security and privacy.

Prompt Engineering for Real: The Claude Code Workflow

Markagent's output isn't just raw data; it's a pre-formatted prompt ready for your AI assistant. Let's revisit Sarah's misaligned button. After clicking it with Markagent and adding a note like "CTA misaligned," here's what the exported markdown looks like:

## Task: Align Primary CTA Button

**User:** The primary CTA button on the dashboard is misaligned. It should be flush left with the input field above it.

**Element Details:**
*   **React Component:** `PrimaryButton`
*   **Source File:** `/src/components/ui/buttons/PrimaryButton.tsx`
*   **DOM Path:** `div > div > button.primary-cta`
*   **CSS Selector:** `#dashboard-section > div.controls > button.primary-cta`
*   **Page URL:** `https://myapp.com/dashboard`
*   **Viewport:** `1440x900`

**Screenshot:**
![Dashboard CTA Misalignment](data:image/png;base64,iVBORw0KGgoAAAA...)

**Request:**
Adjust the CSS for the `PrimaryButton` component to ensure it aligns correctly with the preceding input field. Specifically, check margin/padding properties or flex/grid alignment within its parent container.

This structured format is what makes the claude code workflow sing. It's not just "fix this." It's "fix this specific component (PrimaryButton) located in this file (/src/components/ui/buttons/PrimaryButton.tsx), which is this element (#dashboard-section > ... > button.primary-cta), on this page (https://myapp.com/dashboard), to achieve this visual outcome (align with input field)." This level of detail dramatically reduces ambiguity and the chance of AI hallucination. You're providing the AI with the exact contextual information it needs to generate an accurate, actionable fix. This is the foundation of efficient claude code ui iteration. It turns vague requests into precise instructions.

The 5-Minute Loop: From Feedback to Fix

This is where the magic happens. The speed. The accuracy. The sheer reduction in friction. Let’s walk through it:

1. Capture the Problem (30 seconds): Sarah pings me. "Button's off." I hit Ctrl+Shift+.. A quick click on the button. I type "CTA misaligned" into the Markagent prompt. Done.
2. Generate the AI Prompt (15 seconds): I click the "Export Prompt" button in