OpenDesign

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

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

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

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

답변을 펼쳐 볼 수 있고 검색과 분류별 필터를 제공하는 FAQ 페이지를 만듭니다. 서비스에 맞는 질문과 연락처 안내를 단일 HTML 파일에 담습니다.

• SaaS 도움말 페이지를 시범 제작합니다
• 요금과 계정 관련 질문을 정리합니다
• 온라인 쇼핑몰 FAQ 검색 페이지를 만듭니다

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

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

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

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

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

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

GSAP ScrollTrigger로 스크롤에 반응하는 웹 애니메이션을 구현합니다. 요소 고정, 진행도 연동, 가로 이동과 함께 위치 재계산 및 페이지 이동 시 정리도 다룹니다.

• 화면에 들어온 요소에 애니메이션 적용
• 스크롤 중 특정 구간을 고정해 표시
• 세로 스크롤로 콘텐츠를 가로 이동

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

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

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

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

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

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

GSAP 애니메이션의 끊김을 줄이도록 위치와 투명도 변경, 화면 측정과 업데이트 방식, 불필요한 애니메이션 중지를 검토해 렌더링 부담을 낮춥니다.

• GSAP 애니메이션의 끊김 줄이기
• 많은 목록 요소의 움직임 개선
• 마우스 추적 효과의 실행 부담 줄이기

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

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

디자인 방향, 색상과 여백 등의 공통값, 시각적 규칙을 DESIGN.md에 작성하고 관리합니다. 제작 시 참고할 기준을 하나의 문서에 모읍니다.

• 프로젝트 디자인 방향 문서화
• 디자인 공통값을 한곳에 정리
• DESIGN.md로 시각적 규칙 관리

글과 실용 지식을 小红书 스타일의 여러 지식 카드로 정리합니다. 표지부터 요점과 요약까지 큰 글자와 부드러운 색상으로 구성하며, 게시용 스크린샷을 찍을 수 있습니다.

• 노하우를 지식 카드로 정리합니다
• 小红书용 캐러셀 게시물을 만듭니다
• WeChat 모멘트용 이미지를 만듭니다

Twitter나 X 게시물에 첨부할 가로형 인용문·데이터 카드를 만듭니다. 중앙의 짧은 문장에 작성자 이름, 계정, 브랜드 워터마크를 더해 이미지로 공유하기 좋게 구성합니다.

• 짧은 인용문을 게시물 이미지로 제작
• 데이터를 카드로 공유
• 작성자 정보를 넣어 생각 공유

기존 웹 화면에 버튼 조작 피드백과 상태 변화를 전하는 절제된 애니메이션을 추가합니다. 글과 레이아웃을 유지하며 동작 줄이기 설정도 지원합니다.

• 버튼에 조작 피드백을 추가할 때
• 화면의 상태 변화를 전달할 때
• 주요 콘텐츠의 등장 효과를 다듬을 때

랜딩 페이지, 홈페이지, 광고 문구를 작성하거나 고치는 스킬입니다. 제품이나 서비스 출시를 앞두고 마케팅 표현을 검토하는 편집 파트너로 활용합니다.

• 랜딩 페이지 문구 작성
• 홈페이지 문구 수정
• 광고 문구 초안 작성

복고풍 픽셀 스타일의 세 장면 영상을 Hyperframes용 HTML로 만듭니다. 제목과 색상을 바꾸고 장면 전환과 움직임을 갖춘 구성으로 완성합니다.

• 픽셀 스타일의 소개 영상을 만들 때
• 세 장면 영상의 내용을 교체할 때
• HTML에서 장면 전환을 확인할 때

공개 사이트의 색상, 글꼴, 로고, 이미지, 문체를 실측해 정리합니다. 브랜드 가이드와 미리보기가 있는 재사용 가능한 디자인 시스템으로 만듭니다.

• 사이트 색상과 글꼴, 로고 정리
• 참고 사이트로 브랜드 가이드 작성
• 브랜드를 나타내는 이미지 수집

아직 형태가 잡히지 않은 아이디어를 단계적인 질문과 대안 검토로 구체적인 디자인으로 정리합니다. 초기 구상에서 나아갈 방향을 좁히는 데 사용합니다.

• 대략적인 아이디어 구체화
• 콘셉트의 다른 방향 검토
• 질문을 통한 초기 구상 정리

Apple 제품의 화면과 조작을 설계할 때 관련 지침을 찾는 안내입니다. iOS와 macOS 등에서 설계 기초, 구성 요소, 조작 방식을 다루는 14개 스킬을 소개합니다.

• iOS 앱 설계 지침을 확인합니다
• macOS 화면 구성 요소를 찾아봅니다
• visionOS 조작 설계를 살펴봅니다

p5.js에서 계산 규칙과 난수로 생성 예술을 만듭니다. 난수의 초깃값을 고정해 같은 그림을 재현하며, 포스터와 동적인 느낌의 정지 이미지, 구도 시안 제작에 활용합니다.

• 규칙을 바탕으로 포스터를 제작합니다
• 움직임이 느껴지는 정지 이미지를 만듭니다
• 예술 작품의 구도를 시험합니다

Turn CSV, Excel, or JSON data into a visual report page with key metrics, multiple charts, a data table, and written observations. The report uses supplied data and includes its source, reporting period, and methodology.

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

• Turn growth data into a visual weekly report
• Present key metrics and year-over-year changes
• Share charts alongside source data and methodology

fal.ai의 AI 모델로 이미지와 동영상을 생성하도록 에이전트에 요청합니다. Flux, SDXL, ideogram 등의 모델을 지정하는 진입점으로 활용합니다.

• fal.ai로 이미지 생성하기
• fal.ai로 동영상 생성하기
• 이미지 생성 모델 지정하기