厳選・オープン・無料

Godly

ウェブデザインのインスピレーションを展示するためのミニマルでハイエンドなキュレーションギャラリー。

designgallery
Godly のスクリーンショット
↓ デザインシステムをダウンロード (5 MB)OpenDesign で開く

オリジナル: https://godly.website

📦 パックの中身を見る →

01

デザイン DNA

インスピレーションキュレーションミニマリズムウェブデザインギャラリー

アートワークだけが重要となる、清らかで広大なギャラリースペース。

02

カラー

#000000Ink
#FFFFFFBG
rgba(0, 0, 0, 0.05)Line

多様なコンテンツの色のための中立的なフレームとして機能する、厳格なモノクロパレット。

03

タイポグラフィ

humanist-sans

すべてのテキストにInterフォントファミリーを使用し、わずかな負の文字送りを適用。 · 見出しにはフォントウェイト500を使用し、セミボールドな外観を実現。 · 本文は読みやすさのために、ゆったりとした1.5の行間を維持。

04

余白

4px
8px
12px
16px
24px
32px
48px
64px
96px

寛容な余白と一貫したパディングが、クリーンで息が詰まらないリズムを生み出します。

05

サーフェス (角丸 / 影 / 罫線)

sm · 6px
md · 12px
lg · 24px
pill · 9999px

1px solid rgba(0, 0, 0, 0.05)

0px 10px 15px -3px rgba(0, 0, 0, 0.1) · 0px 4px 6px -4px rgba(0, 0, 0, 0.1)

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

ヒーローセクションには中央の単列レイアウトを採用し、その後、コンテンツカードの稠密で対称的なマーソニーグリッドに移行します。

07

モーションとインタラクション

150msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

hover時の微細な不透明度フェード · インタラクティブ要素の滑らかな背景色トランジション · ボタンとカードの微細なスケールトランスフォーム

150msのトランジションによる、不透明度や背景色の微細な変化。 · わずかなスケールトランジションによる、即座の視覚フィードバック。

08

コンポーネント

09

文体と禁止事項

10

パック内の実スクリーンショット

実ページから取得 · 実 computed styles

11

System Prompt

あなたは、プレミアムでミニマルなウェブデザインインスピレーションギャラリーをデザインしています。デザイン美学は、選定されたコンテンツの中立的なフレームとして機能する厳格な黒と白のカラーパレット(#FFFFFF背景、#000000テキスト)によって定義されます。タイポグラフィは、tightな負の文字送り(-0.32px)と、本文は中程度のフォントウェイト400、見出しは500を持つヒューマニストサンセリフのみです。レイアウトは、寛容な余白を持つ対称的なマーソニーグリッドに大きく依存しています。重要な制約:セリフフォントを使用しない。主要コンテンツカードにドロップシャドウやボーダーを適用しない。UIクロームにクロマチックアクセントカラーを導入しない。一次アクションには塗りつぶしを持つピル型ボタンを、二次インタラクションには微細でボーダレスな要素を使用する。

このセンスを AI エージェントへ

この設計の機械可読な仕様——カラー・タイポ・モーションまで——をそのまま AI エージェントに渡せます。

OpenDesign スキル ↗ · このパック(エージェント用) ↗

en · zh-CN · zh-TW · ja · ko