Figma use_figma Plugin API Rules
warpdotdev/warp
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.
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.
$ npx skills add avelikiy/great_cto --skill anydesign -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install avelikiy/great_cto anydesign --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ 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-srcUse ~/.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/
Install the "anydesign" agent skill from https://github.com/avelikiy/great_cto/tree/main/skills/anydesign into .claude/skills/anydesign/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "anydesign", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/avelikiy/great_cto/tree/main/skills/anydesignType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add avelikiy/great_cto --skill anydesign -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install avelikiy/great_cto anydesign --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/avelikiy/great_cto.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/anydesign .agents/skills/anydesign && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "anydesign" agent skill from https://github.com/avelikiy/great_cto/tree/main/skills/anydesign into .agents/skills/anydesign/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "anydesign", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add avelikiy/great_cto --skill anydesign -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install avelikiy/great_cto anydesign --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/avelikiy/great_cto.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/anydesign .cursor/skills/anydesign && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "anydesign" agent skill from https://github.com/avelikiy/great_cto/tree/main/skills/anydesign into .cursor/skills/anydesign/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "anydesign", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/avelikiy/great_cto.git --path skills/anydesign--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add avelikiy/great_cto --skill anydesign -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install avelikiy/great_cto anydesign --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/avelikiy/great_cto.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/anydesign .gemini/skills/anydesign && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "anydesign" agent skill from https://github.com/avelikiy/great_cto/tree/main/skills/anydesign into .gemini/skills/anydesign/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "anydesign", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install avelikiy/great_cto anydesignInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add avelikiy/great_cto --skill anydesign -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/avelikiy/great_cto.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/anydesign .github/skills/anydesign && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "anydesign" agent skill from https://github.com/avelikiy/great_cto/tree/main/skills/anydesign into .github/skills/anydesign/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "anydesign", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add avelikiy/great_cto --skill anydesign -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install avelikiy/great_cto anydesign --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/avelikiy/great_cto.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/anydesign .opencode/skills/anydesign && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "anydesign" agent skill from https://github.com/avelikiy/great_cto/tree/main/skills/anydesign into .opencode/skills/anydesign/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "anydesign", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
anydesignAnalyzes 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`. 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.
5 steps, taken from the step headings in SKILL.md.
Read from SKILL.md and the folder at commit 97dd037. It shows what the files ask for, not the result of running them.
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.
Ships 7 files in scripts/ (Python), which the agent can run.
Shell commands in SKILL.md call:
pythonFrom the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
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.
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.
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.
The full file from avelikiy/great_cto at commit 97dd037, republished under its MIT licence (© avelikiy). 1,396 words, ~3,152 tokens.
.claude/skills/anydesign/SKILL.md (or your agent's skills folder). This skill also uses 14 other files; get the full folder from GitHub.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.
The skill supports three input types. Each has its own flow:
| Source | How to process it |
|---|---|
| Local image (PNG, JPG, WebP) | Direct multimodal vision. You "see" it and analyze it. |
| Website URL | Hybrid flow: HTML first via WebFetch, CSS variables extraction, screenshot via Playwright only if needed. |
| Figma link | Figma 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.
Before starting the workflow, determine the scope of the request:
design.md.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.
Always follow this order, no skipping steps.
Before analyzing, confirm two things (only if unclear from the message):
design.md: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.
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:
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.get_metadata to understand the structureget_variable_defs to extract defined tokensget_design_context for detailed contentget_screenshot if visual reference is neededIf something fails (URL down, no Figma access, broken image), tell the user clearly and propose alternatives instead of inventing content.
Analyze the material in 6 layers, from general to specific. Full methodology in
references/analysis-framework.md — consult it when you start the analysis.
| Layer | What to identify |
|---|---|
| 1. Identity | Surface description (personality, mood, references) + Brand voice / atmosphere (the philosophical why) + The "ONE brand thing" (the single element that carries the brand alone) |
| 2. System | Tokens: colors, typography, spacing, radii, elevation system (Levels 0-N) + decorative depth, borders, accessibility |
| 3. Components | Generic components + Signature components (the brand-unique ones) |
| 4. Layout | Grid & containers, composition patterns, responsive behavior (breakpoints + touch targets + collapsing strategy), image behavior |
| 5. Reconstruction | Suggested stack, quick wins, tricky bits, confidence map |
| 6. Brand rules | Do'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.
design.mdUse 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:
#3B82F6 with its
semantic role.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).design-a11y.md with WCAG ratios.
Use scripts/check_contrast.py for the math.When done, present the generated files and offer three possible paths:
design.md into a prompt for Claude Code, v0, or another generation toolDon't close with "anything else?". Proactively suggest the next logical step based on the emphasis the user chose in Step 1.
Three scripts live in scripts/ and are invoked on-demand. None are mandatory — use them
when they help.
| Script | When to run | Dependencies |
|---|---|---|
capture_site.py | URL 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.py | URL with linked stylesheets — pulls --* custom properties as explicit tokens | stdlib only |
extract_colors.py | Local image where vision approximation isn't precise enough; returns dominant hex codes with area % | Pillow |
check_contrast.py | Any time you have extracted color pairs — emits a WCAG contrast table | stdlib only |
lint_design_md.py | Validate a generated design.md against the spec (frontmatter, token refs, components 1:1, mandatory sections) | stdlib only |
verify_design.py | Audit a previously-generated design-tokens.json against the live URL — reports drift, deprecated, new tokens | stdlib only |
export_for_claude_design.py | Bundle design.md + design-tokens.json into PPTX/DOCX/CSS/Tailwind for upload to claude.ai/design | pyyaml, 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:
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.
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
SKILL.md and 14 other files (scripts, references) in skills/anydesign of avelikiy/great_cto.
Open the folder on GitHubat commit 97dd037
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.
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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| AnyDesign Design Analyzer this skillavelikiy/great_cto | 102 | 1 repos | ~3.2k | Automated safety check: Pass | MIT | |
| Figma use_figma Plugin API Ruleswarpdotdev/warp | 65k | 4 repos | ~4.4k | Automated safety check: Pass | AGPL-3.0 | |
| Figma Screen Generatorwarpdotdev/warp | 65k | 2 repos | ~5k | Automated safety check: Pass | AGPL-3.0 | |
| AnyDesignuxKero/anydesign | 216 | — | ~1.5k | Automated safety check: Pass | MIT | |
| Tsh Implementing FrontendTheSoftwareHouse/copilot-collections | 284 | — | ~2.6k | Automated safety check: Pass | MIT | |
| Figma Design Inspectorasgeirtj/system_prompts_leaks | 69k | — | ~936 | Automated safety check: Pass | CC0-1.0 |
warpdotdev/warp
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.
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.
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.
TheSoftwareHouse/copilot-collections
Frontend component patterns, composition, design token integration, barrel file organization, error handling, and Figma-to-code workflow.
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.
jeremylongshore/tons-of-skills-marketplace
Extract design tokens, colors, typography, and spacing from Figma files via REST API.
avelikiy/great_cto
Builds an Opportunity Solution Tree that links one measurable outcome to customer opportunities, candidate solutions and experiments.
avelikiy/great_cto
Rewrites a feature-list roadmap into outcome statements that name the customer segment, the result they get and the business impact, grouped into themes.
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.
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.
avelikiy/great_cto
greatcto's own committed aesthetic — the instrument panel. An agent skill from avelikiy/great_cto.
avelikiy/great_cto
Catalogue of known SDLC anti-patterns that greatcto agents must actively reject when reviewing architecture, plans, code, or post-mortems.
Works with
Categories
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`.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.