Arc は The Browser Company が手がけた「より静かで、よりパーソナルな」ブラウザで、クリックの多さ、雑然さ、気の散りやすさから解放してくれます。UI は彩度の高いグラデーションの上に磨りガラスを重ねる構成で、ピーチコーラル、パープルマゼンタ、ミントなどのテーマグラデーションが全体の印象を決定。12〜16px のスクワークル角丸が柔らかな遷移をつくり、Inter がプロダクト UI を、Argent CF のセリフ体がマーケティング表示を担当します。レイアウトはサイドバーが第一級の存在で、タブ、スペース、ブックマークはすべて上部ではなく左側に配置されます。ブラウザとデスクトップアプリのブランド UI に適しています。
Arc Browser生産性と SaaS
プロンプトテンプレート
基本テンプレート
Design a Arc Browser-inspired interface. - Translucent frosted-glass surfaces over a saturated gradient background; - Theme-color gradients (peach-coral, violet-fuchsia, mint-cyan) as the primary mood; - Inter for product chrome, Argent CF (serif) for marketing display; - Squircle-soft 12–16px radii everywhere; - Sidebar-first layout: tabs, spaces, and bookmarks live on the left, not the top. Colors: #ff7e5f, #feb47b, #7f5af0, #e84393 with #ff7e5f accent. Typography: - Background: linear-gradient on theme color (e.g..
バリエーションプロンプト
📱 モバイル
Design a mobile app with Arc Browser aesthetics. Use Arc Browser color identity with #ff7e5f accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Arc Browser style. Use Arc Browser color identity with #ff7e5f accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with Arc Browser design language. Use Arc Browser color identity with #ff7e5f accents. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with Arc Browser visual identity. Use Arc Browser color identity with #ff7e5f accents. Compelling, conversion-focused.
使用例
Arc Browser アプリ
WebBuild a web app with Arc Browser design language and #ff7e5f color system.
Arc Browser ダッシュボード
ダッシュボードCreate a dashboard using Arc Browser style with data visualization and - Background: linear-gradient on theme color (e.g. typography.
✅ 適した用途
- SaaS 製品
- ブラウザと効率化ツールのサイドバー UI
- 上質感を求める個人ワークスペース
❌ 適さない用途
- 強い信頼感が必要な企業公式サイト
- 情報密度が極めて高いデータ管理画面
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。