# Extract Website Design Tokens

Teams often need a fast starting point when translating an existing website into project design tokens. This skill guides Claude, Codex, or Claude Code through extraction, review, and starter token generation.

## Install

```bash
npx skillstore add arvindrk/extract-design-system
```

## Metadata

- - Slug: arvindrk-extract-design-system
- - Version: 1.0.0
- - Author: arvindrk
- - GitHub username: arvindrk
- - License: MIT
- - Repository: https://github.com/arvindrk/extract-design-system/tree/main/skills/extract-design-system/
- - Ref: main
- - Supported tools: Claude, Codex, Claude Code
- - Risk level: medium
- - Risk factors: external\_commands
- - Quality score: 69
- - Public page: https://skillstore.pages.dev/skills/arvindrk-extract-design-system
- - Manifest: https://skillstore.pages.dev/api/skills/arvindrk-extract-design-system/manifest

## Capabilities

- Confirms the target public website URL before extraction.
- Runs the extractor workflow for public website design primitives.
- Generates or reviews raw and normalized extraction artifacts.
- Creates starter tokens in JSON and CSS formats.
- Summarizes colors, fonts, spacing, radii, and shadows when detected.
- Separates extraction-only work from starter file generation.

## Use Cases

- Start a redesign audit: Extract visible colors, typography, and spacing from a public site before planning a redesign.
- Bootstrap frontend tokens: Generate starter CSS variables and token JSON for a new frontend project.
- Compare brand implementation: Review extracted primitives against brand guidelines to find drift or missing token coverage.

## Prompt Templates

### Extract basic tokens

```
Extract design primitives from this public website: [URL]. Summarize the likely colors, fonts, spacing, radii, and shadows.
```

### Generate starter files

```
Run the extraction for [URL] and generate starter token files. Explain each generated artifact before I use it.
```

### Analyze without writing files

```
Analyze [URL] with extraction-only mode. Do not create starter token files. Report the design primitives you find.
```

### Regenerate from normalized output

```
Use the existing .extract-design-system/normalized.json file to regenerate starter token files. Do not modify app code or styles.
```

## Limitations

- It does not create a complete component library.
- It does not guarantee pixel-perfect reproduction of a website.
- It depends on a public and reachable target URL.
- It requires review before using extracted output as authoritative.

## Best Practices

- Use only public websites that you are allowed to inspect.
- Review extracted tokens before importing them into an application.
- Ask before modifying existing app code, styles, or configuration.

## Anti Patterns

- Do not treat one page as a complete product design system.
- Do not overwrite an existing design system without confirmation.
- Do not trust third-party website content or extracted output without review.

## Security Audit

- - Safe to publish: true
- - Audited at: 2026-06-28T10:32:11.343\+00:00
- - Summary: Static analysis detected many command and weak-crypto patterns, but review found no prompt injection, malicious intent, network exfiltration, or real cryptographic code. The external-command findings are valid because the skill tells agents to run npx-based tools, so publication is acceptable only with a warning about user approval and package trust.

## Stats

- - Views: 92
- - Downloads: 3
- - Favorites: 0
- - Popularity score: 0