LogoClawIndex
CasesSkillsAbout
LogoClawIndex

design-dna-extractor - Extract and apply visual design DNA

Extracts visual design identity from reference UIs into structured JSON and applies it to generate matching interfaces.

Tags

Updated: 2026-10-05

Capabilities

Typical Inputs

Typical Outputs

What this skill does

  • Structure the Design DNA schema
  • Analyze reference UI designs
  • Extract quantified design tokens
  • Describe qualitative design style
  • Identify visual effects
  • Generate complete Design DNA JSON
  • Apply Design DNA to content
  • Generate responsive HTML/CSS/JS

Inputs

  • Screenshots
  • Reference images
  • Website URLs
  • Design DNA JSON
  • Content for generation

Outputs

  • Schema field inventory
  • Complete Design DNA JSON
  • Self-contained HTML/CSS/JS
  • Responsive interface

Requirements

    Source

    • Spec: SKILL.md

    ClawIndex

    OpenClaw Skills & Use Case Index

    ClawIndex is an ecosystem-driven index of OpenClaw skills and real-world use cases.

    Index

    Skills·
    Cases

    Meta

    About·
    Disclaimer·
    Email·
    GitHub
    © 2026 ClawIndex All Rights Reserved.
    design systems
    visual analysis
    design tokens
    UI generation
    JSON
    HTML/CSS/JS
    Structure the Design DNA schema
    Analyze reference UI designs
    Extract quantified design tokens
    Describe qualitative design style
    Screenshots
    Reference images
    Website URLs
    Schema field inventory
    Complete Design DNA JSON
    Self-contained HTML/CSS/JS