onlook-dev/onlook

What it solves

Onlook は、ビジュアルデザインとフロントエンド開発の間の摩擦を解決します。デザイナーと開発者がブラウザ上でライブサイトの UI を視覚的に編集でき、その変更を自動的に基盤となる Next.js と TailwindCSS のコードに同期させることで、Figma のデザインをコードに手動で変換する手間をなくします。

How it works

Onlook は、プロジェクトのコードを Web Container に読み込み、iFrame 内でアプリを提供します。エディタはコードをインデックス化し、ブラウザの DOM 要素とソースコード内の特定の場所を直接マッピングするためにインストルメンテーションを行います。ユーザーがエディタで視覚的な変更を行うと、Onlook は iFrame 内の要素を更新し、同時に対応するコードを修正します。また、コードにアクセス可能な AI chat も統合されており、テキストや画像のプロンプトからコンポーネントを生成または編集できます。

Who it’s for

Next.js と TailwindCSS を使用して作業しており、コードベースを離れることなく視覚的にプロトタイプを作成し、ユーザーインターフェースを構築したい AI ネイティブなデザイナーやフロントエンド開発者向けに設計されています。

Highlights

• Visual-to-Code Sync: ブラウザの DOM で要素を直接編集し、その変更をコードにリアルタイムで反映させます。
• AI-Driven Creation: テキストや画像のプロンプトから Next.js アプリやコンポーネントを生成します。
• Figma-like Interface: レイヤー閲覧、ブランドアセット管理、コンポーネントパネルを含むビジュアルエディタが含まれています。
• Developer Tooling: サイドバイサイドのコードエディタ、CLI コマンドの実行、チェックポイントの保存/復元機能を備えています。
• Rapid Deployment: 共有可能なリンクの生成や、カスタムドメインの迅速な接続が可能です。