Point at the UI. Keep the exact context.

Select any element on the live page, inspect what actually styles it, try changes in place, and copy only the edits your coding agent needs.

Get early accessLocal-first · agent-neutral

Skisso

Connected to project · feature/hero

Components

⌄ body

⌄ main#main

⌄ section.hero

button.primary-cta

::before

DesignLibraryTokensCSS

State · Default / Hover

W 224 px

H 44 px

R 8 px

Text · Background · Border

One selection, full context

Browse broadly. Edit precisely.

Hover previews the next target while the selected element stays pinned. Click once to move the selection and keep the panel, tree, and page highlight in sync.

Hover and select

See the candidate under the pointer without losing the element you are already editing.

dashed preview · solid selection

Real component tree

Switch between the selected path and the full page tree. Expand descendants, preview rows, and inspect pseudo-elements.

Path · All · ::before · ::after

Default and hover

Inspect and change the resting and hover appearance without confusing the two states.

state-aware visual edits

Design controls

Check the pixels and the system behind them.

Skisso reads computed styles from the selected element, then presents the controls designers and front-end developers reach for most.

Layout and spacing

Position, flow, dimensions, min/max sizing, alignment, gap, padding, margin, clipping, and box sizing.

Typography and fonts

Family, weight, size, line height, letter spacing, alignment, mixed text colors, page fonts, system fonts, and Google Font preview.

Color and effects

Solid colors, gradients, opacity, radius, backgrounds, per-side borders, shadows, blur, and contrast checks.

Images and properties

Preview an image, inspect its source and alt text, adjust fit, and copy the element context your agent needs.

Library · Tokens · CSS

Move from a one-off tweak to the language of the project.

Reuse typography presets, page colors, CSS variables, and readable CSS without pretending a heuristic scan is an authoritative design system.

Library

Work with compact type and color presets discovered on the current page.

Tokens

Find readable CSS variables and color tokens, filter them, and apply the token reference when available.

Source-ready context

Copy a compact change set for the affected elements instead of dumping the entire page.

Optional local bridge

Add project and branch context without sending page data away.

Run the Skisso bridge inside your project. The extension talks only to that localhost process to identify the open project and branch. Your coding agent still owns the source edit.

Connected locally127.0.0.1:3177

Works with your agent workflow

Paste the compact patch into Claude Code, Codex, Cursor, OpenCode, or another coding agent. Skisso does not hold an API key and does not call an AI provider.

project · branch · selectors · changed properties