Olook：フロントエンド設計のためのオープンソースCursor、Reactアプリの設計とコード公開

中国初のAI IDE インテリジェント・プログラミング・ソフトウェア 🚀体験への招待 Trae 中国語版ダウンロードDeepSeek-R1とDoubao-proは無制限で利用できる！

はじめに

Onlookはデザイナーと開発者のために作られたオープンソースのデザインツールで、ユーザーは実行中のReactアプリケーションで直接デザインし、デザインの変更をコードに変換することができます。このツールは、FigmaやWebflowに似た直感的なビジュアル編集体験を提供しますが、ネイティブ操作とシームレスなコード統合に重点を置いています。Onlookは、ReactとTailwindCSSフレームワークのプロジェクトの設計から開発までのプロセスを合理化するように設計されています。活発な開発者コミュニティがあり、新機能の追加やより多くのフレームワークをサポートするために常に更新されています。

Onlook: オープンソースのCursorでフロントエンドのデザイン、ReactとTailwindのCSSコードを書く-1

機能一覧

リアルタイムの設計変更ブラウザ上で直接ReactアプリのUIを変更し、リアルタイムで結果を確認できます。
コード切り替え設計変更を適切なコードに変換し、コードベースに直接プッシュする。
マルチフレームワーク対応現在、ReactとTailwindCSSがサポートされており、将来的にはさらに多くのフレームワークに対応する予定です。
ローカルオペレーションすべての操作はローカルで行われ、データのセキュリティとプライバシーを保護します。
オープンソースコミュニティ豊富なコミュニティによるサポートと貢献、継続的な機能の更新と改善。

ヘルプの使用

オンルックをインストールする

ダウンロード Onlook::
- OnlookのGitHubページをご覧ください。
- 右上の "Code "ボタンをクリックし、"Download ZIP "を選択してソースコードをダウンロードするか、直接ローカルにリポジトリをクローンしてください：
```
git clone https://github.com/onlook-dev/onlook.git
```
開発環境のセットアップ::
- Node.jsがインストールされていることを確認する（最新の安定版を推奨）。
- クローンしたディレクトリまたは解凍したフォルダに移動する：
```
cdオンルック
```
- 依存関係をインストールします：
```
npmインストール
```
- もし.env.exampleコピーして名前を変更してください。環境必要に応じてAPIキーを入力してください。
オンルック開始::
- 開発サーバーを実行する：
```
npm run dev
```
- これでOnlookが起動し、ローカルでのブラウズや編集が可能になる。

オンルックを使ったデザイン

Reactプロジェクトの開始::
- Reactプロジェクトがローカルで実行されていることを確認する（たとえばnpmスタート).

設定項目::

あなたのnext.config.mjsもしかしたらnext.config.jsOlookプラグインを

path "からパスをインポートする；
const nextConfig = { 次のように設定します。
experimental: {
swcPlugins: [
[ "@onlook/nextjs", { projectRoot: path.resolve(".") }]
]
}
}; export default nextConfig; ["@onlook/nextjs" { projectRoot: path.resolve(".".}] } ] }。
export default nextConfig.

他のフレームワークを使用する場合、具体的な設定ガイドラインについては、Olookのドキュメントを参照してください。

オンルックでの編集::
- Olookアプリを開くと、Reactプロジェクトが認識され、ロードされます。
- Chromeのデベロッパーツールと同じように、クリック、ドラッグ、ドロップでUIを編集できます。
- コンテキスト・メニューを使用して要素を選択し、そのコードの位置を表示または編集します。
ポスティングの変更::
- デザインの変更が完了したら、"Publish "ボタンをクリックすると、Onlookは変更したコードをGitHubリポジトリにプッシュするためのPull Requestを生成します。