skills.rest
oobagi
oobagiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

scrape-design

Extract a live website's visual identity into markdown design documents.

Updated Aug 23, 2026
Search Tags:#typography#design-system#web-design#color-palette#layout-analysis#design-documentation#design-scrape
One-click install
npx skills add https://github.com/oobagi/jflow --skill scrape-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: scrape-design
Source: https://github.com/oobagi/jflow/tree/main/skills/scrape-design
Command: npx skills add https://github.com/oobagi/jflow --skill scrape-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Scrape a live website to generate a comprehensive design specification document detailing colors, typography, spacing, layout, components, and design philosophy — enough information to rebuild the site's visual identity and structure without viewing the original.

Core Features & Use Cases

  • Gather a full design system snapshot from a live site, including color palettes, typography stacks, spacing scales, layout patterns, and component inventory.
  • Produce a rebuild-ready documentation package in docs/design/ with overview, colors, typography, spacing, effects, layout, components, navigation, media, and identity documents.
  • Useful for redesigns, design handoffs, and design system creation for marketing, product, or documentation sites.

Quick Start

Use a live website URL to generate a complete design dossier and write it to docs/design/.

Frequently Asked Questions about scrape-design

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

FAQPage Schema
How do I extract a website's design system from a live URL?▼

To extract a website's design system, provide a live URL to generate a comprehensive design dossier covering colors, typography, spacing, layout, components, and design philosophy into markdown documents.

Can I generate a design specification document for rebuilding a site?▼

Yes, you can generate a design specification document that captures a site's visual identity and structure, providing enough information to rebuild the site without needing to view the original.

What is included in a website design documentation package?▼

A website design documentation package includes markdown documents and assets for overview, colors, typography, spacing, effects, layout, components, navigation, media, and identity, suitable for design handoffs.

Does this work for scraping design systems from product and marketing sites?▼

Yes, this works for scraping design systems from marketing, product, and documentation sites, capturing a full snapshot of color palettes, typography stacks, spacing scales, and component inventory.

What is the best way to document an existing website's visual identity for a redesign?▼

The best way to document an existing website's visual identity for a redesign is to scrape the live site, generating a structured markdown package that details its color palettes, typography, and layout patterns.

Related Skills

Explore More Design & Creative Skills→
imehrimehr

design-extraction

Extract design tokens, components, and assets from a live website into a validated design system.

Community
Advanced
guilhermemarketingguilhermemarketing
59

figma

Extract design context, assets, and style tokens from Figma MCP.

Community
Advanced
xiaoquqixiaoquqi

popular-web-designs

Generate HTML/CSS boilerplate from design-system templates and CSS patterns.

Community
Advanced
chlmmchlmm

create-user-skill

Generate instructional guides and templates for manually operated tools and workflows.

Community
Basic