Intent

About this plugin

Detachment is not a mistake. It is how design actually works.Designers copy a component to try a different spacing rhythm. They swap an icon without opening the variant picker. They rebuild a card from scratch because it was faster than hunting for the original. None of that is wrong -- it is how creative momentum works, and any tool that punishes exploration will be ignored.The problem arrives weeks later. Dozens of those explorations are still living in production files, silently drifting from the source of truth. Names get changed, overrides pile up, and eventually nobody remembers whether a particular frame started life as a component or was hand-built from scratch. The library's coverage number tells you nothing because the drift is invisible.Intent provides the road back. Instead of matching layers by name alone -- which breaks the moment someone renames a frame -- it reads the structural and semantic markers that make a component what it is: its auto-layout axis, its padding rhythm, its child composition, its typographic signature, its corner radii, its color values. Together, these markers form a 15-dimension fingerprint, a kind of structural DNA that survives renaming, detachment, and manual reconstruction.When Intent finds a match, it does not force anything. It shows you exactly what changed, offers a one-click path to reconnect, and preserves every override you applied along the way. Your exploration stays intact; your library just gets its lineage back.15-Dimension Structural DNA FingerprintingEvery node on your canvas is captured as a fingerprint across 15 measurable dimensions, organized into four groups:Structure -- Node type, direct child count, total descendant count, and a full type-composition map (how many TEXT nodes, how many FRAMEs, how many VECTORs) that captures the shape of the subtree even when names are completely different.Layout & Constraints -- Auto-layout mode (horizontal, vertical, or none), four-sided padding, item spacing, counter-axis alignment, layout sizing mode (fixed, hug, fill), and constraint anchoring. These six dimensions are the skeleton of any well-built component.Visuals -- Four-corner border radius, fill types and solid fill hex colors, stroke configuration (weight, alignment, dash pattern), effect stack (shadows, blurs), opacity, and blend mode.Typography -- Font family, font style (weight/italic), font size, line height, letter spacing, text alignment, text case, and text decoration. Only active on text nodes; automatically excluded from the scoring denominator for non-text comparisons so it never distorts the result.This is the data that Design Ops leads and system maintainers care about: structural truth that cannot be faked by renaming a layer.3-Level Resolution FallbackIntent resolves every detached or unlinked node through a three-level cascade, each progressively more creative:Level 1 -- Name & Key Match. The fastest path. Intent normalizes component names (stripping separators, collapsing whitespace, lowercasing) and computes a word-overlap similarity score. A score above 0.4 triggers a match. The confidence is then blended with the structural fingerprint score: 40% name weight, 60% structural weight. This catches the common case where a designer detaches a "Button/Primary" and the frame is still called "Button/Primary."Level 2 -- Structural Signature Match. When names have been changed -- or the frame was never named after the component at all -- Intent falls back to pure structural comparison. It runs the full 15-dimension weighted scorer across every component and variant in your library. Matches scoring 35% or higher are surfaced. This is the level that catches manual reconstructions: a designer who hand-built a card with the same padding, spacing, radius, and child structure as the library Card component will see a match, even if the frame is named "hero-content-block."Level 3 -- Semantic Intent Analysis. The last resort, activated only when Levels 1 and 2 return nothing. Intent classifies the node by its semantic role -- Button, Card, Badge, Input, Modal, Navigation, Avatar, and more -- using both name-pattern matching (against 60+ common naming conventions) and layout heuristics (a horizontal auto-layout frame with rounded corners, 1-4 children, and a text node is structurally a button regardless of its name). It then finds library components with the same semantic role and boosts their structural score.Every match is tagged with its resolution level and a confidence percentage, so you always know exactly how Intent arrived at its suggestion.Mutation Diff ViewWhen Intent identifies a match, it does not just say "this looks like a Button." It shows you precisely what changed, property by property:Added (+) -- A property or child layer exists locally that is not in the library source. Removed (-) -- A property or child layer from the library source is missing locally. Modified (~) -- A property exists in both but with a different value. fontSize: 16 → 14. padding.top: 12 → 16.The diff engine uses a two-pass, type-aware children matching algorithm to distinguish genuine structural additions from normal overrides. Swapping an icon is recognized as an override and not flagged as an addition. Reordering children is detected and reported separately.Perceptual Color Matching (CIE76 Delta-E)Instead of naive hex comparison, Intent converts colors through the full sRGB-to-CIELAB pipeline and computes their Euclidean distance in perceptual color space. A Delta-E under 5 is a near-exact match; under 15 is a clear suggestion. Semantic context boosting further sharpens results: a red fill inside a node named "error-badge" will prioritize a style named "Error/Background" over a generic "Red/500," even if both are equidistant in Lab space.Scope-Aware Variable SuggestionsWhen Intent finds a hardcoded spacing value of 16px, it searches your variable library for FLOAT tokens -- but only those whose scopes match the property being fixed. A corner-radius token will never be suggested for an item-spacing field. Exact value matches score 100; values within 1px score 85; within 2px score 70.Weighted Health Score (0-100)A single, actionable number that quantifies your file's design system alignment across six weighted categories: detached components (30%), hardcoded colors (18%), typography drift (18%), mutations (15%), unlinked variables (12%), and effect drift (7%). Track your progress as you heal issues one by one.How to UseStep 1: Index Your Library Open your design system library file and launch Intent. Click "Scan this file as library" to generate a DNA blueprint. Intent fingerprints every component, variant, paint style, text style, effect style, and variable in the file. The blueprint persists across sessions -- you only re-scan when the library is updated.Step 2: Scan a selection on any consumer design file. Intent automatically loads your stored blueprint on launch. Select specific frames for a targeted check.Step 3: Review and Heal Browse results organized by category and severity. For each issue, see the matched library component, confidence percentage, resolution level, and a detailed property-by-property diff. Click "Relink" to swap a detached frame back to a live instance -- text content, fill colors, and visibility overrides are preserved automatically. Click "Link Style" to apply a suggested token in one action. Fixed issues move to the "Fixed" tab so you can track healing progress.