Skisso

Skisso is a visual inspection and editing tool for designers and frontend developers. Inspect a running web interface, make visual changes directly on the page, capture and annotate screenshots, and export a focused description of what changed. Instead of describing a visual issue from memory, you can select the exact element, test the change in place, and share the resulting implementation details. INSPECT THE INTERFACE Hover over elements to see dimensions, padding, margins, and the box model. Click to select an element and explore its position in the DOM. Navigate through parents, children, nested elements, pseudo-elements, SVGs, and images while keeping the current selection highlighted. Elements inside same-origin frames can also be inspected. Cross-origin frames are identified when browser security restrictions prevent access to their contents. EDIT DIRECTLY ON THE PAGE Adjust visual properties on the running interface and see the result immediately. Supported properties include: * Layout and alignment * Spacing and dimensions * Typography * Colours and gradients * Borders and radius * Opacity * Shadows and blur * Images * Default and hover states Multiple elements can be selected when you want to apply the same value to several elements. Edits remain reversible while you work. INSPECT DESIGN TOKENS Skisso detects available CSS variables, colours, fonts, typography styles, and recurring values from the current page. Browse detected tokens, reuse an existing value, or test changes to connected CSS variables. The Library view also helps identify recurring elements already present on the page. WORK WITH ASSETS AND STRUCTURE Preview and replace images, edit source URLs and alt text, adjust image sizing and fit, and inspect SVG elements. You can also move, resize, duplicate, insert, or remove elements while exploring structural changes. REVIEW YOUR CHANGES Pending Changes records the elements and properties modified during your session. Use it to review your edits, return to an edited element, continue refining the result, reset individual changes, or reset the session. Pending edits can be restored after a page reload. CAPTURE AND ANNOTATE SCREENSHOTS Capture a selected area or the visible screen. Skisso freezes the captured image before annotation so the underlying interface cannot move while you work. Add: * Arrows * Freehand lines * Shapes * Highlights * Text notes * Guides * Measurements Annotations can be moved, duplicated, edited, or removed independently. MEASURE SPACING AND ALIGNMENT Use rulers and guides to communicate dimensions, distances, and alignment visually. Guides can be horizontal, vertical, or angled. Measurements can snap to nearby element edges and centres. EXPORT THE RESULT Copy an annotated screenshot or save it as a PNG. For interface edits, Skisso can also prepare a focused change description containing relevant selectors, properties, values, text, attributes, structural operations, and design tokens. Only the changes made during the session are included instead of copying an entire page or stylesheet. This output can be used in your normal development workflow or shared with another person or development tool. OPTIONAL LOCAL PROJECT CONTEXT Skisso can connect to an optional local bridge running on your computer. The bridge can provide project and branch information to help identify the development context associated with your visual changes. The extension does not use the bridge to modify your repository. REAL WEB STYLES Skisso works with actual browser styles rather than creating a separate mockup representation. For example: * Gradients use background-image * Gradient text uses background-clip: text * Gradient borders use border-image This keeps visual experiments connected to properties that can be implemented in a web interface. PRIVACY Skisso does not require an account and does not include analytics or telemetry. Page information and your interactions are processed locally in the browser to provide inspection, editing, screenshot, annotation, and export functionality. The optional local bridge runs at 127.0.0.1:3177. If you choose to preview a Google Font, the inspected page may request that font from Google. The Report a Bug action opens a draft in your email application. Nothing is sent unless you choose to send the message. WHERE SKISSO WORKS Skisso can be used on localhost, staging environments, production websites, and other standard web pages that allow Chrome extensions to operate. Chrome does not allow extensions to inspect certain protected pages, including Chrome internal pages and the Chrome Web Store. Browser security restrictions can also limit access to cross-origin frames and stylesheets. Skisso does not modify your source repository. It helps you inspect the interface, test visual changes, and export the resulting information for implementation. Point at the interface. Make the change. Share the result.