skills.rest
GDSDN
GDSDNCOMMUNITY
Explore all skills by this author →
GitHub

ux-ds-scan-artifact

Analyze UI artifacts to extract design tokens and Atomic Design components.

3|Updated Feb 7, 2026
Search Tags:#design system#design tokens#atomic design#pattern recognition#ui analysis#component scanning
One-click install
npx skills add https://github.com/GDSDN/kord-aios --skill ux-ds-scan-artifact
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ux-ds-scan-artifact
Source: https://github.com/GDSDN/kord-aios/tree/main/src/features/builtin-skills/kord-aios/design-system/ux-ds-scan-artifact
Command: npx skills add https://github.com/GDSDN/kord-aios --skill ux-ds-scan-artifact

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

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'.

Frequently Asked Questions about ux-ds-scan-artifact

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

FAQPage Schema
How do I extract design tokens from existing UI components?▼

To extract design tokens, scan UI artifacts like HTML files, React components, or screenshots to automatically identify and quantify colors, typography, spacing, and border-radius values.

Can I scan React components to identify atomic design patterns?▼

Yes, scanning React components uses AST parsing to classify UI elements into atoms, molecules, and organisms based on Atomic Design principles, generating component build suggestions.

What is the best way to inventory UI elements for a design system migration?▼

Scanning live URLs or HTML files automatically inventories UI elements by extracting design patterns, identifying redundant components, and suggesting an optimal build order for design system migration.

Does UI analysis work with screenshots of live web pages?▼

UI analysis works with screenshots by utilizing visual pattern recognition to identify design patterns, extract design tokens, and classify components without requiring direct code access.

How do I analyze a live URL for design patterns and component structures?▼

Analyzing a live URL involves providing the link to the scanner, which parses the DOM to extract design tokens, identify UI patterns, and generate a component inventory with build recommendations.

Related Skills

Explore More Design & Creative Skills→
wmeintswmeints

Frontend Components

Create reusable frontend components for React, Vue, Svelte, Angular, or Web Components.

Community
Intermediate
Ankurjain1121Ankurjain1121

UI Audit

Audit React UI components for style, accessibility, and UX issues.

Community
Advanced
Sir-chawakornSir-chawakorn
9

design-token-system

Architect W3C-DTCG design-token systems with Style Dictionary for multi-platform exports.

Community
Advanced
FoundationForgeFoundationForge

design-system

Audit design systems for naming inconsistencies, hardcoded values, and accessibility gaps.

Official
Intermediate