人気Webデザイン集（Popular Web Designs）

人気Webデザイン集

HTML/CSSを生成する際にすぐに使える、54種類の実世界のデザインシステム。各テンプレートは、サイトの完全なビジュアル言語（カラーパレット、タイポグラフィ階層、コンポーネントスタイル、スペーシングシステム、シャドウ、レスポンシブ動作、正確なCSS値を含む実用的なエージェントプロンプト）を捉えています。

関連デザインスキル

• claude-design — デザインの プロセスとセンス に使用します（ブリーフのスコープ設定、バリエーションの作成、ローカルHTMLアーティファクトの検証、AIデザインの「スロップ」回避）。ユーザーが既知のブランドを模した、よく考えられたデザインページを望む場合にこのスキルとペアリングします。claude-design がワークフローを駆動し、このスキルがビジュアルボキャブラリを提供します。
• design-md — 成果物がレンダリングされたアーティファクトではなく、正式なDESIGN.mdトークン仕様ファイルである場合に使用します。

使用方法

1. 以下のカタログからデザインを選択します
2. テンプレートを読み込みます: skill_view(name="popular-web-designs", file_path="templates/<site>.md")
3. HTML生成時にデザイントークンとコンポーネント仕様を使用します
4. generative-widgets スキルと組み合わせて、cloudflaredトンネル経由で結果を提供します

各テンプレートの先頭には Hermes実装ノート ブロックがあり、以下が含まれます:

• CDNフォント代替とGoogle Fonts <link> タグ（コピーしてすぐに貼り付け可能）
• プライマリフォントとモノスペースフォントのCSSフォントファミリスタック
• HTML作成のための write_file と、確認のための browser_vision の使用リマインダー

HTML生成パターン

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ページタイトル</title>
  <!-- テンプレートのHermesノートからGoogle Fontsの<link>を貼り付け -->
  <link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet">
  <style>
    /* テンプレートのカラーパレットをCSSカスタムプロパティとして適用 */
    :root {
      --color-bg: #ffffff;
      --color-text: #171717;
      --color-accent: #533afd;
      /* テンプレートのセクション2からさらに追加 */
    }
    /* テンプレートのセクション3からタイポグラフィを適用 */
    body {
      font-family: 'Inter', system-ui, sans-serif;
      color: var(--color-text);
      background: var(--color-bg);
    }
    /* テンプレートのセクション4からコンポーネントスタイルを適用 */
    /* テンプレートのセクション5からレイアウトを適用 */
    /* テンプレートのセクション6からシャドウを適用 */
  </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	ボールド、タイト
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）、置き換えによる損失はありません。代替が使用される場合（Circularの代わりにDM Sans、sohne-varの代わりにSource Sans 3）、テンプレートのウェイト、サイズ、レタースペーシングの値を厳密に従ってください。これらは特定のフォントフェースよりも多くの視覚的アイデンティティを伝えます。

デザインカタログ

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	カーボンデザインシステム、構造化ブルーパレット
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