디자인 에이전트 팀 (Design Studio)

21st_clients
디자인 포트폴리오 보드

휴리스틱 추출 분석 파일 3개 색상 40종 2026-06-29
inputs/21st_clients
🧭 디자인 리드 종합

종합 (휴리스틱 모드 · LLM 키 없음)

전문가별 사실 기반 요약을 종합합니다:

  • 토큰 추출가: 명시적 CSS 변수 60개 발견 — 토큰화 수준 높음
  • 컬러 분석가: 총 40종 색상 사용. 최빈 색상: rgba(0,0,0,.1), #111827, rgba(0,0,0,0.06), #ffffff, #9ca3af, #e5e7eb
  • 타이포그래퍼: 주요 폰트: Geist, Geist Mono, Averia (util) / 사이즈 단계 13종
  • 레이아웃 아키텍트: 간격 값 11종 / 브레이크포인트 1400px, 640px, 768px, 1024px
  • 컴포넌트 큐레이터: 버튼 14 · 입력 2 · 링크 32 · 이미지 12 (총 요소 211)
  • 모션 분석가: 트랜지션 1종 / @keyframes 4개
  • 접근성 검수관: 대표 대비 21.0:1 / alt 이미지 0/0 / aria 3개
  • 브랜드 전략가: 색·폰트·곡률·그림자를 종합한 무드 추정 (AI 서술 권장)
AI 서술을 켜려면 .env 에 ANTHROPIC_API_KEY 또는 GEMINI_API_KEY 를 설정하세요.
디자인 토큰 시각화

🎨 색상 팔레트

rgba(0,0,0,.1)×6
#111827×5
rgba(0,0,0,0.06)×4
#ffffff×3
#9ca3af×3
#e5e7eb×2
#374151×2
#1f2937×2
#fafafa×2
#09090b×2
rgba(0,0,0,0.32)×2
#000000×1
#f8fafc×1
#f1f5f9×1
#e2e8f0×1
#cbd5e1×1
#94a3b8×1
#64748b×1
#475569×1
#334155×1
#1e293b×1
#0f172a×1
#020617×1
#f9fafb×1
#f3f4f6×1
#d1d5db×1
#6b7280×1
#4b5563×1
#030712×1
#f4f4f5×1

🔤 타이포그래피

Geist ×1Geist Mono ×1Averia (util) ×1
Ag 가나다 80%×1
Ag 가나다 75%×1
Ag 가나다 2.25em×1
Ag 가나다 2.1428571em×1
Ag 가나다 1.5em×1
Ag 가나다 1.4285714em×1
Ag 가나다 1.25em×1
Ag 가나다 1em×1

📐 간격 스케일

4px×1
8px×1
.5rem×4
12px×3
.75rem×2
.8571429em×1
16px×1
1rem×5
1.1428571em×1
1.5rem×2
32px×1

모서리 (radius)

.25rem
6px
.375rem
.5rem
.75rem
1rem
9999px

✨ 그림자

0 2px 6px rgba(0,0,0,.08)
0 1px 2px 0 rgba(0,0,0,.05)
0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0…
0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgb…
0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px r…

🧩 컴포넌트 인벤토리

14
버튼
2
입력
32
링크
12
이미지
211
전체 요소
.flex.text-muted-foreground.items-center.text-sm.rounded-md.py-1.5.hover:bg-foreground/5.text-xs.pl-2.pr-2.text-muted-foreground/60.justify-between.tabular-nums.w-full.flex-1.font-medium.gap-2.5.hover:text-foreground

🧮 CSS 변수 (디자인 토큰)

--tw-ring-offset-color#fff
--tw-ring-colorrgb(59 130 246/0.5)
--tw-shadow0 0 #0000
--canvas-border-colorrgba(0,0,0,0.1)
--canvas-border-highlightrgba(0,0,0,0.15)
--black#000
--white#fff
--slate-50#f8fafc
--slate-100#f1f5f9
--slate-200#e2e8f0
--slate-300#cbd5e1
--slate-400#94a3b8
--slate-500#64748b
--slate-600#475569
--slate-700#334155
--slate-800#1e293b
--slate-900#0f172a
--slate-950#020617
--gray-50#f9fafb
--gray-100#f3f4f6
--gray-200#e5e7eb
--gray-300#d1d5db
--gray-400#9ca3af
--gray-500#6b7280
--gray-600#4b5563
--gray-700#374151
--gray-800#1f2937
--gray-900#111827
--gray-950#030712
--zinc-50#fafafa
--zinc-100#f4f4f5
--zinc-200#e4e4e7
--zinc-300#d4d4d8
--zinc-400#a1a1aa
--zinc-500#71717a
--zinc-600#52525b
--zinc-700#3f3f46
--zinc-800#27272a
--zinc-900#18181b
--zinc-950#09090b
전문가 분석 리포트
🧮
토큰 추출가
디자인 토큰 · CSS 변수 정규화

명시적 CSS 변수 60개 발견 — 토큰화 수준 높음

명시적 CSS 변수 60개 발견 — 토큰화 수준 높음

※ AI 서술 비활성 — .env 에 API 키 설정 시 상세 분석

🎨
컬러 분석가
색상 시스템 · 팔레트 · 의미 매핑

총 40종 색상 사용. 최빈 색상: rgba(0,0,0,.1), #111827, rgba(0,0,0,0.06), #ffffff, #9ca3af, #e5e7eb

총 40종 색상 사용. 최빈 색상: rgba(0,0,0,.1), #111827, rgba(0,0,0,0.06), #ffffff, #9ca3af, #e5e7eb

※ AI 서술 비활성 — .env 에 API 키 설정 시 상세 분석

🔤
타이포그래퍼
폰트 · 타입 스케일 · 위계

주요 폰트: Geist, Geist Mono, Averia (util) / 사이즈 단계 13종

주요 폰트: Geist, Geist Mono, Averia (util) / 사이즈 단계 13종

※ AI 서술 비활성 — .env 에 API 키 설정 시 상세 분석

📐
레이아웃 아키텍트
간격 리듬 · 그리드 · 반응형

간격 값 11종 / 브레이크포인트 1400px, 640px, 768px, 1024px

간격 값 11종 / 브레이크포인트 1400px, 640px, 768px, 1024px

※ AI 서술 비활성 — .env 에 API 키 설정 시 상세 분석

🧩
컴포넌트 큐레이터
UI 컴포넌트 · 패턴 인벤토리

버튼 14 · 입력 2 · 링크 32 · 이미지 12 (총 요소 211)

버튼 14 · 입력 2 · 링크 32 · 이미지 12 (총 요소 211)

※ AI 서술 비활성 — .env 에 API 키 설정 시 상세 분석

✨
모션 분석가
트랜지션 · 애니메이션 · 인터랙션

트랜지션 1종 / @keyframes 4개

트랜지션 1종 / @keyframes 4개

※ AI 서술 비활성 — .env 에 API 키 설정 시 상세 분석

♿
접근성 검수관
대비 · 시멘틱 · WCAG

대표 대비 21.0:1 / alt 이미지 0/0 / aria 3개

대표 대비 21.0:1 / alt 이미지 0/0 / aria 3개

※ AI 서술 비활성 — .env 에 API 키 설정 시 상세 분석

🪄
브랜드 전략가
톤앤매너 · 무드 · 아이덴티티

색·폰트·곡률·그림자를 종합한 무드 추정 (AI 서술 권장)

색·폰트·곡률·그림자를 종합한 무드 추정 (AI 서술 권장)

※ AI 서술 비활성 — .env 에 API 키 설정 시 상세 분석