What output formats does the extraction provide?

The skill generates structured data in JSON (W3C Design Tokens format), CSS variables, Mermaid architecture diagrams, and human-readable Markdown documentation.

Can I extract design tokens from a live URL?

Yes, the skill supports a URL extraction mode that analyzes computed styles and visual patterns to identify colors, typography, and spacing from any web address.

How does the Multi-AI orchestration work?

When enabled, the skill uses a combination of Claude, Codex, and Gemini to analyze the code. It uses a 67% consensus threshold to resolve conflicts and ensure high-accuracy results.

What frameworks does the Extract Skill support?

It currently supports React (Functional/Hooks), Vue (SFC/Composition API), and Svelte, with the ability to detect props, variants, and usage patterns across these frameworks.

Extract Design & Architecture

Name: Extract Design & Architecture
Author: nyldn

bynyldn

•

2,674

•

设计工具

Reverse-engineers design systems, component libraries, and product architectures from live code or visual inputs to generate structured documentation.

The Extract Skill is a powerful reverse-engineering engine for Claude Code that transforms undocumented or complex codebases into implementation-ready documentation. It automatically identifies design tokens, maps component hierarchies across various frameworks, and diagrams backend architectures including API endpoints and data models. By leveraging multi-AI orchestration using Claude, Codex, and Gemini, it ensures high-confidence results for developers inheriting legacy projects, auditing design systems, or migrating technology stacks.

主要功能

01Cross-framework component analysis for React, Vue, and Svelte

02Automated C4 architecture visualization using Mermaid diagrams

032,674 GitHub stars

04Comprehensive API mapping and microservice boundary detection

05Automated design token extraction for colors, typography, and spacing

06Multi-AI consensus mechanism for high-accuracy reverse engineering

使用场景

01Generating API contracts and architecture diagrams for undocumented microservices

02Documenting a legacy codebase before starting a major refactor or migration

03Extracting a design system from a live product to build a new UI kit or Storybook

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add nyldn/claude-octopus skill-extract

For use in Claude.ai and ChatGPT