design_check

Design check · Reads only

Checks pages of the project's running app as a visitor sees them at phone (390 px), tablet (768) and wide laptop (1440), plus up to 2 widths you choose (widths: 320, 375, 844 sideways…), and returns a prioritised list of findings with plain fixes, plus a contact sheet of the three widths. It finds: a page that didn't render (a framework's error page, only a loading skeleton, a blank page: then nothing else is checked), sideways scrolling and cut-off content (and which element), text over pictures that is hard to read, broken, stretched, soft, heavy or hard-cropped images, a grid's last item left alone on its row, placeholder text (Lorem, [your …], 000000, example.com, TODO), parts marked data-lf-placeholder, missing title, description, share image (og:image), lang and alt text, small tap targets on phones, page weight (pictures, scripts and fonts apart; a preview on a development server ships large scripts, so check the real weight with env production), slow first paint, errors the page's scripts threw, and accessibility rule failures. Run it before telling the user a site is ready, fix what it finds, and run it again; for an app, also on its signed-in pages (headers). path, or paths (up to 4); env preview (default) or production; headers and include_warnings as for preview_screenshot. Each page also lists its browser errors in the clean checking browser (or none). It also finds markup that fights a change (the same section or id twice, inline styles with !important, a selector setting the same property to different values in two places), with where, and says to edit the source instead of adding an override; and lists the pages whose look changed since its last run in this project (the pages checked now and up to three checked before: "/studio changed 12%; /contact 0%").