skills.rest
TylerSimons1127
TylerSimons1127COMMUNITY
Explore all skills by this author →
GitHub

design-dna

Extract design tokens, style attributes, and visual effects from reference designs into structured JSON.

Updated Aug 21, 2026
Search Tags:#design system#css#design tokens#design analysis#JSON schema#visual effects#style extraction
One-click install
npx skills add https://github.com/TylerSimons1127/vibe --skill design-dna-tylersimons1127
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-dna
Source: https://github.com/TylerSimons1127/vibe/tree/main/skills/design-dna
Command: npx skills add https://github.com/TylerSimons1127/vibe --skill design-dna-tylersimons1127

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Recreating the look and feel of an existing design usually requires manual inspection and guesswork. This Skill turns reference images, screenshots, or URLs into a complete, reusable Design DNA JSON that captures every measurable and qualitative aspect of a design. ## Core Features & Use Cases - Three-Dimensional Extraction: Captures design system tokens (color, typography, spacing, layout, shape, elevation, motion, components), qualitative design style (mood, composition, imagery, interaction feel, brand voice), and visual effects (particles, shaders, scroll effects, glassmorphism, SVG animations). - DNA-Driven Generation: Applies an extracted or user-supplied DNA JSON to generate new designs, building CSS custom properties and matching effects to appropriate technologies from CSS animations to Three.js and GLSL shaders. - Use Case: Provide screenshots of a competitor's landing page, receive a fully populated Design DNA JSON, then generate a new landing page in the same style as a self-contained HTML file. ## Quick Start Analyze this design screenshot and extract its design DNA, then build me a landing page in the same style.

Frequently Asked Questions about design-dna

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I extract a design system from a website screenshot?▼

Provide the screenshot or URL and the Skill analyzes visual properties directly, extracting color palettes, typography scales, spacing, layout grids, and component styles. It outputs a complete Design DNA JSON with every schema field populated.

What is a Design DNA JSON file?▼

A Design DNA JSON is a structured profile with three dimensions: design_system for measurable tokens, design_style for qualitative perception, and visual_effects for special rendering. It is portable, version-controlled, and reusable for generating new designs.

Can I generate a new design from an existing DNA JSON?▼

Yes, Phase 3 accepts a DNA JSON plus content and generates a design output, defaulting to self-contained HTML with inline CSS and JS. It builds CSS custom properties from tokens and implements effects with the appropriate technology tier.

What technologies are used for visual effects implementation?▼

Lightweight effects use CSS animations, SVG, and vanilla JS. Medium-tier effects use Canvas 2D, GSAP, or Lottie. Heavy effects such as 3D scenes and shaders use Three.js, custom GLSL, or Pixi.js, matched to the effect intensity.

What happens when multiple reference designs conflict?▼

When references disagree on values, the Skill notes the dominant pattern across all references rather than picking arbitrarily. You can review and adjust any extracted values before using the DNA for generation.

Related Skills

Explore More Design & Creative Skills→
mizchimizchi
22

mock-markup

Converts design mock images into verified HTML/CSS pages through a deterministic verify-markup loop.

Community
Advanced
leobbaronileobbaroni
1

design-dna

Extract design tokens, style, and visual effects from reference UIs into structured JSON profiles.

Community
Advanced
Durwood-StudiosDurwood-Studios

frontend-design-plus

Validate DURA frontend designs against DLS-1.0, DLS-2.0, and FM-1.0 standards.

Official
Advanced
oakossoakoss
14

brand-designer

Generate cohesive brand identities with SVG logos, Tailwind color tokens, and typography systems.

Official
Advanced