厳選・オープン・無料

Dify

大胆な青アクセントと構造化されたレイアウトを持つ、クリーンで開発者向けのAIプラットフォーム。

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

オリジナル: https://dify.ai

📦 パックの中身を見る →

01

デザイン DNA

AIプラットフォーム開発者ツールワークフロー自動化

洗練されたプロフェッショナルな開発者コンソールとモダンなSダッシュボードの融合

02

カラー

#0033FFAccent
#000000Ink
#666666Ink soft
#FFFFFFBG
#E5EAFFBG soft
#F8F9FBBG quiet
#333333Muted
rgba(0,0,0,0.1)Line

白地にハイコントラストの黒を基調とし、プライマリアクションに電気青のアクセントを1つ使用

03

タイポグラフィ

grotesque-sans · monospace

大きな表示テキストにはタイトな文字間隔を使用 · 見出しの最大インパクトのため、行間は1.1を維持 · 本文にはウェイト400、強調にはウェイト500を使用

04

余白

4px
8px
12px
16px
20px
24px
32px
40px
64px
100px

一貫した4px基本単位と、ヒーローセクションに十分な余白

05

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

sm · 4px
md · 8px
lg · 12px
pill · 999px

薄い1px境界線（ソフトブルーグレー #E5EAFF）

rgb(229, 234, 255) 0px 0px 0px 1px · rgba(0, 0, 0, 0.3) 0px 32px 68px 0px

06

レイアウト

1200container
12columns
24pxgutter
768 / 1024breakpoints

フルワイドヘッダー、中央揃えコンテンツコンテナ、マルチカラム機能グリッド

07

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

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

hover状態のシンプルなopacity遷移 · セクション間のスムーズなスクロール動作

インタラクティブ要素の微細な色の変化またはopacity変化 · 色の変化による即座の視覚的フィードバック

08

コンポーネント

09

文体と禁止事項

10

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

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

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

11

System Prompt

Difyはクリーンでミニマルな美的感覚を持つプロフェッショナルAI開発者プラットフォーム。デザインは純白（#FFFFFF）と黒（#000000）のハイコントラストパレットに、プライマリアクションとハイライトに電気青のアクセント（#0033FF）を1つ使用。タイポグラフィはクリーンなグロテスクサンセリフカテゴリに依存し、見出しにはタイトな文字間隔。レイアウトは余裕があり、十分な余白と構造化されたグリッドシステム。重要なデザインルール：アクセントカラーは青のみ、境界線はソフトブルーグレー（#E5EAFF）で微細に、装飾要素や重いシャドウを避け、本文テキストは左揃えを維持し、プロフェッショナルで開発者向けのトーンを保持。

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

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

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

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