큐레이션 · 오픈 · 무료

Jhey Tompkins

UI 실험과 인터랙션 디자인에 중점을 둔 개발자 포트폴리오입니다.

portfoliocss

↓ 디자인 시스템 다운로드 (1 MB)OpenDesign 에서 열기

원본 사이트: https://jhey.dev

📦 팩 내용 보기 →

디자인 DNA

개인개발자크리에이티브인터페이스

디자인 엔지니어를 위한 깔끔한 타이포그래피 기반 개인 포트폴리오입니다.

컬러

#EB5757Accent

#000000Ink

#666666Ink soft

#FFFFFFBG

rgba(255,255,255,1)Line

대화형 강조를 위한 따뜻한 포인트 컬러가 포함된 고대비 흑백 기반입니다.

타이포그래피

didone-serif · humanist-sans · monospaced

display58px · 400
subtitle14px · 600
body16px · 300

메타 텍스트에는 트래킹을 좁게 한 올캡스를 사용합니다. · 주요 디스플레이에는 세리프를, 본문에는 산세리프를 사용합니다.

여백

4px

8px

16px

24px

32px

48px

64px

96px

주요 섹션 사이에 넉넉한 수직 패딩을 적용합니다.

표면 (라운드 / 그림자 / 경계선)

sm · 6px

md · 8px

lg · 12px

pill · 999px

보이는 구조적 테두리는 없습니다.

레이아웃

1280container

1columns

24pxgutter

768 / 1024breakpoints

넉넉한 여백을 둔 중앙 정렬 단일 컬럼 레이아웃입니다.

모션과 인터랙션

220msmicro

400mssmall

800msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

모든 요소에 전환 속성이 정의되어 있습니다.

대화형 요소에 포인터 커서가 나타납니다. · 대화형 요소에 포인터 커서가 나타납니다.

컴포넌트

button 보이는 버튼은 없습니다.
card 보이는 카드는 없습니다.
chip 보이는 칩은 없습니다.
input 보이는 입력 필드는 없습니다.
hero 큰 세리프 헤드라인 뒤에 모노스페이스 부제목과 산세리프 단락이 이어집니다.

보이스와 금지 목록

톤 전문적이면서도 접근 가능하고, 약간의 장난기가 있는 어조입니다.
헤드라인 크고 우아한 세리프체.
CTA 화살표가 포함된 간단한 텍스트 링크.

다크 배경을 사용하지 마세요 — 스크린샷에서는 깔끔한 흰색 배경이 보입니다.
히어로 헤드라인에 산세리프를 사용하지 마세요 — 스크린샷에서는 세리프 헤드라인이 보입니다.
기본 링크에 파란색을 사용하지 마세요 — 스크린샷에서는 따뜻한 레드/오렌지 포인트 컬러가 보입니다.
단일 컬럼 전체 너비 레이아웃을 사용하지 마세요 — 스크린샷에서는 제한된 단락 너비가 보입니다.
본문 텍스트에 굵은 두께를 사용하지 마세요 — 스크린샷에서는 얇은 두께가 보입니다.
메타 레이블에 소문자를 사용하지 마세요 — 스크린샷에서는 트래킹이 적용된 올캡스가 보입니다.
피하기: 지나치게 기업적인 전문 용어
피하기: 공격적인 판매 언어
피하기: 복잡하고 지저분한 레이아웃

팩 안의 실제 스크린샷

Jhey Tompkins — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

실제 페이지에서 캡처 · 실 computed styles

System Prompt

이 사이트는 디자인 엔지니어를 위한 개인 포트폴리오로, 흰색 배경 위의 깔끔한 단일 컬럼 레이아웃이 특징입니다. 디자인 DNA는 흰색(#FFFFFF) 위에 짙은 잉크(#000000)를 사용하는 고대비 기반을 기반으로 하며, 대화형 하이라이트를 위해 따뜻한 레드(#EB5757) 포인트 컬러를 적용합니다. 타이포그래피는 메인 히어로에 디도네 세리프 디스플레이 폰트를 사용하고, 본문 텍스트에는 휴머니스트 산세리프를, 레이블 및 메타 정보에는 모노스페이드 폰트를 매칭합니다. 핵심 디자인 제약 사항으로는 넉넉한 여백과 제한된 단락 너비 유지, 주요 디스플레이 텍스트에 세리프 사용, 메타 레이블 올캡스 및 좁은 트래킹 적용이 있습니다. 다크 모드, 블루 포인트 컬러, 또는 지나치게 복잡한 다중 컬럼 레이아웃은 피해야 합니다.

이 감각을 당신의 에이전트에

이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.

OpenDesign 스킬 ↗ · 이 팩 (에이전트용) ↗

en · zh-CN · zh-TW · ja · ko