# How to point at a UI element and send its HTML and CSS to an agent with orca

Repo: [stablyai/orca](https://github.com/stablyai/orca) | Difficulty: Intermediate | Time: 30 minutes | Basis: From the README

Use Design Mode in the built-in browser to click any element and drop its code and a screenshot into your prompt.

**Who it is for:** Front-end developer fixing a visual bug who cannot easily describe which element is wrong

**The problem:** Telling an agent 'the button in the header looks off' leads to guesses about the wrong component.

**The outcome:** The agent gets the element's real HTML, CSS and a cropped screenshot, so its fix targets the right code.

## Steps

1. Run your web app and open it in Orca's embedded Chromium browser.
2. Turn on Design Mode and click the misbehaving element.
3. Send the captured HTML, CSS and screenshot into an agent prompt.
4. Ask the agent to fix the issue and check the result in the same browser.

## Prompt to paste into your agent

```text
Using stablyai/orca, open <local dev URL> in Design Mode, capture the element <describe element>, and send it to Claude Code with the request: <what to change>. Verify the agent edited the component that renders that element.
```

## Caveat

Design Mode captures what the browser renders, so framework-generated class names may not map obviously to source files and the agent may still need to search.

Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/stablyai-orca/click-ui-element-into-agent-prompt/