Skills
.Work. You
Rest

ux-ds-scan-artifact

Community

Scan UI for design patterns & tokens

Design & Creative#design system#design tokens#atomic design#pattern recognition#ui analysis#component scanning
AuthorGDSDN
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill automates the tedious and time-consuming process of manually analyzing UI artifacts to identify design patterns, extract design tokens, and inventory components, enabling faster design system development and migration.

Core Features & Use Cases

  • Automated Analysis: Scans HTML files, React components, screenshots, or live URLs to identify design patterns.
  • Token Extraction: Identifies and quantifies design tokens like colors, typography, spacing, and border-radius.
  • Component Inventory: Classifies UI elements using Atomic Design methodology (atoms, molecules, organisms).
  • Build Recommendations: Generates prioritized build orders and component build suggestions.
  • Use Case: A team is migrating a legacy UI to a new design system. This Skill can scan existing components to quickly inventory what exists, identify redundant patterns, and suggest an optimal build order for the new system.

Quick Start

Use the ux-ds-scan-artifact skill to scan the provided URL 'https://example.com/dashboard'.

Dependency Matrix

Required Modules

None required

Components

scriptsreferences

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: ux-ds-scan-artifact
Download link: https://github.com/GDSDN/kord-aios/archive/main.zip#ux-ds-scan-artifact

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.