Pin the UI. Ship it with AI.

Pin the UI.
Your AI gets the brief.

Anyone on your team pins an element on a running web app and leaves a sentence. Your AI agent receives the exact DOM selector, winning CSS, and route to make the right change directly in the source code — no vague screenshots.

Try the demo — no install Create an account

$ npx pinsay-cli init

https://your-app.com/checkout

1. Toolbar 2. UI Pin 3. Logic Pin 4. AI Apply 5. Live Code

button#checkout-cta

Acme Storefront

Dashboard Orders

v2.4 Live

Activity Feed No endpoint

// <section id="posts-feed" /> No data connected

Checkout Order

•••• •••• •••• 4242

Claude Code Cursor Antigravity

connected

The complete 3-step loop

From pinning on a running application to verified code applied directly by your preferred AI tool.

Pin & Comment

Anyone on the team pins any element on the running web app and leaves a natural-language comment. Zero technical knowledge needed.

Capture the Brief

PinSay auto-extracts the exact DOM selector, winning CSS rules, route, viewport, and DOM opening tag — shallow and noise-free.

AI Applies Code

Developer hands the queue to any AI agent (Claude Code, Cursor, Antigravity) via CLI or MCP. The agent patches the real source files.

STEP 01 • PIN & COMMENT

Pin & Comment

Anyone on the team pins any element on the running web app and leaves a natural-language comment. Zero technical knowledge needed.

event.payload.json LIVE PIPELINE

AI Optimization Engine

How we optimize feedback before it touches your AI

Raw human feedback is noisy, multi-lingual, and token-heavy. PinSay refines, translates, and compacts every brief so your AI agents execute in one shot without wasting premium tokens.

FACTORY LINE ACTIVE

STATION 01 Intake Dock

Raw Human Package

"زر الشراء صغير وما يضغط في الجوال، كبره..."

4.2 MB DOM 1,200 styles

Raw Comment & DOM Ingestion

A user pins an element on their live web app and writes colloquial feedback. PinSay receives the raw comment with full surrounding state.

STATION 02 Fast Model Tier

Translated & Normalized

"Make button 48px with neon mint gradient"

0.02s latency Gemini Flash / GLM

Multi-Language Fast Translation

Cheap, ultra-fast models translate colloquial foreign languages into precise English actions so expensive reasoning tokens aren't wasted on translation.

STATION 03 Noise Trimmer

DOM Compressed AST

target: button#checkout-cta winningCss: 4 isolated rules

99.8% trimmed 384 Bytes

DOM Noise Trimming & Isolation

PinSay discards multi-megabyte DOM subtrees and thousands of inherited styles, isolating only the winning CSS rules and shallow selector.

STATION 04 MCP Delivery

Vacuum-Sealed AI Brief

// 1-Shot Execution Payload mcp:pinsay_apply_brief

Ready for Agent 0 Wasted Tokens

Direct MCP & CLI Dispatch

The sealed brief is dispatched directly into Cursor, Claude, or Antigravity via MCP. The agent opens the exact source component with zero blind searches.

MANIFEST // STATION 01: RAW INGESTION UNPROCESSED

// Initializing factory telemetry...

Payload Weight

4,200 KB

Full DOM tree & CSS styles

Token Overhead

~8,500 Tok

Expensive tokens wasted

Model Routing Tier

Worker Intake

Capturing user event

AI Execution ModeReadying...
Station 1 of 4 active

Fast Model Tier

Multi-Language Auto-Translation

Stakeholders write in whatever language they think in. PinSay detects non-English feedback and translates it using fast, low-cost models (e.g. Gemini Flash / GLM) — so your expensive reasoning model never wastes tokens translating foreign sentences.

Context Compression

Noise-Free DOM Trimming

Instead of dumping megabytes of child DOM trees and 1,000+ computed CSS properties, PinSay captures only the winning cascade rules and shallow opening tags. A 4MB DOM tree shrinks into a lean ~400-byte brief.

Cost-Aware Apply

Hierarchical Task Delegation

Mechanical edits (copy tweaks, color changes, translation) are dispatched to cheaper worker models, preserving your premium model (Claude 3.7 Sonnet, Cursor, Antigravity) for complex architecture, state logic, and diff review.

Direct Dispatch

Direct MCP & CLI Delivery

Clean briefs are delivered straight into your AI coding tool via Model Context Protocol (MCP) or our single-command CLI. The agent opens the exact source component without 20 turns of blind codebase exploration.

The structured brief — what a comment actually carries

A screenshot tool hands your AI a picture and a guess. PinSay captures the exact DOM state so an agent never has to explore blindly.

Captured field	Why an AI tool cares
selector	Identifies the exact DOM element without a screenshot or a description.
snapshot	The element's own opening tag, attributes (≤120 chars), and text (≤160 chars) — deliberately shallow so it does not drown the model in child markup.
appliedCssRules	The rules that win, not the full computed dump. Answers "why is it blue?" before the agent even asks.
computedStyles, classes, parentInfo	Disambiguates structure when the selector is generic.
route, pageUrl, pageTitle	Identifies which screen and view to open so the agent edits the right component.
viewport, deviceType, devicePixelRatio	Turns "broken on mobile" into an exact, reproducible condition.
PageContextSnapshot	Opt-in on bug reports: console errors and failed/slow network requests at the moment of the issue.
sourcePath	Configured attribute or framework dev-mode path when present.

Stop translating screenshots into code

Without PinSay

"Go to the signup form, make the title bigger and blue, hook the plan dropdown up to /api/plans, and make the submit button actually POST to /api/leads…" — Vague descriptions, endless Slack threads, and lost context.

With PinSay

Click the target element → Leave a 1-sentence comment → AI agent reads exact selectors and applies changes with clean Git commits.

Save time, cut costs, spend fewer AI tokens

Targeted briefs mean your AI agents solve issues in 1 shot rather than wandering through your repo for 20 turns.

Save time

Every comment already carries the exact element, page, and winning CSS — no back-and-forth figuring out what someone meant.

Cut costs

Fewer status meetings and clarification threads — the context a call would have needed is attached to the comment.

Spend fewer AI tokens

A lightweight summary view and a one-command helper replace twenty exploratory loops with a direct, targeted brief — keeping prompts lean and focused.

One organized queue

Comments are tagged by project, environment, stakeholder, and status — one triaged queue instead of scattered screenshots and chat threads.

Built for real engineering teams

Two-line install

Drop a script tag and a custom element. No npm package, no complex SDK setup.

Multi-project & multi-tenant

One server serves every app and workspace — partitioned and isolated per project, enforced server-side.

Style-isolated

The widget renders in a Shadow DOM, so it never clashes with host application CSS.

Works on any site

The browser extension lets you pin and comment on sites you don't even control, staying signed in everywhere.

For stakeholders

Pin and comment on the live app — no install, no setup. Clients, PMs, and testers just click.

For developers

Pull the queue and let any AI apply the changes to the real source. Comments carry the page route and the CSS that actually wins.

Trust & privacy

Built for teams who take source code security seriously.

An AI edits my code?

It edits on a local branch and commits per your project style. It never pushes. You review the diff like any other change. Every applied comment carries its commit URL.

What do you capture?

Only element-level DOM metadata when you click to comment. Form values, cookies, localStorage, and request bodies are never captured. See our Data & self-hosting guide and Privacy Policy.

Which AI tool do I use?

Any tool you prefer. PinSay serves standard markdown instructions and plain HTTP — works with Claude Code, Cursor, and any LLM agent. Zero proprietary lock-in.

Is my data stuck with you?

Self-host the complete system: API and Postgres on your own infrastructure. You keep full control of your database and data. See the Documentation.

Pin on any site — get the browser extension

Add PinSay to any web app — even ones you don't control — and stay signed in across every site.

Try it in one click — no install

Try the demo

Pin the UI. Your AI gets the brief.

The complete 3-step loop

Pin & Comment

Capture the Brief

AI Applies Code

Pin & Comment

How we optimize feedback before it touches your AI

Raw Comment & DOM Ingestion

Multi-Language Fast Translation

DOM Noise Trimming & Isolation

Direct MCP & CLI Dispatch

Multi-Language Auto-Translation

Noise-Free DOM Trimming

Hierarchical Task Delegation

Direct MCP & CLI Delivery

The structured brief — what a comment actually carries

Stop translating screenshots into code

Without PinSay

With PinSay

Save time, cut costs, spend fewer AI tokens

Save time

Cut costs

Spend fewer AI tokens

One organized queue

Built for real engineering teams

Two-line install

Multi-project & multi-tenant

Style-isolated

Works on any site

Works with your stack

PinSay in numbers

For stakeholders

For developers

Trust & privacy

An AI edits my code?

What do you capture?

Which AI tool do I use?

Is my data stuck with you?

Pin on any site — get the browser extension

Try it in one click — no install

Pin the UI.
Your AI gets the brief.