design-guide
Comprehensive Design Guide Generator
Extract the complete design language from any website with automated analysis of colors, typography, animations, interactions, and UX patterns. Goes far beyond basic CSS extraction to capture the full design system.
When to Use This Skill
Use this skill when you want to:
- Analyze a website's complete design system - Not just colors and fonts, but the entire design language
- Extract interactive design patterns - Hover states, transitions, animations, micro-interactions
- Document component libraries - Buttons, cards, forms, navigation patterns
- Create pixel-perfect recreations - Comprehensive data for exact replicas
- Build design systems - Complete token systems with all design decisions documented
- Understand UX patterns - Interaction patterns, accessibility features, responsive behavior
- Reverse-engineer designs - Full extraction of design decisions from live websites
What This Skill Extracts
🎨 Visual Design
More from tyrchen/claude-skills
chat-history
Extract and organize Claude Code session history into project .chats directory. Use when users want to document their Claude sessions, export conversation inputs, or maintain a log of instructions given to Claude.
49surrealdb
Write production-ready SurrealDB queries and operations using SurrealQL. Use when users need to create schemas, write CRUD queries, model graph relationships, build authentication systems, optimize performance, or work with SurrealDB in any capacity.
38ai-image
Generate AI images using OpenAI's gpt-image-1 model with customizable aspect ratios and artistic themes. Use when the user wants to create images, generate artwork, or mentions image generation with specific styles like Ghibli, futuristic, Pixar, oil painting, or Chinese painting.
21codex-code-review
Perform comprehensive code reviews using OpenAI Codex CLI. This skill should be used when users request code reviews, want to analyze diffs/PRs, need security audits, performance analysis, or want automated code quality feedback. Supports reviewing staged changes, specific files, entire directories, or git diffs.
20cel-k8s
Write production-ready CEL (Common Expression Language) code for Kubernetes ValidatingAdmissionPolicies, CRD validation rules, and security policies. Use when users need to create admission policies, validate Kubernetes resources, enforce security constraints, or write CEL expressions for Kubernetes.
13kro-rgd-pulumi
Create production-ready KRO ResourceGraphDefinitions using Pulumi TypeScript. Use when users need to define custom Kubernetes APIs, compose resources with KRO, integrate AWS ACK resources, or build platform abstractions using Pulumi infrastructure as code.
12