OpenDesign

화면 애니메이션 코드를 속도, 자연스러움, 중단 대응, 렌더링 성능, 접근성 관점에서 검토합니다. 수정안과 이유를 제시하고 승인 여부를 판단합니다.

• 드롭다운과 툴팁의 움직임을 점검합니다
• 연속 조작에 대한 반응을 확인합니다
• 렌더링 성능을 해치는 애니메이션을 찾습니다

Google Stitch의 화면 생성에 쓸 디자인 방침을 DESIGN.md로 정리합니다. 배색, 서체, 배치, 움직임과 피할 표현을 구체화해 화면 간 일관성을 유지합니다.

• Google Stitch 화면의 공통 규칙을 만듭니다
• 배색, 서체와 구성 요소 동작을 문서화합니다
• 모바일 배치와 움직임 규칙을 정의합니다

참고 이미지와 막연한 취향을 색상·글꼴·배치 등 구체적인 디자인 방향으로 정리합니다. 재사용할 DESIGN.md와 제작 담당자를 위한 인계 자료를 만듭니다.

• 참고 이미지로 앱의 외형 결정
• 리디자인 전에 판단 기준 정리
• 슬라이드 디자인 방향 인계

Slack에서 사용할 애니메이션 GIF를 만듭니다. 기본 동작 요소를 조합하고 크기 제한을 검증하면서 반응용 GIF나 작은 애니메이션을 제작할 수 있습니다.

• Slack 대화용 반응 GIF 제작
• 작은 애니메이션 GIF 제작
• GIF 제작 중 크기 제한 확인

슬라이드, 문서, 보고서, HTML 랜딩 페이지에 글꼴과 배색 테마를 적용합니다. 10가지 사전 설정으로 자료와 페이지의 외관을 정돈합니다.

• 슬라이드에 사전 설정 테마 적용
• 문서와 보고서의 외관 통일
• HTML 랜딩 페이지의 글꼴과 배색 설정

사용자 조사의 배경, 참여자 구성, 행동 패턴과 근거를 세 장의 HTML 슬라이드로 정리합니다. 따뜻한 종이 색감의 스위스 스타일에 도표와 절제된 움직임을 더합니다.

• 사용자 조사를 세 장으로 보고합니다
• 참여자 구성을 도넛 차트로 표시합니다
• 행동 패턴과 근거를 나란히 설명합니다

UI/UX 설계를 검토할 때 에이전트가 도입 후보를 찾도록 돕는 카탈로그 항목입니다. 검색 데이터와 템플릿은 없으며 실제 사용에는 원본 배포 파일 전체가 필요합니다.

• UI/UX 설계 참고 후보 찾기
• 필요한 파일의 설치 상태 확인
• 원본 배포처의 설치 방법 확인

글자 배치, 여백, 색상, 카드 겹침, 절제된 움직임을 구체적인 규칙으로 정리하고, 정제되고 차분한 웹 페이지를 코드로 제작합니다.

• 글자 배치에 중점을 둔 랜딩 페이지 제작
• 비대칭 SaaS 기능 소개 페이지 제작
• 부드러운 그림자와 여백으로 작품 소개

shadcn/ui로 구조가 정돈되고 접근성을 고려한 화면 구성 요소를 구현합니다. Stitch에서 디자인을 반복 검토하는 작업과 연결해 사용할 수 있습니다.

• shadcn/ui로 화면 구성 요소 만들기
• 접근성을 고려한 구성 요소 구현
• Stitch 디자인 반복 검토와 개발 연결

기존 웹사이트와 앱의 화면을 점검해 글자, 색상, 배치와 조작 시 표시를 개선합니다. 현재 기술 구성과 기능을 유지하면서 단계적으로 정리합니다.

• 기존 사이트의 디자인을 점검할 때
• 반복되는 정형적 화면 구성을 바꿀 때
• 로딩·빈 데이터·오류 표시를 개선할 때

OD Library에 저장된 이미지, 로고, 스크린샷을 검색합니다. 크기와 제목, 출처를 비교해 소재를 고르고 현재 프로젝트로 복사한 뒤 제작 중인 페이지에 넣습니다.

• 이전에 저장한 스크린샷 재사용
• 저장된 로고를 페이지에 배치
• 기존 메인 이미지 검색

주요 지표와 분석 결과, 유지율 그래프를 잡지 형식의 한 페이지 HTML 보고서로 정리합니다. 종이 질감 배경과 파스텔색 카드를 사용해 경영 회의 자료를 만듭니다.

• 잡지 형식의 사업 보고서 작성
• 경영 회의용 한 페이지 자료 작성
• 주요 지표와 분석 내용 정리

Figma Design이나 FigJam에 새 빈 파일을 만듭니다. 에이전트로 디자인 시스템을 정비하거나 워크숍을 준비할 때 첫 작업 파일을 마련하는 데 사용합니다.

• 빈 Figma Design 파일을 만듭니다
• 워크숍용 FigJam 파일을 준비합니다
• 디자인 시스템 작업의 시작 파일을 마련합니다

MiniMax API로 사진을 Funko Pop이나 Pop Mart 스타일의 움직이는 GIF 스티커로 만듭니다. 개인 채팅용 스티커와 아바타 모음 제작에 활용합니다.

• 사진으로 개인 채팅용 스티커를 만듭니다
• 장난감풍 움직이는 스티커를 제작합니다
• 사진을 바탕으로 아바타 모음을 만듭니다

fal.ai의 AI 초해상도 모델로 이미지와 동영상의 해상도를 높이는 스킬입니다. 실행하려면 원본 배포 패키지를 별도로 설치해야 합니다.

• 이미지 해상도를 높입니다
• 동영상을 고해상도로 변환합니다
• 에이전트에 AI 초해상도 처리를 요청합니다

영상 전환이나 사이버펑크풍 메인 비주얼에 쓸 제목 화면을 만듭니다. 색 어긋남, 주사선, 글자 왜곡을 하나의 HTML로 구성합니다.

• 영상 전환용 제목 화면 제작
• 사이버펑크풍 메인 비주얼 제작
• 제목에 가로 방향 글자 왜곡 추가

React나 Next.js에서 GSAP 애니메이션 구현과 코드 검토를 돕습니다. 대상 요소와 컴포넌트 범위를 지정하고, 의존 값 변경과 컴포넌트 제거 시 정리 처리까지 다룹니다.

• React 화면에 움직임 추가하기
• 컴포넌트 제거 시 애니메이션 정리하기
• 애니메이션 대상 범위 검토하기

Figma Plugin API 스크립트를 실행하여 캔버스에 내용을 쓰거나 확인하고, 변수와 디자인 시스템 관련 작업을 진행합니다.

• 스크립트로 캔버스에 내용 쓰기
• Figma 캔버스의 현재 내용 확인
• 변수와 디자인 시스템 작업 진행

애니메이션이 있는 HTML 프레젠테이션을 만듭니다. 디자인 미리보기를 확인하며 온라인 강연, 웹 삽입용 발표 자료, 조작 가능한 설명 자료를 제작할 수 있습니다.

• 온라인 강연용 슬라이드 제작
• 웹페이지에 발표 자료 삽입
• 조작 가능한 설명 자료 제작

Code Connect로 Figma 디자인 컴포넌트와 코드 컴포넌트를 연결합니다. 공통 디자인 규칙과 컴포넌트의 업데이트를 코드에 자동으로 반영하는 작업을 다룹니다.

• Figma 컴포넌트와 코드 컴포넌트 연결
• 디자인 시스템 업데이트를 코드에 반영
• Code Connect 도입

모바일 앱의 화면 시안과 이동 흐름을 이미지로 만듭니다. iOS와 Android 등의 특성을 반영하고 글자 가독성, 색상, 여러 화면의 일관성을 맞춥니다.

• 여러 화면으로 앱 기획 시각화
• 첫 사용 안내 화면 구상
• 로그인과 계정 복구 화면 검토

업무 절차와 시스템 흐름을 색깔 있는 메모지와 곡선 화살표로 도식화합니다. 분기와 합류를 표현하고, 시작 안내나 운영 설명에 쓸 단일 HTML 파일로 만듭니다.

• 사용 시작까지의 절차 도식화
• 운영 절차 설명
• 시스템 구조 소개

GSAP 기본 API로 웹 요소와 SVG의 이동, 회전, 페이드 효과를 구현합니다. 속도 변화와 시간차를 조절하고 화면 너비와 동작 줄이기 설정에 대응합니다.

• 웹 페이지에 이동과 페이드 효과를 넣을 때
• 여러 요소를 시간차로 움직일 때
• 화면 너비에 따라 동작을 바꿀 때

Implement and review GSAP animations in Vue, Nuxt, Svelte, and SvelteKit. It explains when to start animations, how to limit element selection to one component, and how to clean up when that component is removed.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Adding GSAP animations to Vue or Svelte
• Reviewing animation cleanup when components are removed
• Keeping animations scoped to one component