create-design-system

Name: create-design-system
Availability: InStock
Author: Lucas

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

Ready to run

npx skills add https://github.com/LucasMatuszewski/JSystems-SilkyCoders-1 --skill create-design-system-lucasmatuszewski

💬 Prompt for ChatGPT / Claude Chat▼

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.