厳選・オープン・無料
Payload
モダンWebアプリケーション構築のためのオープンソースNext.jsバックエンド。
cmsdev
01
デザイン DNA
開発者優先モダンヘッドレスCMSTypeScript
バックエンド開発のための高性能スポーツカー
02
カラー
#ffffffInk
rgba(255,255,255,0.5)Ink soft
#000000BG
rgba(255,255,255,0.125)BG soft
#808080Muted
控えめなテクスチャオーバーレイを備えた高コントラストモノクロームパレット
03
タイポグラフィ
geometric-sans · monospace
- display
56px · 500 - heading
32px · 500 - body
16px · 400 - caption
12px · 500
ディスプレイには幾何学的サンセリフをタイトなトラッキングで使用 · 本文には同じ幾何学的サンセリフファミリーをレギュラーウェイトで使用 · コードスニペットにはモノフォントを使用 · ラベルとメタデータには大文字変換を使用
04
余白
4px
8px
12px
16px
20px
24px
32px
40px
48px
64px
96px
余裕あるパディングを備えた一定の4pxグリッド
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 8px
lg · 12px
pill · 40px
1px solid rgba(255,255,255,0.125)
0 4px 24px rgba(0,0,0,0.5)
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
余裕あるパディングを備えたフル幅セクション
07
モーションとインタラクション
150msmicro
300mssmall
800msmedium
cubic-bezier(0.165, 0.84, 0.44, 1)easing
インタラクティブ要素上のスムーズなhoverトランジション · コンテンツセクションの段階的なフェードインアニメーション
控えめなopacityとtransformの変化 · ビジュアルフィードバックを伴う即時応答
08
コンポーネント
- button 純白背景と黒テキストを持つピル型プライマリボタン
- card 控えめな境界線と背景色合いを備えたシンプルなカード
- chip 文字间距のある小さな大文字ラベル
- input 控えめな境界線を備えたミニマルな入力フィールド
- hero 大きなタイポグラフィとコードスニペットプレビューを備えたフル幅ヒーロー
09
文体と禁止事項
- トーン 自信に満ち、技術的で、開発者に焦点を当てた
- 見出し 能力に関する大胆で直接的なステートメント
- CTA 方向矢印を備えた明確なアクション指向ボタン
- カラフルなグラデーションを使用しない — スクリーンショットはモノクロームパレットを示している
- セリフフォントを使用しない — スクリーンショットは全体的に幾何学的サンセリフを示している
- 煩雑な背景を使用しない — スクリーンショットはクリーンなダークサーフェスを示している
- 小さなタッチターゲットを使用しない — スクリーンショットは余裕あるパディングを示している
- 装飾的要素を使用しない — スクリーンショットはミニマルで機能的なデザインを示している
- 複雑なアニメーションを使用しない — スクリーンショットは控えめで意図的なモーションを示している
- 避ける: 過度にカジュアルな言葉
- 避ける: マーケティング用語
- 避ける: 過度な句読点
- 避ける: 大文字の本文
10
パック内の実スクリーンショット
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
Payload CMSは、Web開発のためのモダンバックエンドソリューションとしてポジショニングされた、開発者優先のヘッドレスCMSです。主要なビジュアル要素には、ダークテーマ（#000000背景）と、幾何学的サンセリフフォントを使用した白（#ffffff）タイポグラフィが含まれます。デザインは、タイトなトラッキングと最小限の装飾要素を備えた大胆で大きな見出しを重視しています。重要な制約：カラフルなアクセントを伴わない厳格なモノクロームパレットの維持、一定の幾何学的サンセリフタイポグラフィ階層の使用、全体を通して余裕あるspacingとpaddingの確保。クリーンで技術的な美学を損なうセリフフォント、グラデーション、または過度に装飾的な要素は避けてください。インターフェースは、コードスニペット、ターミナルスタイルコマンド、技術コンテンツのための明確なビジュアル階層によって、開発者体験を優先します。
en · zh-CN · zh-TW · ja · ko