はじめに

Cursorは開発者がコードを書く方法を変えましたが、デザイナーと開発者の連携には依然として溝があります：

  • デザイナーがFigmaで丁寧に調整したスタイルが、開発者の手に渡るとずれてしまう
  • ボタンの色を変更するだけでも、完全な開発環境が必要
  • 「間隔を調整してください」といった小さな変更でも、開発者のワークフローを中断させる

Onlookはこの問題を解決しようとしています。自分たちを “The Cursor for Designers” と称し——デザイナーがブラウザで直接Reactアプリケーションを可視化・編集でき、すべての変更がコードに同期されるようにします。

プロジェクト概要

属性詳細
⭐ Stars24.9k
🍴 Forks1.9k
🏷️ タグAI, Cursor, Design-to-Code, React, TypeScript
📜 ライセンスApache 2.0
🔗 リポジトリhttps://github.com/onlook-dev/onlook
🌐 公式サイトhttps://onlook.com

一言でまとめると：Onlookは、デザインからコードへの流れを完全に統合する、オープンソースのAI優先Reactビジュアルエディターです。

コア機能

1. Reactコンポーネントのビジュアル編集

これはOnlookの中核機能です：

デザイナー視点：要素をクリック → スタイルを変更 → リアルタイムプレビュー
           ↓
開発者視点：コードが自動更新され、コンポーネント構造は保持される

従来のページ構築ツールとは異なり、OnlookはReactソースコードを直接読み込み、コンポーネント構造を理解し、コードを破壊せずにビジュアル編集を可能にします。

2. AI駆動のインテリジェント修正

AIアシスタントが組み込まれており、Cursorと対話するように、インターフェース上で直接指示を出せます：

「このカードをガラスモーフィズムスタイルに変更してください」 「すべてのボタンにhoverアニメーションを統一してください」 「モバイル対応のレイアウトに調整してください」

AIはあなたの意図を理解し、対応するTailwind CSSコードを生成します。

3. リアルタイムコード同期

すべての変更がリアルタイムでソースコードに書き込まれます：

  • ✅ Tailwind CSSクラス名のインテリジェントな追加と修正をサポート
  • ✅ 既存のコンポーネントロジックと状態を保持
  • ✅ メンテナンスが困難な冗長コードを生成しない
  • ✅ Next.js、Viteなどの主流フレームワークをサポート

4. デザインシステム認識

Onlookはあなたのデザインシステムを理解します：

  • プロジェクト内の既存のカラー変数を自動認識
  • 既存の規範に合った間隔とフォントサイズを推奨
  • 新しいスタイルがデザイン言語と一致することを保証

Onlook vs Cursor vs Figma

次元OnlookCursorFigma
ターゲットユーザーデザイナー + 開発者開発者デザイナー
入力方式ビジュアル + 自然言語コード + 自然言語ビジュアル
出力実行可能なReactコードコードデザインファイル
コード関連ソースを直接編集ソースを直接編集手動変換が必要
AI統合深く組み込み深く組み込み限定的
オープンソース✅ はい❌ いいえ❌ いいえ

重要な違い：

  • Cursorは、開発者がより効率的にコードを書くためのもの
  • Figmaは、デザイナーがコードの制約から離れて自由に創作するためのもの
  • Onlookは両者を橋渡し——デザイナーがコードを直接操作でき、しかしコードを書く必要はない

技術スタック分析

Onlookのアーキテクチャ選択は興味深いものです：

フロントエンドフレームワーク：React + TypeScript
スタイルソリューション：Tailwind CSS
バックエンドサービス：Supabase（Firebaseのオープンソース代替）
データベース：PostgreSQL（Supabase経由）
エディターコア：独自ビジュアルエンジン + Monaco Editor
AIレイヤー：複数モデル対応（OpenAI、Claudeなど）

なぜSupabaseを選んだのか？

  • オープンソース：プロジェクト全体のオープンソース理念と一致
  • リアルタイム：WebSocketサポート内蔵で、コラボレーション機能に便利
  • PostgreSQL：成熟したリレーショナルデータベースで、複雑なクエリをサポート
  • 認証即サービス：ログインシステムを自作する手間を省ける

ビジュアルエンジンの難点

Reactコンポーネントツリーを編集可能なビジュアル要素にマッピングすることは、技術的に簡単ではありません：

  1. AST解析：JSX構造を読み取る必要がある
  2. スタイル計算：Tailwindの複雑なクラス名の組み合わせを処理
  3. 状態管理：編集時にコンポーネントロジックを破壊しないようにする
  4. コード生成：修正後のコードが元のスタイルに合うようにする

Onlookは、新しいコードを生成するのではなく、ソースコードと深く連携する戦略を選択し、メンテナンス性を保証しています。

ユースケース

✅ 適しているシナリオ

  • 迅速なプロトタイピング：既存のコンポーネントから、迅速に新しいページを構築
  • デザイン微調整：IDEを開く必要なく、直接スタイルを変更
  • クロスファンクショナルコラボレーション：デザイナーが自分で変更でき、開発者はロジックに集中
  • レガシープロジェクトのメンテナンス：知らないコードベースのUI構造をビジュアルで理解

❌ 適していないシナリオ

  • ゼロからの新規デザイン（先にFigmaを使う）
  • 複雑なインタラクションロジックの開発
  • React以外の技術スタックのプロジェクト

クイックスタート

インストール

# npm経由
npm install -g onlook

# または公式サイトからデスクトップ版をダウンロード
https://onlook.com/download

起動

# Reactプロジェクトディレクトリで
onlook

# またはパスを指定
onlook ./my-project

使用フロー

  1. OnlookがReactコンポーネントをスキャン
  2. ローカルプレビューサーバーを自動起動
  3. ビジュアルインターフェースで任意の要素をクリックして編集
  4. すべての変更がリアルタイムでソースに同期

プロジェクトの現状と展望

2026年3月時点：

  • 24.9k Starsは、このようなツールへの強いコミュニティニーズを示しています
  • 351 Open Issuesは、多くの機能がまだイテレーション中であることを示しています
  • 最終更新：2026年2月、アクティブにメンテナンス中

注目すべき方向性

  1. より多くのフレームワークサポート：現在は主にReactをサポート、Vue/Svelteバージョンは計画中かもしれません
  2. チームコラボレーション：Supabaseベースのリアルタイムコラボレーション機能
  3. デザインシステムインポート：Figmaからデザイントークンを直接インポート
  4. AI能力の強化：よりインテリジェントなコード理解と生成

まとめ

Onlookは、デザインツールの進化の方向性を表しています：デザインファイルとコードの境界を徐々に曖昧にする。

FigmaやCursorを取り替えるつもりはありませんが、両者の間の空白を埋め——デザイナーがコードを直接操作でき、開発者が「スタイル調整エンジニア」になる必要がなくなります。

既にReactベースのプロジェクトがあれば、Onlookはデザインと開発のコラボレーション効率を大幅に向上させることができます。フルスタック開発者またはデザインエンジニア（Design Engineer）であれば、このツールは注目に値します。

オープンソース、無料、Apache 2.0ライセンス——これはあなたが以下を行えることを意味します：

  • ✅ 個人プロジェクトで無料使用
  • ✅ 社内デプロイメント
  • ✅ 二次開発とカスタマイズ

関連リンク：