skills.rest
avelikiy
avelikiyCOMMUNITY
Explore all skills by this author →
GitHub

anydesign

Extract design systems from images, websites, and Figma files into documentation.

75|13|Updated Apr 5, 2026
Search Tags:#design analysis#design documentation#UI design#Figma#website analysis
One-click install
npx skills add https://github.com/avelikiy/great_cto --skill anydesign
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: anydesign
Source: https://github.com/avelikiy/great_cto/tree/main/skills/anydesign
Command: npx skills add https://github.com/avelikiy/great_cto --skill anydesign

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, Pillow, pyyaml, python-pptx, python-docx, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill allows users to analyze and document design systems from visual sources like images, websites, and Figma files, enabling them to understand, replicate, or audit the design of a visual element.

Core Features & Use Cases

  • Design Analysis: Analyze images, websites, and Figma files to extract design elements like colors, typography, and components.
  • Documentation: Generate a design.md file with a token system, component inventory, and reconstruction notes.
  • Use Case: If a user has a website design and wants to understand the underlying design system, they can use this Skill to extract and document the design elements.

Quick Start

Use the anydesign skill to analyze the design of the provided website 'example.com'.

Frequently Asked Questions about anydesign

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

FAQPage Schema
How do I extract a design system from a website for documentation?▼

You extract a design system from a website by analyzing the URL to identify colors, typography, and components. This process generates a detailed design.md file containing token systems and reconstruction notes for UI documentation.

Can I analyze Figma files to generate UI design tokens?▼

Yes, you can analyze Figma files to extract UI design tokens. The analysis processes the visual source to identify design elements and outputs a component inventory alongside detailed tokenization for product development.

What is the best way to document design elements from an image?▼

The best way to document design elements from an image is to use AI techniques that extract colors and components. It generates a comprehensive design.md file with token systems and reconstruction notes for brand analysis.

Does this design analysis require Python libraries to process visual sources?▼

Yes, design analysis requires Python libraries like Pillow, Playwright, and python-pptx to process visual sources. These dependencies support image processing, website scraping, and documentation generation for UI design.

What are the limitations of automated website design extraction?▼

Automated website design extraction limitations include dependency on Python libraries like Playwright for rendering dynamic content. The accuracy of tokenization and component inventory depends on the visual clarity and structure of the provided source.

Related Skills

Explore More Design & Creative Skills→
JansenAnalyticsJansenAnalytics
5

website-screenshot

Capture headless web page screenshots with Playwright Core and output the image path.

Community
Intermediate
marketingLendariomarketingLendario
18

offerbook

Generate structured Offerbook Markdown documents from input files.

Community
Advanced
gihwan-devgihwan-dev
1

figma-to-code

Convert Figma design data into React component code.

Community
Advanced
WirasmWirasm
65

kild-peek

Capture, inspect and validate macOS-native app windows and UI elements via accessibility APIs and image processing tools.

Community
Intermediate