design-guide
✓Extract comprehensive design language from websites including colors, typography, animations, interactive states, shadows, gradients, component patterns, and UX behaviors. Generates pixel-perfect design guides with responsive screenshots and complete design system documentation. Use when analyzing website design, creating design systems, or rebuilding sites.
Installation
SKILL.md
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.
✅ design-guide.md - Main comprehensive guide ✅ All screenshots - Visual reference ✅ designdata.json - Structured data for programmatic use ✅ Source files - HTML, CSS, computed styles
Optional: ✅ Recreated components - If requested ✅ Comparison analysis - If analyzing multiple sites ✅ Token library - CSS/SCSS variables file
Extract comprehensive design language from websites including colors, typography, animations, interactive states, shadows, gradients, component patterns, and UX behaviors. Generates pixel-perfect design guides with responsive screenshots and complete design system documentation. Use when analyzing website design, creating design systems, or rebuilding sites. Source: tyrchen/claude-skills.
Facts (cite-ready)
Stable fields and commands for AI/search citations.
- Install command
npx skills add https://github.com/tyrchen/claude-skills --skill design-guide- Source
- tyrchen/claude-skills
- Category
- *Creative Media
- Verified
- ✓
- First Seen
- 2026-02-01
- Updated
- 2026-02-18
Quick answers
What is design-guide?
Extract comprehensive design language from websites including colors, typography, animations, interactive states, shadows, gradients, component patterns, and UX behaviors. Generates pixel-perfect design guides with responsive screenshots and complete design system documentation. Use when analyzing website design, creating design systems, or rebuilding sites. Source: tyrchen/claude-skills.
How do I install design-guide?
Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/tyrchen/claude-skills --skill design-guide Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code or Cursor
Where is the source repository?
https://github.com/tyrchen/claude-skills
Details
- Category
- *Creative Media
- Source
- skills.sh
- First Seen
- 2026-02-01