厳選・オープン・無料
Sierra
温かみのあるエディトリアル写真を用い、複雑技術を人間らしく信頼できるものに変える、洗練されたAIエージェント・プラットフォーム。
aienterprise
01
デザイン DNA
AIカスタマーエクスペリエンスエンタープライズエージェントプラットフォーム
AIエージェントのためのプレミアムコンサルタント。技術的な深さと、親しみやすく人間中心的なストーリーテリングのバランスを取ります。
02
カラー
#302E2DInk
#716F6CInk soft
#FFFFFFBG
#F6F5F3BG soft
#E4E0DCMuted
rgba(228, 224, 220, 1)Line
ウォームニュートラル：ウォームグレーと大地色を基盤としたパレット。視覚的な興味は合成アクセントではなく、高品質な写真に依存します。
03
タイポグラフィ
grotesque-sans · monospace
- display
56px · 500 - headline
44px · 400 - subhead
24px · 400 - body
16px · 400 - caption
14px · 400
大きなディスプレイテキストには tighten tracking（-1.3px〜-0.38px）を適用し、洗練されたエディトリアル感を生み出します。 · ほぼすべてのテキストで厳格にウエイト400を維持。強調のためのウエイト500は非常に限定的にのみ使用します。 · 本文テキストには十分な行の高さ（1.4-1.5）を確保し、可読性を維持します。
04
余白
4px
8px
12px
16px
24px
32px
48px
64px
80px
余裕のある構造化。主要セクションには大きなパディング（80px）を、内部間隔には一貫した8/16/24pxの刻みを使用し、クリーンで息がのまるレイアウトを実現します。
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 8px
lg · 16px
pill · 999px
1px solid rgb(228, 224, 220)
0px 28px 34px 0px rgba(15, 79, 138, 0.15) · 0px 75px 63px 0px rgba(15, 79, 138, 0.15)
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
最大幅コンテナを備えたセンタリングされたレスポンシブレイアウト。フルブリードのエディトリアル・ヒーローから、ダッシュボード向けの構造化されたマルチカラムUIへと移行します。
07
モーションとインタラクション
220msmicro
250mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
color、background-color、opacity の標準的なトランジション（0.25秒） · filter などの複雑なプロパティにはやや長いトランジション（0.5秒） · インタラクティブ要素に対する繊細な transform
ボタンやナビゲーションリンクなどのインタラクティブ要素上で、滑らかな color および background のトランジション。 · プライマリCTAに対する繊細な transform（scale/translate）や opacity の変化。
08
コンポーネント
- button ピルシェイプ（999px radius）。白背景にダークインクのテキスト、またはセカンダリアクション用に繊細なアウトライン。
- card 16pxのボーダー半径と、ソフトな背景の上に繊細な1pxボーダーを持つクリーンなコンテナ。
- chip 最小限。主にテキストのみで、繊細な背景やボーダー処理を施すことが多い。
- input クリーンなフィールドに繊細なボーダー。小さなアイコンと4px/8pxの内部パディングを伴うことが多い。
- hero フルビューポートの写真背景。大きな、左揃えのディスプレイ・タイポグラフィと、ハイコントラストのピル-shaped CTAを一つだけ配置。
09
文体と禁止事項
- トーン 自信に満ち、明瞭で、親しみやすい。
- 見出し 価値提案を明確に述べる、短くインパクトのあるステートメント。
- CTA 直接的でアクション指向。しばしば単一の「詳細を見る」または「サインイン」。
- 鮮やかな合成アクセントカラーを使用しない — スクリーンショットは、ウォームグレーと大地系の写真トーンを基盤としたパレットを示しています。
- 大きなヘッドラインにルーズなトラッキングを使用しない — スクリーンショットは、洗練されたエディトリアル感のためのタイトなトラッキング（例：-1.3px）を示しています。
- 本文コピーに太いフォントウエイトを使用しない — スクリーンショットは、ほぼ例外なくウエイト400が使用されていることを示しています。
- 太いシャドウやボーダーでUIを雑踏させない — スクリーンショットは、繊細な1pxボーダーと最小限のシャドウ使用を示しています。
- ボタンに鋭く幾何学的なボーダー半径を使用しない — スクリーンショットは、完全に丸みのあるピルシェイプ（999px）を示しています。
- UIの主たる強調にカラーに依存しない — スクリーンショットは、タイポグラフィのスケールと間隔に依存していることを示しています。
- 避ける: 文脈のない専門用語の多用
- 避ける: 攻撃的、または過度に熱狂的なマーケティング・スピーチ
- 避ける: コアメッセージから注意をそらす雑然としたUI
- 避ける: ハイコントラストなネオン色や合成アクセントカラー
10
パック内の実スクリーンショット
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
Sierraは、人間中心的、エディトリアルな視点を通じて自らを位置づけるプレミアムAIエージェント・プラットフォームです。そのビジュアルDNAは、温かみのあるニュートラルなカラーパレット（インク #302E2D、ソフト背景 #F6F5F3）で定義され、高品質な写真に感情的な主役を任せます。タイポグラフィは、大きなディスプレイでタイトなトラッキングを施した洗練されたグロテスク・サンセリフで、クリーンで洗練された印象を生み出します。UIコンポーネントはシンプルで、ピル-shapedボタンと繊細なボーダーを使用します。重要な禁止事項：合成アクセントカラーの使用を避け、ヘッドラインのトラッキングはタイトに保ち、本文テキストには軽いフォントウエイトを使用し、余裕のある息のまる間隔を維持すること。全体的な印象は、信頼でき専門的でありながら、親しみやすいものです。
en · zh-CN · zh-TW · ja · ko