skills.rest
scsm-unrestrict
scsm-unrestrictCOMMUNITY
Explore all skills by this author →
GitHub

design-system

Extracts design tokens from websites or screenshots into a semantic DESIGN.md document.

1|Updated Aug 18, 2026
Search Tags:#design system#css#design tokens#playwright#tailwind#extract#design.md
One-click install
npx skills add https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent --skill design-system-scsm-unrestrict
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent/tree/main/frontend-engineer/skills/design-system
Command: npx skills add https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent --skill design-system-scsm-unrestrict

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @google/stitch-sdk.

What problem does it solve? Existing websites often have no documented design system, making it hard to reproduce their visual language consistently across new pages or projects. This Skill reverse-engineers colours, typography, component styles, spacing, and atmosphere from a live URL, HTML file, screenshot, or Google Stitch project into a structured DESIGN.md file. ## Core Features & Use Cases - Multi-source extraction: Analyse live URLs via Playwright browser automation, local HTML files, screenshots, or Google Stitch projects through the Stitch SDK. - Design token analysis: Identify colour roles (primary, surface, text, border, accent), typography (families, weights, line heights), component patterns (buttons, cards, nav, forms), and layout principles (max width, grid, whitespace). - Semantic DESIGN.md output: Produces a natural-language design document with exact values, including a copy-paste generation block compatible with the design-loop skill. - Use Case: A client asks you to build new pages matching their existing marketing site. Point the Skill at the site's URL, and it screenshots the page, parses the CSS custom properties and Tailwind config, then writes a DESIGN.md capturing the full visual language for consistent page generation. ## Quick Start Extract the design system from https://example.com and write it to .design/DESIGN.md.

Frequently Asked Questions about design-system

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

FAQPage Schema
How do I extract a design system from an existing website?▼

Provide the site's URL and the Skill browses it with Playwright CLI, captures desktop and mobile screenshots, and parses the HTML for CSS custom properties, Tailwind config, and font links. The extracted tokens are synthesised into a semantic DESIGN.md file.

How to reverse engineer colours and typography from a website?▼

Colours are located in priority order: CSS custom properties, Tailwind config blocks, inline styles, then Tailwind utility classes mapped to a palette. Typography comes from Google Fonts links, font-family declarations, and weight or line-height CSS rules.

Can I extract design tokens from a screenshot only?▼

Yes, but colour extraction from images is approximate since there is no HTML source for exact hex values. The Skill flags these approximate tokens with a warning so you can manually verify them.

Does the design system extraction support Google Stitch projects?▼

Yes, if @google/stitch-sdk is installed and STITCH_API_KEY is set, the Skill fetches the project's designTheme object and screen HTML. Theme fields like colorMode, font, roundness, and customColor map directly to DESIGN.md sections.

What are the limitations of extracting designs from Tailwind sites?▼

Tailwind sites are actually the easiest case since the config block contains most tokens, but inline utility classes like bg-slate-900 still need interpretation to assign semantic roles such as background or surface. Dark mode palettes require checking .dark class overrides or media queries.

Related Skills

Explore More Design & Creative Skills→
gabelulgabelul
38

stitch-mcp-get-screen

Retrieve Stitch screen HTML and screenshot assets from Google Cloud Storage.

Community
Intermediate
CoRLab-TechCoRLab-Tech

pix

Implement UI components from Figma designs with pixel-perfect accuracy.

Official
Advanced
tak-brotak-bro

design-review

Audit live-site design quality against visual systems and accessibility standards.

Community
Advanced
respira-pressrespira-press
40

design-system-synthesizer

Extract design tokens and render a style-guide page from WordPress sites.

Official
Advanced