What data does the Design Guide skill extract?

It captures complete color palettes, typography scales, spacing tokens, CSS animations, hover states, and responsive layout metrics from any public URL.

Does this skill require specific software to run?

Yes, it requires Playwright and Chromium to be installed in the skill environment to accurately render pages and compute real-time styles.

Can it detect interactive elements like hover effects?

Yes, it identifies interactive elements and automatically triggers hover states to document style changes, transitions, and transformations.

What format is the design documentation delivered in?

The skill generates a comprehensive Markdown guide (design-guide.md), structured JSON data (design_data.json), and several responsive PNG screenshots.

Design Guide Generator

Name: Design Guide Generator
Author: tyrchen

bytyrchen

•

디자인 도구

Extracts and documents complete design systems from websites, including typography, color palettes, and interactive component patterns.

The Design Guide Generator is a powerful reverse-engineering tool that analyzes any website to produce a comprehensive design specification. By leveraging automated browser analysis, it captures everything from core visual tokens like colors and typography to complex behaviors like animations, hover states, and responsive layout shifts. It is an essential utility for developers and designers who need to audit existing site styles, build design systems from live examples, or ensure pixel-perfect recreations of production interfaces.

주요 기능

01Multi-device responsive screenshot generation (Mobile, Tablet, Desktop)

02Automated visual design extraction for colors, gradients, and shadows

03Comprehensive typography and spacing system documentation

04Interactive state analysis for hovers, transitions, and animations

0511 GitHub stars

06Component pattern recognition for UI elements like buttons, cards, and forms

사용 사례

01Auditing and documenting an existing website's design system for consistency

02Extracting production design tokens for implementation in CSS-in-JS or Tailwind configurations

03Reverse-engineering high-quality UI/UX patterns for pixel-perfect site recreations

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add tyrchen/claude-skills design-guide

For use in Claude.ai and ChatGPT

Download Skill