Awesome Design HTML
118개의 단일 파일 HTML 페이지로 구성된 레퍼런스 라이브러리:
assets/web/design.zhongguo-colors.html— 🎨 중국 전통 색상(Chinese Traditional Colors): nevertoday/zhongguo-traditional-colors에서 파생된 742색 견본 페이지. 색상은 색족(紅/橙/黃/綠/青/藍/紫/白/灰褐/黑)별로 자동 그룹화되며, 이름이나 HEX로 검색 가능하고 클릭하여 복사할 수 있습니다. 사용자가 중국 전통 색상 팔레트 / 中式配色 / 色卡를 원할 때 사용합니다. 갤러리에서 첫 번째로 표시됩니다.assets/web/— 96개의 마케팅 페이지 데모(중국 대형 기업 22개 포함). 히어로 + 기능 + 가격 + 디자인 시스템 레퍼런스. 사용자가 웹사이트 / 랜딩 페이지 / 제품 페이지를 브랜드 스타일로 원할 때 사용합니다.assets/ios/— 22개의 iOS 앱 모형. 히어로 단계에 세 개의 iPhone 프레임으로 실제 앱의 홈/상세/프로필 화면과 디자인 시스템 레퍼런스를 보여줍니다. 사용자가 모바일 앱 UI 모형을 원하거나 브랜드의 네이티브 iOS 화면(Now Playing, 스와이프 덱, 채팅 버블, 레슨 경로 등)을 반영하려 할 때 사용합니다.
모든 파일은 자체 포함형입니다. :root 토큰 블록의 인라인 CSS, Google Fonts CDN, 브랜드에 충실한 색상/타이포그래피/반경/컴포넌트, 그리고 기본 디자인 사양으로 연결되는 "View source ↗" 링크가 포함됩니다.
이 스킬 사용 방법
사용자가 브랜드 이름과 디자인 / 스타일 / 페이지 / UI / 히어로 / 가격 / 화면 / iPhone / 앱을 언급할 때:
- 브랜드와 플랫폼 매칭:
- 웹페이지 / 랜딩 페이지 / 마케팅 페이지를 원함 →
assets/web/에서 찾기 - iOS 앱 모형 / iPhone 화면 / 모바일 UI를 원함 →
assets/ios/에서 찾기 - 일부 브랜드는 둘 다 있음(Spotify, Notion, Airbnb 등) — 사용자 의도와 일치하는 것을 선택.
- 웹페이지 / 랜딩 페이지 / 마케팅 페이지를 원함 →
assets/web/design.<slug>.html또는assets/ios/design.<slug>-ios.html에서 일치하는 HTML 읽기.- 사용자 요청에 맞게 조정 — 토큰(색상, 타이포그래피, 반경, 버튼 모양, 히어로 원형)을 추출하여 적용. 여러 브랜드를 하나의 일반적인 모양으로 균질화하지 마십시오.
파일 이름 규칙
- 웹 변형:
assets/web/design.<slug>.html - iOS 변형:
assets/ios/design.<slug>-ios.html
일부 slug는 정규화되었습니다:
| 브랜드 | Slug | 비고 |
|---|---|---|
| linear.app | linear | |
| mistral.ai | mistral | |
| together.ai | together | |
| x.ai | xai | (웹 전용) |
| opencode.ai | opencode | |
| bmw-m | bmw-m | 하이픈 유지 |
| x.com (Twitter) | x-twitter | (iOS 전용) |
| apple-music | apple-music | (iOS 전용) |
브랜드 인덱스 — 웹 (95)
🇨🇳 중국 대형 기업 (22개, 신규 2026)
字节系: feishu (飞书), douyin (抖音), doubao (豆包) 阿里系: aliyun (阿里云), alipay (支付宝), dingtalk (钉钉), yuque (语雀) 腾讯系: tencent-cloud (腾讯云), wechat (微信) 국산 AI: deepseek, kimi, wenxin (文心一言), qwen (通义千问), qwencloud (Qwen Cloud · AI-Native Cloud platform) 신에너지차: xiaomi-ev (小米汽车), nio (蔚来), li-auto (理想), zeekr (极氪) 콘텐츠/소비: bilibili (哔哩哔哩), mihoyo (米哈游), xiaomi (小米), xiaohongshu (小红书 · 瀑布流 explore feed)
글로벌 티어 (73)
생산성 / SaaS: airtable, cal, intercom, miro, notion, slack, superhuman, webflow, zapier
개발 도구 / IDE: browseros (agentic browser · cream + terracotta + dog mascot), bun (all-in-one JS toolkit · cream heritage hero + hot-pink #ff73a8 + bun mascot · docs surface), cursor, figma, framer, opencode, raycast, sanity, vercel, warp
AI / LLM 플랫폼: claude, cohere, elevenlabs, lovable, minimax, mistral, ollama, runwayml, together, voltagent, xai
인프라 / 개발 인프라: composio, clickhouse, hashicorp, mintlify, mongodb, posthog, replicate, resend, sentry, supabase
핀테크 / 암호화폐: binance, coinbase, kraken, mastercard, revolut, stripe, wise
자동차 / 럭셔리: bmw, bmw-m, bugatti, ferrari, lamborghini, renault, tesla
소비자 / 상거래: airbnb, nike, pinterest, shopify, spotify, starbucks, uber
엔터프라이즈 / 플랫폼: ibm, meta, nvidia, expo
미디어 / 편집: theverge, wired
게임 / 항공 / 통신: playstation, spacex, vodafone
3대 원조 (품질 기준): stripe, linear, notion
브랜드 인덱스 — iOS (22)
음악 / 비디오: spotify-ios, apple-music-ios, youtube-ios, netflix-ios, tiktok-ios
소셜: instagram-ios, threads-ios, x-twitter-ios, snapchat-ios
메시징: whatsapp-ios, telegram-ios, discord-ios
AI / 생산성: chatgpt-ios, notion-ios
여행: uber-ios, airbnb-ios
데이트: tinder-ios, hinge-ios
음식 / 금융 / 학습: starbucks-ios, doordash-ios, robinhood-ios, duolingo-ios
브랜드 아키타입 (특정 브랜드가 지정되지 않았을 때 빠른 조회)
| 아키타입 | 웹 예시 | iOS 예시 |
|---|---|---|
| 어두운 캔버스 + 제품 UI가 중심 | linear, warp, cursor, sentry, hashicorp, opencode | spotify, netflix, threads, x-twitter, discord |
| 밝은 + 그라데이션 메쉬 히어로 | stripe, vercel, intercom | apple-music |
| 밝은 + 파스텔 카드 / 다채로운 스펙트럼 | notion, slack, airbnb, miro, clay, pinterest, xiaohongshu | instagram, snapchat, duolingo |
| 벽돌 쌓기 / 폭포수 수직 카드 피드 | pinterest, xiaohongshu | — |
| 편집 인쇄 잡지 | wired, theverge, claude, mistral, resend, elevenlabs | — |
| 강한 단색 + 최소 반경 | apple, vercel, figma, bugatti, tesla, spacex | uber, threads, chatgpt |
| 대시보드 모형이 중심 | stripe, mongodb, supabase, posthog, hashicorp, coinbase | robinhood |
| 알약 버튼 시스템 | stripe, slack, airbnb, spotify, mastercard, coinbase | airbnb-ios, instagram-ios |
| 직사각형 버튼 시스템 (8px 이하) | notion, supabase, vercel, linear, mistral, expo | whatsapp, notion, telegram |
| 럭셔리 자동차 + 사양 표 | bmw, ferrari, lamborghini, bugatti, bmw-m, tesla | — |
| 3D 두꺼운 그림자 버튼 | — | duolingo |
| 스와이프 덱 + 색상 코딩된 액션 | — | tinder |
| 채팅 버블 두 가지 색상 | — | whatsapp, telegram, discord |
웹 HTML 파일 구조
<head>
- <style> 내 인라인 CSS (단일 블록, 모든 디자인 토큰을 :root --custom-properties로 사용)
- Google Fonts CDN (Inter + 브랜드에 적합한 보조 글꼴)
<body>
- 브랜드와 일치하는 상단 내비게이션
- 히어로 (브랜드의 시그니처 패턴: 메쉬, 어두운 띠, 제품 모형 등)
- 브랜드 리듬을 따르는 2-4개의 기능 섹션
- 브랜드에 적합한 가격 또는 CTA
- 디자인 시스템 레퍼런스 섹션 (파트 B):
- "Color" 그룹화된 하위 블록
- "Typography" 표: 토큰 이름 (고정폭) + 사양 (고정폭) + 실제 샘플
- "Radius" 시각적 사다리
- "Components" 매트릭스: 버튼 + 입력 필드 + 카드 + 태그/배지
- 브랜드와 일치하는 푸터
- 오른쪽 하단 고정 "View source ↗" 링크 (업스트림으로 연결)
</body>
iOS HTML 파일 구조
<head>
- 인라인 CSS, :root 토큰, Google Fonts
- iPhone 프레임 CSS (270pt × ~600pt, Dynamic Island, 둥근 38px 화면, 측면 버튼)
<body>
- 상단 내비게이션 (브랜드 마크 + iOS 접미사)
- 3개의 iPhone 프레임이 있는 히어로:
- 왼쪽 iPhone (-4° 회전) — 보조 화면
- 중앙 iPhone (1.05배 확대) — 시그니처 화면
- 오른쪽 iPhone (+4° 회전) — 3차 화면
각 iPhone 표시: Dynamic Island + 상태 표시줄 (9:41) + 렌더링된 앱 UI + 하단 레이블
- "iOS Surface Anatomy" 기능 그리드 (3개의 화면)
- 3개의 번갈아 표시되는 iOS 특화 기능 행 (예: Dynamic Island Live Activity, 햅틱 매트릭스, 잠금 화면 위젯, 스와이프 제스처 등)
- 디자인 시스템 레퍼런스 섹션 (파트 B) — 웹과 동일하지만 iOS 사양 스트립 표(높이, 패딩, 애니메이션 곡선, 햅틱) 추가
- 푸터 + 고정 "View source ↗" → spectr.to 갤러리 또는 업스트림 README
</body>
품질 기준 (이 레퍼런스에서 새 페이지 생성 시)
- 브랜드의 실제 시그니처 존중 — 일반 템플릿을 적용하지 마십시오. Stripe의 메쉬, Linear의 #010102 캔버스, Notion의 파스텔 색조, Apple의 제품 타일 리듬, Spotify의 알약 9999px + 대문자 트래킹은 모두 협상 불가능한 식별자입니다.
- 브랜드가 사용하지 않는 색채 악센트 도입 금지 — Linear는 라벤더만, NVIDIA는 초록색만, xAI는 악센트가 전혀 없으며, Threads는 상속된 파란색 체크와 빨간색 하트 외에는 악센트가 없습니다.
- 버튼 모양 정확히 일치 — 알약 vs 직사각형 vs 날카로운 모서리는 브랜드 정의 요소입니다.
- 브랜드 사양이 요구하는 경우 표시 텍스트에 음수 자간 적용 (Linear -3px, Stripe -1.4px 등).
- 브랜드가 돈이나 숫자를 표시하는 경우 표 형식 숫자 사용 (
font-feature-settings: "tnum") (Stripe, Coinbase, Binance, Wise, Robinhood). - iOS 파일: iPhone 프레임에는 Dynamic Island, 9:41의 상태 표시줄(셀룰러 막대 + 배터리 포함), 브랜드별 올바른 탭 바 개수(예: Snapchat은 중앙 카메라 버튼이 있는 5개 탭, Instagram은 5개 탭, ChatGPT는 탭 바 없음)가 포함되어야 합니다.
- iOS 파일: Duolingo의 경우 3D 두꺼운 그림자 버튼은 협상 불가능합니다(box-shadow
0 4-6px 0 darker). WhatsApp의 경우 채팅 버블 모서리 잘라내기는 협상 불가능합니다(발신자 측 모서리 = 0). - 어두운 캔버스 브랜드에 그림자 효과 없음 — Linear, Bugatti는 대신 표면 사다리와 가는 선을 사용합니다.
이 스킬을 사용하지 말아야 할 경우
- 사용자가 브랜드 참조 없이 일반적인 레이아웃 패턴(예: "2열 대시보드")을 요청하는 경우 — 대신 일반 디자인 판단을 사용하십시오.
- 사용자에게 이러한 참조를 무시해야 하는 자체 디자인 시스템/브랜드 가이드라인이 있는 경우.
- 사용자가 116개 브랜드 목록에 없는 브랜드에 대해 질문하는 경우 — 추측하기보다 명시적으로 알려주십시오.
출처 표기
- 웹 사양은 VoltAgent/awesome-design-md (MIT)에서 파생되었습니다.
- iOS 사양은 Meliwat/awesome-ios-design-md (Spectr 갤러리에서 전체 사양 확인)에서 파생되었습니다.
각 HTML의 오른쪽 하단 모서리는 해당 소스로 다시 연결됩니다.