skills.rest
CES-Ltd
CES-LtdOFFICIAL
Explore all skills by this author →
WebsiteGitHub

skill-extract

Extract design tokens, components, and architecture diagrams from codebases and UI assets.

28|3|Updated May 10, 2026
Search Tags:#code analysis#design tokens#system architecture#visual assets#component analysis#reverse-engineering
One-click install
npx skills add https://github.com/CES-Ltd/Lumi --skill skill-extract-ces-ltd
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: skill-extract
Source: https://github.com/CES-Ltd/Lumi/tree/main/resources/seed/octopus/skills/skill-extract
Command: npx skills add https://github.com/CES-Ltd/Lumi --skill skill-extract-ces-ltd

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill helps users analyze live products or screenshots to extract design tokens, components, and architectural details, streamlining documentation and reverse-engineering tasks.

Core Features & Use Cases

  • Design System Analysis: Extracts colors, typography, spacing, and component usage from codebases or visual assets.
  • Component & Pattern Detection: Identifies UI components, variants, and layout patterns for UI reconstruction or documentation.
  • Product Architecture Mapping: Detects microservices, APIs, data models, and visualizes system architecture via diagrams.
  • Use Case: A developer wants to generate a detailed component inventory from a React project combined with a visual screenshot for documentation.

Quick Start

Provide a project directory or a URL, and the extract skill will analyze and produce detailed design, component, and architecture reports based on the input.

Frequently Asked Questions about skill-extract

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

FAQPage Schema
How do I extract design tokens from a live codebase or screenshots?▼

To extract design tokens from a codebase or screenshots, you provide a project directory or URL to analyze code, visual assets, and configuration files, generating structured reports of colors, typography, and spacing.

What is reverse-engineering a product architecture from visual assets?▼

Reverse-engineering product architecture from visual assets is the process of parsing UI components and configuration files to detect microservices, APIs, and data models, which generates system architecture diagrams for documentation.

Can I generate a component inventory from a React project for documentation?▼

Yes, you can generate a component inventory from a React project by analyzing the codebase and visual assets to identify UI components, layout patterns, and variants, fulfilling technical analysis and UI reconstruction needs.

How do I map system architecture and detect backend services from source code?▼

You map system architecture and detect backend services from source code by parsing configuration files and codebases, which visualizes microservices, APIs, and data models into structured architecture diagrams.

Does design system analysis work with multiple frontend frameworks?▼

Yes, design system analysis works with multiple frontend frameworks by parsing codebases and UI assets to extract component details and design tokens, supporting technical analysis and system visualization needs.

What's the best way to document UI components and layout patterns from an existing project?▼

The best way to document UI components and layout patterns from an existing project is to analyze live codebases and UI assets, extracting component variants and design tokens into structured reverse-engineering reports.

Related Skills

Explore More Design & Creative Skills→
erclxerclx
2

claude-design-extract

Extract visual design tokens from source code into a structured DESIGN.md file.

Community
Intermediate
ishiyanishiyan

mermaid-creator

Create and convert Mermaid diagrams from syntax to SVG.

Community
Advanced
alissimorealissimore

ui-styling

Apply Nexus design system and Tailwind CSS tokens to UI components.

Community
Basic
act70255act70255

ui-visual-validator

Validate UI components for visual consistency, design system compliance, and accessibility.

Community
Advanced