Skisso

Point at the UI, fix it live, and copy only the exact changes your coding agent needs. Less explaining, less context, fewer retries.

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 hand a focused description of what changed to your coding agent or your team. 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. BUILD WITH A UI KIT Insert ready-made components such as buttons, cards, inputs, dialogs and tables from the open-source shadcn/ui library. Each component takes the current page's fonts, colours and corner radius, so new elements match the existing design. The components are included in the extension and load nothing from the internet. Inserted components appear in Pending Changes and can be undone. 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 BRIDGE AND MCP Skisso can connect to an optional local bridge running on your computer. The bridge provides project and branch information to help identify the development context of your visual changes. The bridge can also act as a local MCP (Model Context Protocol) server, so a coding tool you run on your own computer can work with the open Skisso panel: read the selected element and its styles, your pending changes and the page's design tokens, preview a CSS change, select an element, or take a screenshot of the visible tab. Changes it previews appear in Pending Changes and can be undone like your own edits. This connection is off until you start the bridge and connect a tool yourself, and it works only while the Skisso panel is open. AI AGENT IN THE PANEL With the bridge running, the AI agent mode lets you chat, right in the panel, with a coding agent you already have installed (for example Claude Code, Codex, Gemini CLI, Copilot CLI or Cursor Agent). It sees what you selected and changed on the page, can preview CSS on the page, and changes files in your project only when you allow it. It runs on your own agent and your own account. FEEDBACK AS GITHUB ISSUES Switch the AI agent to Issue: your selection and edits become an issue draft with the page, the exact elements and the CSS you changed. Add a sentence if you like and press Create issue, or let your agent write it up. Pick the repository and the GitHub account it goes to. Issues are created through the GitHub CLI on your computer, only when you press Create issue. Without it, Skisso opens GitHub's own new-issue page, filled in. The extension never writes to your repository itself; your coding agent does, and only when you allow it. 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, and communication with it stays on your computer. If you connect a coding tool through MCP or chat with your agent in the panel, the information it needs is passed to that tool, and that tool's own terms apply to how it uses that information. An issue goes to GitHub only when you press Create issue, under the GitHub account you chose. 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 helps you inspect the interface, test visual changes, and hand the result to your agent or your team: as copied changes, over MCP, in the AI agent chat, or as a GitHub issue. Point at the interface. Make the change. Share the result.