skills.rest
HotspotVPN
HotspotVPNCOMMUNITY
Explore all skills by this author →
GitHub

design-reference-scraper

Extract design-system patterns from reference sites into standardized design tokens.

Updated Aug 27, 2026
Search Tags:#ui-design#design-system#pattern-analysis#competitor-analysis#token-extraction#design-reference
One-click install
npx skills add https://github.com/HotspotVPN/Nest_Match_UAE --skill design-reference-scraper
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-reference-scraper
Source: https://github.com/HotspotVPN/Nest_Match_UAE/tree/main/.claude/skills/design-reference-scraper
Command: npx skills add https://github.com/HotspotVPN/Nest_Match_UAE --skill design-reference-scraper

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designers and product teams lack a consistent method to study external design patterns and convert them into actionable design tokens, slowing UI iterations.

Core Features & Use Cases

  • Pattern extraction across colour, typography, spacing, layout, and components from reference sites.
  • Multi-site comparison to identify common patterns and site-specific choices.
  • Output design tokens in a standardized format consumable by NestMatch design tooling.

Quick Start

Provide two reference URLs to analyze and generate a design tokens report.

Frequently Asked Questions about design-reference-scraper

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I extract design tokens from reference websites?▼

To extract design tokens from reference sites, provide two listing or browse page URLs to generate a standardized report of color, typography, spacing, layout, and component patterns.

What is design-system pattern analysis for UI benchmarking?▼

Design-system pattern analysis identifies and documents common visual structures across multiple reference sites, enabling structured benchmarking for UI proposals.

Can I compare UI design patterns across multiple competitor sites?▼

Yes, you can compare UI design patterns across multiple competitor sites to identify common industry standards and site-specific design choices.

How do I convert extracted design patterns into a standardized format?▼

The skill converts extracted design patterns into a standardized design-token format consumable by NestMatch design tooling, ensuring consistent UI iterations.

Does the design reference scraper work with any type of website layout?▼

The design reference scraper specifically applies to listing and browse pages across multiple reference sites, rather than supporting any arbitrary website layout.

Related Skills

Explore More Design & Creative Skills→
CitedyCitedy
2

anycrawl-tiktok-scraper

Extract structured data from public TikTok URLs via the AnyCrawl Scrape API.

Official
Intermediate
alongor666alongor666
1

css-design-tokens

Define CSS design tokens for colors, spacing, typography, and theming.

Community
Basic
hi-yuki-922hi-yuki-922
1

i-extract

Extract reusable UI components and design tokens into a centralized design system.

Community
Intermediate
JeremiahEllingtonJeremiahEllington

design-consultation

Plan and deliver a complete design system with DESIGN.md and preview pages.

Community
Advanced