How does the multi-AI orchestration work?

The skill uses a consensus mechanism between Claude, Codex, and Gemini to ensure at least 67% agreement on key architectural outputs, logging any disagreements for manual review to ensure maximum accuracy.

Which frameworks are supported for component analysis?

It supports AST parsing for React (Hooks and Class components), Vue (SFC and Composition API), and Svelte, allowing it to map props, variants, and usage patterns.

What type of architecture diagrams does it produce?

It generates automated C4 Model descriptions and Mermaid diagrams to visualize service boundaries, data models, and system communication patterns.

Can I extract design tokens from a live URL?

Yes, the skill supports URL extraction mode to identify primary color palettes, typography, and layout patterns directly from live websites using computed style analysis.

Design & Architecture Extractor

Name: Design & Architecture Extractor
Author: nyldn

bynyldn

•

2,702

•

Design Tools

Reverse-engineers design systems, component libraries, and product architectures from live websites or existing codebases.

The Extract skill is a sophisticated reverse-engineering tool designed to transform undocumented products into structured, implementation-ready documentation. By analyzing codebases or live URLs, it identifies design tokens, maps component props across frameworks like React and Vue, and catalogs backend architectures including API endpoints and data models. Utilizing a multi-AI orchestration layer with Claude, Codex, and Gemini, it ensures high-accuracy results through consensus mechanisms, making it an essential tool for developers migrating legacy systems, auditing design consistency, or documenting complex microservice environments.

Key Features

01Framework-Agnostic Component Analysis for React, Vue, and Svelte

02Automated C4 Architecture Visualization via Mermaid diagrams

03Comprehensive API Mapping for REST, GraphQL, and tRPC

042,702 GitHub stars

05Multi-AI Consensus Mechanism for high-confidence structural analysis

06Automated Design Token Extraction (Colors, Typography, Spacing)

Use Cases

01Documenting undocumented microservice architectures and API contracts

02Migrating legacy CSS codebases into modern, tokenized Design Systems

03Generating Storybook documentation and scaffolds from existing component libraries

Key Features

01Framework-Agnostic Component Analysis for React, Vue, and Svelte

02Automated C4 Architecture Visualization via Mermaid diagrams

03Comprehensive API Mapping for REST, GraphQL, and tRPC

042,702 GitHub stars

05Multi-AI Consensus Mechanism for high-confidence structural analysis

06Automated Design Token Extraction (Colors, Typography, Spacing)

Use Cases

01Documenting undocumented microservice architectures and API contracts

02Migrating legacy CSS codebases into modern, tokenized Design Systems

03Generating Storybook documentation and scaffolds from existing component libraries