Onlook: デザイナーのためのカーソル

Onlookとは

Onlookは「デザイナーのためのカーソル」と称される、オープンソースのビジュアル重視コードエディタです。Next.js + TailwindCSS環境でAIを活用してウェブサイト、プロトタイプ、デザインを作成できます。ブラウザのDOMで直接編集できるビジュアルエディタを使用し、コードでリアルタイムにデザインできます。Bolt.new、Lovable、V0、Replit Agent、Figma Make、Webflowなどのプラットフォームに代わるオープンソースの選択肢として機能します。

主な機能

• Next.jsアプリの作成と管理
• テキストや画像の説明から開始
• プリビルドテンプレートの使用
• Figmaからのインポート

• GitHubリポジトリからの開始

• ビジュアル編集ツール

• Figmaライクなユーザーインターフェース
• リアルタイムアププレビュー
• ブランドアセットとトークン管理
• ページ作成とナビゲーション
• レイヤーブラウジング
• コンポーネント検出と使用

• 画像管理

• 開発ツール

• リアルタイムコードエディタ
• チェックポイント保存と復元
• コマンドラインインターフェース
• アプリマーケットプレイス連携

• ローカルコード編集

• デプロイメントとコラボレーション

• ワンクリックデプロイ
• 共有リンク生成
• カスタムドメイン連携
• リアルタイム共同編集
• コメント機能

Onlookの使い方

OnlookはあらゆるNext.js + TailwindCSSプロジェクトで動作します。ユーザーは以下のことができます：

1. 既存のプロジェクトをインポートするか、エディタで最初から始める
2. AIチャットを使用してプロジェクトを作成または編集する
3. 要素を右クリックしてコード内でその位置を特定する
4. 新しいdivを描画し、ドラッグ＆ドロップで再配置する
5. サイトデザインとコードを並べてプレビューする
6. エディタツールバーを使用してTailwindスタイルを調整し、オブジェクトを操作する

技術アーキテクチャ

Onlookでアプリを作成する際： 1. コードはウェブコンテナにロードされる 2. コンテナが実行され、コードを提供する 3. エディタがプレビューリンクを受け取り、iFrameに表示する 4. コードはコンテナから読み込まれインデックス化される 5. コード計装により要素がコード内の位置にマッピングされる 6. 要素が編集されると、変更がiFrameとコードの両方に適用される 7. AIチャットはコードへのアクセスと、コードを理解・編集するツールを持つ

技術スタック

• フロントエンド: Next.js、TailwindCSS、tRPC
• データベース: Supabase、Drizzle
• AI: AI SDK、Anthropic、Morph Fast Apply、Relace
• サンドボックスとホスティング: CodeSandboxSDK、Freestyle
• ランタイム: Bun、Docker

ターゲットユーザー

• コード機能を備えたビジュアルデザインツールを求めるウェブデザイナー
• コードと並行してビジュアル編集を好む開発者
• 開発に移行するUI/UXデザイナー
• ウェブプロジェクトでコラボレーションするチーム
• Webflow、Figmaなどのデザインツールのユーザー

プロジェクトリンク

• ウェブサイト: https://onlook.com
• リポジトリ: https://github.com/onlook-dev/onlook
• ドキュメント: https://docs.onlook.com

ユースケースとアプリケーション

• 迅速なプロトタイピング: ウェブデザインを素早く作成し視覚化
• デザインからコードへ: デザインモックアップを機能的なコードに変換
• ビジュアル編集: ビジュアルインターフェースでウェブサイトを変更
• 共同開発: リアルタイム編集でチームでウェブプロジェクトに取り組む
• AI支援開発: AIを活用してウェブサイトコンポーネントを生成・修正
• 教育目的: ビジュアルインターフェースを通じてウェブ開発を学習
• クライアントプレゼンテーション: クライアントとインタラクティブなプロトタイプを作成・共有

このプロジェクトは現在、アクセシビリティと機能セットを向上させるため、デスクトップベースのElectronアプリからウェブベースのアプリケーションへ移行中です。