Hover and select
See the candidate under the pointer without losing the element you are already editing.
dashed preview · solid selectionPoint 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.
Download freeLocal-first · agent-neutral
SkissoConnected 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.
Real component tree
Switch between the selected path and the full page tree. Expand descendants, preview rows, and inspect pseudo-elements.
Path · All · ::before · ::afterDefault and hover
Inspect and change the resting and hover appearance without confusing the two states — the hover tab shows the whole hover state, fonts and spacing included, not only its colours.
state-aware visual editsHold several at once
Shift-click to gather elements, then drag them together in one move or set a property once and have all of them take it.
⇧ click · one undo for the setAct on a layer where you see it
Right-click any row: copy the element, copy and paste its style onto another, duplicate, wrap, hide, delete. A type icon on each row says what it is before you read the tag.
copy style · paste style · hideDesign 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. Filters — brightness, contrast, saturation, grayscale, sepia, invert, hue-rotate — on any element, not only images.
Images, links and properties
Preview an image, inspect its source and alt text, adjust fit. Edit where a link points, choose the tab it opens in, or take the link off and keep the text.
Zero means gone
A border width or a min/max constraint set to zero removes it instead of shipping a value you cannot see. Gap accepts Auto for the spread-apart, and eight resize handles let a side change one dimension without pinning the other.
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 locally
127.0.0.1:3177Works 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