Turn taste into a design system your code actually uses.
M1rror takes the references you admire, your existing React components and your team’s feedback, and turns them into an approved, versioned design system. Then it hands a coding agent a scoped contract and returns a pull request with evidence. You decide what ships.
Pilot for React and TypeScript web apps. Billing runs in test mode.
How a reference becomes a merged change
Each step produces a real object you can inspect: a reference with rights, a decision, a versioned system, a binding to your code, a release, a contract and a pull request. Nothing moves forward on a screenshot alone.
Collect references
Upload screenshots or save links to interfaces you admire. Every reference is private to your workspace and carries its source, rights status and permitted use, so nothing leaves with the wrong licence.
Capture an app you own
Optional: point M1rror at a live web app you own or may analyze. It extracts tokens, component patterns and interaction behaviour as evidence, and saves them as a rights-tagged reference you can adopt or adapt.
Decide what to keep and avoid
Mark the qualities you want and the ones you don’t. The agent proposes distinct directions on your own screens and content, so you compare like with like.
Approve a versioned design system
Tokens, type, spacing, components and their states become one versioned system. Aliases, literals and unresolved values are labelled, and tokens export as DTCG JSON.
Bind to the components you already have
M1rror reads your React code and maps the system onto your real components: import path, props and source revision. Uncertain matches are flagged for you to confirm, not silently replaced.
Compose screens with every state
Lay out representative screens with the bound components, including loading, empty, error, denied and narrow-window states. States that don’t apply are marked as such rather than invented.
Review, then approve an immutable release
Teammates comment on the exact artefact revision. Approval is recorded against a digest of what was reviewed; changing anything afterwards creates a new release instead of quietly editing this one.
Run a scoped implementation
A coding agent receives a contract: the approved release, base commit, allowed and forbidden paths, budget and required tests. It works in a disposable workspace and returns evidence, not a claim.
Merge the pull request yourself
You get a branch and a PR with before-and-after evidence, tests run, components reused and known gaps. M1rror never merges or deploys for you.
One workbench for the whole loop
A board in the middle, your references and real components on the left, and an agent, inspector and comments on the right. The chrome stays neutral so your product’s design is the thing you see.
Five modes, one project shell
- Board
- A spatial board for references, directions, screens and notes. An accessible outline mirrors everything on it.
- System
- Tokens, type, spacing and components with their states, versioned as one design system.
- Screens
- Representative screens composed from bound components, each with its applicable states.
- Review
- Threads on exact revisions, required reviewers, blockers and the approval record.
- Implement
- Contracts, runs, evidence and the branch, with approved, implemented, tested and merged kept apart.
A right panel that follows your selection
- Agent
- Works on what you selected. The selection appears as a context chip before anything is sent, and consequential actions go through the same permission checks as yours.
- Inspect
- Shows the selected object’s tokens, component binding, source revision and where it came from.
- Comments
- Threads attach to the artefact and revision. Comments and reactions are never counted as approval.
The header always shows the project, branch, draft or release identity, collaborators and job state. Switching panels keeps your zoom, selection and unsent drafts.
Capture an interface you already own
Point M1rror at a live web app you own or have permission to analyze. It extracts colour, type, spacing, radii and motion tokens, component patterns, and interaction behaviour such as focus, hover, keyboard handling and transitions.
The result is a private, rights-tagged reference and a captured target direction. Adopt it to match that UI exactly, or adapt it alongside your other references.
- You attest rights first. Analysis doesn’t start until you confirm you own the app or may analyze it.
- Evidence for every value. Each token and behaviour shows where it was observed. Inferred values and gaps are labelled as limitations.
- Web today. Live web URLs work now; web bundles and Electron apps are next. Native binaries aren’t analyzed in the hosted product.
Powered by REA (Reverse Engineer Anything), MIT-licensed open source.
Captured target
https://app.example.com · 6 routes
| Token or behaviour | Value | Evidence |
|---|---|---|
| color.text.default#1C1B19 | #1C1B19 | observedComputed style on 118 text nodes |
| type.bodyInter 15/24 | Inter 15/24 | observedComputed style on 64 paragraphs |
| space.stack.md16px | 16px | observedMost common gap in 23 vertical stacks |
| Button / pressedscale 0.98 | scale 0.98 | observedObserved on pointer down, 3 buttons |
| Menu / keyboardArrow keys + Esc | Arrow keys + Esc | partialListener found; Home/End not handled |
| Card / hovershadow lift | shadow lift | inferredInferred from stylesheet, not exercised |
Illustrative example of capture output.
Approved, implemented, tested and merged are four different words
A single green checkmark hides the difference. M1rror keeps them as separate states, each moved by a different party and backed by its own evidence, so your team always knows what is true.
- Approved
Who moves it
Designated reviewers
What proves it
An approval record bound to the release digest, with reviewers, blockers and expiry.
- Implemented
Who moves it
A scoped run, authorised by a repository operator
What proves it
A branch whose diff stays inside the contract’s allowed paths and budget.
- Tested
Who moves it
Deterministic checks, not the agent’s word
What proves it
Recorded results for the exact SHA, including failures and the baseline.
- Merged
Who moves it
You, under your branch protection
What proves it
The merged SHA, compared against what was tested. Deployed is a separate state again.
People approve.
Agents can draft, propose and submit evidence. They cannot approve their own work, edit acceptance criteria or suppress a failing check.
Approvals bind to what was reviewed.
Each approval records a digest of the release. Change the target and you get a new release, not an edited one.
Code work needs its own approval.
Design approval doesn’t authorise implementation. A separate approval names the base commit, paths, budget and tools.
Your code never runs in the control plane.
Builds and tests run in a disposable workspace with allowed-path checks, a time limit and a scrubbed environment.
Spending is reserved up front.
A run reserves its budget before it starts. Cancel stops the work and releases what wasn’t used.
Permissions are checked again at execution.
A queued action re-checks access when it runs, so a revoked grant stops it.
Give your coding agent the approved system, not a vibe
M1rror runs an MCP server, so any MCP-capable coding agent can fetch the approved release, real component APIs, tokens and the implementation contract — instead of guessing styles.
Grants are scoped to one workspace. Reading never implies repository writes, drafts land as proposals for people to review, and opening a pull request needs human approval. Self-reported test results aren’t trusted; evidence is checked against the same contract.
Included on Studio and Team.
Readworkspace-scoped grant
- taste_get_project_context
- taste_search_references
- taste_get_tokens
- taste_search_components
- taste_get_component
- taste_get_release
- taste_get_implementation_contract
- taste_get_run_status
Draftlands as a proposal for people to review
- taste_propose_change
- taste_request_review
- taste_prepare_implementation
- taste_submit_evidence
External writerequires human approval
- taste_request_pr_creation
Your references and code stay yours
- Private by default
- References, captures, repositories and screens belong to your workspace. Nothing is public unless you export it.
- Rights travel with every reference
- Source, rights status and permitted use are stored with each item and checked again on export or handoff to an agent.
- Only what the recipient may see
- Implementation contracts include only the references permitted for that recipient and purpose, never a dump of the workspace.
- Workspaces are isolated
- Every query is scoped to your workspace on the server. Another workspace can’t reach your artefacts, jobs, exports or search results.
- No public model training
- Your code, references and feedback are not used to train public models.
- Support is a separate role
- Staff diagnostics use separate, least-privilege access that is audited and can’t read your raw source.
Pricing for the pilot
Start free. Pay when you want implementation runs and the MCP server. Reviewers never need a paid seat.
Pilot pricing — Explore free, Studio $49/mo, Team $199/mo (test mode; subject to change)
Explore
$0free
Try the loop on a small project.
Start free- Usage units per month60
- Projects2
- Editors2
- ReviewersFree
- Private references and capture
- Design system, bindings and review
- Implementation runs and pull requestsNot included
- MCP server for coding agentsNot included
Studio
$49per month
For a builder shipping a real product.
Start with Studio- Usage units per month1,000
- Projects10
- Editors5
- ReviewersFree
- Private references and capture
- Design system, bindings and review
- Implementation runs and pull requests
- MCP server for coding agents
Team
$199per month
For small teams and agencies with reviewers.
Start with Team- Usage units per month5,000
- Projects50
- Editors25
- ReviewersFree
- Private references and capture
- Design system, bindings and review
- Implementation runs and pull requests
- MCP server for coding agents
Costs are shown before consequential work, and a run reserves its units before it starts. If a run is cancelled, unused units are released. When you reach your allowance, new runs stop with a clear message and your existing work stays readable.
- Reference analysis
- 1 unit
- Agent step
- 4 units
- Repository audit
- 5 units
- Rendered repository audit
- 15 units
- Design direction
- 6 units
- Implementation run
- 25 units
What’s gated, and why
Some capabilities depend on agreements or qualification we don’t have yet. In the product they show as gated, with the reason, rather than pretending to work.
Mobbin reference catalog: not yet available.
M1rror has no Mobbin catalog of its own. Bring your Mobbin account through the official Mobbin MCP server in your own agent and save the screens you pick.
Figma live sync: not yet available.
No live two-way sync. Import frames and styles with a Figma token (variables on Enterprise plans), or use the Figma MCP server from your agent; tokens export as DTCG JSON.
Sandboxing for untrusted repositories: not yet available.
Runs use local isolation that isn’t qualified for untrusted code, so only repositories you connect and own may run.
Capture beyond live web apps: not yet available.
Web bundles and Electron apps are next. Native binaries aren’t analyzed in the hosted product.
Live billing: not yet available.
Stripe runs in test mode during the pilot. No real charges are made.
Questions
Is this an app builder or a Figma replacement?
What does it support today?
Will it change my business logic?
Can the agent approve or merge its own work?
Where does my code run?
Can I capture any website I like?
Do you train models on my material?
Do reviewers need a paid seat?
Start with one reference, one component and one screen.
Connect a React project, save a reference you like, and take one change all the way to a pull request.