awesome-design-html

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/ — iOS アプリのモックアップを 22 点収録しています。実際のアプリのホーム／詳細／プロフィール画面を表示する 3 台の iPhone フレームをヒーローステージに配置し、デザインシステムのリファレンスも掲載しています。ユーザーがモバイルアプリの UI モックアップを求めている場合や、ブランドのネイティブ iOS の画面（再生中、スワイプ式カードデッキ、チャットバブル、レッスンパスなど）を再現したい場合に使用します。

各ファイルは単体で完結します。:root トークンブロック内のインライン CSS、Google Fonts CDN、ブランドに忠実な色／タイポグラフィ／角丸／コンポーネントに加え、元のデザイン仕様への「View source ↗」リンクが含まれています。

このスキルの使い方

ユーザーがブランド名とデザイン／スタイル／ページ／UI／ヒーロー／料金／画面／iPhone／アプリについて言及した場合：

1. ブランドとプラットフォームを照合します：
   • ウェブページ／ランディングページ／マーケティングページを求めている場合 → assets/web/ を確認します
   • iOS アプリのモックアップ／iPhone 画面／モバイル UI を求めている場合 → assets/ios/ を確認します
   • ブランドによっては両方あります（Spotify、Notion、Airbnb など）。ユーザーの意図に合うものを選びます。
2. assets/web/design.<slug>.html または assets/ios/design.<slug>-ios.html から該当する HTML を読み込みます。
3. ユーザーのリクエストに合わせて調整します — トークン（色、タイポグラフィ、角丸、ボタンの形、ヒーローのアーキタイプ）を抽出して適用します。複数のブランドを汎用的な一つのスタイルに均質化しないでください。

ファイル名

• Web 版：assets/web/design.<slug>.html
• iOS 版：assets/ios/design.<slug>-ios.html

一部のスラッグは正規化されています。

ブランド	スラッグ	備考
linear.app	linear
mistral.ai	mistral
together.ai	together
x.ai	xai	（Web のみ）
opencode.ai	opencode
bmw-m	bmw-m	ハイフンを維持
x.com (Twitter)	x-twitter	（iOS のみ）
apple-music	apple-music	（iOS のみ）

ブランド一覧 — Web（95）

🇨🇳 中国の大手企業（22、2026 年新規）

バイトダンス系: feishu (飞书), douyin (抖音), doubao (豆包) アリババ系: aliyun (阿里云), alipay (支付宝), dingtalk (钉钉), yuque (语雀) テンセント系: tencent-cloud (腾讯云), wechat (微信) 中国発 AI: deepseek, kimi, wenxin (文心一言), qwen (通义千问), qwencloud (Qwen Cloud · AI ネイティブのクラウドプラットフォーム) 新エネルギー車: xiaomi-ev (小米汽车), nio (蔚来), li-auto (理想), zeekr (极氪) コンテンツ／消費者向け: bilibili (哔哩哔哩), mihoyo (米哈游), xiaomi (小米), xiaohongshu (小红书 · 滝のように流れるフィードの探索画面)

グローバル企業（73）

生産性／SaaS: airtable, cal, intercom, miro, notion, slack, superhuman, webflow, zapier

開発ツール／IDE: browseros (エージェント型ブラウザー · クリーム色＋テラコッタ色＋犬のマスコット), bun (オールインワンの JS ツールキット · クリーム色のヘリテージ風ヒーロー＋鮮やかなピンク #ff73a8＋bun のマスコット · ドキュメント画面), 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

ブランドのアーキタイプ（特定のブランドが指定されていない場合のクイック参照）

アーキタイプ	Web の例	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	—
立体的で厚みのある影付きボタン	—	duolingo
スワイプ式カード＋色分けされたアクション	—	tinder
2 色のチャットバブル	—	whatsapp、telegram、discord

Web HTML ファイルの構成

<head>
  - Inline CSS in <style> (single block, all design tokens as :root --custom-properties)
  - Google Fonts CDN (Inter + brand-appropriate companion fonts)

<body>
  - Top nav matching brand
  - Hero (brand's signature pattern: mesh, dark band, product mockup, etc.)
  - 2-4 feature sections honoring brand rhythm
  - Pricing or CTA appropriate to brand
  - Design system reference section (Part B):
    - "Color" grouped sub-blocks
    - "Typography" table: token name (mono) + spec (mono) + live sample
    - "Radius" visual ladder
    - "Components" matrix: buttons + inputs + cards + tags/badges
  - Footer matching brand
  - Floating bottom-right "View source ↗" link to upstream
</body>

iOS HTML ファイルの構成

<head>
  - Inline CSS, :root tokens, Google Fonts
  - iPhone frame CSS (270pt × ~600pt, dynamic island, rounded 38px screen, side buttons)

<body>
  - Top nav (brand mark + iOS suffix)
  - Hero with 3 iPhone frames:
    - Left   iPhone (rotated -4°)  — secondary screen
    - Center iPhone (scaled 1.05)   — signature screen
    - Right  iPhone (rotated +4°)   — tertiary screen
    Each iPhone shows: dynamic island + status bar (9:41) + rendered app UI + bottom label
  - "iOS Surface Anatomy" feature grid (3 surfaces)
  - 3 alternating iOS-specific feature rows (e.g. Dynamic Island Live Activity, haptics matrix, lock-screen widget, swipe gestures, etc.)
  - Design system reference section (Part B) — same as web but with iOS Spec Strip table (heights, paddings, animation curves, haptics)
  - Footer + floating "View source ↗" → spectr.to gallery or upstream README
</body>

品質基準（このリファレンスから新しいページを作成する場合）

• ブランド独自のシグネチャーを尊重する — 汎用テンプレートを適用しないでください。Stripe のメッシュ、Linear の #010102 のキャンバス、Notion のパステルカラー、Apple のプロダクトタイルのリズム、Spotify の 9999px のピル型ボタン＋大文字の字間は、いずれも譲れない識別要素です。
• ブランドが使用していない色のアクセントを追加しない — Linear はラベンダーのみ、NVIDIA は緑のみ、xAI はアクセントカラーなし、Threads は青い認証バッジと赤いハートを除きアクセントカラーなしです。
• ボタンの形状を正確に合わせる — ピル型、長方形、鋭角のどれを使うかが、ブランドを定義します。
• ブランドの仕様で指定されている場合は、ディスプレイ書体に負の字間を使用する（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 では立体的で厚みのある影付きボタンが必須です（box-shadow 0 4-6px 0 darker）。WhatsApp ではチャットバブルの角のカットが必須です（送信者側の角は 0）。
• ダークなキャンバスを使うブランドでは、ドロップシャドウの装飾を使用しない — Linear と Bugatti では、代わりにサーフェスの階層と細い区切り線を使用します。

このスキルを使用しない場合

• ブランドの指定がなく、汎用的なレイアウトパターン（例：「2 列のダッシュボード」）を求められている場合 — 代わりに一般的なデザイン判断を使用してください。
• ユーザー独自のデザインシステムやブランドガイドラインがあり、これらのリファレンスより優先する必要がある場合。
• 116 ブランドの一覧にないブランドについて質問されている場合 — 推測せず、その旨を明確に伝えてください。

出典

• Web の仕様は VoltAgent/awesome-design-md（MIT）を基にしています。
• iOS の仕様は Meliwat/awesome-ios-design-md（詳細仕様は Spectr gallery）を基にしています。

各 HTML の右下隅から出典にリンクしています。