Stop typing design feedback. Hit record, start talking, click the elements that bother you. TAPE transcribes your voice, pins each comment to a CSS selector with computed styles attached, and exports a structured critique your agent can action.
Click any element in the simulated app. Watch the comment appear in the panel with the element pinned. This is what a 30-second recording session looks like.
Track projects, manage tasks, and collaborate with your team in real time.
12 active
47 open
8 members
Built with care. Shipped with confidence. Trusted by 2,400 teams.
Hit record. TAPE starts listening via Web Speech API and capturing clicks.
"This padding is too aggressive." Click. "Love this shadow." Click. Natural flow.
TAPE merges voice segments with click targets. Each comment gets pinned to a selector.
Copy as agent instructions, markdown, or JSON. Paste into your agent. It executes your critique.
Every element you click during recording gets a full context snapshot. Not just the selector. The computed styles that matter for design critique: spacing, colors, typography, shadows, borders. Your agent gets everything it needs to understand what's wrong and fix it.
Unique CSS selector path. ID, data-testid, classes, nth-child fallback.
25+ computed properties. Spacing, colors, type, shadows, borders, layout.
Tag name, text content, bounding box, position on page.
TAPE classifies each comment by analyzing your words. "This padding is too aggressive" gets flagged as an issue. "Love this shadow" gets flagged as positive (keep as-is). "Why is this centered?" gets flagged as a question. Your agent knows which comments need action and which are approvals.
"too much", "wrong", "fix", "ugly", "broken", "aggressive"
"love", "great", "perfect", "keep", "clean", "solid"
"why", "should", "could", "is this", "what if"
The primary export. Issues grouped first so your agent fixes them. Positives listed as "keep as-is" so the agent doesn't touch what works. Relevant computed styles attached inline so the agent knows the current values.
<design_critique> <!-- URL: https://app.dashflow.io — 6 comments, 0m 34s --> ## Issues to fix (3) - **h3.hero-title**: This font weight is way too heavy for a subheading (current: font-weight: 800, line-height: 1.35) - **button.cta-primary**: The padding is too aggressive, needs to breathe (current: padding: 7px 18px) - **p.footer-text**: This is barely readable, too small and too faded (current: font-size: 10px, color: #bbb) ## Keep as-is (2) - **div.card-grid**: Love the card layout, spacing feels right - **div.mini-card**: The shadow on these is perfect ## Questions (1) - **div.hero-section**: Should this be left-aligned instead? </design_critique>
<Tape /> // Or programmatically: const { start, stop, exportAgent } = useTape() start() // ... user talks and clicks ... const report = stop() const instructions = exportAgent() console.log(instructions)
| Prop | Default | Description |
|---|---|---|
| shortcut | 'Alt+T' | Keyboard toggle |
| language | 'en-US' | Speech recognition language |
| ignoreSelectors | ['[data-tape-ui]'] | Selectors to skip on click |
| onReport | — | Callback with CritiqueReport on stop |
Speech recognition uses the Web Speech API, available in Chrome, Edge, and Safari. Firefox has partial support. If the browser doesn't support speech recognition, TAPE still captures clicks with element context. You just won't get transcription.
Experimental, open-source software. Provided as-is with no warranties. DYOR. Use at your own risk. The author assumes zero liability.