skills.rest
stringztechnologies
stringztechnologiesOFFICIAL
Explore all skills by this author →
GitHub

cloudflare-site-crawler

Crawl websites to extract design tokens from CSS files.

Updated Mar 13, 2026
Search Tags:#design tokens#web scraping#cloudflare#css extraction#website analysis#brand matching
One-click install
npx skills add https://github.com/stringztechnologies/stringz-framework --skill cloudflare-site-crawler
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: cloudflare-site-crawler
Source: https://github.com/stringztechnologies/stringz-framework/tree/main/skills/cloudflare-site-crawler
Command: npx skills add https://github.com/stringztechnologies/stringz-framework --skill cloudflare-site-crawler

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill automates the extraction of design tokens (colors, fonts, spacing, shadows, border-radius) from live websites, enabling precise brand matching and design system analysis.

Core Features & Use Cases

  • CSS Token Extraction: Parses CSS files to identify and extract design-related properties.
  • Visual Brand Verification: Crucially, it emphasizes human or AI judgment to confirm dominant brand colors against raw CSS data, preventing misinterpretations.
  • Use Case: You need to replicate the exact look and feel of a client's existing marketing website for a new web application. This skill will extract all the CSS variables, colors, fonts, and radii, and guide you through a visual verification to ensure brand consistency.

Quick Start

Run the cloudflare-site-crawler skill to extract design tokens from https://example.com.

Frequently Asked Questions about cloudflare-site-crawler

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

FAQPage Schema
How do I extract design tokens like colors and fonts from a live website's CSS?▼

Visual brand verification confirms dominant brand colors against raw CSS data, preventing misinterpretations during website analysis. This step ensures the extracted design tokens accurately reflect the true visual appearance rather than just raw stylesheet values.

Can I extract CSS design tokens if the target website blocks web scraping?▼

Yes, you can extract CSS design tokens from blocked sites because the Skill supports fallback strategies for web scraping. It also offers optional Cloudflare Browser Rendering API integration to handle access restrictions and successfully parse the required stylesheets.

Do I need the Cloudflare Browser Rendering API to perform CSS extraction and website analysis?▼

You do not need the Cloudflare Browser Rendering API for CSS extraction, as it is an optional integration. Standard parsing handles basic website analysis, while the API serves as a fallback strategy for sites that block direct web scraping attempts.

What's the best way to replicate an existing website's exact look and feel for a new web application?▼

The best way to replicate a website's look and feel is extracting its design tokens, including spacing, shadows, and border-radius. This Skill parses the live CSS and guides visual verification to ensure brand consistency before you build the new application.

Related Skills

Explore More Design & Creative Skills→
jscraikjscraik
8

cf-crawl

Initiate, monitor, and export website crawls via the Cloudflare Browser Rendering API.

Community
Advanced
ovachieverovachiever
52

ui-design-system

Generate design tokens from brand colors in JSON, CSS, or SCSS.

Community
Advanced
leroylim20leroylim20

agent-browser

Automate web browsing, form filling, and data extraction via headless browser navigation.

Community
Intermediate
Ben1821Ben1821

design-system

Generate design tokens and component specifications from JSON configurations.

Community
Intermediate