Pixel Poke / Guides
Pixel Poke guides
These six guides show how to do common design jobs directly on a live website instead of in screenshots: design QA, handing off CSS to a developer, giving an AI coding tool exact design changes, checking accessibility, testing at real device sizes and redesigning a page you don't have the code for. Each guide has step-by-step instructions and answers to common questions. Every workflow uses Pixel Poke, a free Chrome extension for visual editing and CSS handoff, and none of them change the site itself.
- Design QA
How to run design QA on a live website
A practical way to review a built page against the design: select elements on the live site, measure spacing, check states and device sizes, and pin comments where the problem is.
- CSS handoff
How to hand off CSS changes to a developer without screenshots
Replace screenshot-and-arrow feedback with exact CSS: tune the element on the live page, then copy one clean rule per changed element or written handoff notes.
- AI coding handoff
How to give an AI coding tool exact design changes
AI coding tools do better with exact instructions. Tune the page visually, then paste Pixel Poke’s written handoff into your AI coding tool instead of describing the change in words.
- Accessibility checks
How to check accessibility on any element of a live website
Select an element on any page and check its accessible name, text contrast, touch target size, visible focus, readable type and alt text, then fix it in place.
- Responsive preview
How to test a website at real device sizes
Preview any page at real phone, tablet and desktop widths, adjust the element inside the device frame, and hand off the fix for that size.
- Redesign without code
How to redesign a page you don’t have the code for
Try design changes on a competitor’s page, a client’s site or production without the source: edit the live page in Chrome and keep the result as CSS and notes.