← ClaudeAtlas

interface-forensicslisted

Reconstruct the design logic and grammar behind an existing interface from live UI, screenshots, source, or DOM. Use when analyzing why an interface works, rebuilding a reference, or extracting a system from an existing product.
Dragoon0x/10x-interface · ★ 0 · Web & Frontend · score 70
Install: claude install-skill Dragoon0x/10x-interface
# Interface Forensics ## Mission Understand why an existing interface feels the way it does. Do not copy the surface. Reconstruct the decisions beneath it. ## Evidence Use available live UI, screenshots, recordings, source, DOM, computed styles, assets, and interaction behavior. Label conclusions by evidence strength. ## Interface DNA Reconstruct: - hierarchy - typography - spacing - shape - color - surface/material - density - component grammar - interaction grammar - motion grammar - responsive logic - state language ## Composition Infer container hierarchy, alignment anchors, spacing groups, repeated modules, visual centers, and content boundaries. ## Typography Determine how family, weight, size, line height, measure, wrapping, and hierarchy create the visual voice. ## Material Determine whether depth comes from tonal difference, border, shadow, blur, overlap, or shape. Do not assume every layer represents elevation. ## Interaction Identify trigger, response, state change, feedback, motion, interruption, and cancellation. ## Responsive logic Determine invariants, adaptive rules, substitutions, collapsing behavior, and priority changes. Do not infer unseen behavior as fact. ## Implementation hypotheses When source is unavailable, label likely mechanisms such as grid/flex, positioning, transforms, transitions, native controls, or state-driven rendering as hypotheses. ## Rebuild specification When useful, produce: **Interface DNA → Structure → Tokens →