Prototypes

ui-demo는 Playwright, 보이는 커서 이동, 자연스러운 템포를 활용해 세련된 웹 앱 데모 영상을 녹화하는 데 도움을 줍니다. 워크스루, 온보딩 클립, 기능 소개, 튜토리얼형 녹화에 ui-demo 스킬을 사용하세요. 안정적인 결과를 위해 discover, rehearse, record 순서의 워크플로를 따르세요. 특히 프로토타입이나 빠르게 변하는 UI에서 유용합니다.

frontend-slides는 처음부터 애니메이션이 풍부한 HTML 프레젠테이션을 만들거나 PowerPoint 파일을 변환해 만드는 데 도움이 됩니다. 발표, 피치덱, 워크숍, 사내 데모에 적합하며, 시각적 탐색이 필요하고 의존성 없는 브라우저 출력과 한 화면(viewport)에 꼭 맞는 슬라이드가 필요할 때 frontend-slides for UI Design에 사용하세요.

algorithmic-art는 2단계 워크플로로 p5.js 생성 예술의 오리지널 작업을 만들도록 돕습니다. 먼저 알고리즘 철학을 정리하고, 이후 seeded randomness, 파라미터 제어, 인터랙티브 뷰어를 갖춘 실행 가능한 .html·.js 결과물로 구현합니다.

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

prototype 스킬은 실제 구현에 들어가기 전에, 한 가지 구체적인 질문에 답해 주는 버릴 코드를 만들 때 도움이 됩니다. 로직, 상태 전환, 데이터 형태, 또는 UI 방향을 검증해야 할 때, 호스트 저장소의 규칙을 따르는 실행 가능한 프로토타입으로 빠르게 확인해 보세요. 최종 기능이 아니라 빠른 프로토타입 가이드가 필요할 때 가장 잘 맞습니다.

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

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

shader-dev는 ShaderToy 스타일의 실시간 비주얼을 위한 실용적인 GLSL 셰이더 스킬입니다. 이 shader-dev 스킬을 사용하면 레이 마칭, SDF 장면, 조명, 파티클, 유체 모션, 후처리, UI 디자인용 shader-dev까지 일반적인 프롬프트보다 훨씬 적은 시행착오로 만들거나 디버깅할 수 있습니다.

remotion 스킬을 사용해 Stitch 프로젝트 화면을 전환, 확대/축소, 텍스트 오버레이가 포함된 세련된 워크스루 영상으로 바꿔 보세요. 설치 단계, 예제 파일, 그리고 영상 편집과 렌더링 준비가 된 컴포지션을 위한 반복 가능한 remotion 가이드가 포함되어 있습니다.

pol-probe-advisor는 제품 관리자가 가설, 리스크, 자원 수준에 맞는 적절한 Proof of Life(PoL) probe를 고르도록 돕습니다. pol-probe-advisor skill을 사용하면 과도한 개발을 피하고, 실제 학습 목표에 가장 비용 효율적인 검증 방법을 맞출 수 있습니다. Product Management용 pol-probe-advisor에 특히 적합하며, 실무적인 pol-probe-advisor 가이드와 활용 방향을 제공합니다.

storyboard 스킬은 제품 아이디어를 문제에서 해결책으로 이어지는 6프레임 내러티브로 바꿉니다. 이해관계자 정렬, 콘셉트 리뷰, 데모, 그리고 Prototypes용 storyboard가 필요할 때 활용하세요. 아이디어가 실제로 공감을 얻는지 빠르게, 사람 중심적으로 검증할 수 있습니다.

pol-probe는 실제 제품을 만들기 전에 위험한 가설을 저비용으로 검증할 수 있도록 Proof of Life(생존 증명) 프로브를 정의하는 데 도움을 줍니다. pol-probe 스킬을 사용하면 프로토타입 쇼를 줄이고, 엄격한 성공 기준을 세우고, 적절한 프로브 유형을 고르며, 학습 후 폐기 계획까지 세울 수 있습니다.

hyperframes-registry는 재사용 가능한 HyperFrames 레지스트리 항목을 더 적은 시행착오로 설치하고 연결하는 데 도움이 됩니다. `hyperframes add`를 실행하고, block과 component를 구분하며, snippet을 병합하고, block을 `index.html`에 연결하고, 디자인 구현과 레지스트리 탐색을 위해 `hyperframes.json` 경로 매핑을 따를 때 사용하세요.

gsap은 HyperFrames 컴포지션을 위한 실용적인 애니메이션 레퍼런스입니다. gsap.to(), from(), fromTo(), gsap.timeline() 중 무엇을 쓸지 판단하고, 적절한 vars, easing, stagger, transform, 성능 패턴을 적용하는 데 도움이 됩니다. 진입 애니메이션, 전환, 재사용 가능한 디자인 효과처럼 구현 가능한 모션이 필요할 때 이 gsap 가이드를 사용하세요.

excalidraw-diagram은 단순히 박스와 화살표를 나열하는 것이 아니라, 시각적으로 논지를 전달하는 Excalidraw JSON 다이어그램을 만듭니다. 워크플로, 아키텍처, 시퀀스 흐름, 의사결정 경로, 개념도를 구조와 가독성, 실제 관계까지 살려 표현해야 할 때 적합합니다. 설치 안내, 렌더링 인식 점검, 더 나은 다이어그램 작성을 위한 실용적인 워크플로도 포함되어 있습니다.

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

canvas는 자유 배치와 명시적인 x/y 좌표를 사용하는 JSON Canvas 다이어그램을 만듭니다. 순서보다 공간 배치가 더 중요한 마인드맵, 지식 그래프, 개념도, 계획 보드 등 다이어밍 워크플로에 적합합니다. 흐름도나 데이터 차트에는 맞지 않습니다. 편집 가능한 노드, 링크, 구조화된 레이아웃이 필요할 때 canvas skill을 사용하세요.

imagegen-frontend-mobile은 프리미엄 모바일 앱 화면과 멀티스크린 플로우를 위한 이미지 생성용 스킬입니다. iOS, Android, 크로스플랫폼 콘셉트에 맞춰, 깔끔한 정보 구조, 읽기 쉬운 텍스트, 절제된 색감, 은은한 휴대폰 목업이 들어간 앱 네이티브 비주얼을 만드는 데 도움이 됩니다. 코드는 물론 웹사이트나 데스크톱 UI가 아니라 이미지 생성에만 사용하세요.

gpt-taste는 세련된 UI 페이지를 만들기 위한 디자인 중심 스킬로, 편집적 아트 디렉션, 간결한 여백 규칙, GSAP 모션을 활용합니다. 마케팅 페이지, 랜딩 페이지, 쇼케이스 사이트처럼 더 다양한 레이아웃, 더 정교한 타이포그래피 제어, 덜 평범한 프런트엔드 패턴이 필요할 때 gpt-taste 스킬을 사용하세요. 이 가이드는 실무 적용을 위한 설치 및 사용 노트도 포함합니다.

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

world-builder는 Dorothy의 포켓몬풍 오버월드에서 생성형 게임 존을 만들고 관리하는 데 특화된 디자인 중심 스킬입니다. world-builder 스킬을 사용하면 테마, 전제, 장소 아이디어를 분위기, 레이아웃, 지형, NPC 배치, 공간 논리를 갖춘 플레이 가능한 맵으로 바꿀 수 있으며, Design Implementation에 바로 활용할 수 있습니다.

gif-sticker-maker는 MiniMax Image Generation, MiniMax Video Generation, 그리고 `ffmpeg`를 사용해 사진을 Funko Pop / Pop Mart 스타일의 애니메이션 GIF 스티커 4개로 바꿔줍니다. 이 gif-sticker-maker 스킬에는 설치 전제조건, 프롬프트 템플릿, 캡션, 그리고 이미지에서 GIF까지의 전체 워크플로가 포함됩니다.

figma-create-new-file는 drafts에 새 Figma 또는 FigJam 빈 파일을 만들고, editor type과 file name 기본값을 처리합니다. 이 figma-create-new-file 기술은 디자인 구현, 빠른 프로토타이핑, 그리고 use_figma를 사용하기 전에 새 캔버스를 여는 작업에 유용합니다. 필요할 경우 whoami를 통해 planKey 확인도 처리합니다.

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