인기 웹 디자인
HTML/CSS 생성 시 바로 사용할 수 있는 54개의 실제 디자인 시스템. 각 템플릿은 사이트의 완전한 비주얼 언어(색상 팔레트, 타이포그래피 계층 구조, 컴포넌트 스타일, 간격 시스템, 그림자, 반응형 동작)와 정확한 CSS 값이 포함된 실용적인 에이전트 프롬프트를 캡처합니다.
관련 디자인 스킬
claude-design — 디자인 프로세스와 취향(브리핑 범위 설정, 변형 생성, 로컬 HTML 아티팩트 확인, AI 디자인 슬롭 방지)에 사용합니다. 사용자가 잘 알려진 브랜드 스타일을 따라 세심하게 디자인된 페이지를 원할 때 이 스킬과 함께 사용하세요. claude-design이 워크플로우를 주도하고, 이 스킬이 시각적 어휘를 제공합니다.design-md — 산출물이 렌더링된 아티팩트가 아닌 공식 DESIGN.md 토큰 명세 파일일 때 사용합니다.
사용 방법
- 아래 카탈로그에서 디자인을 선택합니다.
- 로드합니다:
skill_view(name="popular-web-designs", file_path="templates/<site>.md")
- HTML 생성 시 디자인 토큰과 컴포넌트 사양을 사용합니다.
generative-widgets 스킬과 함께 사용하여 cloudflared 터널을 통해 결과를 제공합니다.
각 템플릿 상단에는 Hermes 구현 참고 사항 블록이 포함되어 있습니다:
- CDN 폰트 대체 및 Google Fonts
<link> 태그(붙여넣기 준비 완료)
- 기본 및 고정폭을 위한 CSS font-family 스택
- HTML 생성을 위한
write_file 및 확인을 위한 browser_vision 사용 알림
HTML 생성 패턴
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>페이지 제목</title>
<link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet">
<style>
:root {
--color-bg: #ffffff;
--color-text: #171717;
--color-accent: #533afd;
}
body {
font-family: 'Inter', system-ui, sans-serif;
color: var(--color-text);
background: var(--color-bg);
}
</style>
</head>
<body>
</body>
</html>
파일은 write_file로 작성하고, generative-widgets 워크플로우(cloudflared 터널)로 제공하며, browser_vision으로 결과를 확인하여 시각적 정확성을 검증합니다.
글꼴 대체 참조
대부분의 사이트는 CDN을 통해 사용할 수 없는 독점 글꼴을 사용합니다. 각 템플릿은 디자인의 특성을 유지하는 Google Fonts 대체 글꼴을 매핑합니다. 일반적인 매핑:
| 독점 글꼴 | CDN 대체 글꼴 | 특성 |
|---|
| Geist / Geist Sans | Geist (Google Fonts) | 기하학적, 압축된 자간 |
| Geist Mono | Geist Mono (Google Fonts) | 깔끔한 고정폭, 합자 |
| sohne-var (Stripe) | Source Sans 3 | 가벼운 두께의 우아함 |
| Berkeley Mono | JetBrains Mono | 기술적 고정폭 |
| Airbnb Cereal VF | DM Sans | 둥글고 친근한 기하학적 |
| Circular (Spotify) | DM Sans | 기하학적, 따뜻함 |
| figmaSans | Inter | 깔끔한 휴머니스트 |
| Pin Sans (Pinterest) | DM Sans | 친근하고 둥글둥글함 |
| NVIDIA-EMEA | Inter (또는 Arial 시스템) | 산업적, 깔끔함 |
| CoinbaseDisplay/Sans | DM Sans | 기하학적, 신뢰감 |
| UberMove | DM Sans | Bold, 빡빡함 |
| HashiCorp Sans | Inter | 엔터프라이즈, 중립적 |
| waldenburgNormal (Sanity) | Space Grotesk | 기하학적, 약간 좁음 |
| IBM Plex Sans/Mono | IBM Plex Sans/Mono | Google Fonts에서 사용 가능 |
| Rubik (Sentry) | Rubik | Google Fonts에서 사용 가능 |
템플릿의 CDN 글꼴이 원본(Inter, IBM Plex, Rubik, Geist)과 일치하면 대체 손실이 발생하지 않습니다. 대체 글꼴(DM Sans for Circular, Source Sans 3 for sohne-var)을 사용하는 경우 템플릿의 두께, 크기 및 자간 값을 면밀히 따르세요. 이러한 값은 특정 글꼴 자체보다 더 많은 시각적 정체성을 전달합니다.
디자인 카탈로그
AI 및 머신러닝
| 템플릿 | 사이트 | 스타일 |
|---|
claude.md | Anthropic Claude | 따뜻한 테라코타 악센트, 깔끔한 편집 레이아웃 |
cohere.md | Cohere | 생생한 그라데이션, 데이터가 풍부한 대시보드 미학 |
elevenlabs.md | ElevenLabs | 어두운 시네마틱 UI, 오디오 파형 미학 |
minimax.md | Minimax | 네온 악센트가 있는 대담한 어두운 인터페이스 |
mistral.ai.md | Mistral AI | 프렌치 엔지니어링 미니멀리즘, 보라색 톤 |
ollama.md | Ollama | 터미널 우선, 단색의 단순함 |
opencode.ai.md | OpenCode AI | 개발자 중심의 어두운 테마, 전체 고정폭 |
replicate.md | Replicate | 깔끔한 흰색 캔버스, 코드 중심 |
runwayml.md | RunwayML | 시네마틱 어두운 UI, 미디어 풍부한 레이아웃 |
together.ai.md | Together AI | 기술적, 청사진 스타일 디자인 |
voltagent.md | VoltAgent | 보이드 블랙 캔버스, 에메랄드 악센트, 터미널 네이티브 |
x.ai.md | xAI | 선명한 단색, 미래지향적 미니멀리즘, 전체 고정폭 |
개발자 도구 및 플랫폼
| 템플릿 | 사이트 | 스타일 |
|---|
cursor.md | Cursor | 매끄러운 어두운 인터페이스, 그라데이션 악센트 |
expo.md | Expo | 어두운 테마, 빡빡한 자간, 코드 중심 |
linear.app.md | Linear | 초미니멀 다크 모드, 정밀함, 보라색 악센트 |
lovable.md | Lovable | 장난기 있는 그라데이션, 친근한 개발자 미학 |
mintlify.md | Mintlify | 깔끔하고 초록색 악센트, 읽기에 최적화됨 |
posthog.md | PostHog | 장난기 있는 브랜딩, 개발자 친화적인 어두운 UI |
raycast.md | Raycast | 매끄러운 어두운 크롬, 생생한 그라데이션 악센트 |
resend.md | Resend | 미니멀한 어두운 테마, 고정폭 악센트 |
sentry.md | Sentry | 어두운 대시보드, 데이터 밀집, 분홍-보라 악센트 |
supabase.md | Supabase | 어두운 에메랄드 테마, 코드 우선 개발자 도구 |
superhuman.md | Superhuman | 프리미엄 어두운 UI, 키보드 우선, 보라색 글로우 |
vercel.md | Vercel | 흑백 정밀함, Geist 글꼴 시스템 |
warp.md | Warp | 어두운 IDE 같은 인터페이스, 블록 기반 명령 UI |
zapier.md | Zapier | 따뜻한 주황색, 친근한 일러스트레이션 중심 |
인프라 및 클라우드
| 템플릿 | 사이트 | 스타일 |
|---|
clickhouse.md | ClickHouse | 노란색 악센트, 기술 문서 스타일 |
composio.md | Composio | 화려한 통합 아이콘이 있는 현대적인 어두운 색상 |
hashicorp.md | HashiCorp | 엔터프라이즈 수준의 깔끔함, 흑백 |
mongodb.md | MongoDB | 녹색 잎 브랜딩, 개발자 문서 중심 |
sanity.md | Sanity | 빨간색 악센트, 콘텐츠 우선 편집 레이아웃 |
stripe.md | Stripe | 시그니처 보라색 그라데이션, weight-300 우아함 |
디자인 및 생산성
| 템플릿 | 사이트 | 스타일 |
|---|
airtable.md | Airtable | 다채롭고 친근하며 구조화된 데이터 미학 |
cal.md | Cal.com | 깔끔한 중립적 UI, 개발자 지향적 단순함 |
clay.md | Clay | 유기적 형태, 부드러운 그라데이션, 아트 디렉션 레이아웃 |
figma.md | Figma | 생생한 여러 색상, 장난기 있으면서도 프로페셔널 |
framer.md | Framer | 대담한 검정과 파랑, 모션 우선, 디자인 중심 |
intercom.md | Intercom | 친근한 파란색 팔레트, 대화형 UI 패턴 |
miro.md | Miro | 밝은 노란색 악센트, 무한 캔버스 미학 |
notion.md | Notion | 따뜻한 미니멀리즘, 세리프 제목, 부드러운 표면 |
pinterest.md | Pinterest | 빨간색 악센트, 벽돌형 그리드, 이미지 우선 레이아웃 |
webflow.md | Webflow | 파란색 악센트, 세련된 마케팅 사이트 미학 |
핀테크 및 암호화폐
| 템플릿 | 사이트 | 스타일 |
|---|
coinbase.md | Coinbase | 깔끔한 파란색 아이덴티티, 신뢰 중심, 제도적 느낌 |
kraken.md | Kraken | 보라색 악센트의 어두운 UI, 데이터 밀집 대시보드 |
revolut.md | Revolut | 매끄러운 어두운 인터페이스, 그라데이션 카드, 핀테크 정밀함 |
wise.md | Wise | 밝은 초록색 악센트, 친근하고 명확함 |
엔터프라이즈 및 컨슈머
| 템플릿 | 사이트 | 스타일 |
|---|
airbnb.md | Airbnb | 따뜻한 코랄 악센트, 사진 중심, 둥근 UI |
apple.md | Apple | 프리미엄 여백, SF Pro, 시네마틱 이미지 |
bmw.md | BMW | 어두운 프리미엄 표면, 정밀한 엔지니어링 미학 |
ibm.md | IBM | Carbon 디자인 시스템, 구조화된 파란색 팔레트 |
nvidia.md | NVIDIA | 녹색-검정 에너지, 기술적 파워 미학 |
spacex.md | SpaceX | 선명한 흑백, 전체 블리드 이미지, 미래지향적 |
spotify.md | Spotify | 어두운 배경에 생생한 초록색, 대담한 타입, 앨범 아트 중심 |
uber.md | Uber | 대담한 흑백, 빡빡한 타입, 도시 에너지 |
디자인 선택하기
콘텐츠에 맞게 디자인을 선택하세요:
- 개발자 도구 / 대시보드: Linear, Vercel, Supabase, Raycast, Sentry
- 문서 / 콘텐츠 사이트: Mintlify, Notion, Sanity, MongoDB
- 마케팅 / 랜딩 페이지: Stripe, Framer, Apple, SpaceX
- 다크 모드 UI: Linear, Cursor, ElevenLabs, Warp, Superhuman
- 라이트 / 깔끔한 UI: Vercel, Stripe, Notion, Cal.com, Replicate
- 장난기 / 친근함: PostHog, Figma, Lovable, Zapier, Miro
- 프리미엄 / 럭셔리: Apple, BMW, Stripe, Superhuman, Revolut
- 데이터 밀집 / 대시보드: Sentry, Kraken, Cohere, ClickHouse
- 고정폭 / 터미널 미학: Ollama, OpenCode, x.ai, VoltAgent