Raycast は「すべてへのショートカット」——よく使う生産性ツールをひとつの入口に収める拡張可能なランチャーです。UI は純黒ではなく青みを帯びたほぼ黒（#07080a）を使い、macOS ネイティブの多層インセットハイライトシャドウが実体のある奥行きを再現します。Raycast レッド（#FF6363）は句読点のように抑制されて現れ、Inter の本文に 0.2px の正のトラッキングを加えることで、ダークな UI が快適に呼吸します。効率化ツールと macOS エコシステムのプロダクトに適しています。
Raycast開発者ツール
プロンプトテンプレート
基本テンプレート
Design a Raycast-inspired interface. - Near-black blue-tinted background (#07080a) — not pure black, subtly blue-shifted; - macOS-native shadow system with multi-layer inset highlights simulating physical depth; - Raycast Red (#FF6363) as a punctuation color — hero stripes, not pervasive; - Inter with positive letter-spacing (0.2px) for an airy, readable dark-mode experience; - Radix UI component primitives powering the interaction layer. Colors: #07080a, #ffffff, #FF6363, #55b3ff with #FF6363 accent. Typography: Inter.
バリエーションプロンプト
📱 モバイル
Design a mobile app with Raycast aesthetics. Use Raycast color identity with #FF6363 accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Raycast style. Use Raycast color identity with #FF6363 accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with Raycast design language. Use Raycast color identity with #FF6363 accents. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with Raycast visual identity. Use Raycast color identity with #FF6363 accents. Compelling, conversion-focused.
使用例
Raycast アプリ
WebBuild a web app with Raycast design language and #FF6363 color system.
Raycast ダッシュボード
ダッシュボードCreate a dashboard using Raycast style with data visualization and Inter typography.
✅ 適した用途
- 開発者ツール
- 効率化ランチャーとショートカットツール
- macOS エコシステムの効率アプリ
❌ 適さない用途
- 情報密度の高いレポート管理画面
- 子ども向けカートゥーン製品
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。