skills.rest
aemdemos
aemdemosOFFICIAL
Explore all skills by this author →
GitHub

Get General Styling — Design System Extraction Skill

Extract site-wide styling and design tokens from a live website.

Updated Mar 16, 2026
Search Tags:#typography#front-end#styling#migration#colors#design-system#css-extraction
One-click install
npx skills add https://github.com/aemdemos/summit-dsg --skill get-general-styling-design-system-extraction-skill
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Get General Styling — Design System Extraction Skill
Source: https://github.com/aemdemos/summit-dsg/tree/main/.agents/skills/get-general-styling
Command: npx skills add https://github.com/aemdemos/summit-dsg --skill get-general-styling-design-system-extraction-skill

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill performs a complete extraction of a source website's global design system so migrated pages render against the original visual foundation rather than generic defaults, preventing visual regressions during migration.

Core Features & Use Cases

  • Comprehensive CSS harvesting: discovers and downloads external stylesheets, captures inline styles, and assembles a raw CSS corpus for analysis.
  • Computed-style sampling & variable resolution: collects computed styles, detects runtime CSS custom properties, resolves var() references, and detects CJK font needs.
  • Token and artifact generation: extracts color palette, typography, spacing, breakpoints, borders, transitions, maps tokens to EDS, and generates validated styles/styles.css and styles/fonts.css for migration previews.
  • Use Case: run at the start of any site migration to produce a verified design token set that front-end engineers and designers can use to recreate consistent components and page templates.

Quick Start

Run the Get General Styling skill on the source site URL to extract CSS, variables, colors, typography, spacing, breakpoints, and produce validated EDS-aligned stylesheets for migration.

Frequently Asked Questions about Get General Styling — Design System Extraction Skill

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

FAQPage Schema
Can I extract CSS variables and computed styles from a site without manual inspection?▼

Yes, you can extract CSS variables and computed styles automatically. The skill discovers external stylesheets, captures inline styles, resolves var() references, and detects CJK font needs to build a complete raw CSS corpus for analysis.

What is design system mapping and when do I need it for site migration?▼

Design system mapping extracts site-wide styling tokens to establish a visual foundation, preventing regressions during migration. You need it at the start of any site migration to produce a verified token set for recreating consistent components and templates.

How do I generate EDS-aligned stylesheets from extracted CSS?▼

Generate EDS-aligned stylesheets by mapping extracted color palettes, typography, and spacing tokens. The process outputs validated styles/styles.css and styles/fonts.css artifacts specifically formatted for migration previews and front-end reimplementation.

Does this CSS extraction approach work with external stylesheets and inline styles?▼

Yes, comprehensive CSS harvesting discovers and downloads external stylesheets while capturing inline styles. This assembles a complete raw CSS corpus, ensuring all global styling is accounted for before generating migration artifacts.

Why do migrated pages lose their original styling and how can I prevent it?▼

Migrated pages lose styling when rendered against generic defaults instead of the original visual foundation. Prevent visual regressions by extracting site-wide design tokens and generating validated stylesheets before executing the migration.

Related Skills

Explore More Design & Creative Skills→
colbymchenrycolbymchenry
19

frontend-audit

Compare live website screenshots against design mockups using image differencing and CSS style checks.

Community
Intermediate
lintendolintendo
152

ai-studio-project-converter

Convert Google AI Studio React projects into repository page component format.

Community
Intermediate
AgLyx3AgLyx3

ui-design-system

Generate design tokens from a brand color and export them in JSON, CSS, and SCSS.

Community
Advanced
HermeticOrmusHermeticOrmus
89

browser-devtools-mcp

Inspect CSS, computed styles, and element properties via Chrome DevTools MCP.

Community
Advanced