library — 이 사이트의 조각들
컴포넌트 · 패턴 · 확장 아이디어
상단은 디자인 콘셉 키트 선택대. 카드를 누르면 아래 라이브 미리보기 영역이 그 키트로 다시 그려진다. 아래에는 원시 요소·카드·패턴·확장 샘플·AI 시대 UI 조각들이 한 화면 안에 모여 있다.
design concept kits · 12
하나를 고르면 아래 미리보기 영역의 톤이 바뀐다 — 현재: Geist Minimal
AI 시대의 살아있는 프론트엔드 키트들. 카드 자체가 그 키트의 미리보기 — 누르면 아래 섹션들이 그 키트의 색·폰트·라운딩으로 다시 그려진다.
▾ live preview · Geist Minimal
colors
bg
card
card-alt
border
ink
muted
soft
accent
accent-soft
success
warn
typography
hero h1
페이지 타이틀 / 히어로
h2
섹션 헤드
card title
카드 타이틀
body
본문
muted body
보조 본문
small
KICKER / SMALL CAPS
card · project
livesample.com
Sample Project
프로젝트의 한 줄 소개. 무엇을 하는지 짧게.
card · log
experiment
실험 로그 샘플 — 무엇을 측정했는가
요약 한두 줄. 실험 설계·결과·판단을 압축해서 쓴다.
section head
kicker — 섹션 식별자
섹션 제목이 온다
보조 설명 한두 줄. 섹션 안에서 무엇을 보게 되는지 가볍게.
notice
⚠ 경고 · 주의
✓ 성공 · 완료
ℹ 정보 · 안내
newsletter
매주 월요일 요약
한 메일. 추천 피드 없음.
search (⌘K)
metrics
live
3/20
logs
3↓
day
6/60
avatars
R
A
B
C
+7
timeline
D0
W1
W4
W8
Ship
faq accordion
얼마나 자주 업데이트되나요?
프로젝트 추가 시 즉시.
RSS는 제공되나요?
empty state
◌
여기 아무것도 없음
첫 항목 대기 중
review / quote
“보지 말라는 사이트가 끌어당기다니.”
R
Reader · 2026
gradient cta
제목은 여기.
보조 설명 한 줄.
액션범용 컴포넌트 라이브러리에는 없는, AI 제품을 만들 때만 반복해서 필요한 조각들. 모델 호출의 물성 — 생성되는 중, 사유하는 중, 참조하는 중, 비용을 쓰는 중 — 을 UI로 옮긴 것.
PROMPT INPUT
무엇을 만들까…
⌘ ↵
STREAMING
모델이 답을 토해내는 중이다
THINKING
추론 중 · 2.4s
TOKEN · COST
◆ 1,847 tok$ 0.0042
CONTEXT USAGE
184k / 1M18%
MODEL SELECT
opussonnethaiku
TOOL CALL
▸grep“주관의 객관화”ok
3 matches · 0.08s
CITATION
실험은 가설을 좁힌다1, 통제는 해석을 단단하게 한다2.
SHORTCUT
⌘K⌘⇧P⌃⇥
CONFIDENCE
명확88%
추정54%
추측22%
VOICE
🎙
EDIT PREVIEW
- const x = 1;
+ const x = await fetch();
AGENT STEPS
✓탐색
✓가설
◐검증 중
보고