Design System

design-consultation은 대략적인 제품 아이디어를 완성도 있는 디자인 방향으로 정리하는 design-consultation 스킬입니다. DESIGN.md를 단일 기준 문서로 만들고, 미리보기와 함께 타이포그래피, 색상, 간격, 레이아웃, 모션에 대한 시스템 수준의 가이드를 제공합니다. 새 제품이나 일관된 출발점이 필요한 UI 영역에 특히 적합합니다.

WordPress Design System(WPDS)으로 WordPress UI를 만들거나 검토할 때 wpds 스킬을 사용하세요. WPDS MCP 서버를 통해 컴포넌트, 토큰, 패턴, 패키지 적합성을 확인할 수 있어, 추측이 아니라 공식 문서에 근거해 wpds 가이드를 유지할 수 있습니다. Gutenberg, WooCommerce, WordPress.com, Jetpack 등 관련 인터페이스 전반의 Design Systems 작업에 특히 적합합니다.

figma-use는 Figma 파일 컨텍스트에서 JavaScript를 안전하게 실행할 수 있도록, 모든 use_figma 호출 전에 설치해야 하는 스킬입니다. 노드 생성 및 편집, 변수와 스타일 연결, 컴포넌트와 변형 구축, 파일 구조의 프로그래밍 방식 검사 같은 디자인 구현 작업을 지원합니다. 이 저장소에는 사용 가이드, 주의할 점, 그리고 Figma 자동화에서 흔히 발생하는 오류를 줄이기 위한 패턴이 포함되어 있습니다.

hig-components-content는 Apple HIG의 콘텐츠 표시 컴포넌트를 더 적은 추측으로 선택하고 설명할 수 있도록 도와줍니다. 이 hig-components-content 가이드는 차트, 컬렉션, 이미지 뷰, 이미지 웰, 컬러 웰, 활동 뷰, 락업, 웹 뷰에 대한 UI 디자인 결정을 내릴 때 참고할 수 있으며, Apple에 맞는 컴포넌트 선택을 위한 설치 및 사용 안내도 함께 제공합니다.

figma-generate-library는 코드베이스를 바탕으로 Figma 디자인 시스템을 구축하거나 업데이트할 때, 토큰, 컴포넌트 라이브러리, 문서화, 라이트/다크 테마를 순서대로 진행할 수 있게 도와줍니다. 일회성 목업이 아니라 디자인 시스템을 실무적으로 다뤄야 할 때 사용하는 figma-generate-library 스킬입니다. Plugin API 호출용 figma-use와 함께 쓰면 더 좋습니다.

figma-generate-design는 코드로 만든 페이지, 모달, 드로어, 사이드바, 패널, 기타 여러 섹션으로 구성된 화면을 공개된 디자인 시스템을 활용해 Figma로 옮기는 데 도움을 줍니다. Code Connect와 관련 소스에서 컴포넌트, 변수, 스타일, 라이브러리 에셋을 찾아내고, 전체를 다시 그리지 않고 Design Implementation을 위해 화면을 섹션별로 조립합니다. 코드와 토큰의 일치를 중시할 때 figma-generate-design 가이드를 사용하세요.

figma-use는 Figma Plugin API 워크플로에서 안전한 `use_figma` 호출에 필요한 필수 스킬입니다. JavaScript로 Figma 파일을 작성, 수정, 검사 또는 구조화하기 전에 이 스킬을 설치하고 로드하세요. 특히 디자인 구현, 컴포넌트 작업, 변수, 오토 레이아웃, 프로그래밍 방식의 파일 읽기에 유용합니다.

figma-generate-library는 코드베이스를 토큰, 변수, 컴포넌트, 테마, 문서를 갖춘 Figma 디자인 시스템 라이브러리로 전환하는 데 도움이 됩니다. 설치, 설정, 탐색, 생성, 검증, 코드와의 정합성 조정까지 포함한 단계적 워크플로가 필요할 때 이 figma-generate-library 스킬을 사용하세요.

figma-generate-design은 실제 화면, 페이지, 또는 여러 섹션으로 구성된 레이아웃을 일반적인 도형 대신 공개된 디자인 시스템을 재사용해 Figma로 옮기는 데 도움을 줍니다. 코드나 제품 페이지와 높은 일치도, 편집 가능한 구조, 토큰 기반 일관성이 필요한 경우에 특히 적합합니다. 러프한 목업이 아니라 전체 페이지 UI 디자인 업데이트에 사용하세요.

frontend-design-review는 프런트엔드 UI 작업을 검토하고, 처음부터 차별화된 프로덕션 수준의 인터페이스를 만드는 데 도움이 되는 GitHub 스킬입니다. 디자인 시스템 준수, 접근성, 시각적 완성도, 그리고 UI가 평범하게 느껴지는지 아니면 의도적으로 설계된 느낌인지 평가하는 데 유용합니다. PR 리뷰, 컴포넌트 리뷰, UI 디자인용 frontend-design-review에 활용하세요.