mcpbeat

Design Guide

tyrchen/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.

26k tokens
context cost
the whole folder, loaded on every use
5
files
ships runnable scripts
0
copies elsewhere
how many repositories repackaged it
45
stars on the repo
on the repository, not the skill itself

Install

one command, takes just this skill from the repository 
npx skills add https://github.com/tyrchen/claude-skills --skill design-guide

How to use it

Copy the folder

Take tyrchen/design-guide from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.