큐레이션 · 오픈 · 무료

SiteInspire

웹의 최고 수준 디자인과 인재를 선보이는 프리미엄 미니멀 큐레이션 갤러리입니다.

designgallery

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

원본 사이트: https://www.siteinspire.com

📦 팩 내용 보기 →

디자인 DNA

디자인 쇼케이스영감큐레이션갤러리디렉토리

디자인의 큐레이티드 뮤지엄 전시회

컬러

#18181bInk

#71717aInk soft

#f4f4f5BG

#fafafaBG soft

#ffffffBG quiet

#a1a1aaMuted

rgba(228,228,231,1)Line

단일색이며 절제된 팔레트로, 부드러운 오프화이트 캔버스에 의존하여 선보이는 다채로운 디자인 작업이 경쟁 없이 숨 쉴 수 있게 합니다.

타이포그래피

grotesque-sans

display56px · 500
heading30px · 500
body14px · 400

모든 텍스트에 타이트한 자간(-0.4px)을 사용하여 compact하고 고급 편집 느낌을 유지합니다. · 본문 텍스트 크기는 상대적으로 작게(14px) 유지하여 갤러리 썸네일의 시각적 밀도를 우선시합니다. · 제목, 부제목 및 활성 내비게이션 항목에만 웨이트 500을 예약합니다.

여백

4px

8px

16px

24px

32px

48px

64px

96px

모든 내부 패딩과 마진에 일관된 4px 마이크로 그리드를 사용하여 타이트하고 예측 가능한 구조를 만듭니다.

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

sm · 2px

md · 4px

lg · 9999px

pill · 9999px

구조적 분리와 카드 윤곽을 위해 1px solid rgb(228,228,231)를 사용합니다.

0px 0px 0px 0px rgba(0,0,0,0) · 0 4px 6px -1px rgba(0,0,0,0.05)

레이아웃

1400container

12columns

24pxgutter

768 / 1024breakpoints

고정형 상단 내비게이션 바가 전체 폭의 히어로 영역 위에 위치합니다. 그 아래, 유연한 그리드 레이아웃(보통 3열)이 프로젝트 썸네일을 표시하며, 접을 수 있는 푸터가 카테고리 내비게이션을 담당합니다.

모션과 인터랙션

150msmicro

150mssmall

300msmedium

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

호버 시 불투명도 및 색상에 대한 빠른 150ms 트랜지션. · border-color 및 background-color와 같은 인터랙티브 상태 변경을 위한 더 부드러운 0.15s 트랜지션.

전반적인 차분한 미학을 유지하면서 텍스트 링크 및 UI 요소에 미묘한 색상 변화. · 인터랙티브 요소에 대한 표준 포인터 커서로, 트랜지션을 통한 즉각적인 시각적 피드백.

컴포넌트

button 'Sign In'과 같은 주요 작업을 위한 필 모양(border-radius: 9999px)으로, 종종 단색 다크 배경을 사용합니다. 내비게이션에는 표준 텍스트 링크를 사용합니다.
card 대형 썸네일 이미지를 담는 간결한 보더리스 또는 가벼운 테두리의 컨테이너로, 메타데이터(제목, 날짜, 저자)가 그 아래에 깔끔하게 정렬됩니다.
chip 푸터 섹션의 텍스트 기반 카테고리 태그로, 간단한 텍스트 링크의 수평 목록으로 제시됩니다.
input 상단 내비게이션의 미니멀리스트 검색 입력으로, 주로 돋보기 아이콘과 간단한 텍스트 레이블로 표시됩니다.
hero 부드러운 회색 배경에 선보이는 프로젝트 스크린샷을 표시하는 대형 수평 스크롤 캠러셀 영역입니다.

보이스와 금지 목록

톤 권위 있고, 큐레이션적이며, 객관적입니다.
헤드라인 직설적이고 간결하며 강렬한 진술(예: '웹의 최고 수준 디자인 + 인재 쇼케이스').
CTA 미니멀리스트이며 행동 지향적입니다. 종종 단어 하나 또는 짧은 구문(예: 'Sign In', 'Subscribe').

선명하고 대비가 높은 액센트 색상을 사용하지 마세요 — 스크린샷은 로고에 은은한 빨간 점 하나만 있는 엄격한 단일색 팔레트를 보여줍니다.
장식적, 세리프 또는 스크립트 글꼴을 사용하지 마세요 — 스크린샷은 깔끔하고 균일한 고트릭산스를 독점적으로 사용합니다.
무거운 드롭 섀도우 또는 복잡한 border-radius를 구현하지 마세요 — 스크린샷은 최소한의 radius(2px, 4px 또는 필 모양)를 가진 대부분의 플랫 표면을 보여줍니다.
과도한 텍스트나 복잡한 UI 컴포넌트로 인터페이스를 혼잡하게 하지 마세요 — 스크린샷은 깔끔하고 이미지 우선의 그리드 레이아웃에 크게 의존합니다.
크고 벌키한 버튼 스퀘일을 사용하지 마세요 — 스크린샷은 충분한 여백을 가진 미니멀한 필 모양 버튼을 보여줍니다.
엄격한 4px 기본 그리드에서 벗어나지 마세요 — 스크린샷은 모든 요소에 걸쳐 매우 일관되고 타이트한 간격 패턴을 보여줍니다.
피하기: 지나치게 캐주얼하거나 열정적인 언어를 피합니다.
피하기: 시각적 혼란이나 복잡한 장식 요소를 피합니다.
피하기: 선보이는 작업에서 주의를 산만하게 하는 밝고 경쟁적인 액센트 색상을 피합니다.

팩 안의 실제 스크린샷

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

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

System Prompt

SiteInspire는 웹의 최고 수준 디자인과 인재를 선보이는 프리미엄 미니멀 큐레이션 갤러리입니다. 부드러운 오프화이트 배경(#f4f4f5), 깊은 잉크 텍스트(#18181b), 그리고 무거운 보조 텍스트(#71717a)를 사용하는 엄격한 단일색 팔레트를 사용합니다. 타이포그래피는 깔끔하고 자간이 타이트한 고트릭산스에 독점적으로 의존합니다. 핵심 주의사항은 다음과 같습니다: 밝고 경쟁적인 액센트 색상을 절대 사용하지 말 것; 장식적이거나 세리프 글꼴을 절대 사용하지 말 것; 무거운 드롭 섀도우를 절대 구현하지 말 것; 그리고 항상 엄격한 4px 기본 간격 그리드를 유지할 것. 디자인은 이미지 우선 그리드를 통해 시각적 밀도를 우선시하며, 선보이는 콘텐츠를 주요 시각적 요소로 취급합니다.

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

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

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

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