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 Implementation Notesブロックが含まれています。内容は次のとおりです。

• CDNで使える代替フォントと、貼り付けてすぐ使えるGoogle Fontsの<link>タグ
• プライマリフォントと等幅フォント用のCSSフォントファミリーのスタック
• HTMLの作成にwrite_fileを使用し、検証にbrowser_exec（capture_screenshot()）を使用するよう促すリマインダー

HTML生成パターン

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
  
  <link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet">
  <style>
    /* Apply the template's color palette as CSS custom properties */
    :root {
      --color-bg: #ffffff;
      --color-text: #171717;
      --color-accent: #533afd;
      /* ... more from template Section 2 */
    }
    /* Apply typography from template Section 3 */
    body {
      font-family: 'Inter', system-ui, sans-serif;
      color: var(--color-text);
      background: var(--color-bg);
    }
    /* Apply component styles from template Section 4 */
    /* Apply layout from template Section 5 */
    /* Apply shadows from template Section 6 */
  </style>
</head>
<body>
  
</body>
</html>

write_fileでファイルを作成し、generative-widgetsワークフロー（cloudflaredトンネル）で配信して、browser_execで結果を検証します。ページを開き、capture_screenshot()を実行して画像を確認し、見た目が正確であることを確かめます。

フォント代替の参照

多くのサイトでは、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	特徴的な紫のグラデーション、ウェイト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