mona Analyze a site

Element detector

Try the detector

Send a screenshot, a mockup or a Figma export: Mona finds the texts, buttons, images, fields and icons. Everything happens in your browser: the image goes nowhere. Hover over an element to highlight it.

Drop an image here

PNG, JPG or WebP: screenshot, Figma export, mockup. You can also paste it (Ctrl + V). Long images are cut into 900 px screens.

The first time, the detector downloads (about 38 MB, then it stays in the cache). Allow a few seconds per screen. It learned on sites at desktop width: a mobile or very small mockup is read less well.

How to judge the result

The detector isn't perfect, and that's measured: here's what to expect.

Often right

  • Texts: most are found, with a few extra or missing boxes.
  • Large buttons and images: found well when they are sharp.

Check by eye

  • Subtle buttons (links, “ghost” buttons): one in two is missed.
  • Input fields: found when they are clearly marked.

Often missed

  • Icons: fewer than one in three is found.
  • Mobile or tiny mockups: the detector learned on wide screens.

The detector benchmark

Only the element detector, measured on sites it never saw during training. It learned on about 1,500 public sites whose labels come from the page code.

0,73texts: F1recall 0.72 · precision 0.75
0,59buttons: F1recall 0.59 · precision 0.59
0,36icons: F1the hardest class
Element detector: F1 per classF1 (recall / precision balance, 1 = perfect) on 120 never-seen sites (279 screens), at confidence 0.5. “Before” is the first version of the detector.
  • Before
  • Now
0,000,250,500,751,000,610,73text0,550,59button0,610,60image0,290,49field0,210,36icon
See the values
ClassBefore: recall / precisionNow: recall / precisionF1 beforeF1 now
text0,59 / 0,640,72 / 0,750,610,73
button0,51 / 0,590,59 / 0,590,550,59
image0,65 / 0,570,61 / 0,600,610,60
field0,24 / 0,380,38 / 0,700,290,49
icon0,15 / 0,340,31 / 0,430,210,36
Which confidence threshold should you choose?F1 of each class according to the minimum confidence required from the detector. The more you require, the fewer mistakes it makes but the more it misses: the slider on the test page makes exactly that choice.
  • text
  • button
  • image
  • field
  • icon
0,000,230,450,680,900,30,50,70,9minimum confidence
See the values
minimum confidencetextbuttonimagefieldicon
0,30,7090,5330,5820,5790,383
0,40,7260,5660,5920,5430,375
0,50,7360,5900,6040,4900,361
0,60,7420,5880,5960,4930,300
0,70,7420,5920,5750,4590,197
0,80,7290,5340,5450,4620,104
0,90,6740,4300,3810,3040,025