New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Design System Analyzer

by NakanoSanku in NakanoSanku/OhMySkills

Inspects a live website through Chrome DevTools and turns its CSS tokens, animations and hover states into a design system prompt.

No licenceAuto-check passedFrontend & Design

Install Design System Analyzer

skills CLI
$ npx skills add NakanoSanku/OhMySkills --skill design-system-analyzer -a claude-code

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

GitHub CLI
$ gh skill install NakanoSanku/OhMySkills design-system-analyzer --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/NakanoSanku/OhMySkills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/design-system-analyzer .claude/skills/design-system-analyzer && 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
design-system-analyzer
GitHub stars
163
Token cost
~1.2k tokens
SKILL.md length
439 words
Files
5 (incl. references)
Skills in repo
1
Repo updated
First seen
Licence
None found

At a glance

Inspects a live website through Chrome DevTools and turns its CSS tokens, animations and hover states into a design system prompt.

  • Works in 3 steps: Navigate & Anti-Bot Check → Deep CSS Extraction → Synthesize to Template
  • Capturing the visual style of an existing website as reusable design tokens
  • SKILL.md covers Critical Rules, Best Practice: Use Your Own…, Workflow Overview and Step 1: Navigate & Anti-Bot…, plus 3 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

The agent opens a target URL through the ChromeDevTools MCP tools and checks the page for bot challenges. If a CAPTCHA or similar protection appears, it stops and asks you to solve it in the browser before going on. It then runs a fixed series of extraction scripts from `references/analysis-guide.md`: CSS variables and tokens, keyframes and transitions, hover, focus and active rules, typography, layout and spacing, and a check for the front-end framework in use.

Each script has built-in item limits, such as 50 tokens or 10 keyframes, so the output stays within context, and the skill says not to take screenshots because the visual data comes from CSS. Results are written in the exact structure of `references/design-system-template.md`, with Not observed filled in wherever data is missing. For the smoothest runs it suggests starting your own Chrome with remote debugging on port 9222, which keeps your login cookies and avoids most CAPTCHAs, and a setup guide is included.

When your agent uses it

  • Capturing the visual style of an existing website as reusable design tokens
  • Documenting a site's animations, transitions and hover states
  • Creating a design system prompt from a reference URL
  • Studying a reference site's typography, spacing and shadows

Example prompts

  • “Analyze the landing page at https://example.com and write up its design system.”
  • “Extract the CSS tokens and keyframe animations from our staging site.”
  • “Create a design system from the pricing page at https://example.com/pricing.”
  • “Learn the visual style of this documentation site and list its hover and focus states.”

Requirements

  • The Chrome DevTools MCP server connected to a browser
  • Chrome started with remote debugging on port 9222 (recommended)

Workflow steps

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

  1. Navigate & Anti-Bot Check
  2. Deep CSS Extraction
  3. Synthesize to Template

What it can do on your machine

Read from SKILL.md and the folder at commit 09f1d8e. 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

    No scripts in the folder and no shell commands in SKILL.md (its code samples are javascript).

    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

Design System Analyzer loads about 1.2k tokens when it runs, and up to ~5.3k if it reads all its reference files. Until then it costs about 80 tokens; SKILL.md has 439 words of instructions outside code blocks.

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

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); files beside SKILL.md are not scanned.

SKILL.md

Without a licence we can't republish the file, so here is its outline and opening line. It has 439 words (~1,236 tokens).

“Analyze websites via ChromeDevTools to extract deep CSS logic (keyframes, transitions, tokens) and generate comprehensive Design System System Prompts.”

— opening of SKILL.md by NakanoSanku
name
design-system-analyzer

Read the full SKILL.md on GitHub

Files

SKILL.md and 4 other files (references) in design-system-analyzer of NakanoSanku/OhMySkills.

  • SKILL.md
  • README.md
  • references/analysis-guide.md
  • references/design-system-template.md
  • references/setup-guide.md

Open the folder on GitHubat commit 09f1d8e

Compare with similar skills

Design System 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.

Design System Analyzer compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Design System Analyzer this skillNakanoSanku/OhMySkills163—~1.2kAutomated safety check: PassNone
Web Style ExtractorLucent-Snow/style-extractor453—~3.8kAutomated safety check: PassNone
Transitions PolishJakubantalik/transitions.dev4.7k2 repos~3.2kAutomated safety check: PassCustom licence
Tailwind Design SystemSuFxGIT/scoutarr1155 repos~5.6kAutomated safety check: PassNone
Extract DesignManavarya09/design-extract4.2k—~786Automated safety check: NotesMIT
Tailwind Design Systemjh941213/my-cc-harness12510 repos~4.7kAutomated safety check: PassNone

Similar skills

  • Web Style Extractor

    Lucent-Snow/style-extractor

    Extracts evidence-backed style guides and motion appendices from websites, keeping reusable visual language and stripping product-specific content.

    453 GitHub stars~3.8k tokensUpdated 7 mo ago
    Frontend & DesignAuto-check passed

  • Transitions Polish

    Jakubantalik/transitions.dev

    Audits existing UI animations against the transitions.dev motion-token scale and suggests tokens for duration, distance, scale, blur and easing.

    4.7k GitHub starsUsed in 2 repos~3.2k tokens
    Frontend & DesignAuto-check passed

  • Tailwind Design System

    SuFxGIT/scoutarr

    Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns.

    115 GitHub starsUsed in 5 repos~5.6k tokens
    Frontend & DesignAuto-check passed

  • Extract Design

    Manavarya09/design-extract

    Extract the full design language from any website URL. An agent skill from Manavarya09/design-extract.

    4.2k GitHub stars~786 tokensUpdated 3 days ago
    Frontend & DesignAuto-check: notes

  • Tailwind Design System

    jh941213/my-cc-harness

    Build scalable design systems with Tailwind CSS, design tokens, component libraries, and responsive patterns.

    125 GitHub starsUsed in 10 repos~4.7k tokens
    Frontend & DesignAuto-check passed

  • Tailwind V4 Shadcn

    ever-works/ever-works

    Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React.

    162 GitHub starsUsed in 2 repos~3.8k tokens
    Frontend & DesignAuto-check passed

Works with

Categories

Questions about Design System Analyzer

What does Design System Analyzer do?

Inspects a live website through Chrome DevTools and turns its CSS tokens, animations and hover states into a design system prompt. The agent opens a target URL through the ChromeDevTools MCP tools and checks the page for bot challenges. If a CAPTCHA or similar protection appears, it stops and asks you to solve it in the browser before going on.

When should I use Design System Analyzer?

Design System Analyzer fits situations like: capturing the visual style of an existing website as reusable design tokens; documenting a site's animations, transitions and hover states; creating a design system prompt from a reference URL; studying a reference site's typography, spacing and shadows.

How do I install Design System Analyzer in Claude Code?

Run `npx skills add NakanoSanku/OhMySkills --skill design-system-analyzer -a claude-code`. Or copy the skill folder (design-system-analyzer in NakanoSanku/OhMySkills) into .claude/skills/design-system-analyzer in your project. Claude Code loads it when a task matches its description.

How do I install Design System Analyzer in Codex?

Run `npx skills add NakanoSanku/OhMySkills --skill design-system-analyzer -a codex`. Or copy the skill folder (design-system-analyzer in NakanoSanku/OhMySkills) into .agents/skills/design-system-analyzer in your project. Codex loads it when a task matches its description.

Can I use Design System 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 NakanoSanku/OhMySkills --skill design-system-analyzer -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/design-system-analyzer, .gemini/skills/design-system-analyzer, .github/skills/design-system-analyzer and .opencode/skills/design-system-analyzer in your project.

What does Design System Analyzer need to run?

SKILL.md names no scripts, command-line tools or credentials: Design System Analyzer is instructions for the agent only. Our summary lists: The Chrome DevTools MCP server connected to a browser; Chrome started with remote debugging on port 9222 (recommended).

Does Design System 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 Design System 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. Review the folder before installing.

What licence does Design System Analyzer use?

No licence was found for Design System Analyzer or its repository. Without one, default copyright applies: ask the author before reusing or redistributing it.

How many tokens does Design System Analyzer use?

About 1.2k tokens (SKILL.md is roughly 4.9k 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 4k tokens, read only when the agent opens those files.

What are the alternatives to Design System Analyzer?

Skills that share tags, products or a category with Design System Analyzer: Web Style Extractor (Lucent-Snow/style-extractor, 453 stars), Transitions Polish (Jakubantalik/transitions.dev, 4.7k stars), Tailwind Design System (SuFxGIT/scoutarr, 115 stars) and Extract Design (Manavarya09/design-extract, 4.2k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Design System Analyzer?

NakanoSanku (a GitHub user) maintains it in NakanoSanku/OhMySkills, which has 163 GitHub stars. The repository was last updated on January 9, 2026.

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