skills.rest
tyrchen
tyrchenCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-guide

Extract colors, typography, layouts, and UX patterns from websites into Markdown and JSON.

45|11|Updated Nov 10, 2025
Search Tags:#typography#design-system#responsive-design#ui-patterns#color-palette#design-guide
One-click install
npx skills add https://github.com/tyrchen/claude-skills --skill design-guide-tyrchen
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-guide
Source: https://github.com/tyrchen/claude-skills/tree/main/design-guide
Command: npx skills add https://github.com/tyrchen/claude-skills --skill design-guide-tyrchen

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams often struggle to quickly extract and document a website's complete design language for design systems, accessibility checks, and pixel-perfect recreations.

Core Features & Use Cases

  • Color palette extraction and CSS token generation
  • Typography analysis and heading/body style extraction
  • Layout, spacing, and responsive pattern documentation
  • Full HTML/CSS extraction with computed styles and design guide generation
  • Output formats include a Markdown design guide and structured JSON data
  • Use cases: building design systems, reverse-engineering designs, and documenting UI patterns

Quick Start

Run uv run main.py --url https://example.com to generate a complete design guide.

Frequently Asked Questions about design-guide

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

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

Extracting a website's design language involves automating color palette, typography, and layout analysis. This tool computes styles and captures screenshots across breakpoints to generate a Markdown design guide and export structured JSON data.

What is the best way to document UI patterns and responsive design breakpoints for a design team?▼

Documenting UI patterns and responsive breakpoints requires capturing computed styles and multi-breakpoint screenshots. This generates a Markdown design guide detailing layout, spacing, and typography for pixel-perfect interface recreation.

Can I generate CSS tokens and color palettes from live sites automatically?▼

Yes, generating CSS tokens and color palettes from live sites is possible by analyzing computed styles. The extraction process identifies colors and typography, exporting the structured design data as JSON.

How do I reverse-engineer a pixel-perfect interface from a website's HTML and CSS?▼

Reverse-engineering a pixel-perfect interface requires full HTML and CSS extraction with computed styles. Capturing screenshots at multiple breakpoints and states documents exact layout and spacing to accurately recreate the design.

Does this design guide extraction tool output structured data for building design systems?▼

Yes, design guide extraction outputs structured JSON data for building design systems. It analyzes website layouts, typography, and color palettes, exporting computed styles necessary to reconstruct or document UI patterns.

Related Skills

Explore More Design & Creative Skills→
terraleiloaterraleiloa

browser-automation

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

Community
Intermediate
noin-ainoin-ai

design

Generate UI design specs with responsive and dark mode variants.

Official
Intermediate
vincent119vincent119

ui-design-principles

Enforce UI design principles for spacing, color, typography, and WCAG 2.1 AA accessibility.

Community
Intermediate
jabez4jcjabez4jc

ui-ux-pro-max

Generate design systems with styles, palettes, typography, and UX guidelines.

Community
Advanced