Design System Patterns
Installation
SKILL.md
Design System Patterns
Pencil에서 디자인 시스템을 구축하고 관리하는 패턴과 모범 사례를 제공한다.
Core Concepts
디자인 토큰
디자인 토큰은 디자인 시스템의 기본 단위로, 변수로 정의하여 일관성을 유지한다.
| Token Type | 예시 | 용도 |
|---|---|---|
| Colors | primary, secondary, neutral | 브랜드 색상, UI 색상 |
| Typography | heading, body, caption | 폰트 크기, 굵기, 행간 |
| Spacing | xs, sm, md, lg, xl | 여백, 간격 |
| Radii | sm, md, lg, full | 모서리 둥글기 |
| Shadows | sm, md, lg | 그림자 효과 |
컴포넌트 계층
Related skills
More from gyejoon/pencil-plugin
pencil basics
This skill should be used when the user asks about "pencil 사용법", ".pen 파일", "노드 타입", "레이아웃 시스템", "pencil mcp", "batch_design", "batch_get", or wants to understand how to work with Pencil design files. Provides comprehensive guidance for using Pencil MCP tools effectively.
43design to code
This skill should be used when the user asks to "코드 변환", "React 생성", "Tailwind 코드", "컴포넌트 코드", "디자인을 코드로", ".pen 파일에서 코드", or wants to convert Pencil designs into React + Tailwind CSS code.
39