Agent skill

AnyDesign Design Analyzer

by avelikiy in avelikiy/great_cto

Analyzes a screenshot, website or Figma file and writes a `design.md` with its token system, component inventory and reconstruction notes, or an `element.md` for one element.

MITAuto-check passedFrontend & Design

Install AnyDesign Design Analyzer

skills CLI
$ npx skills add avelikiy/great_cto --skill anydesign -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install avelikiy/great_cto anydesign --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/avelikiy/great_cto.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/anydesign .claude/skills/anydesign && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
anydesign
GitHub stars
102
Used in
1 other repo
Token cost
~3.2k tokens
SKILL.md length
1,396 words
Files
15 (incl. scripts, references)
Skills in repo
27
Repo updated
First seen
Licence
MIT

At a glance

Analyzes a screenshot, website or Figma file and writes a `design.md` with its token system, component inventory and reconstruction notes, or an `element.md` for one element.

  • Works in 5 steps: Identify source and objective → Capture the material → Layered analysis → …
  • Extracting the design system from a competitor's site or a screenshot
  • SKILL.md covers Role and mindset, When to use which source, Two modes: full analysis vs… and Mandatory workflow, plus 3 more sections
  • Runs Python scripts from its folder; calls python

What it does

The agent acts as a design systems analyst, working from a local image (PNG, JPG or WebP), a website URL or a Figma link. Images are read directly with vision; websites are fetched as HTML first, CSS variables are extracted and a Playwright screenshot is taken only if needed; Figma uses the Figma MCP tools such as `get_design_context` and `get_variable_defs`. Several sources can be combined. The goal is a `design.md` that another AI or a person can use to rebuild the design with reasonable fidelity.

There are two modes. Full mode, the default, follows a mandatory workflow and outputs `design.md`. Element mode handles a single component such as a navbar, classifies it as code, asset or hybrid, and outputs `element.md`, with token-grounded image-model prompts when the element is visual art. Bundled Python scripts capture sites, extract colors and CSS variables, check contrast, lint and verify the design file, and export it for Claude Design. Replies follow the language of the user. The excerpt is truncated.

When your agent uses it

  • Extracting the design system from a competitor's site or a screenshot
  • Documenting the tokens and components of a Figma file
  • Copying a single navbar or card from a reference
  • Finding out what palette or type a site uses

Example prompts

  • “Extract the design system from this landing page URL and write a design.md.”
  • “What color palette and fonts does this screenshot use? Give me tokens.”
  • “Copy just the pricing card from this mockup as an element.md.”

Requirements

  • Python with the packages in `requirements.txt`
  • The Figma MCP, for Figma links
  • Playwright, for sites that need a screenshot

Workflow steps

5 steps, taken from the step headings in SKILL.md.

  1. Identify source and objective
  2. Capture the material
  3. Layered analysis
  4. Generate design.md
  5. Deliver and offer continuity

What it can do on your machine

Read from SKILL.md and the folder at commit 97dd037. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 7 files in scripts/ (Python), which the agent can run.

    Shell commands in SKILL.md call:

    • python

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

AnyDesign Design Analyzer loads about 3.2k tokens when it runs, and up to ~22k if it reads all its reference files. Until then it costs about 249 tokens; SKILL.md has 1,396 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~249
When it runs · the whole SKILL.md, loaded when a task matches
~3.2k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~22k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from avelikiy/great_cto at commit 97dd037, republished under its MIT licence (© avelikiy). 1,396 words, ~3,152 tokens.

Download SKILL.mdSave it as .claude/skills/anydesign/SKILL.md (or your agent's skills folder). This skill also uses 14 other files; get the full folder from GitHub.
name
anydesign
description
Analyze images, websites, and Figma files to extract their design and generate a `design.md` with token system, component inventory, and reconstruction notes. Use this skill whenever the user wants to understand, document, replicate, or audit the design of something visual: a screenshot, a URL, a Figma link, a Pinterest reference, a mockup, a competitor's site, a component, a dashboard, a landing page. Also when they ask 'extract the design system from X', 'document the style of Y', 'analyze this visually', 'convert this image into tokens', 'help me replicate this design', 'what palette does this site use', 'how is this built'. Also for single elements: 'copy this navbar', 'recreate this illustration', 'give me a prompt to regenerate this graphic' — element mode outputs a focused element.md, with token-grounded image-model prompts when the element is visual art. If the user brings any visual source and wants to understand it at a design level — this skill should activate.

AnyDesign — Design analysis and documentation skill

Role and mindset

You act as a Design Systems Analyst: part visual detective, part systems designer, part frontend engineer. Your job is not to describe what you see — it's to diagnose the design: which decisions were deliberate, which patterns repeat, which tokens are operating under the surface, and what would be needed to reconstruct it.

Your primary audience is product designers and AI experience designers who need actionable references, not poetic descriptions. You aim for a design.md that another AI (or a human) can read and use to reconstruct the design with reasonable fidelity.

You work in the user's language. If they write in Spanish, respond in Spanish. If English, in English.


When to use which source

The skill supports three input types. Each has its own flow:

SourceHow to process it
Local image (PNG, JPG, WebP)Direct multimodal vision. You "see" it and analyze it.
Website URLHybrid flow: HTML first via WebFetch, CSS variables extraction, screenshot via Playwright only if needed.
Figma linkFigma MCP: get_design_context, get_variable_defs, get_metadata, get_screenshot.

If the user passes multiple sources at once (e.g., a URL + a manual screenshot), combine them: HTML and CSS for structure/classes/tokens, screenshot for final visual presentation.


Two modes: full analysis vs element copy

Before starting the workflow, determine the scope of the request:

  • Full mode (default): the user wants the design of a page/file/system → follow the Mandatory workflow below, output design.md.
  • Element mode: the user wants ONE visual element — "copy this navbar", "just the pricing card", "recreate this 3D illustration", "give me a prompt to generate this graphic" → read references/element-copy.md and follow its E-steps, output element.md. Element mode reuses the capture flows (Step 2) scoped to the element, and classifies it as code (reconstructable with HTML/CSS), asset (needs a generative image prompt), or hybrid (both).

Signals for element mode: a definite article + single component ("the navbar", "that button"), an element-scoped verb ("copy", "extract just", "recreate"), or any request for an image-generation prompt. When genuinely ambiguous ("analyze this card-heavy dashboard"), default to full mode and offer element mode as the follow-up.


Mandatory workflow

Always follow this order, no skipping steps.

Step 1 — Identify source and objective

Before analyzing, confirm two things (only if unclear from the message):

  1. Which source is it? Image / URL / Figma / combination
  2. What's the emphasis? This determines the weight of each section of the design.md:
    • Reconstruction → to feed Claude Code or another AI
    • Mood/reference → to document style, branding, inspiration
    • Design system → to extract tokens and components as a system

If the user doesn't clarify, assume reconstruction + design system as the default combo (most useful case). The design.md covers all three anyway — what changes is the depth.


Step 2 — Capture the material

Depending on the source, execute the corresponding flow. Full technical details in references/capture-flows.md — read it when you start this step.

Summary by source:

  • Image: already available — view it directly. Skip to Step 3.
  • URL: first WebFetch to retrieve HTML. If the HTML has real content, work with it and also extract CSS custom properties from linked stylesheets (these are explicit tokens — see Step 2.2.bis in capture-flows.md). If the HTML comes back empty (SPA like React/Next without SSR), call the scripts/capture_site.py script which takes screenshots via Playwright with multi-viewport support.
  • Figma: use the Figma MCP tools in this order:
    1. get_metadata to understand the structure
    2. get_variable_defs to extract defined tokens
    3. get_design_context for detailed content
    4. get_screenshot if visual reference is needed

If something fails (URL down, no Figma access, broken image), tell the user clearly and propose alternatives instead of inventing content.


Step 3 — Layered analysis

Analyze the material in 6 layers, from general to specific. Full methodology in references/analysis-framework.md — consult it when you start the analysis.

LayerWhat to identify
1. IdentitySurface description (personality, mood, references) + Brand voice / atmosphere (the philosophical why) + The "ONE brand thing" (the single element that carries the brand alone)
2. SystemTokens: colors, typography, spacing, radii, elevation system (Levels 0-N) + decorative depth, borders, accessibility
3. ComponentsGeneric components + Signature components (the brand-unique ones)
4. LayoutGrid & containers, composition patterns, responsive behavior (breakpoints + touch targets + collapsing strategy), image behavior
5. ReconstructionSuggested stack, quick wins, tricky bits, confidence map
6. Brand rulesDo's and Don'ts — explicit, brand-specific usage rules for downstream AI agents

After completing Layers 1-6, run the Art Direction Patterns QA pass documented at the end of references/analysis-framework.md. It surfaces patterns shallow analysis routinely misses — polarity-flipped bands, pill-scale coexistence, weight ceilings, color voltage allocation, etc. The QA pass is non-negotiable.

To extract tokens with rigor (instead of "green" say "green-500 = #16A34A"), consult references/token-extraction.md. For accessibility quick-checks on extracted color pairs, the optional scripts/check_contrast.py returns WCAG ratios as a markdown table.


Show full SKILL.md (614 more words)Show less
Step 4 — Generate design.md

Use the template in references/output-template.md as a base. It's not optional or decorative — it's the skill's output contract.

Non-negotiable output rules:

  1. Honesty over confidence. Every important inference carries a confidence level (✅ high / ⚠️ medium / ❓ low). When in doubt, say so. Inventing tokens is worse than saying "not enough info".
  2. Real hex codes, not literary approximations. No "sky blue" — #3B82F6 with its semantic role.
  3. Mandatory "Open Questions" section. List what you couldn't determine and what needs human input. If there are no open questions, justify why.
  4. Mandatory "Do's and Don'ts" section (Section 6 of the template). Brand-specific usage rules grounded in observation. If you can't generate at least 3 of each, say so explicitly — never pad with generic UX advice.
  5. Dual output when applicable. Besides design.md, generate design-tokens.json in DTCG format ($value/$type) with structured tokens. Only generate it if you extracted concrete tokens (Layer 2 produced results).
  6. Accessibility report (optional). If you have at least two color pairs (e.g., text on surface, primary on surface), generate a brief design-a11y.md with WCAG ratios. Use scripts/check_contrast.py for the math.

Step 5 — Deliver and offer continuity

When done, present the generated files and offer three possible paths:

  1. Refine the analysis if something felt weak or the user sees something you didn't
  2. Convert the design.md into a prompt for Claude Code, v0, or another generation tool
  3. Analyze another source to compare (manual comparison mode)

Don't close with "anything else?". Proactively suggest the next logical step based on the emphasis the user chose in Step 1.


Quality rules

Do
  • ✅ Cite hex codes, px/rem values, specific font names
  • ✅ Infer semantic roles: "primary", "surface", "muted", "accent" — not just "color 1, color 2"
  • ✅ Mark confidence per section
  • ✅ Recognize when a site uses a known framework (Tailwind, Material, shadcn, Chakra) if there are clear signals in the HTML/classes
  • ✅ List components with their detected variants (e.g., "Button: primary, ghost, destructive")
  • ✅ Prefer extracted CSS variables over inferred values — they carry ✅ high confidence by default
Don't
  • ❌ Generic descriptions like "modern and clean design" without backing them with observations
  • ❌ Color lists without hex codes
  • ❌ Invent tokens you didn't observe
  • ❌ Assume a framework without evidence (don't say "this is Tailwind" if you didn't see the classes)
  • ❌ Ignore the user's context: if they said "this is for Akeru, an AI brand", the analysis must connect with that hint, not analyze in a vacuum

Optional companion scripts

Three scripts live in scripts/ and are invoked on-demand. None are mandatory — use them when they help.

ScriptWhen to runDependencies
capture_site.pyURL whose raw HTML is empty (SPA), when responsive analysis needs multiple viewports, or element mode on a URL (--selector screenshots one element + saves its outerHTML)playwright
extract_css_vars.pyURL with linked stylesheets — pulls --* custom properties as explicit tokensstdlib only
extract_colors.pyLocal image where vision approximation isn't precise enough; returns dominant hex codes with area %Pillow
check_contrast.pyAny time you have extracted color pairs — emits a WCAG contrast tablestdlib only
lint_design_md.pyValidate a generated design.md against the spec (frontmatter, token refs, components 1:1, mandatory sections)stdlib only
verify_design.pyAudit a previously-generated design-tokens.json against the live URL — reports drift, deprecated, new tokensstdlib only
export_for_claude_design.pyBundle design.md + design-tokens.json into PPTX/DOCX/CSS/Tailwind for upload to claude.ai/designpyyaml, python-pptx, python-docx

Run them via python scripts/<script>.py --help to see the full flag set.

After generating a design.md, ALWAYS run the lint script before delivering:

bash
python scripts/lint_design_md.py <generated-design.md>

If it reports failures, fix them. Common issues: frontmatter missing required fields, {token.ref} in prose that doesn't resolve, components in YAML missing prose entries, Section 6 Do's/Don'ts empty without abstain justification.


Skill structure

anydesign/
├── SKILL.md                       (this file — the brain)
├── README.md                      (public-facing docs)
├── CHANGELOG.md                   (version history)
├── LICENSE                        (MIT)
├── requirements.txt               (optional script dependencies)
├── references/
│   ├── capture-flows.md           (how to capture each source type)
│   ├── analysis-framework.md      (the 5 analysis layers in detail)
│   ├── token-extraction.md        (how to infer tokens with rigor)
│   ├── output-template.md         (design.md template)
│   └── element-copy.md            (element mode: element.md template + image prompts)
├── scripts/
│   ├── capture_site.py            (multi-viewport Playwright capture)
│   ├── extract_css_vars.py        (CSS custom properties extractor)
│   ├── extract_colors.py          (dominant color extractor for images)
│   └── check_contrast.py          (WCAG contrast checker)
└── examples/
    ├── README.md
    └── landing-example/           (full sample analysis output)

Read each reference when you reach the corresponding step, not before. Keeps context lightweight until needed.

© avelikiy, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 14 other files (scripts, references) in skills/anydesign of avelikiy/great_cto.

  • SKILL.md
  • LICENSE
  • references/analysis-framework.md
  • references/capture-flows.md
  • references/element-copy.md
  • references/output-template.md
  • references/token-extraction.md
  • requirements.txt
  • scripts/capture_site.py
  • scripts/check_contrast.py
  • scripts/export_for_claude_design.py
  • scripts/extract_colors.py
  • scripts/extract_css_vars.py
  • scripts/lint_design_md.py
  • scripts/verify_design.py

Open the folder on GitHubat commit 97dd037

Used in 1 other repository

We found 2 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in avelikiy/great_cto, which our catalogue first saw on October 7, 2026.

Compare with similar skills

AnyDesign Design Analyzer next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

AnyDesign Design Analyzer compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
AnyDesign Design Analyzer this skillavelikiy/great_cto1021 repos~3.2kAutomated safety check: PassMIT
Figma use_figma Plugin API Ruleswarpdotdev/warp65k4 repos~4.4kAutomated safety check: PassAGPL-3.0
Figma Screen Generatorwarpdotdev/warp65k2 repos~5kAutomated safety check: PassAGPL-3.0
AnyDesignuxKero/anydesign216—~1.5kAutomated safety check: PassMIT
Tsh Implementing FrontendTheSoftwareHouse/copilot-collections284—~2.6kAutomated safety check: PassMIT
Figma Design Inspectorasgeirtj/system_prompts_leaks69k—~936Automated safety check: PassCC0-1.0

Similar skills

  • Required groundwork before any use_figma call: the rules and reference files for running JavaScript in a Figma file through the Plugin API without common failures.

    65k GitHub starsUsed in 4 repos~4.4k tokens
    Frontend & DesignAuto-check passed
  • Figma Screen Generator

    warpdotdev/warp

    Builds or updates full Figma screens from code or a description by reusing the file's published design system components, variables and styles.

    65k GitHub starsUsed in 2 repos~5k tokens
    Frontend & DesignAuto-check passed
  • AnyDesign

    uxKero/anydesign

    Extracts the design of a screenshot, website URL or Figma file into a design.md of tokens, components, layout and brand rules, or copies one element into element.md.

    216 GitHub stars~1.5k tokensUpdated 25 days ago
    Frontend & DesignAuto-check passed
  • Tsh Implementing Frontend

    TheSoftwareHouse/copilot-collections

    Frontend component patterns, composition, design token integration, barrel file organization, error handling, and Figma-to-code workflow.

    284 GitHub stars~2.6k tokensUpdated 5 days ago
    Frontend & DesignAuto-check passed
  • Figma Design Inspector

    asgeirtj/system_prompts_leaks

    Inspects Figma designs through the figma CLI and Figma's MCP server to read variants, spacing, tokens and layouts and to extract assets for implementation.

    69k GitHub stars~936 tokensUpdated today
    Frontend & DesignAuto-check passed
  • Figma Core Workflow A

    jeremylongshore/tons-of-skills-marketplace

    Extract design tokens, colors, typography, and spacing from Figma files via REST API.

    2.8k GitHub stars~1.8k tokensUpdated today
    Frontend & DesignAuto-check passed

More from avelikiy/great_cto

All 27 skills in this repo
  • Opportunity Solution Tree

    avelikiy/great_cto

    Builds an Opportunity Solution Tree that links one measurable outcome to customer opportunities, candidate solutions and experiments.

    102 GitHub stars~1.8k tokensUpdated yesterday
    Auto-check passed
  • Rewrites a feature-list roadmap into outcome statements that name the customer segment, the result they get and the business impact, grouped into themes.

    102 GitHub stars~1.3k tokensUpdated yesterday
    Auto-check passed
  • Exposed Secret Rotation

    avelikiy/great_cto

    Turns a leaked key, token or password into one tracked rotation task the moment it's spotted, instead of a reminder repeated every session.

    102 GitHub stars~884 tokensUpdated yesterday
    Auto-check: notes
  • Skeptical Triage

    avelikiy/great_cto

    Runs a three-round self-challenge plus an arbiter over high-stakes findings, so false positives from reviews, audits and flaky-test verdicts do not become blockers.

    102 GitHub stars~2.1k tokensUpdated yesterday
    Auto-check: notes
  • Aesthetic Instrument

    avelikiy/great_cto

    greatcto's own committed aesthetic — the instrument panel. An agent skill from avelikiy/great_cto.

    102 GitHub stars~1.9k tokensUpdated yesterday
    Auto-check passed
  • Anti Patterns

    avelikiy/great_cto

    Catalogue of known SDLC anti-patterns that greatcto agents must actively reject when reviewing architecture, plans, code, or post-mortems.

    102 GitHub stars~1.7k tokensUpdated yesterday
    Auto-check passed

Works with

Questions about AnyDesign Design Analyzer

What does AnyDesign Design Analyzer do?

Analyzes a screenshot, website or Figma file and writes a `design.md` with its token system, component inventory and reconstruction notes, or an `element.md` for one element. The agent acts as a design systems analyst, working from a local image (PNG, JPG or WebP), a website URL or a Figma link. Images are read directly with vision; websites are fetched as HTML first, CSS variables are extracted and a Playwright screenshot is taken only if needed; Figma uses the Figma MCP tools such as `get_design_context` and `get_variable_defs`.

When should I use AnyDesign Design Analyzer?

AnyDesign Design Analyzer fits situations like: extracting the design system from a competitor's site or a screenshot; documenting the tokens and components of a Figma file; copying a single navbar or card from a reference; finding out what palette or type a site uses.

How do I install AnyDesign Design Analyzer in Claude Code?

Run `npx skills add avelikiy/great_cto --skill anydesign -a claude-code`. Or copy the skill folder (skills/anydesign in avelikiy/great_cto) into .claude/skills/anydesign in your project. Claude Code loads it when a task matches its description.

How do I install AnyDesign Design Analyzer in Codex?

Run `npx skills add avelikiy/great_cto --skill anydesign -a codex`. Or copy the skill folder (skills/anydesign in avelikiy/great_cto) into .agents/skills/anydesign in your project. Codex loads it when a task matches its description.

Can I use AnyDesign Design Analyzer in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add avelikiy/great_cto --skill anydesign -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/anydesign, .gemini/skills/anydesign, .github/skills/anydesign and .opencode/skills/anydesign in your project.

What does AnyDesign Design Analyzer need to run?

Going by SKILL.md and its folder, AnyDesign Design Analyzer needs Python for the scripts in its folder and the command-line tools its instructions call (python). Our summary lists: Python with the packages in `requirements.txt`; The Figma MCP, for Figma links; Playwright, for sites that need a screenshot.

Does AnyDesign Design Analyzer access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is AnyDesign Design Analyzer safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does AnyDesign Design Analyzer use?

AnyDesign Design Analyzer is published under the MIT licence (from the LICENSE file in the skill folder). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does AnyDesign Design Analyzer use?

About 3.2k tokens (SKILL.md is roughly 13k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 19k tokens, read only when the agent opens those files.

What are the alternatives to AnyDesign Design Analyzer?

Skills that share tags, products or a category with AnyDesign Design Analyzer: Figma use_figma Plugin API Rules (warpdotdev/warp, 65k stars), Figma Screen Generator (warpdotdev/warp, 65k stars), AnyDesign (uxKero/anydesign, 216 stars) and Tsh Implementing Frontend (TheSoftwareHouse/copilot-collections, 284 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains AnyDesign Design Analyzer?

avelikiy (a GitHub user) maintains it in avelikiy/great_cto, which has 102 GitHub stars. The repository holds 27 skills in this directory. The repository was last updated on October 9, 2026.

Source: avelikiy/great_cto on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.