design-md-from-website
OfficialCapture a website's design and create a spec-compliant DESIGN.md.
AuthorDiologIR
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill extracts the design system of a live website and generates a detailed DESIGN.md file, capturing the visual language, color palette, typography, and more.
Core Features & Use Cases
- Website Design Extraction: Reverse-engineer a website's design system from live pages.
- Spec-Compliant Output: Produce a
DESIGN.mdin the official google-labs format. - Use Case: If you need a comprehensive design reference for a website or want to extract design tokens and style guides for further use.
Quick Start
Generate a DESIGN.md for 'https://example.com' by running the design-md-from-website skill with the URL as input.
Dependency Matrix
Required Modules
playwright-cli
Components
scriptsreferencesassets
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: design-md-from-website Download link: https://github.com/DiologIR/diolog-plugins/archive/main.zip#design-md-from-website Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 620,000+ vetted skills library on demand.