extract-design
Use this skill when the user wants to extract a webpage's design language into a reusable HTML style reference file, including typography, colors, spacing, surfaces, components, states, themes, motion, code-block styles, background atmosphere, decorative motifs, and art direction. The output should be a universal style specimen HTML for future AI-generated pages, not a 1:1 copy of the original page. Extracted style files are saved to the skill's own `assets/theme/` directory, never to the user's project.
Best for design system extractionWorks with GitHub
⌘source
- author
@LeoYeAI- language
- Python
★2kstars
306forks
May 6, 2026
✦overview.md
Key Features
- ·Extract typography, colors, spacing, surfaces
- ·Output universal style specimen HTML
- ·Save to skill's own assets/theme directory
- ·Use source domain/project as file prefix
- ·Structured manifest + HTML specimen
- ·Not a 1:1 copy, reusable style reference
Use Cases
- →Capture design language from an existing webpage for future AI-generated pages
- →Standardize styles across multiple projects by extracting reference files
- →Document a site's visual design system for team reference
- →Create a basis for consistent themed output in multi-page projects
Best for
- ✓design system extraction
- ✓multi-page AI generation
- ✓style standardization
Not ideal for
- !exact page replication
- !user project file creation
- !real-time style transfer
FAQs
name
extract-design
description
Use this skill when the user wants to extract a webpage's design language into a reusable HTML style reference file, including typography, colors, spacing, surfaces, components, states, themes, motion, code-block styles, background atmosphere, decorative motifs, and art direction. The output should be a universal style specimen HTML for future AI-generated pages, not a 1:1 copy of the original page. Extracted style files are saved to the skill's own `assets/theme/` directory, never to the user's project.
Extract Design
Output Location
CRITICAL: All extracted style files MUST be saved to the skill's own assets/theme/ directory — never to the user's project directory, never to a relative path from the current working directory.
Before writing any output file, resolve the skill directory by running:
Glob pattern: **/skills/extract-design/SKILL.md
The directory containing that SKILL.md file is SKILL_DIR. All output goes under SKILL_DIR/assets/theme/.
Output files use the source domain or project name as a prefix:
SKILL_DIR/assets/theme/
├── {name}-style-manifest.json # Structured style manifest
└── {name}-style-specimen.html # Universal style specimen HTML
Examples (where SKILL_DIR is whatever path the Glob resolved):
{SKILL_DIR}/assets/theme/ampcode-style-manifest.json{SKILL_DIR}/assets/theme/ampcode-style-specimen.html{SKILL_DIR}/assets/theme/vercel-style-manifest.json{SKILL_DIR}/assets/theme/vercel-style-specimen.html
Create the assets/theme/ directory if it does not exist before writing.
Reference Files
$install
1-click copynpx skills add LeoYeAI/openclaw-master-skills --skill extract-designSafety assessment
★
Clarity score
How clear and easy to understand the SKILL.md instructions are, rated from 1 to 5.
4/ 5
very goodClear and well structured, with only minor parts that might need a second read.
◎
Actionability score
How directly an agent can act on the SKILL.md instructions, rated from 1 to 5.
4/ 5
highMostly actionable with clear steps; only a few small gaps remain.