Skip to content
Grid Mapper
Jazyk en
GitHub repoOtevřít aplikaci

Pixel-precision pro vision LLM

Klikni do screenshotu, popiš prvek, exportuj jako JSON, Playwright spec nebo přímo do Claude konverzace. Jeden HTML soubor, open source, vše lokálně v prohlížeči.

Otevřít aplikaci GitHub repo
GridMapper X: 1243 Y: 876
1 1 Tlačítko Save
2 2 Pole e-mail
3 3 Logo v hlavičce
Polygon · 4 vrcholy

Vision LLM neumí přesné pixely.

Když Claude (nebo GPT-4o, Gemini) píšeš „klikni na to modré tlačítko vlevo nahoře“, model si pixely musí domyslet — a halucinuje. Při popisu UI prvků, měření na výkresu, nebo automatizaci agentního tasku chybí vrstva, která mezi tebe a model vloží přesné souřadnice. Grid Mapper je tahle vrstva.

  1. 01

    Nahraj screenshot

    Drag & drop PNG/JPG. Multi-image projekty.

  2. 02

    Klikni nebo polygon na prvek

    Jeden klik = bod. Shift+klik = polygon. Popisek, barva, tagy.

  3. 03

    Export do JSON / Playwright / Claude

    Zkopíruj přímo do Claude konverzace, nebo stáhni .spec.ts.

Co Grid Mapper umí dnes

8 barev markerů

  • Point + polygon anotace

    Klikni nebo Shift+klik. 3+ vrcholy = polygon. Jednotlivé vrcholy přesouváš Shift+drag.

  • Multi-image projekty

    Více screenshotů v jednom projektu, klávesy `[` / `]` (nebo `,` / `.`) přepínají.

  • Real-unit kalibrace

    Klikni 2 body, zadej skutečnou vzdálenost (mm/cm/m/in). Volitelný počátek souřadnic.

  • Sémantické tagy + atributy

    Multi-label klasifikace, klíč/hodnota páry pro selectory a metadata.

  • 16× zoom + pan

    GPU-accelerated, zoom k pozici kurzoru, lupa (Alt+drag), Space+drag pan.

  • Exporty

    JSON, CSV, Markdown, Playwright `.spec.ts`. Per-image i celý projekt bundle.

  • Copy for Claude

    Jeden klik zkopíruje strukturovaný kontext do schránky pro Claude konverzaci.

  • IndexedDB persistence

    Stav přežije refresh i restart. 4K / 8K screenshoty bez problému.

Pro koho je to

Claude / vision LLM power-user

„Klikni přesně sem“ místo „někde nahoře vlevo“.

Když Claudovi popisuješ UI screenshot, model si pixely musí domyslet. Halucinace souřadnic zabíjí agentní tasky a žere tokens. Strukturovaný JSON s číslovanými prvky zatím musíš psát ručně.

Klikni do screenshotu, popiš jednou větou, exportuj „Copy for Claude“. Claude dostane přesný JSON s pixel-souřadnicemi a popisky. Zero halucinací, zero re-prompting.

  • Point + polygon
  • Sémantické tagy
  • Copy for Claude
  • Multi-image bundle
„Z 15 minut popisování UI prvků na 30 sekund kliků.“
Vyzkoušej s Claude šablonou

Architekt / projektant

Reálné míry vůči rohu místnosti, ne vůči okraji fotky.

Z půdorysu nebo fotky stavby chceš odečíst rozměry. Plný CAD nástroj je overkill, Notion / Figma nedají reálné mm — jen pixely. V exportu pak ručně odečítáš offset rohu místnosti od okraje obrázku.

Kalibruj dva body se známou vzdáleností (např. roh referenčního objektu), zvol počátek souřadnic na rohu místnosti. Anotace mají reálné mm / cm / m přímo vůči zvolenému počátku — rovnou použitelné v CAD nebo Excelu.

  • Real-unit kalibrace
  • Custom origin (A/B/top-left)
  • Polygon
  • Real coords v exportu
„Stavební výkres s pixely je k ničemu. Tohle dává reálné mm.“
Vyzkoušej kalibraci

QA / E2E test engineer

Klikni do UI, dostaň Playwright spec.

Při novém featuru se Playwright testy píšou z paměti — pixely přibližné, selektory chybí. Codegen generuje fragile selektory, které padají při prvním refaktoru. Mezi „klikni dva pixely vlevo“ a `await page.click()` chybí čistý workflow.

Klikni v UI screenshotu, přidej `selector` atribut (data-testid=„save“), nebo nech jen pixel coords. Export `.spec.ts` má `page.click(selector)` když je k dispozici, jinak `page.mouse.click(x, y)`. Code-review-friendly.

  • Playwright export
  • Selector atributy
  • Polygon centroid click
  • Project bundle
„Z mockupu ke spec testu během 5 minut, ne hodiny.“
Generuj Playwright spec

Cenotvorba

Community

0 Kč

Open source, MIT.

  • Plný feature set
  • Single HTML soubor
  • GitHub repo + issues
  • Žádný lock-in, žádný účet
Otevřít aplikaci GitHub repo

Sponsors

Kolik chceš

Podpoř další vývoj.

  • Stejné jako Community (žádný gating)
  • Tvoje jméno v Supporters (volitelné)
  • Hlas v roadmap diskusi
  • Early access k preview buildům
GitHub Sponsors Buy me a coffee

Enterprise

Dohoda

Pro firmy s vendor SLA.

  • Custom support + odezva
  • On-prem / air-gapped builds
  • Custom features na míru
  • Vendor sign-off pro compliance
Kontaktujte nás

FAQ

  • Proč single HTML soubor?
    Distribuce přes Claude Artifact + drag-drop do prohlížeče. Žádný server, žádný registrační flow, žádný backend. Funguje offline a v air-gapped prostředích. Core teze, ne nedostatek.
  • Kde se ukládají moje data?
    V IndexedDB tvého prohlížeče. Lokálně. Nic neopouští tvůj počítač. Žádná telemetrie, žádný cloud sync, žádný analytics tracking.
  • Funguje to s GPT-4o / Gemini místo Claude?
    JSON / CSV / Markdown export jsou LLM-agnostic. Tlačítko „Copy for Claude" formátuje výstup pro Claude konverzaci, ale stejný JSON můžeš vložit kamkoli.
  • Jak přispět?
    Issues a PRs na GitHubu. Sponsors přes GitHub Sponsors / Buy Me a Coffee. Pro firemní integrace nebo on-prem deployment napiš na e-mail v patičce.
  • Plánujete cloud verzi / multi-user collab?
    Ne. Grid Mapper je single-user power tool, single-file artifact. Cloud sync rozmělňuje DNA. Sdílení anotací = Git commit JSON exportu, to už dnes funguje.
  • Licence?
    MIT. Forkni, modifikuj, použij komerčně, vše OK.