Figma

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

ckm:design은 로고, CIP 목업, 배너, 슬라이드, SVG 아이콘 작업을 라우팅하고 제작하는 구조화된 디자인 스킬입니다. 범용 프롬프트 출력에 그치지 않고, 실무 참고자료, CSV 기반 옵션, Python 스크립트로 반복 가능한 디자인 워크플로를 지원합니다.

design-system-patterns는 디자인 시스템과 컴포넌트 라이브러리를 위해 토큰 구조, 테마 아키텍처, 재사용 가능한 컴포넌트 API 패턴을 정리해 확장 가능한 UI 기반을 설계할 수 있도록 돕는 스킬입니다.

figma-create-new-file는 drafts에 새 Figma Design 파일 또는 FigJam 보드를 빈 상태로 생성합니다. use_figma를 포함한 더 깊은 Figma 작업을 시작하기 전, 새 출발점이 필요할 때 사용하세요. design 또는 figjam을 지원하며, 선택적으로 파일 이름을 지정할 수 있고, 필요할 경우 whoami로 plan access를 확인해 해결할 수 있습니다.

figma-create-design-system-rules는 Figma-to-code 작업에 필요한 프로젝트별 Design System 규칙을 생성하는 데 도움을 줍니다. 컴포넌트, 네이밍, 토큰, 파일 위치, 그리고 AI 코딩 에이전트가 저장소 전반에서 일관성을 유지하기 위해 하드코딩하지 말아야 할 항목까지 정리할 때 사용하세요. Figma MCP 서버 연결이 필요합니다.

figma-code-connect-components는 Figma Code Connect로 Figma 디자인 컴포넌트를 일치하는 코드 컴포넌트에 매핑하는 데 도움을 줍니다. 디자인 구현 정렬, variant와 prop 매칭, 그리고 매핑을 만들기 전에 로컬에서 맞는 컴포넌트를 찾는 작업에 적합합니다. 캔버스 작성이나 전체 페이지 생성보다는 connect, map, 또는 link-to-code 워크플로에 가장 잘 맞습니다.

figma를 사용해 Figma MCP 서버에서 디자인 컨텍스트, 스크린샷, 변수, 에셋을 가져온 뒤, Figma 노드를 구현에 바로 쓸 수 있는 UI 결정으로 변환하세요. 이 figma 스킬은 Figma URL이나 노드 ID가 있고, 디자인-코드 작업, 설정, 문제 해결에 맞는 정확한 figma 사용법이 필요할 때 적합합니다.

industrial-brutalist-ui UI 디자인 스킬은 스위스식 그리드, 극단적인 타이포그래피 대비, 실용적인 팔레트, 아날로그 텍스처를 바탕으로 기계적이고 고밀도인 인터페이스를 만듭니다. 대시보드, 편집 시스템, 포트폴리오 페이지처럼 절제된 컨트롤 패널 느낌이 필요한 작업에 이 industrial-brutalist-ui 가이드를 활용하세요.

wwas는 대략적인 아이디어를 Why-What-Acceptance 형식의 백로그 항목으로 바꿔 주는 요구사항 기획용 프롬프트 스킬입니다. wwas 스킬을 사용하면 비즈니스 맥락을 정리하고, 변경 내용을 명확히 정의하며, 스프린트에 바로 투입할 수 있는 테스트 가능한 수용 기준을 작성할 수 있습니다.

user-stories 스킬을 사용해 기능을 백로그에 바로 넣을 수 있는 스토리로 바꾸세요. 3 C's, INVEST 기준, 디자인 링크, 테스트 가능한 수용 기준을 함께 정리할 수 있습니다. 사용자 스토리 작성, 기능을 백로그 항목으로 분해하기, 더 명확한 범위와 더 적은 추측이 필요한 Requirements Planning용 user-stories에 적합합니다.

job-stories 스킬을 사용해 기능 아이디어를 JTBD 스타일의 job story로 바꿔보세요. 형식은 “When [상황], I want to [동기], so I can [결과].”입니다. 더 명확한 백로그 항목, Requirements Planning에서의 job-stories 활용, 그리고 사용자 맥락에 기반한 수용 기준을 만드는 데 도움이 됩니다.

enhance-prompt 스킬은 모호한 UI 아이디어를 더 명확하고 Stitch에 바로 쓸 수 있는 프롬프트로 바꿔 줍니다. 구조를 더 탄탄하게 다듬고, UI/UX 용어를 보강하며, 디자인 시스템 맥락까지 반영할 수 있게 해 줍니다. 이 enhance-prompt 가이드를 활용하면 프롬프트의 구체성을 높이고, 추측에 의존하는 부분을 줄이며, 프롬프트 작성과 UI 생성 결과를 더 일관되게 만들 수 있습니다.

design-md 스킬은 Stitch 프로젝트를 분석해 화면을 의미 기반의 DESIGN.md 단일 기준 문서로 정리합니다. 이를 통해 레이아웃, 톤, 색상, 컴포넌트 언어를 일관되게 유지할 수 있습니다. 단순한 시각 요약이 아니라, 앞으로의 Stitch 생성에 바로 프롬프트로 활용할 수 있는 디자인 시스템 가이드가 필요할 때 design-md를 사용하세요.

diagram-generator는 구조화된 입력으로 draw.io, Mermaid, Excalidraw 다이어그램을 만들고 편집하는 데 도움을 줍니다. 플로차트, 시퀀스 다이어그램, 클래스 다이어그램, ER 다이어그램, 마인드맵, 아키텍처 다이어그램, 네트워크 토폴로지를 지원하며, 기존 .drawio, .mmd, Excalidraw 파일도 읽어 더 쉽게 수정할 수 있습니다.

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

network skill을 사용해 mxGraph 장치 아이콘, 자동 레이아웃, 존 그룹화, 명확한 링크 의미를 갖춘 PlantUML 네트워크 토폴로지 다이어그램을 만들 수 있습니다. LAN, WAN, 엔터프라이즈, 데이터센터, 무선, 보안, 벤더별 다이어그램에 적합하며, network 사용 예시와 함께 network를 uml 또는 cloud 대신 언제 써야 하는지도 안내합니다.

`infographic` DSL로 구조화된 콘텐츠를 세련된 인포그래픽 레이아웃으로 변환하는 스킬입니다. KPI 카드, 타임라인, 로드맵, 단계별 흐름, A vs B 비교, SWOT, 퍼널, 조직도, 간단한 차트에 적합합니다. 특히 UI Design용 인포그래픽과 4~8개 항목으로 구성된 프레젠테이션 스타일 요약에 잘 맞습니다. 복잡한 데이터 분석이나 기술 다이어그램에는 적합하지 않습니다.

logo-generator는 제품, 브랜드, 콘셉트를 위한 전문적인 SVG 로고와 세련된 쇼케이스 이미지를 만드는 데 도움이 됩니다. 디자인 패턴 가이드, 6개 이상의 로고 변형, SVG to PNG 내보내기, 배경 쇼케이스 생성 기능을 함께 제공합니다. 편집 가능한 결과물과 발표용 미리보기가 필요한 빠르고 구조화된 logo-generator 가이드가 필요할 때 이 skill을 사용하세요.

figma-designer는 Figma MCP를 통해 Figma 파일이나 스크린샷을 분석해 시각 사양, 디자인 토큰, 컴포넌트, 그리고 UI 디자인 팀이 바로 활용할 수 있는 PRD 핸드오프 산출물을 추출하는 스킬입니다.

stitch-design-taste는 Design Implementation용 Google Stitch 디자인 시스템 스킬입니다. 프리미엄급의 비범용 UI를 위해, 명확한 타이포그래피·정교한 컬러·비대칭 레이아웃·모션 규칙·금지 패턴이 담긴 agent-friendly `DESIGN.md` 가이드를 생성합니다. 일회성 프롬프트 대신 반복해서 쓸 수 있는 stitch-design-taste 가이드가 필요할 때 적합합니다.

hand-drawn-diagrams 스킬은 자연어 프롬프트를 손그림 스타일의 Excalidraw 다이어그램, 흐름도, 설명용 그래픽, 와이어프레임, 페이지 목업으로 바꿉니다. 출력물을 검증하고, 편집 URL과 내보낼 수 있는 이미지를 함께 반환할 수 있습니다. 다듬어진 벡터 아트보다 스케치 같은 결과가 필요할 때, 빠르게 다이어그램을 만드는 데 가장 적합합니다.

figma-implement-design은 Figma 디자인을 1:1 시각적 일치도를 갖춘 배포 가능한 애플리케이션 코드로 변환합니다. Figma 파일에서 UI 코드를 구현할 때, 특정 컴포넌트나 화면과 맞춰야 할 때, 또는 Design Implementation용 figma-implement-design 가이드를 따를 때 사용하세요. Figma 캔버스 노드를 편집하는 용도는 아닙니다.

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

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