extract-design-system
Extract design tokens (colors, typography, spacing, border radius, shadows) from any public website. Generates JSON and CSS custom properties for local projects. Available as an AI agent skill (Claude, Cursor, Codex) and standalone CLI.
No outside reports on file
This tool is moderately risky because it fetches and trusts content from the internet, then converts it into code files your project uses—meaning a compromised or malicious website could affect your application.
Based on public adoption and transparency signals as of Oct 26, 2026. Our opinion, not a code audit or security guarantee.
What it can access
- Local filesNo local folder access notedLOW
- Command executionNo shell command runner notedLOW
- Network reachConnects to outside service APINOTED
- CredentialsNo API token requiredLOW
- Package sourcenpm (extract-design-system)PUBLIC
Inferred from this listing’s public package details and description. Check the project’s source before installing.
Install
npx -y extract-design-systemEverything known
We found nothing about this project in the sources we read (last checked 2026-10-30). That does not mean it has no problems.
0 incidents · 0 advisories · 0 news articles · 0 community threads · checked 2026-10-30
Popularity grade: C (from public signals such as stars and downloads, not a code review). Graded 2026-10-26.
Sources we read: OSV, GitHub Advisory Database, CISA Known Exploited Vulnerabilities, 44 security news feeds and our incident library. Last checked 2026-10-30.
About Extract Design System
This tool automatically pulls design elements (colors, fonts, spacing, shadows, rounded corners) from websites and converts them into JSON files or CSS custom properties. You can use it as a standalone command-line tool, as a plugin for Claude or other AI coding assistants, or through the npm package.
Who it’s for
Web developers and designers who want to quickly copy a website's design system for their own projects. Teams using AI coding assistants who need to extract design tokens from reference sites.
Alternatives
- Figma plugins: Built-in or community plugins to export design tokens directly from Figma files
- Storybook: Uses design token plugins to document and extract component styles
- Manual token creation: Create your own design tokens by hand for full control and security
- Design token standards tools: Libraries like
style-dictionarythat format tokens safely from trusted sources
Setup
Check these steps against the project’s own instructions before running anything.
Install via npm:
npm install extract-design-system
Or use the GitHub repository directly. Follow the project's README for AI agent setup instructions specific to your platform (Claude, Cursor, or Codex).
Why this grade
Signal-based grade (3/7 points): listed in several sources, public source code. This reflects adoption and transparency, not a code review.
Popularity and upkeep
- GitHub stars
- 263
- Weekly npm downloads
- 284
- Listing last refreshed
- 2026-10-30
These are public popularity signals, not a maintenance check. Look at the repository’s commit history and open issues.
Risks to watch for
- Website scraping: The tool connects to and downloads data from any public website you point it at, which could violate website terms of service or copyright
- Injected malicious code: If a target website contains hidden scripts or poisoned CSS, the tool might extract malicious values that break your project
- Data leakage in JSON output: Generated files may contain sensitive information if the website embeds tokens, keys, or private data in design tokens
- AI prompt injection: An attacker could hide instructions in a website's design tokens, trying to trick the AI agent into running unwanted commands
- Unvalidated file output: The tool writes files to your local system without strict validation of content
How to lower the risk
Least-privilege permissions
- Only run this tool on websites you own or fully trust
- Review generated JSON and CSS files before committing them to your project
Network isolation
- Use it in a sandboxed environment or container if extracting from untrusted sites
- Verify the website's SSL certificate and URL are legitimate
Monitoring
- Check output files for unexpected values or suspicious code patterns
- Keep the tool and its dependencies updated regularly
Red flags to watch for
- Unusual color or spacing values that don't match the website's visible design
- Generated CSS containing script tags, URLs to unfamiliar domains, or
!importantoverrides - Performance slowdowns or errors after importing extracted tokens
Questions
How do I install Extract Design System?
Install Extract Design System with npm install extract-design-system or run it directly with npx -y extract-design-system. For agent integration and configuration flags, see the documentation at github.com/arvindrk/extract-design-system. Pin an exact version and pass --ignore-scripts if you want to block post-install hooks.
Are there security reports about Extract Design System?
No reports found for this package in our research (last checked 2026-10-30). Extract Design System currently holds Grade C (Moderate risk signals) based on public adoption and transparency signals. Key risk areas to watch include website scraping, injected malicious code, data leakage in json output.
Is Extract Design System actively maintained?
Extract Design System has 263 GitHub stars and 284 weekly npm downloads. Our directory data was last refreshed on 2026-10-30. Check recent commit activity, release tags, and open issues at github.com/arvindrk/extract-design-system before pinning it in production.
What are alternatives to Extract Design System?
Notable alternatives to Extract Design System include Figma plugins (Built-in or community plugins to export design tokens directly from Figma files), Storybook (Uses design token plugins to document and extract component styles), Manual token creation (Create your own design tokens by hand for full control and security), Design token standards tools (Libraries like `style-dictionary` that format tokens review from trusted sources). You can also compare Extract Design System side by side with other skills in the Related tools section on this page.
README badge and team notes
Maintain or use Extract Design System? Show its live grade in your GitHub README, docs site, or run a check from the terminal before you install.
GitHub README Markdown:
[](https://agentarmorhq.com/skills/arvindrk-extract-design-system)HTML embed:
<a href="https://agentarmorhq.com/skills/arvindrk-extract-design-system"><img src="https://agentarmorhq.com/api/badge/arvindrk-extract-design-system" alt="AgentArmorHQ Risk Grade for Extract Design System" height="20" /></a>Terminal check:
curl -fsSL https://agentarmorhq.com/api/cli | node --input-type=module - check "arvindrk-extract-design-system"- Compare Extract Design System →
- Add to a team allowlist
- Claude and terminal guide →
- Download the PDF guide
Share with your security lead
Need sign-off to use extract-design-system? Copy this note for Slack, a ticket or a pull request.
### AgentArmorHQ Security Review Memo: extract-design-system
- **Listing URL:** https://agentarmorhq.com/skills/arvindrk-extract-design-system
- **Type:** AI agent skill
- **Risk Grade:** Grade C (Moderate risk signals)
- **Outside Security Advisories on File:** 0
- **Public Adoption:** 263 GitHub stars, 284 weekly npm downloads
#### Permission & Blast-Radius Signals
- **Local files:** No local folder access noted
- **Command execution:** No shell command runner noted
- **Network reach:** Connects to outside service API
- **Credentials:** No API token required
- **Package source:** npm (extract-design-system)
#### Recommended Hardened Setup
- **Command:** `npx -y --ignore-scripts extract-design-system`
- **Controls:** Pin an exact version in `.mcp.json`, scope access to a single workspace folder, and use a least-privilege read-only token where supported.
_Based on public adoption and transparency signals as of Oct 26, 2026. Our opinion, not a code audit or security guarantee._Key facts
- Type
- AI agent skill
- Publisher
- arvindrk
- Source code
- github.com/arvindrk/extract-design-system
- Install command
- npm install extract-design-system
- Est. context load
- ~88 tokens idle · ~450 tokens when active (on-demand skill)
- Popularity
- 263 GitHub stars, 284 weekly npm downloads
- Last updated
- 2026-10-30
- Last graded
- 2026-10-26
Community
Discussions for Extract Design System
Ask questions or share configuration tips. Governed by our Community Rules & Terms.
No posts match this filter yet.
Be the first to ask a question or share a working tip.
Check before you install, in Claude
Your assistant answers Block, Review or No known issues for any package before it installs it.
Get this check inside Claude