skills.rest
AnderHonorato
AnderHonoratoCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

anydesign

Extract design systems from images, websites, and Figma files into structured design.md specs and DTCG tokens.

Updated Aug 28, 2026
Search Tags:#design system#figma#design tokens#wcag#playwright#ui analysis#dtcg
One-click install
npx skills add https://github.com/AnderHonorato/Mem-rias-IA---Infinity --skill anydesign-anderhonorato
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: anydesign
Source: https://github.com/AnderHonorato/Mem-rias-IA---Infinity/tree/main/Manus/Skills/snapshots/anydesign
Command: npx skills add https://github.com/AnderHonorato/Mem-rias-IA---Infinity --skill anydesign-anderhonorato

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Turning a visual reference — a screenshot, a live website, or a Figma file — into a documented, machine-readable design system normally requires hours of manual inspection and guesswork. This Skill automates that analysis, producing a structured design.md spec, W3C DTCG design tokens, and optional WCAG contrast reports with confidence markers on every inference. ## Core Features & Use Cases - Full design-system extraction: Analyzes images, URLs (HTML + CSS custom properties + Playwright screenshots), and Figma files via MCP to produce a 7-section design.md with tokens, components, layout, brand rules, and open questions. - Element mode: Copies a single element (navbar, card, 3D illustration) into a focused element.md — either a rebuild prompt for code agents like v0 and Claude Code, or a token-grounded image-generation prompt for gpt-image, Midjourney, or Stable Diffusion. - Standalone CLI scripts: Seven Python tools for CSS variable extraction, multi-viewport capture, dominant color extraction, WCAG contrast checking, design.md linting, token drift auditing against live sites, and export bundles for claude.ai/design. - Use Case: Point it at vercel.com to extract 808 CSS custom properties into DTCG tokens, then paste the resulting design.md into v0 to rebuild the page, or run verify_design.py months later to check whether the spec still matches the live site. ## Quick Start Ask the AI to extract the design system from a website URL, screenshot, or Figma link you provide, and it will generate a design.md with tokens and reconstruction notes.

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 URL?▼

Provide the URL and the skill fetches the HTML first, extracts CSS custom properties from linked stylesheets as high-confidence tokens, and only uses Playwright screenshots when the HTML is empty (SPA). The output is a design.md plus design-tokens.json in DTCG format.

How to copy a single element like a navbar from a website?▼

Use element mode by asking to copy that specific element. The capture script's --selector flag screenshots only the element's bounding box and saves its outerHTML, producing an element.md with a rebuild prompt for code agents or a token-grounded image prompt for visual art.

Can I use the extracted design tokens with Figma or Tailwind?▼

Yes, design-tokens.json follows the W3C DTCG format with $value and $type, which imports directly into Style Dictionary, Figma Variables, and Tokens Studio. The export script also generates a tailwind.config.ts and tokens.css from the same tokens.

Does the design analysis work with Figma files?▼

Yes, when the Figma MCP is connected it uses get_metadata, get_variable_defs, get_design_context, and get_screenshot in sequence. Tokens defined as Figma Variables are extracted directly and marked with high confidence instead of being inferred.

What dependencies are required to run the capture scripts?▼

Only capture_site.py needs Playwright (plus a one-time chromium download), and extract_colors.py needs Pillow. The CSS variable extractor, contrast checker, linter, and drift auditor are stdlib-only, and the Claude Design export needs pyyaml, python-pptx, and python-docx.

How do I check if a design spec is still accurate months later?▼

Run verify_design.py with the design-tokens.json and the live URL. It fetches the site's current CSS custom properties and reports which declared tokens still match, which drifted, and which new values appeared.

Related Skills

Explore More Design & Creative Skills→
hamzaPixlhamzaPixl
2

design-extraction

Extract design tokens and layout structure from Figma files, URLs, or screenshots into design-spec JSON.

Community
Advanced
reason-machinesreason-machines
4

anydesign-analyzer

Analyze images, websites, and Figma files to generate design.md documents with DTCG design tokens.

Official
Advanced
blueskies1818blueskies1818
1

design-md

Generates, validates, and exports WCAG-compliant design tokens to multiple formats.

Community
Intermediate
paolomozpaolomoz
3

design-system-extractor

Extract design tokens and component styles from live websites using Puppeteer.

Community
Advanced