Point at any UI element.
Edit it. Send it to AI.

Promptotype lets you hover, click, and visually edit elements in a running app. Text, colors, font, spacing, Tailwind classes. Then sends structured before/after diffs to AI coding agents. No screenshots. No guessing.

Requires Node ≥ 22. Or: curl -fsSL https://locusai.design/install.sh | bash
Claude CodeCodexGemini CLIAny frameworkAny app

How Promptotype works

From element selection to structured AI feedback in seconds.

Activate
Launch Promptotype overlay on your running app
Inspect
See computed styles as you move over elements
Select
Pin an element for annotation
Edit
Live edits: text, color, font, spacing, Tailwind classes
Batch
Pin multiple elements with numbered markers
Review
Before/after diffs in a side panel
Submit
Structured markdown to your AI agent

Real computed styles, not guesswork

Promptotype extracts real CSS values from the live DOM — font family, size, weight, color, spacing, and alignment. No screenshots. No guessing. The AI agent gets exactly what it needs to make precise changes.

font— family, size, weight, line-height
color— text color, background color as hex
spacing— padding, margin with box model viz
layout— text-align, display, align-items
### 1. `h2.card-title`
**Current styles:**
- Font: Inter, 14px, weight 600, line-height 1.5
- Color: #333333 (on background #FFFFFF)
- Margin: 0 0 8px 0
- Padding: 4px 8px
- Alignment: text-align left, display block

**Prompt:** Make this heading larger and bolder —
it should dominate the card

Batch annotations, not one-at-a-time

Select as many elements as you need. Each gets a numbered pin on the page. Review all your annotations in a side panel before sending. One submission, all the context — the agent handles them together.

1Click an element → add annotation
2Repeat for every element that needs changes
3Review all → submit once → agent acts
## Design Annotations (3 elements)

### 1. `h2.card-title`
**Prompt:** Make this heading larger and bolder

### 2. `div.sidebar`
**Prompt:** Increase padding to 16px, feels cramped

### 3. `button.cta-primary`
**Prompt:** Wrong shade of blue — match the nav

---
Submitted to Claude Code via CLI

AI-native output, not screenshots

Promptotype outputs structured markdown that AI agents can parse and act on immediately. No OCR. No vision model overhead. Just precise element selectors, computed styles, and your written intent.

Works with Claude Code, Codex, Gemini CLI. Any app, any framework.
$ promptotype http://localhost:3000

✓ Proxy running on port 4000
✓ Overlay injected
✓ Waiting for annotations...

# 3 annotations submitted

→ Structured markdown sent to Claude Code
→ Agent applying changes...
→ Done. 3 elements updated.

Get started in 30 seconds

Step 1
Install

Installs the CLI, registers the MCP server in Claude Code, and adds the /promptotype slash command.

Step 2
Continuous mode

Pair with the Chrome extension. Agent waits for annotations, applies them, then waits again.

Step 3
Or one-shot

No extension? The CLI proxies your app, injects the overlay, and prints structured markdown on submit.

That's it. Hover, click, annotate, submit.