visual-design-system-extractor

Installation
SKILL.md

Visual Design System Extractor

Turn visual references into one parser-valid YAML design system whose every claim traces back to something visible, and whose every selected typeface is a Google Fonts family the live catalog ranks as rarely used at the moment of the run.

The gates need a terminal, a YAML parser, and network access to the live font catalog. Run every command from this skill directory, since all paths are relative to it. Commands that parse YAML fetch the parser through uv; the font commands need no third-party package, so they run under plain python3. The rendering gate needs a browser, which uv run --no-project --with playwright supplies. Check the whole package with these five, each of which must exit 0: python3 -m unittest discover -s scripts/tests -p 'test_*.py', python3 scripts/validate_skill.py ., python3 scripts/lint_writing.py ., python3 scripts/check_code_rules.py ., python3 scripts/check_evals.py ..

Which commands does this skill accept?

Interpret a plain request with an attached reference or a URL as extract.

Command Result
help Show this table and the current schema version.
extract <refs> Produce the full YAML design system from the supplied references.
fonts <brief> Return ranked rare Google Fonts candidates without a full extraction.
preview <file> Render, screenshot, and judge a document without extracting again.
validate <file> Run the schema and font gates against an existing extraction.
maintain <change> Edit this package under the test-first rules below.
Installs
678
GitHub Stars
2
First Seen
Jul 25, 2026
visual-design-system-extractor — srinitude/skills