厳選・オープン・無料
Hugging Face
AIコミュニティがモデル、データセット、アプリを共同開発するための、フレンドリーで高実用性のプラットフォーム。
aicommunityplayful
01
デザイン DNA
コラボレーティブテクニカルフレンドリーオープンソースAI
機械学習エンジニアと研究者のための活気あるデジタル広場。
02
カラー
#000000Ink
#3D4654Ink soft
#FFFFFFBG
#F3F4F6BG soft
#F8F9FABG quiet
#6B7280Muted
rgba(229, 231, 235, 1)Line
明るいグレーの細いボーダーを備えたクリーンな白い背景。ヒーローセクションではダークネイビーのグラデーションでアンカーを取る。
03
タイポグラフィ
humanist-sans · monospace
- display
56px · 700 - h1
32px · 700 - h2
20px · 600 - body
16px · 400 - caption
12px · 400
04
余白
4px
8px
12px
16px
24px
32px
48px
64px
96px
Tight 4px マイクロスペーシングを含む、一貫した8pxグリッド。
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid #E5E7EB
rgba(0, 0, 0, 0.1) 0px 1px 2px 0px · rgba(0, 0, 0, 0.1) 0px 1px 3px 0px · rgba(0, 0, 0, 0.1) 0px 20px 25px -5px
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
モバイルでは単一カラムに折りたたまれる、標準的なレスポンシブ12カラムグリッド。
07
モーションとインタラクション
150msmicro
200mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
ホバー時の微細なカラートランジション · インタラクティブ要素のスケールおよびトランスレートトランスフォーム
0.15s easeで背景を明るくする、またはボーダーカラーを変更。 · 微細なスケールダウントランスフォーム。
08
コンポーネント
- button 白文字と丸みのある角(pill radius)を持つダークネイビーの塗りつぶしボタン、またはボーダー付きの透明ボタン。
- card 明るいグレーのボーダーと12pxのボーダー半径を持つ白いカード。機能や組織リストに使用。
- chip タスクやライブラリなどのカテゴリ用の、明るいグレーの背景を持つ小さな丸みのあるタグ。
- input 明るいグレーのボーダーと内部パディングを持つ、丸みのある検索フィールド。
- hero ダークネイビーからブラックへのグラデーション背景に、大きな白文字と目立つマスコット。
09
文体と禁止事項
- トーン フレンドリー、コラボレーティブ、かつ技術的に正確。
- 見出し コミュニティと構築を強調する、太字の宣言的なステートメント。
- CTA 直接的でアクション指向(例:「探す」「閲覧」)。
- 攻撃的なネオンアクセントは使用しない。パレットはネイビー、グレー、白に依存。
- 重いドロップシャドウは使用しない。カードには微細なエレベーションのみ。
- 長い段落のテキストを中央揃えにしない。配置は左揃え。
- すべての要素に完全な丸みのある角を使用しない。8pxとピル(pill)形状を混合使用。
- 複雑なイラストは使用しない。UIはクリーンなアイコンと単一のマスコットに依存。
- デフォルトでダークモードを使用しない。プライマリエクスペリエンスはライトモードで、ヒーローがダーク。
- 避ける: 過度に企業的なジャーゴン
- 避ける: 攻撃的な販売言語
- 避ける: プライマリUIにおける複雑な学術用語
10
パック内の実スクリーンショット
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
Hugging Faceは、クリーンで開発者重視のUIを持つ、フレンドリーなオープンソースAIコミュニティプラットフォームです。白い背景(#FFFFFF)、明るいグレー(#F3F4F6)、ダークネイビーのヒーローグラデーション(#1A202C)によるハイコントラストパレットを使用し、最大限の可読性のために黑色(#000000)のテキストを採用しています。タイポグラフィは、本文にhumanist-sans、見出しには太字のディスプレイウェイトを使用。主要なデザイン要素には、遊び心のある抱擁マスコット、丸みのある検索バー、タスクフィルタリング用のカテゴリ化された「チップ」が含まれます。重要な禁止事項:攻撃的なネオン色は避け、微細なシャドウのみを使用し、可読性のためにテキストは左揃えを維持。レイアウトはクリーンな12カラムグリッドで、豊かな余白を備え、コミュニティの信頼と技術的実用性を重視しています。
en · zh-CN · zh-TW · ja · ko