skills.rest
adamtpang
adamtpangCOMMUNITY
Explore all skills by this author →
Website𝕏@adamtpangGitHub

sitegrab

Extracts a website's design system from its homepage HTML, stylesheets, and sitemap.

Updated Jun 16, 2026
Search Tags:#typography#design system#color palette#web scraping#sitemap#competitive research#css analysis
One-click install
npx skills add https://github.com/adamtpang/summon.company --skill sitegrab-adamtpang
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sitegrab
Source: https://github.com/adamtpang/summon.company/tree/main/skills/sitegrab
Command: npx skills add https://github.com/adamtpang/summon.company --skill sitegrab-adamtpang

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve? Understanding why a well-crafted website feels polished requires manually digging through its HTML and CSS. This Skill automates that study by downloading a site's homepage, stylesheets, and sitemap, then extracting its design system into a structured notes file. ## Core Features & Use Cases - Design System Extraction: Pulls fonts, color palettes, type scales, border radii, and CSS custom properties from a site's stylesheets into DESIGN-NOTES.md. - Site Inventory: Saves the raw homepage HTML, combined CSS, and sitemap page list for deeper manual review. - Use Case: You admire a competitor's landing page and want to improve your own project. Run the grab, read the extracted type scale and color restraint patterns, then apply 3-5 concrete lessons to your own stylesheets without copying any content. ## Quick Start Study the design of https://example.com and tell me what makes it feel high quality and how to apply those lessons to my project.

Frequently Asked Questions about sitegrab

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

FAQPage Schema
How do I extract a website's color palette and fonts from its CSS?▼

Run the sitegrab script with the target URL to download the homepage and all linked stylesheets, then it counts font-family, color, and font-size declarations by frequency. The results are written to DESIGN-NOTES.md ranked by usage.

How to analyze what makes a competitor's landing page design good?▼

Grab the site's HTML, CSS, and sitemap with the script, then read the extracted type scale, spacing rhythm, and color restraint patterns. Apply the structural lessons to your own project files without copying content, branding, or imagery.

Does this website scraper work on JavaScript-heavy sites?▼

The static grab only fetches raw HTML and CSS, so it misses DOM rendered by client-side JavaScript. For JS-heavy sites, the documentation suggests the Firecrawl MCP for rendered scrapes, which requires your own API key.

What are the limitations of static HTML design extraction?▼

It only captures the homepage, linked stylesheets, and sitemap, with no crawling beyond those resources per run. Dynamically injected styles, rendered content, and interactive states are not captured without a rendering service.

Do I need an API key to scrape a website's design system?▼

No API key is needed for the core script, which uses plain Node.js fetch with no external dependencies. An API key is only required if you optionally upgrade to Firecrawl for rendered scraping of JavaScript-heavy pages.

Related Skills

Explore More Design & Creative Skills→
TheGoat395TheGoat395
117

premium-visual-reference-library

Access curated visual references for website design inspiration.

Community
Advanced
v1nizxv1nizx

stitch::extract-design-md

Extract color palettes, typography scales, and component styling patterns from frontend source code.

Community
Advanced
eddmanneddmann
2

playwright

Render dynamic web pages with Playwright to capture HTML, text, and screenshots.

Community
Intermediate
dereknguyen269dereknguyen269

seo-firecrawl

Crawl, map, and scrape websites via Firecrawl MCP for SEO audits.

Community
Advanced