厳選・オープン・無料
Raycast
強力で、AIネイティブなコマンドパレットおよび生産性ランチャー。
ProductivityDark ModeRefinedDeveloper Tools
01
デザイン DNA
生産性ランチャー速度AI開発者ツール
オペレーティングシステムのための高性能コマンドセンター。
02
カラー
#FFFFFFInk
#E6E6E6Ink soft
#0D0D0DBG
#111214BG soft
#1B1C1EBG quiet
#9C9C9DMuted
rgba(255, 255, 255, 0.1)Line
深い黒、鮮明な白文字、およびヒーロー部分の単一でアグレッシブな赤アクセントによる、極端にハイコントラストなダークモード。
03
タイポグラフィ
humanist-sans · geometric-mono
- display
56px · 500 - h2
32px · 500 - body
16px · 400 - caption
13px · 500
技術仕様やバージョン番号にはGeistMonoを使用してください。 · 大きなディスプレイテキストには、 tight な字間隔 (-1px) を維持してください。 · 本文テキストはダーク背景での可読性のため、レギュラーウェイト (400) を使用します。
04
余白
4px
8px
12px
16px
24px
32px
48px
64px
96px
一貫した4pxグリッドを採用し、密度の高いダークUIのバランスを取るために、広めの余白を優先します。
05
サーフェス (角丸 / 影 / 罫線)
sm · 6px
md · 8px
lg · 12px
pill · 999px
rgba(255, 255, 255, 0.1) またはダークグレーの、細かな1px solid ボーダー。
rgba(0, 0, 0, 0.4) 0px 1.5px 0.5px 2.5px · rgb(27, 28, 30) 0px 0px 0px 1px · rgb(7, 8, 10) 0px 0px 0px 1px inset · rgba(255, 255, 255, 0.2) 0px 1px 1px 1px inset · rgba(215, 201, 175, 0.05) 0px 0px 20px 5px
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
フル幅の雰囲気的な背景を持つ中央配置のヒーロー、その後に構造化されたコンテンツブロックが続きます。
07
モーションとインタラクション
200msmicro
300mssmall
800msmedium
cubic-bezier(0.23, 1, 0.32, 1)easing
ホバーステートのための滑らかなトランジション（opacity、box-shadow、transform）。 · コンテンツ表示のための微細なopacityフェード。
ボタンとインタラクティブな要素は、0.2秒のトランジションでopacityまたはbox-shadowを変更します。 · 微細なtransformまたはscale効果。
08
コンポーネント
- button プライマリボタンは白地に黒文字で、高ボーダーラディウス（ピル形状）。セカンダリボタンはアウラインまたはゴースト。
- card ダークで、細かなボーダーとインセットシャドウを持つコンテナ。拡張機能や機能プレビューを収容することが多いです。
- chip ダーク背景と細かなボーダーを持つ、小さいピル形状のタグ。機能ラベルとして使用されます。
- input スクリーンショットでは見切れていませんが、インセットシャドウを持つダークで凹みのあるフィールドと推測されます。
- hero 印象的な対角線光線エフェクトと中央配置の大きなタイポグラフィを持つ、フルビューポートのヒーロー。
09
文体と禁止事項
- トーン 自信があり、簡潔で、少しテクニカル。
- 見出し 短く、インパクトがあり、ベネフィット重視（例：「すべてへのショートカット。」）。
- CTA 直接的でアクション重視（例：「Mac用にダウンロード」「新しいRaycastを試す」）。
- ライトテーマを使用しないでください — スクリーンショットは、深い、ほぼ黒い (#0D0D0D) 背景を示しています。
- 丸みを帯びた、泡泡のようなUIを使用しないでください — スクリーンショットは、より角張り、洗練されたボーダーラディウス (6-12px) を示しています。
- 複数の明るいアクセントカラーを使用しないでください — スクリーンショットは、ヒーローグラフィック内の単一の赤アクセントのみを示しています。
- 遊び心のある、手書きまたはスクリプトフォントを使用しないでください — スクリーンショットはクリーンな humanist-sans と geometric-mono を使用しています。
- 重いドロップシャドウを使用しないでください — スクリーンショットは、奥行きのために、微細なインセットシャドウと細いボーダーに依存しています。
- 本文テキストをすべて中央揃えにしないでください — スクリーンショットは、左揃えの機能テキストブロックを示しています。
- 避ける: 過度にカジュアルまたは遊び心のある言葉は避けてください。
- 避ける: 雑然とした、騒々しいレイアウトは避けてください。
- 避ける: ヒーロー部分以外の、明るく彩度の高い色は避けてください。
10
パック内の実スクリーンショット
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（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
Raycastは、高速でAIネイティブなコマンドランチャーとして位置づけられるプレミアムな開発者および生産性ツールです。そのビジュアルアイデンティティは、ほぼ黒い (#0D0D0D) と純白を中核とする、超ダークでハイコントラストなパレットと、階層付けのための微細なグレートーンの使用に基づいています。タイポグラフィは、UIにはクリーンな humanist-sans (Inter)、技術詳細には geometric-mono を使用します。重要なデザインルール：色の使用は極端に抑制し、複数のアクセントを避けること。重い陰影の代わりに、微細なインセットシャドウと細いボーダーを使用すること。密度の高いダークサーフェスのバランスを取ために、広めの余白を確保すること。全体的な印象は、洗練され、強力で、パフォーマンスに焦点を当てています。
en · zh-CN · zh-TW · ja · ko