Skillry Pick
Playful UI/UX 포트폴리오v1.0.2
이 Skill로 다음을 할 수 있습니다: 홈페이지 제작.
급상승
5.0다운로드 32회좋아요 1개저장 0회
$4.99
이 Skill을 구매하면 무엇을 받나요?일러스트 인물 사진 주위로 튀어 오르는 검은 디스플레이 글자, 랜야드 ID 배지, 3단 경력·연락처 블록, 그리고 디바이스 프레임 속 제품 화면을 번호 매긴 다섯 개의 컬러 열로 보여주는 거대한 윤곽선 콘텐츠 인덱스로 경쾌한 UI/UX 포트폴리오를 만듭니다. 홈, 소개, 사례 연구 페이지 5개가 있는 작업, 이력서, 연락처를 필터, 성과 통계, 유효성 검사가 있는 연락 폼과 함께 제공합니다. 기본적으로 오프라인에서 열리는 독립 파일 하나이며, 프로덕트 디자이너와 인터랙션 디자이너를 위해 만들어졌습니다.
2026년 10월 3일 업데이트
미리보기 갤러리
비슷한 Skill
모든 Skill 보기
제공 내용
- 가상의 Ines Okafor를 위한 11개 라우트 예시: 홈, 소개, 사례 연구 페이지 5개가 있는 작업, 이력서, 연락처, 디자인된 404.
- 휴대폰·태블릿·노트북 프레임 속에 실제로 작동하는 인터페이스로 만든 제품 화면, 그리고 작업 필터, 검색, 정렬, 추천사 캐러셀, FAQ, 완료 상태가 있는 연락 폼.
- Unbounded, Figtree, Geist Mono를 임베드한 독립 파일 하나, 배경이 완전히 투명한 플랫 일러스트 인물 사진, 내장 검사.
이런 분께 추천
- 따뜻하고 친근하면서도 진지한 작업으로 읽히는 포트폴리오를 원하는 프로덕트·인터랙션 디자이너.
- 앱, 결제 화면, Dashboard처럼 실제 화면으로 보여줄 수 있는 사례 연구를 가진 디자이너.
- 리서치나 프로젝트를 같은 사례 페이지 구조에 담을 수 있는 UX 리서처나 소규모 스튜디오.
이런 분께는 비추천
- 주로 자신의 이미지를 큰 갤러리로 보여줘야 하는 사진가나 아티스트.
- 미니멀한 모노크롬 퍼스널 브랜드. 이 사이트는 밝은 다섯 가지 열 색상과 튀어 오르는 글자를 사용합니다.
- 설치 즉시 메시지 받기: 백엔드를 연결하기 전까지 연락 폼은 페이지 안에서 확인만 합니다.
브랜드 아이덴티티·비주얼 시스템웹 디자인·디지털 경험홈페이지 제작포트폴리오 사이트 제작스타일 고정편집 가능한 결과물바운싱 디스플레이 글자디바이스 목업플랫 일러스트 인물랜야드 배지번호 컬러 칼럼
이 Skill 소개
내 이야기와 사례 연구 3~6개를 Skill에 전달하면, 소프트웨어도 직접 출시하는 사람이 잘 만든 셀프 홍보 포스터 같은 포트폴리오를 만들어 줍니다. 일러스트 인물 사진 주위로 튀어 오르는 디스플레이 글자, 랜야드 배지, 번호가 매겨진 밝은 색의 제품 화면 열이 특징입니다. 예시는 가상의 프로덕트 디자이너 Ines Okafor이며, 11개의 라우트가 서로 연결되어 있습니다. 기본 결과물은 어떤 브라우저에서도 오프라인으로 열리는 독립 파일 하나입니다.
제공 내용
- 글자 Hero, 배지와 인사말, 경력·커뮤니티·연락처 열, 콘텐츠 인덱스, 작업 프로세스 단계, 클라이언트 추천사, CTA 배너가 있는 홈
- 개요, 발견점, 프로세스, 화면 3개 갤러리, 성과 통계, 클라이언트 추천사, 이전·다음 링크가 있는 사례 연구 페이지
- 소개 페이지, 스킬 칩이 있는 이력서, FAQ와 유효성 검사 폼이 있는 연락처 페이지
- Unbounded, Figtree, Geist Mono를 파일에 임베드해 네트워크에서 아무것도 불러오지 않습니다
사용 방법
- 이름, 분야, 도시, 짧은 인사말, 경력, 그리고 개요·프로세스·성과가 담긴 사례 연구 3~6개를 알려 주세요.
- 에이전트가 제품 화면을 하나하나 만들고, 내 사진으로 일러스트를 만들고, 내장 검사를 실행합니다.
- 데스크톱과 휴대폰에서 모든 페이지와 폼을 눌러 본 뒤 수정 사항을 요청하세요.
에이전트의 이미지 도구로 만든 일러스트에는 해당 도구의 사용 요금이 발생할 수 있습니다. 연락 폼은 페이지 안에서 확인만 하고, 백엔드를 연결하기 전까지는 아무것도 전송하지 않습니다.
시작 전에 필요한 것
- 준비할 것
- 이름, 분야, 도시, 작업 가능 여부, 1인칭으로 쓴 짧은 인사말 · 개요, 발견점, 프로세스 단계, 성과, 클라이언트 추천사가 담긴 사례 연구 3~6개 · 경력, 스킬, 연락처, 그리고 일러스트에 쓸 본인 사진
- 의존성
- 에이전트 컴퓨터의 Node.js 18 이상 — 오프라인 단일 파일을 빌드하는 번들 스크립트 실행용 · 파일 빌드 중 인터넷 연결 — 폰트를 한 번 내려받아 내장하기 위해 필요 · 일러스트 인물 사진과 스튜디오 장면을 위한 에이전트의 이미지 생성 도구
- 외부 비용
- 에이전트의 이미지 도구로 일러스트 인물 사진과 장면을 만들면 해당 도구의 사용 요금이 발생할 수 있습니다. 제품 화면은 페이지 안에서 직접 만들므로 이미지 생성이 필요 없습니다.
- 최근 테스트
- v1.0.2 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
사용자 리뷰
리뷰를 불러오는 중…