design-dna-extractor

Skill by ara.so — Design Skills collection.

An agent skill for extracting, structuring, and applying visual design identity as machine-readable "Design DNA" across three dimensions: design tokens, qualitative style, and visual effects.

What It Does

design-dna turns reference UIs (screenshots, images, URLs) into a complete, quantified JSON specification covering:

Dimension	Coverage
Design System	Colors, typography, spacing, layout, shapes, elevation, motion, components
Design Style	Mood, visual language, composition, imagery, interaction feel, brand voice
Visual Effects	Canvas, WebGL, 3D, particles, shaders, scroll effects, cursor interactions, SVG animation

The skill drives a three-phase workflow: