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アプリからウェブベースのアプリケーションへ移行中です。