厳選・オープン・無料

Amie

スケジュールとメモを手間なく整理してくれる、親しみやすいAI搭載の生産性アプリ。

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

オリジナル: https://amie.so

📦 パックの中身を見る →

01

デザイン DNA

生産的統合された清潔知的親しみやすい

複雑なツールではなく、親しい友人のような、清潔でモダンなワークスペース。

02

カラー

#11A8FFAccent
#000000Ink
#5C5C5CInk soft
#FFFFFFBG
#A0A0A0Muted
rgba(205, 205, 205, 1)Line

鮮やかなブルーアクセントを単一に用いた、クリーンでハイコントラストなパレット。読みやすさと、プロフェッショナルでありながら親しみやすい印象を確保します。

03

タイポグラフィ

humanist-sans

04

余白

4px
8px
12px
16px
20px
24px
28px
32px
48px
64px
96px

4を基数とするシステム。十分なpadding（12px、20px、28px）を用いることで、空気感のある、ごちゃつきのない印象を生み出します。

05

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

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

柔らかな境界線として、rgba(205, 205, 205, 1)の微妙な1px solidボーダーを使用。

rgba(0, 0, 0, 0.06) 0px 0px 0px 1px · rgba(0, 0, 0, 0.06) 0px 1px 1px -0.5px · rgba(0, 0, 0, 0.06) 0px 3px 3px -1.5px

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

中央揃えの幅広コンテナ。読みやすい狭いテキストカラムと、サイドバーを多用した製品UIレイアウト。

07

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

150msmicro
300mssmall
600msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

インタラクティブ要素のcolor、background-color、border-colorに対する、滑らかなトランジション。

background-colorやtext-colorの微妙な変化。多くの場合、ポインタカーソルを表示します。 · 標準的なボタン押下動作。

08

コンポーネント

09

文体と禁止事項

10

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

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

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

11

System Prompt

このサイトは、クリーンで親しみやすく、アプローチしやすいデザインを持つ、モダンなSaaS生産性アプリです。プライマリブランドカラーは、白背景に鮮やかなブルー（#11A8FF）で、テキストは黒とグレーです。高い可読性のために、クリーンなhumanist-sans（Inter）を使用しています。レイアウトはゆったりとしており、十分なpaddingと幅広コンテナで空気感を生み出しています。主要なインタラクションには滑らかで微妙なトランジションを使用します。重要な禁止事項：暗い背景を使用しない、装飾的なセリフを使用しない、複雑な要素や複数の明るいアクセントカラーでインターフェースを詰め込みすぎないこと。

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

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

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

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