OpenDesign

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

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

스마트폰 로그인 화면을 독립형 HTML 프로토타입으로 만듭니다. 문자 인증, 비밀번호, 외부 계정 로그인에 맞춰 입력 오류와 처리 중 상태도 구성합니다.

• 전화번호와 문자 인증 화면 시안 제작
• 비밀번호 로그인 화면 설계
• 외부 계정 로그인 방식 검토

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

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

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

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

fal.ai에서 제공하는 AI 영상 모델로 기존 영상을 편집합니다. 영상 스타일 변경, 해상도 향상, 배경 제거, 오디오 추가를 요청할 수 있습니다.

• 기존 영상의 스타일을 바꿀 때
• 영상 해상도를 높일 때
• 영상 배경을 제거할 때

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

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

텍스트나 참고 이미지로 Codex용 움직이는 펫을 만들고, 동작별 외형의 일관성과 배경 투명도를 확인하며 애니메이션 이미지와 설정 파일을 함께 출력합니다.

• 텍스트로 Codex 펫 제작
• 캐릭터 이미지를 펫으로 변환
• 동작마다 달라지는 외형 수정

공지나 메시지를 앱 아이콘과 제목이 있는 macOS 스타일 알림 배너로 만듭니다. 영상 위에 겹쳐 표시하거나 제품 예고와 소셜 미디어 이미지에 쓸 HTML을 생성합니다.

• 영상 위에 알림 배너 겹쳐 표시하기
• 제품 출시 예고 만들기
• 소셜 미디어 공지 이미지 제작

영화 같은 애니메이션, MiniMax API의 AI 생성 미디어와 생성 예술을 활용해 히어로 페이지와 작품 소개 사이트를 만드는 스킬을 안내합니다.

• 영화 같은 움직임의 히어로 페이지를 만듭니다
• 작품 소개 사이트를 제작합니다
• AI 생성 미디어를 웹에서 활용합니다

OpenAI의 Image API로 UI 목업, 아이콘, 일러스트, 소셜 미디어 카드와 시각 참고 자료를 생성하고 편집하는 스킬을 안내하는 카탈로그 항목입니다.

• UI 목업 이미지 제작에 활용합니다
• 아이콘과 일러스트를 생성합니다
• 소셜 미디어 카드 이미지를 준비합니다

코드나 글로 된 설명을 바탕으로 Figma 화면을 만들고 갱신합니다. 디자인 시스템의 구성 요소와 색상, 여백 등의 공통 설정으로 앱 화면을 재현합니다.

• 앱 코드를 Figma 디자인으로 옮깁니다
• 글로 된 설명에서 화면을 만듭니다
• 공통 구성 요소로 화면을 갱신합니다

Figma 디자인을 원래 모습에 충실한 실제 서비스용 프런트엔드 코드로 변환합니다. 화면 디자인 프레임을 프런트엔드 담당 AI 에이전트에게 직접 전달해 구현에 활용합니다.

• Figma에서 만든 화면을 구현합니다
• AI 에이전트에게 디자인을 전달합니다
• 디자인의 시각적 모습을 코드로 재현합니다

따뜻한 무채색과 글자 대비, 넉넉한 여백으로 잡지처럼 정보를 정리하는 미니멀 웹 화면을 설계합니다. 카드 그리드와 은은한 강조색을 활용합니다.

• 미니멀 제품 화면의 프로토타입 제작
• 기능 소개 카드의 비대칭 그리드 배치
• 서체와 여백, 색상 통일

Flutter 앱에 애니메이션 효과와 화면 전환, 화면 안의 움직임을 구현하도록 돕습니다. iOS와 Android용 앱에 모션 디자인을 적용할 때 사용합니다.

• Flutter 화면에 애니메이션 추가
• 화면 전환 시 움직임 구현
• iOS와 Android 화면의 움직임 구현

GSAP 플러그인으로 글자와 SVG 애니메이션, 드래그, 스크롤, 레이아웃 전환을 구현합니다. 용도에 맞는 기능 선택부터 등록, 설정, 정리까지 다룹니다.

• 제목을 한 글자나 한 줄씩 표시
• SVG 선 그리기와 도형 변형 추가
• 관성이 있는 드래그 구현

fal.ai 시각 모델로 이미지 속 물체를 감지하고 영역을 나누며, 글자를 읽고 내용을 설명합니다. 이미지에 관한 질문으로 보이는 정보를 확인할 수도 있습니다.

• 이미지 속 글자 읽기
• 물체 감지와 영역 나누기
• 이미지 내용 설명과 질문하기

GSAP 애니메이션의 수치 변환, 범위 제한, 무작위 변화 코드를 작성하고 검토합니다. 스크롤에 따른 변화, 일정 간격 맞춤, 여러 요소 처리를 지원합니다.

• 스크롤 진행도를 이동이나 회전으로 변환
• 애니메이션 값을 지정 범위로 제한
• 위치나 색상에 무작위 변화 추가

심리학과 행동과학을 홍보 문구와 디자인에 적용합니다. 관심을 끄는 도입부, 정보 전달 방식, 가격 표시를 검토할 때 사용할 수 있습니다.

• 관심을 끄는 도입 문구를 다듬을 때
• 정보 전달 방식을 검토할 때
• 가격 표시 방식을 개선할 때

GSAP으로 여러 애니메이션의 순서와 겹침을 구성하고 시작 위치 지정, 그룹 중첩, 재생·일시 정지·역재생·위치 이동 구현을 돕습니다.

• 여러 동작을 정해진 순서로 재생
• 시작 시간을 조정해 동작 겹치기
• 동작을 묶어 재생을 함께 제어

fal.ai의 가상 피팅 모델로 옷을 입은 사람의 모습을 이미지로 확인합니다. 전자상거래용 착용 이미지, 룩북과 스타일링 아이디어를 검토할 때 활용합니다.

• 전자상거래용 착용 이미지를 검토합니다
• 룩북에 넣을 옷차림을 시도합니다
• 사람이 옷을 입은 모습을 확인합니다

CSV나 JSON 데이터 또는 글로 쓴 결론을 신문 기사 형식의 도표로 만듭니다. 꺾은선, 막대, 범위 띠와 단계별 애니메이션으로 영상과 소셜 미디어에 결론을 전합니다.

• 영상에서 데이터 변화 전달
• 소셜 미디어용 도표 카드 제작
• CSV나 JSON을 도표로 변환

따뜻한 빛샘, 35mm 필름 입자, 큰 세리프체를 조합해 영화 같은 오프닝 화면이나 장 제목을 만들고 단일 HTML 파일로 구성합니다.

• 다큐멘터리 오프닝 화면 제작
• 개인 단편 영화 제목 화면 제작
• 영화 같은 장 제목 제작

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

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

기하학 조각으로 로고를 조립하고 빛 효과, 브랜드명, 짧은 메시지와 행동 안내를 차례로 표시합니다. 영상 끝에 사용할 화면을 하나의 HTML 파일로 만듭니다.

• 브랜드를 보여 주는 영상 마무리를 만듭니다
• 영상 끝에 로고와 메시지를 표시합니다
• 마지막 화면에 웹사이트와 SNS를 안내합니다