Compute nine visual signals from design tokens and screenshots.
npx skills add https://github.com/imehr/design-extractor --skill pattern-detection-imehr
Please help me install this Agent Skill. Skill: pattern-detection Source: https://github.com/imehr/design-extractor/tree/main/skills/pattern-detection Command: npx skills add https://github.com/imehr/design-extractor --skill pattern-detection-imehr
Extracts measurable visual signals from design tokens and screenshots so subjective descriptions of a brand's "feel" become objective, comparable metrics that drive replica refinement and design-system corrections.
Run the pattern-detection skill against the brand's extracted tokens and optional desktop screenshot to produce patterns.json in the brand cache.
High-intent search queries and answers about installing and using this skill.
Quantify visual rhythm by applying pattern detection to parsed design tokens and screenshots. This computes nine measurable signals for spacing, typography, density, and colour, turning subjective design feel into objective metrics.
Extracting signals from typography and color tokens yields nine metrics: spacing rhythm, type scale ratio, component density, grid alignment, CTA placement, border-radius language, shadow elevation, motion language, and colour temperature.
Diagnose design system drift by running pattern detection to compare computed mechanical signals against source tokens. This reveals misalignments in spacing and typography, producing a machine-readable patterns.json for automated refinement loops.
Pattern detection does not strictly require screenshots to analyze design tokens, but an optional desktop PNG can be processed. When screenshots are used, an image processor like Pillow is required to compute visual signals.
Parsing borders, shadows, and transitions requires a tokens-output.json file. This parsed JSON format must contain specific design tokens including spacing, typography, borders, shadows, transitions, and colours to successfully compute visual patterns.
You can use Pillow to process optional desktop PNG screenshots to compute component density and grid alignment. The visual signals are then output into a machine-readable patterns.json file alongside a human summary with confidence scores.
yonetim258852Extract design tokens from live websites using Dembrandt.
LLaammTTeerrAudit competitive programming problem packages for mechanical consistency and statement clarity.
yuzhworkhard-wqConvert UI images and screenshots into responsive HTML/CSS code and transparent PNG assets.
jacob-balslevGuide palette, typography, spacing, density, and grouping choices for visual hierarchy audits.
