echoui

Experimental software. DYOR. Use at your own risk.

Visual feedback that teaches your AI agent. Build a taste profile. Export it as a system prompt block. Your agent stops making the same design mistakes.

npm install echoui

The feedback loop in AI-assisted development is broken. You reject a change, explain why in chat, the agent forgets next session, makes the same mistake. ECHO captures your design preferences as structured rules, persists them in localStorage, and exports them as a system prompt block you paste into Cursor rules, CLAUDE.md, Copilot instructions, or any system prompt.

Quick start

import { Echo } from 'echoui'

function App() {
  return (
    <>
      <YourApp />
      <Echo />
    </>
  )
}

Press Alt+E to toggle. Click elements to capture context. Type what's wrong. ECHO parses it into a typed, categorized rule.

How it works

1. Spot it — Click any element (optional). ECHO captures its computed styles, selector, and layout info as context.
2. Say it — Type what's wrong: "too much padding", "never use modals for settings", "prefer 14px body text".
3. Save it — ECHO parses the rule type automatically (never, always, prefer, avoid, use, note) and tags it with a category. Duplicates get reinforced instead of duplicated.
4. Ship it — Export as a <design_preferences> system prompt block. Paste it into your agent's instructions. Done.

Smart parsing

Type naturally. ECHO figures out the rule type from your phrasing:

• "Never use modals" → NEVER rule
• "Too much padding" → AVOID rule
• "Prefer subtle shadows" → PREFER rule
• "Always use 14px body" → ALWAYS rule
• "Use 8px grid" → USE rule
• Anything else → NOTE

Start with the keyword for explicit typing. Everything else gets classified automatically.

Deduplication

Say "too much padding" three times and ECHO reinforces the existing rule (weight goes to x3) instead of creating duplicates. Heavily weighted rules appear first in the export, signaling to your agent which preferences matter most.

Eight categories

Every rule gets tagged: spacing, color, typography, layout, components, interaction, content, general. The export groups by category so your agent can scan by domain.

The export

One click copies a structured block:

<design_preferences>

## Spacing
- **AVOID:** too much padding on cards (not `24px`)
- **PREFER:** tight spacing, 8px gaps between elements

## Color
- **NEVER:** use pure black for text (use `#1a1a1a`) [×3]

## Components
- **NEVER:** use modals for settings pages
- **PREFER:** inline editing over modal forms

</design_preferences>

Paste into Cursor rules, CLAUDE.md, Copilot instructions, .github/copilot-instructions.md, or any system prompt.

Programmatic API

import { useEcho } from 'echoui'

const {
  rules,              // Current rules array
  addRule,            // (category, type, text, opts?) => Rule
  removeRule,         // (ruleId) => void
  clearAll,           // () => void
  exportSystemPrompt, // () => string
  exportMarkdown,     // () => string
  exportJSON,         // () => string
  importJSON,         // (json) => number (rules imported)
} = useEcho()

Team sharing

Export your profile as JSON, commit it to your repo, and import it on other machines:

const { importJSON } = useEcho()

// Load team preferences
fetch('/team-preferences.json')
  .then(r => r.text())
  .then(json => importJSON(json))

Props

| Prop | Default | Description | |------|---------|-------------| | project | document.title | Project name for the profile | | shortcut | 'Alt+E' | Keyboard toggle | | position | 'right' | Panel: right or left | | panelWidth | 340 | Panel width in px | | storageKey | 'echo-profile' | localStorage key for persistence | | zIndex | 99999 | Z-index for panel | | onRule | - | Callback when rule is added | | onExport | - | Callback when profile exported |

Persistence

Rules are stored in localStorage under the storageKey prop. They persist across page refreshes and browser restarts. Each project can have its own key. Clear with clearAll() or the panel's clear button.

Disclaimer

Experimental, open-source software provided as-is. No warranties, no guarantees. Use at your own risk. DYOR. The author assumes no liability for any issues arising from the use of this software.

License

MIT. Built by 0xDragoon.