Design Systems

frontend-design을 사용해 뚜렷한 시각적 방향성을 가진, 프로덕션 수준의 프론트엔드 인터페이스를 만드세요. 이 frontend-design 스킬은 랜딩 페이지, 대시보드, 앱 셸, 컴포넌트처럼 구현만큼 계층, 타이포그래피, 모션, 완성도가 중요한 작업에 맞춰져 있습니다. 디자인 우선 UI 작업을 위한 설치 및 사용 가이드도 포함합니다.

compose-multiplatform-patterns는 Compose Multiplatform과 KMP 앱의 Jetpack Compose를 위한 실용 가이드입니다. 상태 관리, 네비게이션, 테마, 성능, 재사용 가능한 UI 패턴을 다루며, Android, iOS, Desktop, Web 전반에서 프런트엔드 팀이 유지보수하기 쉬운 공유 화면을 만들 수 있도록 돕습니다.

frontend-design은 막연한 UI 아이디어를 실제 프론트엔드 코드와 뚜렷한 미적 방향성으로 구현해, 생산 단계에 바로 쓸 수 있는 개성 있는 인터페이스를 만들고 흔한 AI 스타일링을 줄여줍니다.

brand-guidelines는 문서, 슬라이드, HTML 등 텍스트 중심 결과물을 Anthropic 브랜드에 맞게 다듬을 수 있도록 브랜드 컬러와 타이포그래피 기준을 제공합니다. 초안 작성 후 일관된 온브랜드 서식, 글꼴 계층, 팔레트 적용이 필요할 때 적합합니다.

ux-designer는 리서치, 접근성, 정보 구조, 인터랙션 플로우, 와이어프레임 가이드, UX 카피 작성을 체계적으로 지원하는 UX 디자인 스킬입니다. `AGENTS.md`와 목적별 rules 파일을 바탕으로, 팀이 거친 제품 아이디어를 더 명확하고 기준 중심의 디자인 의사결정으로 발전시키도록 돕습니다.

vercel-react-native-skills는 성능을 중시하는 프런트엔드 개발을 위한 React Native 및 Expo 스킬입니다. 리스트 렌더링, 애니메이션, 네비게이션, UI 패턴, 상태 관리, 네이티브 모듈 설정을 개선하는 데 활용할 수 있습니다. 모바일 앱의 병목을 더 적은 시행착오로 다루도록 실용적인 규칙, 설치 가이드, 사용 패턴을 제공합니다.

layout 스킬은 UI가 평면적이거나, 답답하게 꽉 차 있거나, 기계적으로 배치된 느낌일 때 간격, 계층 구조, 구성을 개선하는 데 도움이 됩니다. 일반적인 스타일링이 아니라 UI Design을 위한 실용적인 layout 가이드로, 레이아웃, 정렬, 시각적 리듬 문제에 활용하세요. 구조를 바로잡고, 묶음을 더 명확히 하며, 읽는 흐름을 개선해야 할 때 특히 유용합니다.

impeccable은 AI 티가 나는 흔한 인터페이스 대신, 차별화된 프로덕션급 프론트엔드 UI를 만들도록 돕습니다. 페이지, 웹 컴포넌트, 앱 화면, 포스터 등 디자인 비중이 큰 프론트엔드에서 craft, teach, extract 워크플로를 지원해 UI 디자인, 디자인 컨텍스트 세팅, 재사용 가능한 패턴 추출에 유용합니다.

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 사용법이 필요할 때 적합합니다.

brandkit은 로고 시스템, 아이덴티티 덱, 비주얼 가이드 보드, 아트 디렉션이 반영된 브랜드 프레젠테이션까지 아우르는 프리미엄 브랜드 키트 이미지 생성 스킬입니다. 스타트업, 개발자 도구, 보안, 게임, 소비자 앱, 럭셔리 콘셉트 전반에서 일관된 스튜디오급 결과를 내도록 설계되었습니다. 일반적인 AI 무드보드가 아니라 세련된 브랜드 세계관을 원할 때 brandkit을 사용하세요.

teach-impeccable은 저장소를 스캔하고, 핵심 UX 질문을 던진 뒤, 이후 세션에서도 이어서 쓸 수 있는 디자인 가이드를 저장하는 일회성 UI 디자인 설정 스킬입니다.

react:components 스킬은 Stitch 디자인을 프런트엔드 개발용 모듈형 Vite 및 React 컴포넌트로 변환합니다. 검색, 로컬 파일 확인, AST 기반 검증을 활용해 결과물이 디자인 토큰, 기존 파일, 프로젝트 제약과 잘 맞도록 유지합니다. 일회성 JSX 덤프가 아니라 구조화된 컴포넌트 코드가 필요할 때 이 react:components 가이드를 사용하세요.

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

vue-best-practices는 코드 생성, 리뷰, 리팩터링에 초점을 맞춘 Vue 3 스킬입니다. 에이전트가 Composition API, `<script setup lang="ts">`, 명시적인 데이터 흐름, SSR을 고려한 선택을 따르도록 안내하며, reactivity, SFC, composables, Router, Pinia, Vite 기반 앱의 핵심 레퍼런스까지 폭넓게 제공합니다.

fireworks-tech-graph는 시스템 설명을 바로 배포 가능한 SVG 및 PNG 다이어그램으로 바꿔 주는 다이어그램 스킬입니다. 설치 안내, 보조 스크립트, 검증 방법, 템플릿, 스타일 참고 자료를 포함하며, 기술 다이어그램, 아키텍처 플로차트, 시퀀스 뷰, 기타 관련 시각 워크플로에 맞게 활용할 수 있습니다.

infocard는 페이지에 HTML과 CSS를 직접 삽입해 Markdown으로 에디토리얼 스타일의 정보 카드를 만들 수 있게 해줍니다. 요약, 주제 스냅샷, 하이라이트 패널, 이벤트 카드, 비교 블록 등 의도적으로 디자인된 느낌이 필요한 UI Design 친화 콘텐츠에 적합합니다. 다이어그램이나 데이터 시각화용은 아니므로, 그런 용도라면 전용 다이어그램 또는 차트 skill을 사용하세요.

Architecture는 HTML과 CSS로 계층형 시스템 뷰를 만드는 다이어밍 스킬입니다. 색상으로 구분된 섹션, 그리드 레이아웃, 명확한 컴포넌트 계층을 갖추고 있어 사용자/애플리케이션/데이터/인프라 다이어그램, 마이크로서비스 맵, 엔터프라이즈 아키텍처에 특히 적합합니다. Diagramming 출력에서 빠르고 수정 가능한 아키텍처가 필요할 때는 일반 프롬프트보다 이 스킬을 사용하는 편이 좋습니다.

makepad-2.0-design-judgment는 디자인 판단, 아키텍처, 컴포넌트 경계, 데이터 흐름, 렌더링 전략을 다룰 때 가장 먼저 불러야 하는 Makepad 2.0 스킬입니다. 이 스킬을 사용해 요청을 적절한 Makepad 준수 스킬로 라우팅하고, 구현 전에 더 나은 설계 결정을 내릴 수 있습니다.

inline SVG를 사용해 세련된 다크 테마의 아키텍처 다이어그램을 독립형 HTML 파일로 만듭니다. architecture-diagram 스킬은 시스템 아키텍처, 인프라, 클라우드, 보안, 네트워크 토폴로지 다이어그램에 맞춰 설계되었으며, 의미 있는 색상, 명확한 구성 요소 관계, 일관된 기술 스타일을 갖춘 브라우저용 시각 자료를 제공합니다.

hig-components-menus는 메뉴와 버튼 중심의 명령 UI를 위한 Apple HIG 가이드 스킬입니다. 메뉴, 컨텍스트 메뉴, 툴바, 메뉴 바 및 관련 컨트롤에 대한 UI 디자인 결정을 내릴 때, 특히 명령 배치, 그룹화, 동작 방식에 대해 Apple 전용 지침이 필요하다면 이 hig-components-menus 스킬을 사용하세요.

hig-components-layout는 사이드바, 분할 보기, 탭 바, 목록, 표, 윤곽 보기, 열, 패널, 창, 스크롤 뷰, 박스, 오너먼트 중 무엇을 선택할지 판단하는 데 도움을 주는 Apple HIG의 내비게이션 및 레이아웃 스킬입니다. 일반적인 반응형 레이아웃 조언보다 플랫폼 맥락을 반영한 명확한 가이드가 필요할 때, UI 디자인과 앱 구조 결정을 위해 사용하세요.

hig-components-dialogs는 알림, 액션 시트, 팝오버, 시트, 숫자 입력 화면을 선택할 때 쓰는 Apple HIG 프레젠테이션 컴포넌트 스킬입니다. iOS, iPadOS, macOS, watchOS, visionOS 전반에서 확인 흐름, 파괴적 작업, 비모달 콘텐츠, UI 설계 판단에 대해 Apple 가이드라인에 맞는 명확한 다이얼로그 선택이 필요할 때 이 hig-components-dialogs 가이드를 사용하세요.

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