厳選・オープン・無料

Retool

社内ツール構築のための開発者ファーストプラットフォーム。

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

オリジナル: https://retool.com

📦 パックの中身を見る →

01

デザイン DNA

オペレーショナル開発者ファースト信頼性高パフォーマンス

エンタープライズグレードIDEに相当する社内ツール。

02

カラー

#518DD2Accent
#E9EBDFInk
#CBCC C4Ink soft
#151515BG
#242424BG soft
#8B867FBG quiet
rgba(233, 235, 223, 0.12)Line

暖かみのある落ち着いたニュートラルとクールなブルーアクセントによる高コントラストユーティリティ。

03

タイポグラフィ

grotesque-sans · humanist-sans · monospace

04

余白

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

4pxの統一ベース、24pxのグーター、呼吸空間を確保するための広めの垂直パディング。

05

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

sm · 4px
md · 8px
lg · 20px
pill · 9999px

控えめな区切りには1px solid rgba(233, 235, 223, 0.12)、アクティブ状態には1px solid rgb(233, 235, 223)。

0px 1px 2px rgba(0, 0, 0, 0.12) · 0px 68px 116px rgba(0, 0, 0, 0.35)

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

全幅のダーク背景に、中央揃えで制約のあるコンテンツ領域。

07

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

220msmicro
400mssmall
800msmedium
cubic-bezier(0.72, 0, 0.12, 1)easing

hover状態における滑らかなopacityとtransformのトランジション。 · テキスト要素の錯列入场アニメーション。 · UIコンポーネントの控えめなparallaxまたはフローティング効果。

ボタンやインタラクティブ要素に対して、控えめな背景色の変化やわずかな上方への移動。 · 色やopacityの変化による即座の視覚フィードバック。その後、ナビゲーショントランジションに続くことが多い。

08

コンポーネント

09

文体と禁止事項

10

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

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

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

11

System Prompt

社内ツール構築に特化した開発者向けSaaSプラットフォーム。デザインは暖かみのある落ち着いたグレー（#151515、#E9EBDF）とクールなブルーアクセント（#518DD2）を用いたダークモードパレットを使用。タイポグラフィは、大きな表示テキストにクリーンなグロテスクサンセリフ、本文にヒューマニストサンセリフを採用し、大きくウェイトの薄いヘッドラインを重視。レイアウトは中央揃えでゆとりがあり、広めのパディングを実装。重要な注意点：高彩度のネオンカラーは絶対に使用せず、ヘッドラインに装飾的なセリフフォントは避け、メインUIコンテナに鋭い90度の角は使用しない。語り口は直接的で、技術的、かつ自信に満ちたもの。

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

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

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

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