skills.rest
LucasMatuszewski
LucasMatuszewskiCOMMUNITY
Explore all skills by this author →
Website𝕏@mrLumaticGitHub

create-design-system

Extract design tokens and brand assets from a website URL.

2|20|Updated Jan 20, 2026
Search Tags:#design system#design tokens#playwright#favicon#brand assets#website analysis#ui consistency
One-click install
npx skills add https://github.com/LucasMatuszewski/JSystems-SilkyCoders-1 --skill create-design-system-lucasmatuszewski
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-design-system
Source: https://github.com/LucasMatuszewski/JSystems-SilkyCoders-1/tree/main/.agents/skills/create-design-system
Command: npx skills add https://github.com/LucasMatuszewski/JSystems-SilkyCoders-1 --skill create-design-system-lucasmatuszewski

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill removes the manual work of reverse-engineering a website's visual language so teams can reproduce a consistent brand experience across new interfaces.

Core Features & Use Cases

  • Design token extraction from live pages, including colors, typography, spacing, radii, and component styles.
  • Brand asset capture for homepage screenshots, logos, and favicons that support UI reconstruction.
  • Guideline generation that turns extracted style data into a practical reference for designers and developers.
  • Use case: When a team wants to match an external brand for a landing page or product dashboard, this Skill collects the visual system needed to build consistently.

Quick Start

Ask the skill to analyze a website URL and generate brand assets, design tokens, and a design-guidelines document.

Frequently Asked Questions about create-design-system

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

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

You extract design tokens by evaluating the live page DOM to capture colors, typography, spacing, and radii, then normalizing those styles into reusable brand assets for UI consistency.

What is the best way to capture brand assets and favicons for a UI redesign?▼

Capturing brand assets for a UI redesign involves automating homepage screenshots and favicon extraction directly from the target website URL to support accurate interface reconstruction.

How do I generate design guidelines from an existing website's visual style?▼

Generating design guidelines from an existing website involves extracting visual style data like component styles and design tokens, then converting it into a practical markdown reference for designers and developers.

Does design system extraction require Playwright to navigate and screenshot websites?▼

Yes, design system extraction requires Playwright MCP navigation to evaluate the DOM style, capture homepage screenshots, and accurately retrieve logos and favicons for brand matching.

Can I use extracted design tokens to match an external brand for a product dashboard?▼

You can use extracted design tokens to match an external brand for a product dashboard by capturing the target site's complete visual language and applying it to your new interface for consistency.

Related Skills

Explore More Design & Creative Skills→
terraleiloaterraleiloa

browser-automation

Automate web browser tasks using Playwright MCP tools for navigation and interaction.

Community
Intermediate
chrpacchrpac
1

doublea-brand-guidelines

Apply Double A brand guidelines to build on-brand UI across pages and dashboards.

Community
Intermediate
bykoleksii-hardobykoleksii-hardo

ckm:design-system

Generate CSS variables from design tokens JSON configurations.

Community
Advanced
tejovanthntejovanthn
1

marketing-copy

Generate multi-channel marketing copy using AIDA, PAS, FAB, and 4 Ps templates.

Community
Basic