design-guide
✓색상, 타이포그래피, 애니메이션, 대화형 상태, 그림자, 그라데이션, 구성 요소 패턴 및 UX 동작을 포함하여 웹사이트에서 포괄적인 디자인 언어를 추출합니다. 반응형 스크린샷과 완전한 디자인 시스템 문서를 통해 픽셀 단위까지 완벽한 디자인 가이드를 생성합니다. 웹사이트 디자인을 분석하거나, 디자인 시스템을 만들거나, 사이트를 재구축할 때 사용하세요.
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
색상, 타이포그래피, 애니메이션, 대화형 상태, 그림자, 그라데이션, 구성 요소 패턴 및 UX 동작을 포함하여 웹사이트에서 포괄적인 디자인 언어를 추출합니다. 반응형 스크린샷과 완전한 디자인 시스템 문서를 통해 픽셀 단위까지 완벽한 디자인 가이드를 생성합니다. 웹사이트 디자인을 분석하거나, 디자인 시스템을 만들거나, 사이트를 재구축할 때 사용하세요. 출처: tyrchen/claude-skills.
인용 가능한 정보
AI/검색 인용용 안정적인 필드와 명령어.
- 설치 명령어
npx skills add https://github.com/tyrchen/claude-skills --skill design-guide- 카테고리
- *크리에이티브
- 인증됨
- ✓
- 최초 등록
- 2026-02-01
- 업데이트
- 2026-02-18
빠른 답변
design-guide이란?
색상, 타이포그래피, 애니메이션, 대화형 상태, 그림자, 그라데이션, 구성 요소 패턴 및 UX 동작을 포함하여 웹사이트에서 포괄적인 디자인 언어를 추출합니다. 반응형 스크린샷과 완전한 디자인 시스템 문서를 통해 픽셀 단위까지 완벽한 디자인 가이드를 생성합니다. 웹사이트 디자인을 분석하거나, 디자인 시스템을 만들거나, 사이트를 재구축할 때 사용하세요. 출처: tyrchen/claude-skills.
design-guide 설치 방법은?
터미널 또는 명령줄 도구(Terminal, iTerm, Windows Terminal 등)를 엽니다 이 명령어를 복사하여 실행합니다: npx skills add https://github.com/tyrchen/claude-skills --skill design-guide 설치 후 스킬은 자동으로 AI 코딩 환경에 설정되어 Claude Code나 Cursor에서 사용할 수 있습니다
소스 저장소는 어디인가요?
https://github.com/tyrchen/claude-skills
상세
- 카테고리
- *크리에이티브
- 출처
- skills.sh
- 최초 등록
- 2026-02-01