Claude Code, Codex 및 여러분의 에이전트를 위한 디자인 스킬.

현실적인 극단 데이터와 개발 전용 비교 토글로 기존 UI를 스트레스 테스트하고, 수정에 앞서 실패 사례를 보고합니다.

컴포넌트 소스, 기존 데모 데이터, 필드 제한, 그리고 시각적 확인을 위한 실행 중인 앱과 브라우저가 필요합니다.

• UI 스트레스 테스트
• 엣지 케이스 픽스처
• 검토 보고서

웹 애니메이션의 프레임 누락을 진단합니다. 렌더링 비용, 메인 스레드 경합, 프레임당 React 업데이트, 상속된 CSS 변수를 다룹니다.

애니메이션 소스와 재현 가능한 인터랙션, 그리고 성능을 검증할 브라우저 프로파일링과 실제 대상 기기가 필요합니다.

• 웹 애니메이션
• 프레임 성능
• 진단 리뷰

제공된 스크린샷을 기존 앱에서 재현한 뒤, 레퍼런스 뷰포트에서 렌더링하여 눈에 띄는 차이를 수정합니다.

읽을 수 있는 레퍼런스 이미지, 대상 뷰포트, 프로젝트 접근 권한, 사용 가능한 에셋을 제공하세요. 시각적 일치를 확인하려면 브라우저 렌더링이 필요합니다. UIZZE 계정이나 MCP 연결은 필요하지 않습니다.

• 스크린샷에서 코드로
• 레퍼런스 매칭
• UI 구현

영상 요청을 알맞은 워크플로로 라우팅하고, 기존 프로젝트를 재개하며, HTML 컴포지션, 미디어, 미리보기, 렌더링을 조율합니다.

CLI에는 Node.js 22+와 FFmpeg가 필요합니다. 핵심 스킬부터 시작하며, 제작 워크플로는 필요할 때 설치됩니다. 미디어 서비스와 클라우드 렌더링은 추가 요구 사항이 있을 수 있습니다.

• HTML-to-Video
• 워크플로 라우팅
• 영상 제작

정교한 아이소메트릭 SVG 메커니즘과 모델 기반 인터랙션으로 기술적 아이디어를 설명하세요.

이 키트는 Node.js 20.10+가 필요하며, 점검에는 Chrome 또는 Chromium이 필요합니다. skills CLI에는 별도의 Node 요구 사항이 있으며, README에는 CLI 1.7.1용으로 22.20+가 기록되어 있습니다.

• 아이소메트릭 SVG
• 기술 설명
• 인터랙티브 그림

p5.js를 이용한 제너레이티브 아트: 시드 파티클, 플로우 필드 및 조정 가능한 매개변수.

필요: p5.js

• 이미지 및 제너레이티브 아트
• 제너러티브 아트
• OpenDesign에서

Anthropic의 공식 브랜드 컬러 및 타이포그래피를 모든 산출물에 적용합니다. Anthropic 브랜드 전용.

• 브랜드 및 디자인 시스템
• OpenDesign에서

PNG 또는 PDF로 제공되는 오리지널 포스터 및 정적 시각 작품.

• 이미지 및 제너레이티브 아트
• PNG / PDF
• OpenDesign에서

신규 또는 기존 웹 UI에 독특한 시각적 방향, 타이포그래피 및 레이아웃을 설정합니다.

• 웹 및 UI
• UI 코드
• OpenDesign에서

Slack의 크기 및 치수 제한을 충족하는 애니메이션 GIF.

• 모션 및 비디오
• GIF
• OpenDesign에서

페이지, 슬라이드, 문서에 대한 컬러 및 타입 테마를 적용하거나 생성합니다.

• 브랜드 및 디자인 시스템
• OpenDesign에서

React, Tailwind 및 shadcn/ui를 사용한 다중 컴포넌트 인터랙티브 HTML 산출물.

• 웹 및 UI
• HTML
• OpenDesign에서

전체 디자인 시스템을 제안하는 프로덕트 디자인 컨설팅: 미학, 타입, 컬러, 레이아웃, 모션.

• 브랜드 및 디자인 시스템
• 디자인 시스템
• OpenDesign에서

합의된 디자인 방향에서 프로덕션 품질의 HTML/CSS를 생성합니다.

• 웹 및 UI
• HTML

구축된 페이지를 디자이너 관점에서 QA합니다: 불일치, 간격, 계층 구조, 조잡한 패턴을 찾아낸 후 수정합니다.

• Design Review & Accessibility
• 리뷰 보고서
• OpenDesign에서

여러 디자인 변형을 병렬로 생성하고 피드백을 위한 비교 보드를 엽니다.

• 웹 및 UI
• UI 코드

설명 또는 Mermaid 소스를 편집 가능한 Excalidraw 파일과 렌더링된 SVG 및 PNG로 변환합니다.

필요: Excalidraw

• Diagrams & Data Visualization
• Diagram

실제 하드웨어에서 iOS 앱의 시각적 디자인 감사.

• Mobile Apps
• 리뷰 보고서

구현 전 완성도 및 경험 위험에 대해 디자인 계획을 검토합니다.

• Design Review & Accessibility
• 리뷰 보고서
• OpenDesign에서

소셜 미디어, 광고, 웹사이트 히어로 및 인쇄용 배너.

• 이미지 및 제너레이티브 아트
• Image

브랜드 보이스, 시각적 아이덴티티, 메시징 프레임워크, 브랜드 일관성.

• 브랜드 및 디자인 시스템

브랜드 아이덴티티, 디자인 토큰, UI 스타일링, 로고 생성, 기업 아이덴티티 프로그램.

필요: 이미지 생성 서비스 (Gemini, Atlas Cloud 또는 MuAPI)

• 브랜드 및 디자인 시스템

3단계 디자인 토큰, 컴포넌트 사양, 슬라이드 생성.

• 브랜드 및 디자인 시스템
• 디자인 시스템

Chart.js, 디자인 토큰, 반응형 레이아웃을 갖춘 전략적 HTML 슬라이드 덱.

요구사항: Chart.js

• Presentations
• HTML 슬라이드
• OpenDesign에서

shadcn/ui, Tailwind CSS, 캔버스 기반 비주얼을 활용한 접근 가능한 UI 스타일링

요구사항: shadcn/ui, Tailwind CSS

• 웹 및 UI
• UI 코드

웹, 모바일, 데스크톱을 위한 UI/UX 디자인 인텔리전스: 레이아웃, 컬러, 타입, UX 규칙.

• 웹 및 UI
• UI 코드
• OpenDesign에서

프로젝트에서 shadcn 컴포넌트를 추가, 검색, 수정, 스타일링 및 구성합니다.

요구사항: shadcn/ui

• 웹 및 UI
• UI 코드

프로덕션 품질의 접근 가능하고 반응형인 사용자 대면 UI를 구축합니다.

• 웹 및 UI
• UI 코드

이미지 생성을 통한 프리미엄 브랜드 가이드라인 보드, 로고 시스템 및 아이덴티티 덱.

요구사항: Image generation service

• 브랜드 및 디자인 시스템
• Image
• OpenDesign에서

랜딩 페이지, 포트폴리오 및 리디자인을 위한 안티-슬롭 프론트엔드 디자인.

• 웹 및 UI
• UI 코드
• OpenDesign에서

에디토리얼 레이아웃, 레이아웃 다양성, GSAP 모션을 하나의 프론트엔드 스킬로 제공합니다.

요구사항: GSAP

• 웹 및 UI
• UI 코드

하이엔드 에이전시 디테일을 교육합니다: 타이포그래피, 간격, 그림자, 카드, 모션

• 웹 및 UI

디자인 이미지를 먼저 생성하고 분석한 후 일치하는 페이지를 구현합니다.

요구사항: Image generation service

• 웹 및 UI
• UI 코드

이미지 생성을 통한 고충실도 모바일 화면 컨셉 및 플로우 제작.

요구사항: Image generation service

• Mobile Apps
• Image
• OpenDesign에서

이미지 생성을 통한 섹션별 웹사이트 디자인 참조.

요구사항: Image generation service

• 웹 및 UI
• Image
• OpenDesign에서

스위스 타이포그래피와 터미널 미학을 결합한 브루탈리스트 인터페이스 제작.

• 웹 및 UI
• UI 코드

깔끔하고 모노크롬 스타일의 에디토리얼 인터페이스 제작.

• 웹 및 UI
• UI 코드

기존 웹사이트 또는 앱을 감사하고 프리미엄 시각적 품질로 업그레이드합니다.

• Design Review & Accessibility
• UI 코드

시각적 독창성을 강조하는 Google Stitch용 DESIGN.md를 작성합니다.

필요: Google Stitch

• 브랜드 및 디자인 시스템
• DESIGN.md

인터페이스를 디자인, 비평, 감사, 다듬기, 애니메이션 및 개선하는 하나의 스킬.

• Design Review & Accessibility
• UI 코드
• OpenDesign에서

텍스트, 메모 또는 기사를 생성된 장면 비주얼이 포함된 페이스리스 설명 영상으로 변환합니다.

필요: HyperFrames

• 모션 및 비디오
• Video

Figma 에셋, 브랜드 토큰 및 스토리보드를 HyperFrames 컴포지션으로 가져옵니다.

필요: HyperFrames, Figma

• 모션 및 비디오
• Video

템플릿이 맞지 않을 때 맞춤형 다중 장면 HyperFrames 비디오를 작성하거나 편집합니다.

필요: HyperFrames

• 모션 및 비디오
• Video

HyperFrames를 위한 애니메이션 규칙, 장면 설계도, 전환 효과 및 런타임 어댑터입니다.

필요: HyperFrames

• 모션 및 비디오
• Video

HyperFrames 비디오를 위한 크리에이티브 디렉션: 팔레트, 타이포그래피, 구성, 보이스오버, 페이싱입니다.

필요: HyperFrames

• 모션 및 비디오
• Video

HyperFrames를 위한 펀치인, 줌, 리프레임, Ken Burns 이동 및 2D/3D 키프레임입니다.

필요: HyperFrames

• 모션 및 비디오
• Video

짧은 디자인 중심 모션 그래픽: 키네틱 타이포그래피, 통계 카운트업, 로고 스팅, 로어 서드.

필요: HyperFrames

• 모션 및 비디오
• Video

제품 URL, 스크립트 또는 브리프를 제품 론칭 또는 프로모션 비디오로 변환합니다.

필요: HyperFrames

• 모션 및 비디오
• Video

프래그먼트, 분기 및 발표자 모드를 갖춘 인터랙티브 HyperFrames 슬라이드 쇼입니다.

필요: HyperFrames

• Presentations
• HTML 슬라이드

Markdown, Vue 컴포넌트, 코드 하이라이팅 및 애니메이션을 갖춘 개발자 슬라이드 덱입니다.

필요: Slidev

• Presentations
• HTML 슬라이드

모바일 접근성 및 보조 기술 지원을 갖춘 WCAG 2.2 준수 인터페이스.

• Design Review & Accessibility
• UI 코드

브랜드 아이덴티티 인터뷰를 먼저 진행한 후 Stitch를 통해 랜딩 페이지를 생성하고 반복합니다.

필요: Google Stitch

• 웹 및 UI
• UI 코드

확장 가능한 디자인 시스템: 토큰, 테마 인프라, 컴포넌트 아키텍처.

• 브랜드 및 디자인 시스템
• 디자인 시스템

마이크로인터랙션, 모션, 전환 효과 및 사용자 피드백 패턴입니다.

• 모션 및 비디오
• UI 코드

KPI 대시보드: 지표 선정, 차트 선택, 레이아웃 및 실시간 패턴 설계

• Diagrams & Data Visualization
• Dashboard

Material Design 3 및 Jetpack Compose를 적용한 네이티브 Android UI

• Mobile Apps
• UI 코드

Apple Human Interface Guidelines를 준수한 SwiftUI 네이티브 iOS UI

• Mobile Apps
• UI 코드

편집 가능한 PPTX 덱의 기하학, 접근성 및 패키지 무결성을 검증하고 복구합니다.

• Presentations
• PPTX

참조 PPTX 파일의 테마, 타이포그래피, 레이아웃 리듬 및 진단 정보를 분석합니다

• Presentations
• 리뷰 보고서

편집 가능한 PPTX 파일을 위한 좌표 명시적 JSON 명세서를 작성합니다

• Presentations
• PPTX

PPTX 파일에 승인된 아이콘, 이미지, SVG 및 인포그래픽을 선택하고 배치합니다

• Presentations
• PPTX

React Native 스타일링, 내비게이션 및 Reanimated 애니메이션

필요 사항: React Native

• Mobile Apps
• UI 코드

컨테이너 쿼리, 유동 타이포그래피, CSS Grid 및 모바일 우선 중단점을 활용한 반응형 레이아웃

• 웹 및 UI
• UI 코드

VoiceOver, NVDA 및 JAWS 스크린 리더로 웹 애플리케이션을 테스트합니다

• Design Review & Accessibility
• 리뷰 보고서

Tailwind CSS v4를 활용한 디자인 시스템: 토큰, 컴포넌트 라이브러리, 반응형 패턴

요구사항: Tailwind CSS

• 브랜드 및 디자인 시스템
• 디자인 시스템

일관된 시각적 표현을 위한 타이포그래피, 색채 이론, 간격 체계 및 아이콘 시스템을 다룹니다.

• 브랜드 및 디자인 시스템

자동화된 테스트, 수동 점검 및 개선 지침을 포함한 WCAG 2.2 감사를 수행합니다.

• Design Review & Accessibility
• 리뷰 보고서

재사용 가능한 React, Vue 및 Svelte 컴포넌트 패턴과 구성 전략을 제공합니다.

• 웹 및 UI
• UI 코드

draw.io 다이어그램 파일(.drawio, .drawio.svg, .drawio.png)을 생성하고 편집합니다.

요구사항: draw.io

• Diagrams & Data Visualization
• Diagram

자연어로부터 Excalidraw 다이어그램 및 마인드맵을 생성합니다.

필요: Excalidraw

• Diagrams & Data Visualization
• Diagram

패럴랙스, 고정 섹션, 가로 스크롤 및 텍스트 스크롤 애니메이션을 구현합니다.

요구사항: GSAP

• 모션 및 비디오
• UI 코드

MCP 도구를 통한 Penpot의 전문 UI/UX 디자인, 컴포넌트 및 디자인 시스템.

요구사항: Penpot MCP

• 웹 및 UI
• 디자인 파일

Power BI 리포트 디자인: 차트 선택, 레이아웃, 가독성, 접근성.

요구사항: Power BI

• Diagrams & Data Visualization
• Dashboard

실행 중인 웹사이트를 시각적으로 검사하여 레이아웃 문제를 찾아 수정합니다.

• Design Review & Accessibility
• 리뷰 보고서

목적, 도구, 속성, 곡선 및 지속시간을 순서대로 결정하여 애니메이션을 처음부터 구축합니다.

• 모션 및 비디오
• UI 코드

React Native 및 Expo를 위한 제스처, 스프링, 트랜지션입니다.

요구 사항: React Native / Expo

• Mobile Apps
• UI 코드

모호한 모션 설명을 정확한 용어로 변환하는 역참조 용어집입니다.

• 모션 및 비디오

Apple의 제스처, 물리적 모션, 공간적 위계를 웹으로 변환합니다.

• 웹 및 UI
• UI 코드

UI 완성도, 컴포넌트 디자인, 애니메이션 결정에 대한 Emil Kowalski의 철학.

• 웹 및 UI
• OpenDesign에서

UI에서 애니메이션을 적용해야 할 위치를 파라미터 제안과 함께 찾아내고 나머지는 거부합니다.

• 모션 및 비디오
• 리뷰 보고서

기존 모션 코드를 검토하고 우선순위가 지정된 독립적인 구현 계획을 생성합니다.

• Design Review & Accessibility
• 리뷰 보고서

UI 요소의 여러 가지 실제로 다른 버전을 라이브 시각적 선택기 뒤에 구축합니다.

• 웹 및 UI
• UI 코드

높은 수준의 기준에 따라 애니메이션 코드의 타이밍, 인터랙션, 완성도를 검토합니다.

• Design Review & Accessibility
• 리뷰 보고서
• OpenDesign에서

React의 View Transition API를 사용한 네이티브 느낌의 페이지 전환입니다.

요구 사항: React

• 모션 및 비디오
• UI 코드

처음부터 또는 PowerPoint(PPT) 파일에서 변환된 애니메이션이 풍부한 HTML 슬라이드.

• Presentations
• HTML 슬라이드
• OpenDesign에서

JSON 사양을 Ink를 사용하여 인터랙티브 터미널 UI로 렌더링합니다.

필요 사항: Ink

• 웹 및 UI
• 터미널 UI

래스터 이미지 생성 또는 편집: 일러스트레이션, 사진, 텍스처, 스프라이트, 목업.

요구사항: Image generation service

• 이미지 및 제너레이티브 아트
• Image
• OpenDesign에서

매거진 또는 스위스 스타일의 단일 파일 가로형 HTML PPT 덱, 발표자 보기 및 동기화 기능 포함.

• Presentations
• HTML 슬라이드
• OpenDesign에서

모든 제품에 대한 브랜드 가이드라인 정의 또는 적용: 색상, 타이포그래피, 로고, 톤앤매너.

• 브랜드 및 디자인 시스템

나중에 문서 및 덱에 사용하기 위해 10개 질문 위저드를 통해 브랜드 아이덴티티를 한 번 캡처합니다.

• 브랜드 및 디자인 시스템
• 디자인 시스템

Markdown 덱을 브랜드가 적용된 슬라이드로 변환합니다.

• Presentations
• HTML 슬라이드

디자인 토큰, 컴포넌트 문서, 반응형 계산, 개발자 핸드오프.

• 브랜드 및 디자인 시스템
• 디자인 시스템

데이터 기반 페르소나, 여정 맵, 사용성 테스트 프레임워크, 리서치 종합.

• UX & 리서치
• 리서치 문서

고충실도 HTML 프로토타입, 슬라이드, 애니메이션 및 시각화; 세 가지 초안에서 시작합니다.

• 웹 및 UI
• HTML

디자인 또는 페이지의 WCAG 2.1 AA 감사: 대비, 키보드, 터치 타겟.

• Design Review & Accessibility
• 리뷰 보고서

사용성, 계층 구조 및 일관성에 대한 구조화된 디자인 피드백.

• Design Review & Accessibility
• 리뷰 보고서

디자인으로부터 개발자 핸드오프 스펙: 레이아웃, 토큰, 컴포넌트 상태, 중단점.

• 브랜드 및 디자인 시스템
• 핸드오프 명세

기존 디자인 시스템을 감사, 문서화 또는 확장합니다.

• 브랜드 및 디자인 시스템
• 디자인 시스템

인터뷰, 설문조사, 테스트 노트를 주제와 권장사항으로 종합합니다.

• UX & 리서치
• 리서치 문서

사용자 인터뷰, 설문조사, 사용성 테스트를 계획하고 수행하며 종합합니다.

• UX & 리서치
• 리서치 문서

UX 카피를 작성하거나 검토합니다: 마이크로카피, 오류 메시지, 빈 상태, CTA.

• UX & 리서치

GSAP 핵심 API: to/from/fromTo, easing, stagger, matchMedia, reduced motion.

요구사항: GSAP

• 모션 및 비디오
• UI 코드
• OpenDesign에서

Vue, Svelte 및 기타 비 React 프레임워크에서의 GSAP: 생명주기, 스코핑, 정리.

요구사항: GSAP

• 모션 및 비디오
• UI 코드
• OpenDesign에서

GSAP 성능: 변환, 레이아웃 스래싱 방지, will-change, 배칭.

요구사항: GSAP

• 모션 및 비디오
• UI 코드
• OpenDesign에서

GSAP 플러그인: ScrollTo, ScrollSmoother, Flip, Draggable, SplitText, SVG 및 물리.

요구사항: GSAP

• 모션 및 비디오
• UI 코드
• OpenDesign에서

useGSAP 훅, refs, context, cleanup을 사용한 React 및 Next.js에서의 GSAP.

요구사항: GSAP

• 모션 및 비디오
• UI 코드
• OpenDesign에서

ScrollTrigger를 사용한 스크롤 연동 애니메이션: 고정, 스크럽, 트리거, 패럴랙스.

요구사항: GSAP

• 모션 및 비디오
• UI 코드
• OpenDesign에서

GSAP 타임라인: position 매개변수, 중첩, 재생 제어.

요구사항: GSAP

• 모션 및 비디오
• UI 코드
• OpenDesign에서

gsap.utils 헬퍼: clamp, mapRange, interpolate, snap, wrap, pipe.

요구사항: GSAP

• 모션 및 비디오
• UI 코드
• OpenDesign에서

PPT 및 디자인 작업을 위한 프레젠테이션용 컬러 팔레트 및 폰트 페어링.

• 브랜드 및 디자인 시스템

반지름 및 간격 레시피로부터 PPT 슬라이드를 위한 일관된 시각 시스템.

• Presentations

사람, 반려동물, 사물 또는 로고 사진을 캡션이 있는 네 개의 GIF 스티커로 변환합니다.

• 모션 및 비디오
• GIF
• OpenDesign에서

편집 가능한 PowerPoint(PPTX) 슬라이드 덱을 생성, 편집 및 읽습니다.

• Presentations
• PPTX
• OpenDesign에서

GLSL 셰이더: 레이 마칭, SDF, 유체, 파티클, 절차적 비주얼을 구현합니다.

필요: GLSL / WebGL

• 이미지 및 제너레이티브 아트
• 제너러티브 아트
• OpenDesign에서

PptxGenJS로 개별 PowerPoint 슬라이드를 구현합니다.

필요: PptxGenJS

• Presentations
• PPTX

간격, 계층, 타이포그래피 및 작은 레이아웃 문제를 수정하여 UI 코드를 빠르게 개선합니다.

• Design Review & Accessibility
• UI 코드

기존 제품 저장소 또는 공개 웹사이트에서 DESIGN.md를 생성하거나 업데이트합니다.

• 브랜드 및 디자인 시스템
• DESIGN.md

ARIA, 키보드, 포커스, 대비 및 폼 오류를 검토하고 수정합니다.

• Design Review & Accessibility
• 리뷰 보고서

끊김 현상이 있는 CSS/JS 애니메이션과 스크롤 연동 모션을 찾아 수정합니다.

• 모션 및 비디오
• 리뷰 보고서

제품 표면을 자체 디자인 증거와 대조하여 감사하고 구현 계획을 작성합니다.

• Design Review & Accessibility
• 리뷰 보고서

Stitch 프로젝트를 분석하고 의미론적 DESIGN.md를 작성합니다.

필요: Google Stitch

• 브랜드 및 디자인 시스템
• DESIGN.md
• OpenDesign에서

모호한 UI 아이디어를 세련되고 Stitch에 최적화된 프롬프트로 재작성합니다.

필요: Google Stitch

• 웹 및 UI
• OpenDesign에서

Stitch 디자인을 TanStack Query를 사용하는 React + Vite 대시보드로 변환합니다.

필요: Google Stitch

• 웹 및 UI
• UI 코드

Stitch 프로젝트에서 Remotion 전환 및 확대/축소 효과가 포함된 워크스루 비디오를 생성합니다.

필요: Google Stitch, Remotion

• 모션 및 비디오
• Video
• OpenDesign에서

shadcn/ui 컴포넌트 통합 및 커스터마이징: 탐색, 설치, 모범 사례.

요구사항: shadcn/ui

• 웹 및 UI
• UI 코드
• OpenDesign에서

정적 HTML 및 디자인 시스템 추출을 통해 프론트엔드 코드를 Stitch 디자인으로 변환합니다.

필요: Google Stitch

• 웹 및 UI
• 디자인 파일

모든 프레임워크의 프론트엔드 소스 코드에서 완전한 DESIGN.md를 추출합니다.

• 브랜드 및 디자인 시스템
• DESIGN.md

인라인 CSS 및 이미지가 포함된 독립형 정적 HTML 스냅샷을 추출합니다.

• 웹 및 UI
• HTML

텍스트 또는 참조 이미지에서 Stitch 화면을 생성, 편집 및 변형합니다.

필요: Google Stitch

• 웹 및 UI
• 디자인 파일

MCP 도구를 통해 Stitch에서 디자인 시스템을 생성, 업데이트 및 적용합니다.

필요: Google Stitch

• 브랜드 및 디자인 시스템
• 디자인 시스템

Stitch 디자인을 모듈형 React + Vite 컴포넌트로 변환하거나 동기화합니다.

필요: Google Stitch

• 웹 및 UI
• UI 코드

Stitch HTML 디자인을 React Native 컴포넌트로 변환하거나 동기화합니다.

필요: Google Stitch, React Native

• Mobile Apps
• UI 코드

대시보드, 관리 패널, SaaS 도구 및 설정 페이지를 위한 크래프트 중심 인터페이스 디자인.

• 웹 및 UI
• UI 코드

호버, 그림자, 테두리, 아이콘, 타이포그래피, 마이크로인터랙션 완성도를 위한 디자인 엔지니어링 원칙.

• 웹 및 UI

WCAG 2.2를 따르는 웹 접근성을 감사하고 개선합니다.

• Design Review & Accessibility
• 리뷰 보고서

모션 디자인 원칙을 적용합니다: 타이밍, 이징, 안무 및 애니메이션 기초.

• 모션 및 비디오

정성 및 정량 연구, 가이드, 계획을 포함한 종합 사용자 리서치 어시스턴트.

• UX & 리서치
• 리서치 문서

Material Design 3 토큰, 컴포넌트, 적응형 레이아웃을 구현합니다.

• Mobile Apps
• UI 코드

Kowalski, Krehel, Tompkins의 원칙에 따른 의도적 인터랙션 모션 또는 기존 애니메이션 검토.

• 모션 및 비디오

색상 이름, 이론, 색 공간, 팔레트, 램프, 그래디언트, 변환, 대비.

• 브랜드 및 디자인 시스템
• OpenDesign에서

AntV API를 통해 막대, 선, 파이, 레이더, Sankey, 마인드맵, 흐름도 차트로 데이터를 렌더링합니다.

필요: AntV API

• Diagrams & Data Visualization
• 차트 이미지

주어진 텍스트로부터 인포그래픽을 생성합니다.

필요: AntV API

• Diagrams & Data Visualization
• Image

사용자 중심의 접근 가능한 마이크로카피: 버튼, 레이블, 오류, 폼, 온보딩.

• UX & 리서치

각 접근성 발견 사항을 영향받는 요소, 제안된 수정, 검증 결과와 연결해 관리하세요.

번들 도구용 Python, 소스 접근 권한, 맥락 기반 검증을 위한 브라우저 또는 보조 기술 환경이 필요합니다.

• 접근성
• 디자인 검토
• 프런트엔드

논증, 근거, 슬라이드 제목을 중심으로 학술 발표를 기획하세요. PPTX 파일은 별도의 도구가 만듭니다.

별도의 PPTX 스킬이 필요합니다. 항목에는 구현 관련 의존성으로 markitdown, PptxGenJS, LibreOffice, Poppler가 나열되어 있습니다.

• 프레젠테이션
• 학술 연구
• PowerPoint

Illustrator 문서, 아트워크, 내보내기를 만들고 편집하는 ExtendScript 스크립트를 작성합니다.

Adobe Illustrator CC 이상이 필요하며, 생성된 스크립트는 해당 ExtendScript 환경에서 실행됩니다.

• 벡터 디자인
• 자동화
• Illustrator

연구 관찰을 테마로 묶되, 원본 근거와의 연결을 유지합니다.

제공된 녹취록이나 노트를 읽을 수 있는 에이전트를 사용하세요. 참여자 ID와 디자인 질문을 제공해야 하며, 이 스킬은 인터뷰를 수집하는 것이 아니라 기존 근거를 종합합니다.

• UX 리서치
• 종합

전환 하나에 명확한 목적을 부여하고, 인터페이스의 상태 변화를 뒷받침하는 모션 프로필을 만듭니다.

인터페이스의 이전 및 이후 상태, 트리거, 대상 기기를 제공하세요. 실행 가능한 미리보기로 타이밍, 중단 처리, 모션 감소 동작을 확인하세요.

• UI 모션
• 디자인 가이드

시각적 처리를 고르기 전에 제품의 실제 대상과 제약 조건부터 살펴보세요.

프로젝트 파일을 읽을 수 있는 에이전트와 시각 확인을 위한 렌더링 지원이 필요합니다. 유료 UIZZE MCP는 선택 사항입니다.

• UI 디자인
• 디자인 검토

마크, 인코딩, 스케일, 인터랙션을 사용해 AntV G2 v5로 차트를 만드세요.

@antv/g2 v5 또는 문서에 안내된 브라우저 번들이 필요합니다. 선택적인 참조 검색은 외부 AntV 컨텍스트 서비스를 사용합니다.

• Data Visualization
• 차트
• JavaScript

AntV G6 v5로 그래프 레이아웃과 인터랙티브 탐색을 포함한 네트워크 데이터를 시각화합니다.

@antv/g6 v5를 사용하는 애플리케이션, 브라우저 그래프 컨테이너, 그리고 문서화된 참조 검색 서비스가 필요한 경우 네트워크 접근이 필요합니다. API는 설치된 릴리스 기준으로 확인하세요.

• 그래프 시각화
• 네트워크
• AntV

연결, 편집 동작, 필요한 플러그인을 포함해 AntV X6로 노드-엣지 다이어그램 편집기를 구축합니다.

문서화된 @antv/x6 v3 API을 브라우저 캔버스 및 필요한 플러그인과 함께 사용하세요. 추가 참고 자료를 가져오려면 네트워크 접근이 필요합니다. 예제는 설치된 버전에서 확인하세요.

• 다이어그램 편집기
• 노드 인터페이스
• AntV

출처에 기반한 오리지널 설명 영상을 내레이션과 일관된 시각 언어로 제작합니다.

제공된 Remotion/Node 프로젝트, Python 보조 스크립트, 렌더링 환경, 적합한 TTS 경로가 필요합니다. 문서화된 중국어와 영어 기본값은 서로 다른 음성 엔진을 사용하며, 멀티 에이전트 구성은 설명된 워크플로의 일부입니다.

• 모션 그래픽
• 영상
• Remotion

스크린샷, 캡션, 시각 에셋으로 조율된 앱 스토어 등록 이미지 세트를 구성합니다.

패키지로 제공되는 Next.js 에디터, 지원되는 Node 및 패키지 관리자 환경, 브라우저가 필요합니다. PNG 내보내기는 html-to-image를 사용하며, 소스 캡처, 글꼴 및 기타 에셋은 적절한 사용 권한이 있어야 합니다.

• 앱 마케팅
• 스크린샷
• 현지화

플랫폼별 디자인 및 접근성 가이드에 따라 Apple 플랫폼 인터페이스를 검토하세요.

검사 도구에는 Python 3가 필요하며 표준 라이브러리만 사용합니다. 또한 최신 Apple Human Interface Guidelines(HIG)와 동작 확인을 위한 기기 또는 시뮬레이터 접근이 필요합니다.

• 네이티브 UI
• 접근성
• 디자인 검토

기사의 핵심 아이디어를 알맞은 지점에서 설명하는 삽화를 기획하고 생성하세요.

사용 가능한 래스터 생성 백엔드와 이 스킬의 참조·구성 파일이 필요합니다. 백엔드 접근 권한과 비용은 별개입니다.

• 에디토리얼 일러스트레이션
• 콘텐츠 디자인

만화 페이지를 생성하기 전에 각 컷이 무엇을 가르칠지 계획합니다.

사용 가능한 이미지 백엔드, 그리고 제공된 PDF 병합 스크립트를 위한 Bun 또는 npx 기반 Bun 런타임이 필요합니다.

• 만화
• 교육 디자인
• 스토리텔링

하나의 핵심 아이디어를 중심으로, 정해진 구도와 비주얼 스타일을 갖춘 아티클 커버를 생성합니다.

사용 가능한 래스터 이미지 백엔드, 그리고 이 스킬의 설정 및 아트 디렉션 참고 자료가 필요합니다.

• 에디토리얼 디자인
• 커버 이미지

프로토타입, 프레젠테이션 콘셉트, 재사용 가능한 비주얼 시스템을 위한 파일 기반 디자인 워크플로를 사용하세요.

파일을 다룰 수 있는 에이전트와 저장소의 방법론, 내장 가이드, 참조 문서, 스크립트가 필요합니다. 내보내기와 가져오기 경로에는 각각의 선행 조건이 있습니다.

• 프로토타이핑
• 디자인 시스템
• 프레젠테이션

관계, 레이블, 커넥터 경로를 검사할 수 있는 벡터 파일에 명확하게 담습니다.

SVG를 위한 텍스트/코드 환경과, 제공된 PNG 변환 스크립트를 위한 Bun 또는 npx 기반 Bun이 필요합니다.

• 다이어그램
• SVG
• 정보 디자인

배치 워크플로를 포함해 지원되는 제공업체를 통해 이미지 생성 및 편집 작업을 실행합니다.

Bun 또는 npx 기반 Bun 런타임, 완전한 제공업체 어댑터, 그리고 선택한 지원 경로에 필요한 자격 증명 또는 로그인이 필요합니다.

• 이미지 생성
• 배치 워크플로
• 시각 자산

자료에 맞는 비교, 위계, 프로세스 또는 개요 레이아웃을 활용해 콘텐츠를 인포그래픽으로 만드세요.

사용 가능한 래스터 이미지 백엔드와 레이아웃, 스타일, 구성 참고 자료가 필요합니다.

• 인포그래픽
• 정보 디자인

일러스트 슬라이드를 생성하고 공유용 이미지 기반 덱으로 조립합니다. 개별 슬라이드 개체는 편집할 수 없습니다.

래스터 이미지 생성 백엔드, 그리고 PPTX/PDF 조립 스크립트를 위한 Bun 또는 npx 기반 Bun이 필요합니다.

• 프레젠테이션
• 에디토리얼 디자인

카드당 하나의 핵심 아이디어를 담은, 시각적으로 일관된 샤오홍슈 이미지 카드 시리즈를 만드세요.

적절한 참조 이미지를 지원하는 사용 가능한 래스터 백엔드와 설정 및 카드 레이아웃 참조 자료가 필요합니다.

• 소셜 그래픽
• 콘텐츠 디자인
• 이미지 카드

원본 자료를 에디토리얼 타이포그래피, 레이아웃, 일러스트를 갖춘 읽기 좋은 HTML 아티클로 바꿉니다.

문서화된 빌드는 Node/npm, Vite, React, TypeScript, Reacticle을 사용합니다. 문서 추출과 선택적 PDF 출력에는 추가 도구가 필요할 수 있으며, 생성 이미지는 별도로 사용할 수 있는 백엔드가 필요합니다.

• 에디토리얼 디자인
• HTML
• 롱폼

참가자의 카드 그룹핑을 분석해 내비게이션 카테고리를 제안하고 모호한 항목을 찾아냅니다.

각 참가자의 배치와 레이블, 조사 방식을 포함한 완료된 카드 소팅 결과를 제공하세요. 이 스킬은 제공된 근거를 분석하며, 참가자 모집과 데이터 수집은 별개입니다.

• UX 리서치
• 종합 분석

사람들이 과제를 어디서 시작해야 하는지 알아볼 수 있는지 확인하는 첫 클릭 테스트를 계획하세요.

화면 또는 프로토타입, 사용자 목표, 모집 기준을 제공하세요. 이 스킬은 테스트 계획을 만들며, 세션 진행과 클릭 수집에는 별도의 연구 환경이 필요합니다.

• UX
• 디자인 가이드

원본 자료를 일러스트가 있는 슬라이드로 만들고, 개별 편집이 가능한 슬라이드 콘텐츠가 아닌 이미지 기반 콘텐츠의 PPTX로 조립하세요.

Python 3, 사용 가능한 이미지 생성 백엔드, 그리고 저장소의 조립 및 상태 기록 스크립트가 필요합니다. 실제 실행에는 참조된 워크플로 문서가 필요합니다.

• 프레젠테이션
• 이미지 생성

브랜드 컬러를 사용 가능한 인터페이스 역할과 전경-배경 조합 세트로 바꿉니다.

브랜드 컬러, 인터페이스 역할, 접근성 목표를 제공하세요. 제안된 컬러 조합은 실제 컴포넌트 상태와 대비 검사 도구로 평가하세요.

• 컬러 디자인
• 디자인 가이드

외형만큼 동작도 꼼꼼히 설명해 컴포넌트 하나를 구현할 수 있게 만드세요.

컴포넌트의 목적, 시각적 변형, 대상 플랫폼을 제공하세요. 결과물은 구현과 테스트를 위한 명세이며, 구현된 컴포넌트가 아닙니다.

• 디자인 시스템
• 명세

시스템이 무엇을 말하고, 무엇을 응답으로 기대하며, 둘이 일치하지 않을 때 어떻게 복구할지 설계합니다.

지원하는 작업, 채널 제약, 확인 요구 사항을 제공하세요. 음성 흐름은 기기 및 음성 인식 테스트도 필요합니다. 작성된 대화만으로는 인식 품질을 확인할 수 없습니다.

• UX
• 디자인 가이드

색상을 단순히 반전하지 않고, 인터페이스의 위계를 다크 표면으로 옮겨 구현합니다.

기존 라이트 모드 팔레트, 컴포넌트 예시, 미디어 자산으로 시작하세요. 렌더링된 인터페이스에서 다크 모드 대비, 테마 전환, 이미지 처리를 확인하세요.

• 색상 디자인
• 디자인 가이드

하나의 콘텐츠 소스에서 대안 슬라이드 레이아웃을 생성한 뒤, 로컬 편집기로 미리 보고 내보내세요.

패키지된 생성기를 사용하려면 Node.js 20 이상과 npm이 필요합니다. 편집 및 내보내기 기능에는 해당 로컬 미리보기 서비스를 사용하세요. 일반 정적 서버는 이러한 API를 제공하지 않습니다.

• 프레젠테이션
• HTML 슬라이드
• PPTX

가장 정교해 보이는 차트가 아니라, 비교를 이해하기 쉽게 만드는 그래픽을 선택하세요.

실제 데이터, 필드 정의, 독자의 질문, 표시 환경의 제약을 제공하세요. 이 스킬은 차트 디자인을 안내하며, 데이터 검증과 차트 구현은 별도의 작업입니다.

• Data Visualization
• 디자인 가이드

시각적 결정에 이름과 관계를 부여해 컴포넌트가 재사용할 수 있게 합니다.

기존 시각적 값, 컴포넌트 예시, 네이밍 제약 사항을 제공하세요. 이 스킬은 토큰 이름과 관계를 정의하며, 내보내기 도구와 프레임워크 통합은 별도 설정이 필요합니다.

• 디자인 시스템
• 사양

한 번의 인터뷰에서 경험을 재구성하려 하지 말고, 세션 사이에 펼쳐지는 경험을 그대로 기록하세요.

연구 목표, 참가자 기준, 기간, 실현 가능한 기록 도구를 제공하세요. 결과물은 연구 계획이며, 모집, 체크인, 참가자 데이터 수집은 별도로 진행해야 합니다.

• UX 리서치
• 연구 계획

원하는 스크린샷을 먼저 정한 다음, 이를 구현의 목표로 삼으세요.

목표 이미지가 필요하며, 제공되지 않은 경우 이미지 생성 기능을 사용할 수 있어야 합니다. 세부 도구 요구 사항은 선택한 참조 워크플로에 따라 다르며, 진입 파일만으로는 확인되지 않았습니다.

• 시각적 반복
• 게임 디자인
• 프로토타이핑

직접 확인된 근거와 해석을 구분한 채 사용자의 관점을 공유합니다.

리서치 노트를 읽을 수 있는 에이전트, 정의된 사용자 또는 세그먼트, 그리고 이 맵이 뒷받침할 디자인 결정이 필요합니다.

• UX 리서치
• 종합 분석

실패가 발생했을 때 무슨 일이 있었는지 설명하고, 작업 내용을 잃지 않은 채 다음 단계로 나아갈 길을 제공하세요.

영향을 받는 플로우, 알려진 실패 사례, 그리고 제품이 실제로 지원하는 복구 동작을 읽을 수 있는 에이전트가 필요합니다.

• UX
• 디자인 가이드

Code Connect로 게시된 Figma 컴포넌트를 해당 코드 컴포넌트에 매핑합니다.

연결된 Figma MCP, 게시된 컴포넌트와 코드베이스에 대한 접근 권한, 그리고 현재 유효한 Code Connect 사용 권한과 편집 권한이 필요합니다.

• Figma
• 디자인 시스템
• 개발자 핸드오프

에이전트가 Figma 디자인을 구현할 때 사용해야 하는 저장소 경로, 컴포넌트, 규칙을 문서화하세요.

Figma MCP 연결과 대상 코드베이스에 대한 접근 권한이 필요하며, 대상 규칙 형식은 코딩 호스트에 따라 달라집니다.

• Figma
• 디자인 시스템
• 에이전트 규칙

디자인 시스템과 연결된 상태를 유지하는 편집 가능한 Figma 화면을 만듭니다.

연결된 Figma MCP, 대상 파일 접근 권한, 게시된 디자인 시스템, 캔버스 작업용 보조 figma-use 스킬이 필요합니다.

• Figma
• UI 디자인
• 디자인 시스템

디자인 토큰에서 시작해 컴포넌트를 추가하며 재사용 가능한 Figma 라이브러리를 구축하세요.

편집 가능한 파일 접근 권한이 있는 Figma MCP, 저장소 접근 권한, 함께 쓰는 figma-use 스킬과 헬퍼 참고 자료가 필요합니다.

• Figma
• 디자인 시스템
• 컴포넌트 라이브러리

대상 저장소의 컴포넌트와 관례를 사용해 Figma 디자인을 구현한 뒤, 결과를 디자인과 비교합니다.

Figma MCP 연결, 선택한 디자인과 대상 저장소에 대한 접근 권한, 시각적 검증을 위한 실행 가능한 미리보기가 필요합니다.

• Figma
• 프런트엔드 디자인
• 개발자 핸드오프

첫 필드부터 제출 성공까지의 경로를 수정 과정과 재방문까지 포함해 구체적으로 정의합니다.

폼 브리프, 필수 필드와 검증 규칙, 기존 폼 화면을 읽을 수 있는 에이전트가 필요합니다.

• UX
• 디자인 가이드

치수가 지정된 모델링 작업을 확인과 조정이 가능한 FreeCAD 객체로 옮깁니다.

FreeCAD와 함께 제공되는 Python이 필요하며, GUI 작업에는 번들된 PySide, 씬그래프 작업에는 Pivy를 추가로 사용합니다.

• 3D 디자인
• CAD
• Python

프로젝트에 구성된 자격 증명을 사용해 지원되는 제공자를 통해 이미지 에셋을 생성하고 저장합니다.

지원되는 제공자의 API 키와 네트워크 접근이 필요합니다. 모델 사용 가능 여부와 이용 요금은 별도로 확인해야 합니다.

• 이미지 생성
• 시각 에셋

최종 스와이프 동작만이 아니라 제스처 이전, 도중, 이후에 일어나는 일을 설계합니다.

인터랙션 브리프, 대상 플랫폼, 버튼이나 메뉴로 사용할 수 있는 동작을 읽을 수 있는 에이전트가 필요합니다.

• UX
• 디자인 가이드

사용 가능한 기본 이미지 도구 또는 설정된 로컬 API 워크플로를 통해 이미지 프롬프트를 준비하고 생성 또는 편집을 실행하세요.

로컬 API 모드에는 Garden의 명시적 활성화, Node 스크립트, 설정된 자격 증명이 필요합니다. 기본 모드는 호스트의 이미지 도구에 따라 달라집니다. 모델 접근 권한, 가격, 지원 파라미터는 해당 환경에서 확인해야 합니다.

• 이미지 생성
• 프롬프트 설계
• 이미지 편집

인터페이스 사용성을 검토하고 각 발견 사항의 근거를 문서화합니다. 전문가의 판단을 참가자 조사 결과처럼 제시하지 않습니다.

인터페이스를 살펴볼 수 있는 에이전트, 정의된 사용자 과업 목록, 관련 도메인 제약 조건이 필요합니다.

• UX
• 디자인 가이드

카드를 만들기 전에 포일 처리 방식 또는 보는 각도에 따라 이미지 전체가 바뀌는 변환 방식을 선택하세요.

이미지 생성, Python, Blender, 그리고 제공되는 뷰어를 위한 웹 런타임이 필요합니다. 소스에는 파이프라인 중 로컬 의존성 설치가 언급되어 있습니다.

• 3D 디자인
• 수집용 카드
• Blender

슬라이드 전환의 나열이 아니라 아트 디렉션에서 출발해 단편 영상을 만드세요. Huashu Art Motion은 코드로 그린 장면, 캐릭터 스프라이트, 모션 검토를 로컬 렌더링 워크플로에 결합합니다.

로컬 렌더링에는 uv, FFmpeg, Playwright Chromium이 필요합니다. 사람 형태의 스프라이트에는 기존 캐릭터 프레임을 제공하거나 별도의 이미지 생성 워크플로를 사용해야 하며, 오디오와 폰트는 각각 별도의 에셋과 사용 권한이 필요합니다.

• 아트 애니메이션
• Canvas
• 단편 영상

시각 레퍼런스, 디자인 규칙, 토큰으로 재사용 가능한 디자인 Skill을 만드세요.

파일 접근 권한, 적절한 레퍼런스 점검 도구, validate.mjs 실행용 Node, 시각적 확신을 위한 브라우저 검토가 필요합니다. 도구 사용 가능 여부가 추출 충실도에 영향을 줍니다.

• 디자인 시스템
• Skill 제작
• 디자인 토큰

관련 없는 심볼을 모으는 대신, 일관된 제작 방식과 네이밍 체계를 아이콘에 부여합니다.

대표 아이콘, 의도한 크기, 필요한 디자인 및 코드 형식을 확인할 수 있는 에이전트가 필요합니다.

• 디자인 시스템
• 명세

의뢰했거나 반복 사용하는 일러스트레이션에 공통된 비주얼 언어와 인터페이스 안에서의 명확한 역할을 부여합니다.

시각 레퍼런스, 제품 색상, 일러스트레이션이 표시될 화면과 크기를 확인할 수 있는 에이전트가 필요합니다.

• UX
• 디자인 가이드

스크린샷 위에 편집 가능한 텍스트를 얹는 대신, 시각적 슬라이드를 구조화된 덱으로 변환합니다.

editppt CLI, 적합한 이미지 생성 기능, 여러 페이지 실행을 위한 멀티 에이전트 실행이 필요합니다. PaddleOCR은 선택적으로 설정하는 보조 도구이며, 오프라인 힌트는 품질 특성이 다릅니다.

• 프레젠테이션
• PowerPoint
• 재구성

내비게이션이 어떤 모습일지 정하기 전에 정보가 어디에 속해야 하는지부터 결정합니다.

제품 콘텐츠와 사용자 작업에 관한 근거가 필요하며, 출처는 특정 디자인 애플리케이션을 요구하지 않습니다.

• UX 전략
• 콘텐츠 구조

리서치 목표를 정답을 암시하지 않고 근거를 이끌어내는 질문으로 바꿉니다.

리서치 목표, 참여자 기준, 세션 제약 조건이 주요 입력값이며, 녹화 서비스나 참여자 모집 서비스는 제공되지 않습니다.

• UX 리서치
• 인터뷰

제품 의사결정을 사람이 이루고자 하는 바를 중심으로 다시 정의합니다.

사용자 리서치 또는 명확히 표시된 가설이 필요하며, 인터뷰를 직접 수집하지는 않습니다.

• UX 리서치
• 제품 전략

개별 접점을 사람이 실제로 거치는 경험으로 연결합니다.

기존 페르소나, 리서치, 분석 데이터를 사용하며, 자동 감정 측정은 확인된 바 없습니다.

• UX 리서치
• 저니 매핑

페이지의 논리와 비주얼 규칙을 하나의 목표 전환에 맞춰 연결합니다.

단일 애플리케이션 런타임은 필요하지 않습니다. 구현 예시는 Tailwind 값, IntersectionObserver, 선택적 모션 도구를 참조합니다.

• 랜딩 페이지
• 카피라이팅
• 웹 디자인

컴포넌트를 생성하기 전에 실제 제품 제안을 페이지 섹션과 연결하세요.

Tailwind가 포함된 호환 가능한 React 또는 Next.js 프로젝트가 필요합니다. 참조된 UI 컴포넌트와 선택적 브랜드 분석 도구는 별도 설정이 필요할 수 있습니다.

• 랜딩 페이지
• 카피라이팅
• 프론트엔드

관련된 페이지 레이아웃이 공유할 컬럼, 여백, 반응형 동작을 정의합니다.

명시된 런타임 의존성은 없습니다. 유용한 그리드 값을 고르려면 실제 콘텐츠 제약이 필요합니다.

• UI 디자인
• 반응형 레이아웃

진행 상황을 오해하게 하지 않으면서 대기 중 무슨 일이 일어나는지 보여 줍니다.

정확한 작업 소요 시간과 진행률 제공 가능 여부는 제품 또는 구현 팀에서 확인해야 합니다.

• 인터랙션 디자인
• 로딩 UX

번역된 문자열만이 아니라 언어 간 차이에 맞춰 인터페이스를 준비하세요.

대상 로케일의 텍스트, 폰트, 적절한 언어 또는 문화 검토가 필요합니다. 자동 현지화 플랫폼은 포함되어 있지 않습니다.

• 디자인 시스템
• 현지화

전체 브랜드 키트로 확장하기 전에 마크를 만들고 테스트하세요.

소스는 의존성이 없는 Python 헬퍼 스크립트를 설명하지만, 실제 이미지 렌더링에는 CairoSVG, Inkscape, Chrome 또는 지원되는 다른 렌더러가 필요합니다.

• 브랜딩
• Logo Design
• SVG

애니메이션 참고 자료만이 아니라 작은 인터랙션 뒤에 있는 동작 방식을 엔지니어링 팀에 전달하세요.

특정 모션 라이브러리는 필요하지 않지만, 대상 기기에서의 테스트는 여전히 필요합니다.

• 인터랙션 디자인
• UI 핸드오프

애니메이션 결정을 컴포넌트와 팀 전반에서 재사용할 수 있게 만듭니다.

토큰 구현 또는 플랫폼별 동등 수단이 필요하며, 소스는 특정 애니메이션 프레임워크를 요구하지 않습니다.

• 디자인 시스템
• 모션

참조 이미지와 번들 Python 스크립트를 사용해 OpenRouter로 이미지를 생성하거나 편집합니다.

uv, 번들로 제공되는 Python 스크립트, 적절한 모델 접근 권한과 크레딧이 있는 OPENROUTER_API_KEY가 필요합니다.

• 이미지 편집
• 합성

정보 계층 구조를 알아보기 쉬운 내비게이션 컨트롤과 목적지 간의 명확한 경로로 바꿉니다.

정보 계층 구조와 작업 우선순위가 필요하며, 내비게이션 컴포넌트 패키지는 제공되지 않습니다.

• 인터랙션 디자인
• 내비게이션

신규 사용자가 제품 전체를 배우기 전에 먼저 유용한 결과에 도달하도록 돕습니다.

이후 측정을 하려면 제품별 활성화 정의와 계측이 필요합니다.

• 인터랙션 디자인
• 온보딩

선택한 형식에 맞는 레이아웃 규칙을 사용해 브랜드 시스템을 HTML 페이지나 슬라이드 덱에 적용합니다.

URL 기반 브랜드 추출에는 Firecrawl이 필요합니다. 기본 결과물은 외부 JavaScript 의존성을 피하지만, 글꼴이나 이미지 에셋은 여전히 각각의 사용 가능 여부와 권리 확인이 필요할 수 있습니다.

• 웹 디자인
• 프레젠테이션
• 브랜드 시스템

표현력 있는 랜딩 페이지, 포트폴리오, 인터랙티브 프레젠테이션을 위한 뚜렷한 주관을 가진 프런트엔드 가이드입니다.

프런트엔드 프로젝트와 의도적으로 선택한 애니메이션 라이브러리가 필요하며, 가이드가 요구하는 단일 런타임은 없습니다.

• 프런트엔드 디자인
• 모션
• 타이포그래피

비디오 타임라인에 스타일을 적용하기 전에 자막 텍스트와 타이밍을 정해진 데이터 구조로 유지하세요.

Remotion 프로젝트, @remotion/captions, 그리고 관련 전사·가져오기·표시 참조 파일이 필요합니다.

• 동영상
• 자막

비디오 브리프에서 Remotion 프로젝트와 컴포지션을 설정하고, 개발 중 프리뷰를 사용할 수 있습니다.

Node.js, Git, 패키지 설치, Remotion Studio, 관련 컴포지션/레이아웃 참조 문서가 필요합니다.

• 비디오
• React

React 소스가 레이어, 타이밍, 컨트롤을 노출하는 방식을 바꿔 Studio에서 비디오를 편집할 수 있게 만듭니다.

문서화된 Interactive API를 지원하는 Remotion 버전이 필요하며, 설명된 편집 가능한 경로 보간에는 @remotion/paths도 추가로 필요합니다.

• 비디오
• React
• 인터랙션

의도한 숏에 맞는 매핑 기법, 제공업체, 데이터를 선택해 Remotion에서 애니메이션 지도를 만드세요.

Remotion과 선택한 기법의 라이브러리 및 데이터가 필요하며, 수집된 소스에 따르면 Mapbox는 키가 필요합니다.

• 영상
• 지도

CSS 애니메이션을 쓰는 웹페이지가 아니라 영상 타임라인처럼 동작하는 React 마크업을 작성합니다.

프로젝트 버전과 일치하는 Remotion 및 기능별 패키지가 필요하며, 추가 미디어·효과·폰트·내보내기 요건은 연결된 참조 문서에 따라 정해집니다.

• 영상
• React
• 모션

명령 시퀀스에는 매크로를, 모델링 작업에 로직이 필요할 때는 스크립트를 선택하세요.

Rhino 7 이상이 필요하며, 소스는 통합 스크립트 편집기를 위한 권장 환경으로 Rhino 8을 제시합니다.

• 3D 디자인
• CAD
• 자동화

실시간 3D 세계가 아니라, 스크롤로 제어하는 사전 렌더링된 카메라 여정입니다.

문서화된 파이프라인은 Higgsfield와 Monid 비디오 경로, ffmpeg/ffprobe, 브라우저 환경을 사용합니다. 제공업체 계정, 크레딧, 모델 기능, 선택적 이미지 경로는 새로 확인해야 합니다.

• 스크롤 애니메이션
• 비디오
• 랜딩 페이지

실패하는 검색까지 포함해 전체 검색 경험을 설계하세요.

검색 서비스와 쿼리 계측은 이 가이드의 범위 밖에 있습니다.

• 인터랙션 디자인
• 검색

고객에게 보이는 모습 뒤의 운영 업무를 드러냅니다.

이해관계자 및 프로세스 근거가 필요하며, 운영 시스템에는 자체적으로 접근하지 않습니다.

• UX 전략
• 서비스 디자인

Slang 셰이더를 작성하고 입력, 리소스, 출력이 렌더러와 어떻게 연결되는지 확인하세요.

대상 백엔드에 맞는 Slang 컴파일 및 렌더러 환경이 필요하며, 통합에 관한 주장을 하려면 호스트 측 검증이 필요합니다.

• 셰이더
• GPU 그래픽스
• 3D 디자인

개별 픽셀을 따로 조정하지 말고, 요소 간의 관계와 목적에 따라 간격을 선택하세요.

특정 토큰 도구는 필요하지 않으며, 적용 방식은 기존 컴포넌트 시스템에 따라 달라집니다.

• UI 디자인
• 디자인 토큰

컴포넌트의 각 상태에서 다음에 일어날 수 있는 일을 설명합니다.

필수로 지정된 state-machine 패키지는 없습니다. 실제 구현과 테스트는 이후 작업으로 남습니다.

• 인터랙션 디자인
• 동작 모델링

구조를 중복하지 않고도 하나의 컴포넌트 라이브러리의 외관을 바꿀 수 있게 합니다.

구현에는 프로젝트의 토큰 시스템 또는 플랫폼의 동등한 기능을 사용합니다. 런타임 전환은 직접 구축하고 테스트해야 합니다.

• 디자인 시스템
• 테마 설정

프로젝트에 필요한 형태로 기존 브랜드 마크나 서비스 아이콘을 가져옵니다.

레지스트리 또는 CDN에 접근할 수 있는 네트워크가 필요합니다. React, CLI, Figma, MCP 연동은 선택 사항이며, 단순한 URL 조회의 전제 조건은 아닙니다.

• 브랜드 에셋
• SVG
• 클라우드 다이어그램

불러온 캐릭터 또는 제품 모델에 명확한 재생 및 블렌딩 전략을 부여합니다.

동작하는 Three.js 프로젝트와 렌더러가 필요합니다. 소스의 예제는 설치된 릴리스에 맞는지 확인하세요. 추가 컨트롤과 로더는 선택한 방식에 따라 달라집니다.

• 3D
• Three.js

표면 스타일링이나 애니메이션을 추가하기 전에 먼저 형태 표현 방식을 선택하세요.

작동하는 Three.js 프로젝트와 렌더러가 필요합니다. 소스의 예제는 설치된 릴리스 기준으로 확인하세요. 추가 컨트롤과 로더는 선택한 방식에 따라 달라집니다.

• 3D
• Three.js

캔버스와 카메라의 실제 좌표를 사용해 제스처를 의도한 3D 객체에 연결합니다.

동작하는 Three.js 프로젝트와 렌더러가 필요하며, 소스 예제는 설치된 릴리스에 맞게 확인하세요. 추가 컨트롤과 로더는 선택한 방식에 따라 달라집니다.

• 3D
• Three.js

무작정 밝게 하는 대신 의도적인 조명 구성으로 모델이 잘 보이게 만듭니다.

작동하는 Three.js 프로젝트와 렌더러가 필요합니다. 소스의 예제는 설치된 릴리스에 맞는지 확인하세요. 추가 컨트롤과 로더는 선택한 방식에 따라 달라집니다.

• 3D
• Three.js

표면에 맞는 셰이딩 모델을 고른 뒤, 의도한 조명 아래에서 확인하세요.

작동하는 Three.js 프로젝트와 렌더러가 필요합니다. 소스의 예제는 설치된 릴리스 기준으로 확인하세요. 추가 컨트롤과 로더는 선택한 경로에 따라 달라집니다.

• 3D
• Three.js

화면 효과를 서로 무관한 필터가 아니라 순서가 있는 렌더링 파이프라인으로 다루세요.

작동하는 Three.js 프로젝트와 렌더러가 필요합니다. 소스의 예제는 설치된 릴리스에 맞는지 확인하세요. 추가 컨트롤과 로더는 선택한 방식에 따라 달라집니다.

• 3D
• Three.js

머티리얼 프리셋으로 표현할 수 없는 효과에는 커스텀 버텍스 또는 픽셀 동작을 사용하세요.

동작하는 Three.js 프로젝트와 렌더러가 필요합니다. 소스의 예제는 설치된 릴리스에 맞게 확인하세요. 추가 컨트롤과 로더는 선택한 방식에 따라 달라집니다.

• 3D
• Three.js

표면이 늘어나 보이거나 색이 바랜 것처럼 보일 때 원인을 진단하기 전에 각 이미지에 올바른 역할을 지정하세요.

동작하는 Three.js 프로젝트와 렌더러가 필요합니다. 소스의 예제는 설치된 릴리스에 맞게 확인하세요. 추가 컨트롤과 로더는 선택한 방식에 따라 달라집니다.

• 3D
• Three.js

문서화된 소수의 텍스트 스타일로 읽기 쉬운 위계를 만듭니다.

의미 있는 시각 검증을 하려면 실제 글꼴 파일 또는 사용 가능한 플랫폼 글꼴이 필요합니다.

• UI 디자인
• 타이포그래피

세션 일정을 잡기 전에 이 연구로 무엇을 알아내야 하는지 먼저 정하세요.

사용 가능한 테스트 대상물과 참가자 접근 권한이 필요하며, 모집이나 세션 플랫폼은 제공되지 않습니다.

• UX 리서치
• 사용성 테스트

사용자가 하나의 목표를 달성하기 위해 거칠 수 있는 경로를 보여 줍니다.

소스는 별도의 다이어그램 애플리케이션을 요구하지 않습니다. 다만 선택한 출력 형식이 명확한 표기법을 유지해야 합니다.

• 프로토타이핑
• 사용자 플로우

지어낸 고객 이야기 없이 제품 의사결정에 일관된 사용자 기준을 제공합니다.

연구 기반 주장을 하려면 실제 사용자 근거가 필요합니다. 제공된 제품 URL은 별도 조사가 필요할 수 있습니다.

• UX 리서치
• 페르소나

인터페이스 캡처, 샷 지침, 타이밍이 지정된 구성으로 Remotion 제품 영상을 기획하고 조립합니다.

Remotion/Node 환경, 브라우저 캡처, ffmpeg가 필요합니다. 일부 구성요소에는 Three.js 관련 패키지가 필요하며, 선택 사항인 음악 분석과 젠잉(Jianying) 내보내기에는 별도의 의존성이 추가됩니다. Remotion에 적용되는 라이선스는 직접 검토하세요.

• 제품 영상
• Remotion
• 모션 디자인

가장 먼저 눈에 띄어야 할 것을 정한 다음, 구성이 그 선택을 뒷받침하게 하세요.

실제 콘텐츠와 렌더링된 화면 검토가 필요하며, 시각 점수 도구는 포함되어 있지 않습니다.

• UI 디자인
• 구성

시각적 방향을 정하고, 대표 인터페이스를 만든 뒤, 디자인을 확장하기 전에 브라우저에서 검토하세요.

코드를 다룰 수 있는 에이전트와 브라우저에서 렌더링되는 프런트엔드 환경이 필요합니다. 일부 패턴은 React, Babel, 차트 또는 기타 라이브러리를 사용할 수 있으며, 브라우저 수락 검증에는 적합한 브라우저 도구가 필요합니다.

• 프런트엔드 디자인
• 프로토타이핑
• 디자인 시스템

시간에 맞춘 시각 장면과 선택형 내레이션을 갖춘 브라우저 기반 프레젠테이션을 만드세요. 녹화는 별도의 단계입니다.

Vite, React, TypeScript, Node 도구를 사용합니다. 선택형 TTS는 선택한 제공업체, 자격 증명, 어댑터에 따라 달라지며, 최종 녹화에는 브라우저 캡처 또는 녹화 소프트웨어가 필요합니다.

• 프레젠테이션
• 모션
• 내레이션

저충실도 화면을 동작과 콘텐츠를 논의할 수 있을 만큼 정밀하게 만듭니다.

특정 와이어프레임 도구는 필요하지 않습니다. 다만 사용할 수 있는 브리프에는 콘텐츠와 상태 정보가 포함되어야 합니다.

• 프로토타이핑
• 와이어프레임