yzfly/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 社を含む）。ヒーロー、特徴、価格、デザインシステムリファレンスを含みます。ユーザーがブランドのスタイルで Webサイト / ランディングページ / プロダクトページ を求める場合に使用します。
• assets/ios/ — 22 の iOS アプリモックアップ。3 台の iPhone フレームがヒーローセクションに表示され、実際のアプリのホーム画面、詳細画面、プロフィール画面とデザインシステムリファレンスを表示します。ユーザーが モバイルアプリ UI モックアップ を求めている場合、またはブランドの ネイティブ iOS サーフェス（再生中、スワイプデッキ、チャットバブル、レッスンパスなど）を表現したい場合に使用します。

すべてのファイルは自己完結型です。:root トークンブロックによるインライン CSS、Google Fonts CDN、ブランドに忠実な色 / タイポグラフィ / 半径 / コンポーネント、そして基礎となるデザイン仕様への "View source ↗" リンクを含みます。

このスキルの使い方

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

1. ブランドとプラットフォームを一致させる:
   • Web ページ / ランディングページ / マーケティングページが必要 → assets/web/ を確認
   • iOS アプリモックアップ / iPhone 画面 / モバイル UI が必要 → assets/ios/ を確認
   • 一部のブランドは両方（Spotify、Notion、Airbnb など）を持っています — ユーザーの意図に合う方を選択します。
2. 該当する HTML を読む: assets/web/design.<slug>.html または assets/ios/design.<slug>-ios.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)

🇨🇳 中国大厂 China tier (22, NEW 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)

グローバル tier (73)

プロダクティビティ / SaaS: airtable, cal, intercom, miro, notion, slack, superhuman, webflow, zapier

Dev ツール / 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

インフラ / Dev インフラ: 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	—
3D でっかい影のボタン	—	duolingo
スワイプデッキ + 色分けされたアクション	—	tinder
2色のチャットバブル	—	whatsapp, telegram, discord

Web HTML ファイル構造

<head>
  - <style> 内のインライン CSS（単一ブロック、すべてのデザイントークンは :root --custom-properties として定義）
  - Google Fonts CDN（Inter + ブランドに適した補助フォント）

<body>
  - ブランドにマッチしたトップナビゲーション
  - ヒーロー（ブランドの特徴的なパターン：メッシュ、ダークバンド、プロダクトモックアップなど）
  - ブランドのリズムに合わせた 2～4 の特徴セクション
  - ブランドに適した価格または CTA
  - デザインシステムリファレンスセクション（パート B）:
    - 「カラー」グループ化されたサブブロック
    - 「タイポグラフィ」テーブル：トークン名（等幅）+ 仕様（等幅）+ ライブサンプル
    - 「半径」視覚的な階段
    - 「コンポーネント」マトリックス：ボタン + 入力 + カード + タグ/バッジ
  - ブランドにマッチしたフッター
  - 右下に浮遊する「View source ↗」リンク（アップストリームへ）
</body>

iOS HTML ファイル構造

<head>
  - インライン CSS、:root トークン、Google Fonts
  - iPhone フレーム CSS（270pt × ~600pt、ダイナミックアイランド、角丸 38px の画面、サイドボタン）

<body>
  - トップナビ（ブランドマーク + iOS サフィックス）
  - 3 台の iPhone フレームによるヒーロー:
    - 左 iPhone（-4°回転） — セカンダリ画面
    - 中央 iPhone（1.05 倍に拡大） — シグネチャ画面
    - 右 iPhone（+4°回転） — ターシャリ画面
    各 iPhone は以下を表示：ダイナミックアイランド + ステータスバー（9:41）+ レンダリングされたアプリ UI + 下部ラベル
  - 「iOS サーフェスアナトミー」機能グリッド（3 つのサーフェス）
  - 3 つの交互の iOS 固有機能行（例：ダイナミックアイランドのライブアクティビティ、ハプティクスマトリックス、ロック画面ウィジェット、スワイプジェスチャーなど）
  - デザインシステムリファレンスセクション（パート B）— Web と同じですが、iOS Spec Strip テーブル（高さ、パディング、アニメーションカーブ、ハプティクス）が追加されます
  - フッター + 浮遊する「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 フレームにはダイナミックアイランド、9:41 のセルラーバーとバッテリーを含むステータスバー、ブランドごとの正しいタブバー数（例：Snapchat は中央にカメラボタンがある 5 タブ、Instagram は 5 タブ、ChatGPT はタブバーなし）が含まれている必要があります。
• iOS ファイル: Duolingo の 3D でっかい影のボタンは譲れません（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 ギャラリー）から派生。

各 HTML の右下隅はそのソースにリンクしています。