厳選・オープン・無料

Reclaim

スケジューリングを自動化し、ワークライフバランスを取り戻すために設計された、AIファーストのカレンダーアプリケーション。

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

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

📦 パックの中身を見る →

01

デザイン DNA

インテリジェント自動化生産性スケジューリング

あなたのワークカレンダーを自動的に整理する、AI搭載のタイムキーパー。

02

カラー

#5562EBAccent
#181D25Ink
#4A4A4AInk soft
#FFFFFFBG
#EBEFFFBG soft
#F5F7FABG quiet
#6B7280Muted
rgba(24, 29, 37, 0.1)Line

鮮やかなプライマリブルーアクセントと、集中力を高める補助的なグリーントーンを備えた、クリーンで高コントラストのベース。

03

タイポグラフィ

geometric-sans · humanist-sans · monospace

大胆でモダンなディスプレイ用には、geometric-sansを使用。 · 可読性の高い本文には、humanist-sansを使用。

04

余白

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

4pxグリッドに基づき、ヒーローセクションには広めのホワイトスペースを、UIコンポーネントにはより詰め込んだ間隔を設定。

05

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

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

1px solid rgba(24, 29, 37, 0.1)

0px 5px 40px 0px rgba(9, 14, 21, 0.16) · 0px 20px 32px -8px rgba(9, 20, 66, 0.25)

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024 / 1440breakpoints

目立つ中央揃えのヒーローセクションを先頭に、交互に配置されたコンテンツブロックを備えるレスポンシブグリッド。

07

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

150msmicro
250mssmall
500msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

ビューポートに进入する要素に対する、控えめなフェードインとトランスフォーム遷移。 · hover時のインタラクティブ要素に対する、色とストロークの遷移。

プライマリボタンには控えめな色の変化や明度の変化。カードには軽いスケーリングやシャドウの浮き上がり。 · スケールや不透明度の変化による即座の視覚フィードバック。

08

コンポーネント

09

文体と禁止事項

10

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

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

11

System Prompt

Reclaim.aiは、自動カレンダー管理に焦点を当てた、AI搭載の生産性SaaSツールです。ビジュアルシステムは、クリーンで明るいテーマの美学を採用し、プライマリアクセントカラーに#5562EB(鮮やかなブルー)、セカンダリーグリーンに#7AC17Bを使用しています。タイポグラフィはgeometricとhumanistサンセリフフォントの混合で、モダンで非常に可読性の高いインターフェースを作り出しています。重要な要素には、大きな、メリットを促進するヘッドラインと広めのホワイトスペースが含まれます。重要なデザインルール:ボタンに鋭い角を使用しない(ピル形状を使用);ダークモードをプライマリUIとして使用しない;非ヘッドラインテキストに複雑なグラデーションを使用しない;すべてのプライマリCTAに高コントラストを確保;雑然とした印象を避けるために十分なホワイトスペースを維持する。

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

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

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

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