스킬 찾기

Chrome DevTools Protocol로 웹페이지 전체를 긴 스크린샷으로 촬영합니다. 포트폴리오, 사례 소개, 감사 보고서에 넣을 이미지를 준비합니다.

• 포트폴리오에 넣을 웹사이트 이미지 촬영
• 사례 소개에 전체 페이지 이미지 첨부
• 감사 보고서용으로 페이지 외관 기록

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

프레젠테이션과 문서에 넣을 이미지·스크린샷의 해상도, 선명도, 명료도를 개선합니다. 실행하려면 원본 배포처의 관련 파일 묶음을 설치해야 합니다.

• 프레젠테이션용 이미지 정리
• 문서용 스크린샷 명료도 개선
• 이미지 해상도 높이기

글로 설명한 내용을 손으로 그린 듯한 Excalidraw 도표로 만듭니다. 용도에 따라 애니메이션 SVG, 온라인 편집 링크, PNG 내보내기를 사용할 수 있습니다.

• 글로 설명한 내용을 손그림 도표로 만듭니다
• 도표를 온라인에서 편집합니다
• 도표를 PNG 이미지로 내보냅니다

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

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

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

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

웹사이트 디자인 이미지를 먼저 생성하고 문구, 여백, 색상, 배치를 분석해 구현합니다. 섹션별 참고 이미지로 작은 노트북에서도 읽기 쉬운 화면을 구상합니다.

• 참고 이미지로 랜딩 페이지 제작
• 작은 화면에서도 읽기 쉬운 히어로 제작
• 일관된 스타일의 포트폴리오 제작

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

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

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

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

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

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

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

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

코드베이스를 바탕으로 Figma 디자인 시스템 라이브러리를 만들거나 업데이트합니다. 제품에 구현된 컴포넌트와 디자인 작업의 기준 자료를 일치시킵니다.

• 코드에서 Figma 라이브러리를 만듭니다
• 구현에 맞춰 디자인 라이브러리를 갱신합니다
• 디자인 기준 자료와 구현을 일치시킵니다

Google Gemini의 이미지 생성 API로 UI 완성 모습을 보여 주는 목업, 아이콘, 일러스트 등 화면과 제작물에 쓸 시각 자료를 만듭니다.

• UI 완성 모습을 목업으로 확인
• 디자인에 쓸 아이콘 생성
• 제작물에 넣을 일러스트 생성

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

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

분기 성과와 향후 계획을 파랑, 주황, 크림색의 복고풍 HTML 슬라이드 세 장으로 정리합니다. 표지, 세 가지 중점 과제, 로드맵과 핵심 성과 지표를 담습니다.

• 분기 성과 발표 자료 제작
• 팀의 세 가지 중점 과제 공유
• 로드맵과 핵심 성과 지표 제시

유체처럼 색이 흐르는 배경에 큰 제목이나 짧은 메시지를 겹친 단일 HTML을 만듭니다. 영상 도입부, 랜딩 페이지의 메인 비주얼, 포스터에 사용할 수 있습니다.

• 짧은 메시지가 있는 영상 도입부 제작
• 랜딩 페이지의 메인 비주얼 제작
• 유체 배경을 사용한 포스터 제작