web-design-mastery
✓리팩토링 UI 원칙을 기반으로 한 프로덕션급 웹 애플리케이션 UI 디자인. 항상 활성화: 랜딩 페이지, 대시보드, 인증 화면, 히어로 섹션, 카드 디자인, 버튼 디자인, 양식 입력, 탐색, 레이아웃, 간격 결정, 타이포그래피 계층 구조, 색상 선택, 그림자, 깊이, 빈 상태, 배경 장식. 디자인 작업 흐름, 시각적 계층 구조, 간격 시스템(4px 그리드), 유형 배율, HSL 색상 시스템, 그림자 높이, 마무리 작업을 제공합니다. 터키어: sayfa tasarımı, UI/UX, 프론트 엔드 tasarım, 웹 tasarım, güzel arayüz, modern tasarım, 카드 tasarımı, buton stili, form tasarımı, renk paleti, tipografi. 영어: 아름다운 인터페이스, 세련된 디자인, 고급스러운 느낌, 시각적 계층 구조, 공백, 색상 팔레트, 타이포그래피 규모.
SKILL.md
Production-grade UI design principles from Refactoring UI by Adam Wathan & Steve Schoger.
| 1 | 4 | Micro gaps | | 2 | 8 | Tight, within components | | 3 | 12 | Related elements | | 4 | 16 | Section padding | | 6 | 24 | Between sections | | 8 | 32 | Major separation | | 12 | 48 | Large gaps | | 16 | 64 | Hero spacing | | 24 | 96 | Maximum separation |
| 12 | Labels, meta, fine print | | 14 | Body text, default | | 16 | Emphasis, subheadings | | 18 | Section headings | | 20 | Card titles | | 24 | Page section titles | | 30 | Page headings | | 36 | Hero subheading | | 48 | Hero heading | | 60-72 | Display text |
인용 가능한 정보
AI/검색 인용용 안정적인 필드와 명령어.
- 설치 명령어
npx skills add https://github.com/anilcancakir/my-claude-code --skill web-design-mastery- 카테고리
- *크리에이티브
- 인증됨
- ✓
- 최초 등록
- 2026-02-01
- 업데이트
- 2026-02-18
빠른 답변
web-design-mastery이란?
리팩토링 UI 원칙을 기반으로 한 프로덕션급 웹 애플리케이션 UI 디자인. 항상 활성화: 랜딩 페이지, 대시보드, 인증 화면, 히어로 섹션, 카드 디자인, 버튼 디자인, 양식 입력, 탐색, 레이아웃, 간격 결정, 타이포그래피 계층 구조, 색상 선택, 그림자, 깊이, 빈 상태, 배경 장식. 디자인 작업 흐름, 시각적 계층 구조, 간격 시스템(4px 그리드), 유형 배율, HSL 색상 시스템, 그림자 높이, 마무리 작업을 제공합니다. 터키어: sayfa tasarımı, UI/UX, 프론트 엔드 tasarım, 웹 tasarım, güzel arayüz, modern tasarım, 카드 tasarımı, buton stili, form tasarımı, renk paleti, tipografi. 영어: 아름다운 인터페이스, 세련된 디자인, 고급스러운 느낌, 시각적 계층 구조, 공백, 색상 팔레트, 타이포그래피 규모. 출처: anilcancakir/my-claude-code.
web-design-mastery 설치 방법은?
터미널 또는 명령줄 도구(Terminal, iTerm, Windows Terminal 등)를 엽니다 이 명령어를 복사하여 실행합니다: npx skills add https://github.com/anilcancakir/my-claude-code --skill web-design-mastery 설치 후 스킬은 자동으로 AI 코딩 환경에 설정되어 Claude Code나 Cursor에서 사용할 수 있습니다
소스 저장소는 어디인가요?
https://github.com/anilcancakir/my-claude-code
상세
- 카테고리
- *크리에이티브
- 출처
- skills.sh
- 최초 등록
- 2026-02-01