デザイナー向け Cursor – オープンソースのビジュアルファーストコードエディター

Next.js + TailwindCSS で AI を使ったウェブサイト、プロトタイプ、デザインを作成。ビジュアルエディターでブラウザの DOM を直接編集。コードでリアルタイムにデザイン。Bolt.new、Lovable、V0、Replit Agent、Figma Make、Webflow などのオープンソース代替ツール。

🚧 🚧 🚧 Onlook for Web は現在開発中 🚧 🚧 🚧

Onlook for Web を素晴らしいプロンプト・トゥ・ビルド体験にするため、積極的にコントリビューターを募集しています。提案機能と既知の問題の完全なリストは open issues を確認し、Discord に参加して他の数百人のビルダーと協力してください。

Onlook でできること:

• 数秒で Next.js アプリを作成
  • テキストまたは画像から開始
  • 事前ビルドされたテンプレートを使用
  • Figma からインポート
  • GitHub リポジトリから開始
• アプリをビジュアル編集
  • Figma のような UI を使用
  • リアルタイムでアプリをプレビュー
  • ブランドアセットとトークンを管理
  • ページを作成・移動
  • レイヤーを閲覧 – 以前は Onlook Desktop で利用可能
  • コンポーネントを検出・使用 – 以前は Onlook Desktop で利用可能
  • プロジェクト画像を管理 – 以前は Onlook Desktop で利用可能
• 開発ツール
  • リアルタイムコードエディター
  • チェックポイントから保存・復元
  • CLI 経由でコマンドを実行
  • アプリマーケットプレイスに接続
  • ローカルでコードを編集 – 以前は Onlook Desktop で利用可能
• 数秒でアプリをデプロイ
  • 共有可能なリンクを生成
  • カスタムドメインをリンク
• チームと共同作業
  • リアルタイム編集
  • コメントを残す

Onlook for Desktop (別名 Onlook Alpha)

Onlook Web は現在早期プレビュー段階です。ダウンロード可能なデスクトップ Electron アプリをお探しの場合は、Onlook Desktop に移動しました。

ウェブへの移行理由についてはこちら: Electron から Web への移行

はじめに

近日公開予定: ホスト型アプリ または ローカル実行

使用方法

Onlook は任意の Next.js + TailwindCSS プロジェクトで動作します。プロジェクトを Onlook にインポートするか、エディター内で新規作成してください。

AI チャットを使用してプロジェクトを作成・編集できます。いつでも要素を右クリックすると、コード内の正確な位置を開くことができます。

新しい div を描画し、ドラッグ＆ドロップで親コンテナ内で再配置します。

コードとサイトデザインを並べてプレビュー。

Onlook のエディターツールバーを使用して Tailwind スタイルを調整し、オブジェクトを直接操作し、レイアウトを試行錯誤します。

ドキュメント

完全なドキュメントは docs.onlook.com をご覧ください。

コントリビューション方法については、ドキュメントの Onlook への貢献 を参照してください。

仕組み

1. アプリ作成時にコードをウェブコンテナにロード
2. コンテナがコードを実行・提供
3. エディターがプレビューリンクを受け取り iFrame に表示
4. エディターがコンテナからコードを読み取りインデックス化
5. 要素をコード内の位置にマッピングするためコードを計装
6. 要素編集時、iFrame 内の要素を編集後、コードを更新
7. AI チャットもコードにアクセスし、理解・編集するツールを保有

このアーキテクチャは理論上、宣言的に DOM 要素を表示する任意の言語/フレームワーク（例: jsx/tsx/html）に拡張可能です。現在は Next.js と TailwindCSS での最適化に注力しています。

詳細は アーキテクチャドキュメント をご覧ください。

技術スタック

フロントエンド

• Next.js - フルスタック
• TailwindCSS - スタイリング
• tRPC - サーバーインターフェース

データベース

• Supabase - 認証、データベース、ストレージ
• Drizzle - ORM

AI

• AI SDK - LLM クライアント
• Anthropic - LLM モデルプロバイダー
• Morph Fast Apply - 高速適用モデルプロバイダー
• Relace - 高速適用モデルプロバイダー

サンドボックスとホスティング

• CodeSandboxSDK - 開発サンドボックス
• Freestyle - ホスティング

ランタイム

• Bun - モノレポ、ランタイム、バンドラー
• Docker - コンテナ管理

コントリビューション

改善提案がある場合は、リポジトリをフォークしてプルリクエストを作成してください。issue を開く ことも可能です。

手順と行動規範は CONTRIBUTING.md を参照してください。

コントリビューター

連絡先

• チーム: Discord - Twitter - LinkedIn - Email
• プロジェクト: https://github.com/onlook-dev/onlook
• ウェブサイト: https://onlook.com

ライセンス

Apache 2.0 ライセンスで配布。詳細は LICENSE.md を参照。