extract-design

extract-design is a skill in Manavarya09/design-extract, last changed 19 Oct 2026. It can run shell commands, reach the network and pre-approve tools — read the findings before installing. Our pattern check found 1 item to review at commit d2c28da on 27 Oct 2026.

Pattern check: 1 item to review · commit d2c28da · 27 Oct 2026

Install

From the author

Extract the full design language from any website URL. Produces 8 output files including AI-optimized markdown, visual HTML preview, Tailwind config, React theme, shadcn/ui theme, Figma variables, W3C design tokens, and CSS variables. Also runs WCAG accessibility scoring. Use when user says 'extract design', 'get design system', 'design language', 'design tokens', 'what colors/fonts does this site use', 'turn this URL into design tokens', 'make a Tailwind theme from this site', or '/extract-design'. Do not use for building a new UI from scratch unless the user first wants to extract an existing website's design language.

Licence: MIT
Repo stars: 4.4k
Folder last changed: 19 Oct 2026 (opens in a new tab)
Publisher: Manavarya09
Files: 1 file
Checked: d2c28da (opens in a new tab) · 27 Oct 2026

Install

Each tab says whether it installs commit d2c28da, the one we checked, or the latest version.

No tab for your agent? Use Any agent for OpenCode, Goose, Windsurf (Devin Desktop), Zed, Roo Code, Factory Droid, Junie, Amp and Antigravity, and Claude Code for Cline. Kiro needs the folder copied by hand.

Pinned to commit d2c28da, the one we checked.

From your project's root folder:

tmp="$(mktemp -d)" &&
  git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/Manavarya09/design-extract.git "$tmp" &&
  git -C "$tmp" fetch -q --depth 1 origin d2c28da8aae3098a7f7dc02fb4355f3f803edb6c &&
  git -C "$tmp" sparse-checkout set -- skills/extract-design &&
  git -C "$tmp" checkout -q d2c28da8aae3098a7f7dc02fb4355f3f803edb6c &&
  mkdir -p .claude/skills &&
  mkdir .claude/skills/extract-design &&
  cp -R "$tmp"/skills/extract-design/. .claude/skills/extract-design/ &&
  rm -rf "$tmp"

If Claude Code was already running and this created the skills folder, run /reload-skills.

Or install the designlang plugin it ships in. Installs the latest version, not the one we checked. Installs everything in the plugin, including any hooks, MCP servers and scripts our check doesn't cover.

claude plugin marketplace add Manavarya09/design-extract --scope project &&
  claude plugin install designlang@designlang --scope project

Claude Code docs

Pinned to commit d2c28da, the one we checked.

Skills in the Claude apps belong to your account rather than to a project.

Make extract-design.zip, with the skill folder at the top level:

tmp="$(mktemp -d)" &&
  git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/Manavarya09/design-extract.git "$tmp" &&
  git -C "$tmp" fetch -q --depth 1 origin d2c28da8aae3098a7f7dc02fb4355f3f803edb6c &&
  git -C "$tmp" sparse-checkout set -- skills/extract-design &&
  git -C "$tmp" checkout -q d2c28da8aae3098a7f7dc02fb4355f3f803edb6c &&
  out="$(mktemp -d)" &&
  cp -R "$tmp"/skills/extract-design "$out"/extract-design &&
  (cd "$out" && zip -qr - extract-design) > extract-design.zip &&
  rm -rf "$tmp" "$out"

In Claude, open Customize > Skills, select +, then + Create skill > Upload a skill, and choose extract-design.zip.

On Free, Pro and Max plans, turn on Code execution and file creation (Create and edit files in newer settings) under Settings > Capabilities.

Claude apps docs

Pinned to commit d2c28da, the one we checked.

From your project's root folder:

tmp="$(mktemp -d)" &&
  git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/Manavarya09/design-extract.git "$tmp" &&
  git -C "$tmp" fetch -q --depth 1 origin d2c28da8aae3098a7f7dc02fb4355f3f803edb6c &&
  git -C "$tmp" sparse-checkout set -- skills/extract-design &&
  git -C "$tmp" checkout -q d2c28da8aae3098a7f7dc02fb4355f3f803edb6c &&
  mkdir -p .agents/skills &&
  mkdir .agents/skills/extract-design &&
  cp -R "$tmp"/skills/extract-design/. .agents/skills/extract-design/ &&
  rm -rf "$tmp"

Codex picks up new skills on its own; restart it if this one does not appear.

Codex docs

Pinned to commit d2c28da, the one we checked.

From your project's root folder:

tmp="$(mktemp -d)" &&
  git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/Manavarya09/design-extract.git "$tmp" &&
  git -C "$tmp" fetch -q --depth 1 origin d2c28da8aae3098a7f7dc02fb4355f3f803edb6c &&
  git -C "$tmp" sparse-checkout set -- skills/extract-design &&
  git -C "$tmp" checkout -q d2c28da8aae3098a7f7dc02fb4355f3f803edb6c &&
  mkdir -p .cursor/skills &&
  mkdir .cursor/skills/extract-design &&
  cp -R "$tmp"/skills/extract-design/. .cursor/skills/extract-design/ &&
  rm -rf "$tmp"

Cursor docs

Pinned to commit d2c28da, the one we checked.

From your project's root folder:

tmp="$(mktemp -d)" &&
  git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/Manavarya09/design-extract.git "$tmp" &&
  git -C "$tmp" fetch -q --depth 1 origin d2c28da8aae3098a7f7dc02fb4355f3f803edb6c &&
  git -C "$tmp" sparse-checkout set -- skills/extract-design &&
  git -C "$tmp" checkout -q d2c28da8aae3098a7f7dc02fb4355f3f803edb6c &&
  mkdir -p .github/skills &&
  mkdir .github/skills/extract-design &&
  cp -R "$tmp"/skills/extract-design/. .github/skills/extract-design/ &&
  rm -rf "$tmp"

In a running Copilot CLI session, run /skills reload.

Or install it with gh skill, which also installs the commit we checked. Needs GitHub CLI 2.90 or later.

gh skill install Manavarya09/design-extract skills/extract-design/SKILL.md@d2c28da8aae3098a7f7dc02fb4355f3f803edb6c --agent github-copilot --scope project

Copilot & VS Code docs

Pinned to commit d2c28da, the one we checked.

From your project's root folder:

tmp="$(mktemp -d)" &&
  git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/Manavarya09/design-extract.git "$tmp" &&
  git -C "$tmp" fetch -q --depth 1 origin d2c28da8aae3098a7f7dc02fb4355f3f803edb6c &&
  git -C "$tmp" sparse-checkout set -- skills/extract-design &&
  git -C "$tmp" checkout -q d2c28da8aae3098a7f7dc02fb4355f3f803edb6c &&
  mkdir -p .gemini/skills &&
  mkdir .gemini/skills/extract-design &&
  cp -R "$tmp"/skills/extract-design/. .gemini/skills/extract-design/ &&
  rm -rf "$tmp"

In a running session, run /skills reload.

Or use Gemini CLI’s own installer. Installs the latest version, not the one we checked.

gemini skills install https://github.com/Manavarya09/design-extract.git --path skills/extract-design --scope workspace

Gemini CLI docs

Pinned to commit d2c28da, the one we checked.

Codex, Cursor, Copilot, VS Code, Gemini CLI, OpenCode, Goose, Amp and Zed all read .agents/skills; Claude Code and Kiro list only their own folders.

From your project's root folder:

tmp="$(mktemp -d)" &&
  git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/Manavarya09/design-extract.git "$tmp" &&
  git -C "$tmp" fetch -q --depth 1 origin d2c28da8aae3098a7f7dc02fb4355f3f803edb6c &&
  git -C "$tmp" sparse-checkout set -- skills/extract-design &&
  git -C "$tmp" checkout -q d2c28da8aae3098a7f7dc02fb4355f3f803edb6c &&
  mkdir -p .agents/skills &&
  mkdir .agents/skills/extract-design &&
  cp -R "$tmp"/skills/extract-design/. .agents/skills/extract-design/ &&
  rm -rf "$tmp"

Or use the skills CLI from skills.sh. Installs the latest version, not the one we checked. The skills CLI reports installs to skills.sh unless you set DISABLE_TELEMETRY=1.

npx skills@1.7.4 add Manavarya09/design-extract --skill extract-design

Agent Skills docs

What it can touch

From the files and frontmatter at commit d2c28da. This is how much a skill can do, not whether it is risky.

What it can touch: Shell, network or credentials

Runs shell commands
Its instructions or files give the agent commands to run on your computer.
Reaches the network
It sends or fetches data over the internet, for example with curl, an HTTP library or a package install.
Pre-approves tools
Its allowed-tools field lists tools the agent may use without asking you first, in agents that honour it.
SKILL.md:4

Pattern check

Pattern check: 1 item to review · commit d2c28da · 27 Oct 2026

R34 · HighBroad tools pre-approved in allowed-tools
SKILL.md:4 (opens in a new tab)
```
allowed-tools: Bash, Read, Write, Glob
```

We checked every text file in this skill, at commit d2c28da on 27 Oct 2026, against 45 published patterns such as download-and-run commands, hidden text and credential access. We don't run the skill, we don't read the web pages it points to, and we can't judge everything its instructions might lead an agent to do. In published tests, pattern checks like this one missed most malicious skills. Read the skill before you install it — especially anything it asks you to download or run.

How the check works Report an incorrect finding

Format check

Each agent reads SKILL.md a little differently. We check the file against each one's published rules; we don't run the skill in any agent.

Agent Skills specPasses
The open format from agentskills.io, held to what the strictest agents enforce, so one folder loads everywhere.
- Note
  There is no license field, so readers can't tell whether they may reuse the skill. O2
  Fix: Add license: with an SPDX name such as MIT or Apache-2.0, or the name of a bundled licence file.
Claude CodePasses
Claude apps & API uploadPasses
Uploading to claude.ai or the Claude API, or packaging with Anthropic's script, accepts only the six spec fields and stops on anything else.
- Note
  The description is 628 characters. The claude.ai Help Center says 200 at most, though Anthropic's API docs and validator allow 1,024. D4
  Fix: If the claude.ai upload refuses it, trim the description to 200 characters.
OpenAI (Codex & API)Passes
VS Code & CopilotPasses

SKILL.md

Files

1 file

Path	Size
SKILL.md (opens in a new tab)	3.3 KB