nyldn

Extract Skill — Design skill for Claude Code

Design community

Reverse-engineer design systems, tokens, and components from live products or screenshots.

How to install Extract Skill

Installs to ~/.claude/skills/nyldn-claude-octopus-extract-skill/SKILL.md

Terminal

mkdir -p ~/.claude/skills/nyldn-claude-octopus-extract-skill && curl -fsSL https://raw.githubusercontent.com/nyldn/claude-octopus/HEAD/.claude/skills/extract-skill.md -o ~/.claude/skills/nyldn-claude-octopus-extract-skill/SKILL.md

Restart Claude Code, or start a new session, for it to be picked up.

What Extract Skill does

name: skill-extract description: "Reverse-engineer design systems, tokens, and components from live products or screenshots"

Extract Skill - Implementation Guide

Overview

The `extract` skill provides comprehensive reverse-engineering capabilities for design systems and product architectures. It transforms undocumented codebases into structured, implementation-ready documentation.

Capabilities

Design System Extraction

Token Extraction: Colors, typography, spacing, s

Alternatives in Design

Figma — Fetch design context, screenshots, and assets from Figma for implementation 14.6k ★
Claude Design Engineer — Design engineering for Claude Code 4.1k ★
Studio — Launch the local design Studio — a live token editor over the latest extraction 3.6k ★