厳選・オープン・無料

Gleap

サポート、フィードバック、開発タスクを自動化するAIエージェント

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

オリジナル: https://gleap.io

📦 パックの中身を見る →

01

デザイン DNA

AIサポート自動運転開発生産性SaaS

ワークフローに統合された、プロフェッショナルで能力の高いAIチームメンバー

02

カラー

#353535Ink
#292929Ink soft
#F6F6F3BG
#EDEDE8BG soft
#FFFFFFBG quiet
rgba(53,53,53,0.5)Muted
rgba(53,53,53,0.12)Line

明確さのための高いコントラストを持つ温かみのあるニュートラル

03

タイポグラフィ

humanist-sans · monospace

すべてのテキストにhumanist sans-serifを使用 · 大型ディスプレイテキストにはタイトな文字間隔を維持 · 可読性のため、本文テキストは16pxをベースに保持

04

余白

4px
8px
16px
18px
24px
32px
60px
84px

豊かな垂直方向の間隔をもつ、一貫した4pxベースグリッド

05

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

sm · 6px
md · 12px
lg · 200px
pill · 999px

1px solid rgba(53,53,53,0.12)

0px 18px 55px 0px rgba(16,24,40,0.12) · 0px 1px 3px 0px rgba(0,0,0,0.15) · 0px 0px 20px 0px rgba(0,0,0,0.1)

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

コンテンツ用の中央揃えシングルカラムレイアウト、料金カード用のワイドグリッド

07

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

200msmicro
200mssmall
200msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

hover時の滑らかなopacityとbackground-colorのトランジション · インタラクティブ要素のTransformトランジション

微細な背景色の変化とopacityの調整 · 遅延なしの即座の視覚的フィードバック

08

コンポーネント

09

文体と禁止事項

10

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

Gleap — 桌面首屏（hero）
桌面首屏（hero）
Gleap — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Gleap — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Gleap — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Gleap — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Gleap — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Gleap — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Gleap — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Gleap — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Gleap — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Gleap — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Gleap — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Gleap — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Gleap — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Gleap — 移动首屏
移动首屏

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

11

System Prompt

Gleap.ioは、AIを活用したサポートおよび開発ツールを提供するSaaSプラットフォームです。デザインは、#F6F6F3をプライマリ背景、#353535をプライマリテキスト、#EDEDE8を微かなコントラストに使用する温かみのあるニュートラルパレットを使用しています。タイポグラフィはhumanist sans-serif（Switzer）で、大型ディスプレイテキスト（64px）にはタイトな文字間隔を設定しています。主要要素：一次アクション用にダーク背景のピルシェイプボタン、豊かな84pxの垂直パディング、クリーンな中央揃えレイアウト。重要な制約：決してネオンカラーを使用しない、決してセリフフォントを使用しない、装飾要素でレイアウトを過密にしない。デザインは視覚的な複雑さよりも明確さとプロフェッショナリズムを優先しています。

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

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

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

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