skills.rest
rodrigo-altissimo
rodrigo-altissimoCOMMUNITY
Explore all skills by this author →
GitHub

design-md

Extract a Google-spec DESIGN.md from a public website URL via static HTML/CSS analysis.

Updated May 6, 2025
Search Tags:#drift-detection#design-system#token-extraction#design-md#css-analysis#web-documentation
One-click install
npx skills add https://github.com/rodrigo-altissimo/qiartificial --skill design-md-rodrigo-altissimo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/rodrigo-altissimo/qiartificial/tree/main/design-md
Command: npx skills add https://github.com/rodrigo-altissimo/qiartificial --skill design-md-rodrigo-altissimo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires axios, cheerio, js-yaml, turndown, yaml, @google/design.md, and includes scripts (resource) components.

What problem does it solve?

It saves design system teams from manually reverse-engineering a website’s visual tokens and structure by turning a live public URL into a structured Google-spec DESIGN.md using static HTML/CSS analysis (no headless browser).

Core Features & Use Cases

  • Static URL → Google-spec DESIGN.md: Extracts tokens and generates a spec-compliant DESIGN.md suitable for design system documentation.
  • Evidence-rich tokenization: Produces machine-readable token artifacts (like tokens.json) and provenance/confidence signals for traceability.
  • Optional drift checking: Compares a newly extracted output against an existing local DESIGN.md to report alignment changes.

Quick Start

Run it with a public site URL: say “Extract a DESIGN.md from https://www.anthropic.com/”.

Frequently Asked Questions about design-md

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

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

You extract a design system specification by statically fetching and analyzing a public website URL's HTML/CSS to detect color, typography, spacing, shadow, and motion tokens, then generating a structured DESIGN.md file.

What is the best way to generate a DESIGN.md file without using a headless browser?▼

Generating a DESIGN.md without a headless browser is achieved through static HTML/CSS analysis combined with a single LLM grounding step, producing spec-compliant design documentation while avoiding heavy browser overhead.

Can I check if my local design system documentation has drifted from the live site?▼

Yes, you can check for design system documentation drift by running the extraction in drift mode, which compares a newly extracted output against an existing local DESIGN.md file to report alignment changes.

Does design token extraction require Node 18 or specific dependencies?▼

Design token extraction requires Node 18+ and relies on dependencies like axios, cheerio, and js-yaml to fetch and parse static assets, ensuring valid YAML-frontmatter output without needing a headless browser environment.

How do I produce machine-readable design tokens from a public website?▼

You produce machine-readable design tokens from a public website by extracting CSS properties into a tokens.json artifact, which includes provenance and confidence signals for traceability alongside the final DESIGN.md documentation.

Related Skills

Explore More Design & Creative Skills→
kevinnftkevinnft
13

web-scraping

Extract structured data from static HTML, JS-rendered pages, and hybrid sites.

Community
Intermediate
alexandremendoncaalvaroalexandremendoncaalvaro
728

ad-design

Bootstrap DESIGN.md from design tokens into YAML frontmatter and Markdown rationale.

Community
Advanced
thompson0012thompson0012
28

design-token-spec

Transform brand discovery inputs into a specification-ready design token set.

Community
Advanced
octos-orgoctos-org
1.0k

deep-crawl

Crawl JavaScript-rendered websites with headless Chrome via CDP and output structured JSON reports.

Official
Advanced