厳選・オープン・無料

Getdooapp

クリーンなタイポグラフィと高精細なデバイスモックアップを通して提示される、より良い習慣を構築するためのミニマルなリマインダーアプリ。

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

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

📦 パックの中身を見る →

01

デザイン DNA

生産性リマインダーシンプルさカード習慣

日々のタスクのための、穏やかで整理されたデジタルノート。

02

カラー

#5550CAAccent
#383938Ink
#6E6D7AInk soft
#FFFFFFBG
#F7F7F7BG soft
#E7EFF5BG quiet
rgba(110,109,122,1.0)Line

クリーンな白の背景に、1色の深いバイオレットアクセントと落ち着いたスレート系テキストを組み合わせる。

03

タイポグラフィ

humanist-sans

見出しにはネガティブな文字間隔を使用し、タイトでモダンな印象を演出。 · 軽くエアリーな外観を保つため、フォントウェイトは全編通して400に厳格に統一。 · 見出しと段落の間には十分な縦方向の余白を確保。

04

余白

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

主要セクション間に大きなパディングブロック（130px）を設けた、ゆったりとした縦方向のリズム。

05

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

sm · 4px
md · 8px
lg · 30px
pill · 39px

セクション区切りに繊細なボーダー（1px solid #6E6D7A）を上部に配置。

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

十分なマージンと高品質なデバイスモックアップを備えた、単一カラムのセンタリングレイアウト。

07

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

200msmicro
250mssmall
1000msmedium
ease-in-outeasing

インタラクティブ要素に対するopacityとtransformのトランジション。 · ナビゲーションリンクのhover状態に対する滑らかなトランジション。

リンクやボタンに対する、繊細なopacityまたはカラートランジション。 · 標準のポインタカーソル以外の、最小限のビジュアルフィードバック。

08

コンポーネント

09

文体と禁止事項

10

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

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

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

11

System Prompt

これはミニマルな生産性アプリのランディングページです。プライマリ背景は純白（#FFFFFF）で、テキストはソフトダークグレー（#383938）、CTAボタンには1色の深いバイオレット（#5550CA）のアクセントを使用しています。タイポグラフィはヒューマニストサンズカテゴリ（Avenir Next/Nunito Sans）で、ウェイトは軽め、見出しにはネガティブな文字間隔を使用しています。主要なデザインルールには、ピル型ボタンの使用、十分な縦方向の余白の維持、ビジュアルの興味を高めるための高品質なデバイスモックアップへの依存が含まれます。ダークモード、重いシャドウ、ごちゃごちゃしたレイアウトは使用しないでください。インターフェースは軽く、穏やかに、リマインダーを通じた習慣構築というプロダクトの中核的価値提案に焦点を当てて維持してください。

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

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

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

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