Design Analyzer v48.4
Rule-based scoring against WCAG, Material Design, and typography best practices. Checks computed styles — no AI, just evidence and math.
Enter a URL to analyze. The page is fetched via a CORS proxy and rendered in a hidden iframe with its CSS. Works on phone — no console needed.
How it works: The page is fetched via proxy and rendered in a sandboxed iframe.
JavaScript is off by default — for JS-heavy sites (React, Vue, Angular), enable it below.
Storage, cookies, and other sensitive APIs are automatically isolated.
Pages behind login, localhost, or sites that block proxies/framing need the Console Snippet tab instead.
Skip elements from analysis (optional)
Elements you skip (and everything inside them) won't be scored. Useful for decorative UI mockups, screenshots, or third-party widgets.
1
Open the website you want to analyze (works with any URL including
localhost and pages behind login)2
Open browser DevTools with
F12 and go to the Console tab.
Tip: undock DevTools into a separate window (click ⋮ → dock side → undock) so the page viewport stays at its real size. Docked DevTools shrink the page, which can skew layout and touch-target measurements.
3
Copy the extraction snippet below and paste it into the console, then press Enter. It extracts design tokens and copies JSON to your clipboard automatically.
4
Come back here and paste the JSON into the box below, then click Analyze.
If auto-copy didn't work, the console will show the JSON — type
copy(window.__milgData_json) to copy it manually.
For pages with scroll animations: run window.__milgScrollFirst = true first, then paste the snippet. It scrolls the page to trigger lazy loading before extracting.
Extraction Snippet
JavaScript
Loading...
Paste extracted JSON
Approximate mode.
This renders HTML in an iframe and reads computed styles. External fonts, images, and some CSS (relative URLs, @import chains) won't load — scores may differ from the live site.
Use the "Extract from Site" tab for accurate results.
Grab page with CSS inlined: Open DevTools console (
F12) and run:(async()=>{let c='';for(const s of document.styleSheets){try{c+=Array.from(s.cssRules).map(r=>r.cssText).join('\n')}catch(e){if(s.href){try{const r=await fetch(s.href);c+=await r.text()}catch(e2){}}}}const h=document.documentElement.cloneNode(true);h.querySelectorAll('script').forEach(s=>s.remove());h.querySelectorAll('link[rel=stylesheet]').forEach(l=>l.remove());const st=document.createElement('style');st.textContent=c;h.querySelector('head').appendChild(st);copy(h.outerHTML);console.log('%c✓ HTML + CSS copied!','color:#16a34a;font-weight:bold;font-size:14px')})()
Inlines all external CSS into the HTML and strips scripts. Works behind logins, on SPAs, localhost.
Drop a JSON file here
or click to browse — loads a previously exported analysis