onlook
AIを活用してReactアプリケーションを視覚的に構築・編集できるデザインツールです。
onlookとは
onlookは、デザイナー向けに設計されたオープンソースのAIファーストなデザインツールです。ユーザーはAIの力を借りて、Reactアプリケーションのビジュアル構築、スタイリング、および編集を行うことができます。Figmaのような直感的な操作とコード生成を組み合わせたワークフローを提供します。TypeScriptで開発されており、デザインからコードへの変換を効率化する機能を備えています。
要点: AIを活用してReactアプリケーションを視覚的に構築・編集できるデザインツールです。
主な用途
- Reactアプリの視覚的なUI構築
- AIを活用したスタイリングの自動化
- デザインからコードへの変換作業
- フロントエンドのデザイン編集
- プロトタイプの迅速なビジュアル制作
onlookを使ったシステム開発
onlookは、そのまま納品する完成品ではなく、システムを作るための道具です。onlookを組み込んだ自社向けの仕組みを、AIエージェントと対話しながら実装します。要件を伺ってから最短1営業日で動くデモをお出しし、触って確認いただいてから発注を判断できます。完成後はソースコードごとお渡しします。
onlookを使った開発を相談onlookの日本語対応(実測)
onlookのリポジトリにある日本語ロケールのファイルは1件だけです。一部だけ日本語になっている状態か、他言語の設定に付随して入っている可能性が高く、実務で使うには日本語化が必要になります。
見つかったファイル(一部)
apps/web/client/messages/ja.json
GitHubの公開ファイル一覧から、日本語ロケールに当たるファイルを数えた結果です。配布用にまとめたビルド成果物は除いています。調査日時点の内容で、翻訳の網羅率や品質までは示しません。
onlookの基本情報
| ライセンス | Apache-2.0 |
|---|---|
| 主な言語 | TypeScript |
| GitHubスター | 26,531(開発者ツールカテゴリ 11件中 11位) |
| 初回公開 | 2024年6月 |
| 最終更新 | 2026年7月 |
| 日本語ロケール | 日本語ファイルが一部のみ(1ファイル) |
onlookを使った開発のよくある質問
このツールはどのような技術スタックに対応していますか?
主にReactアプリケーションの開発を対象としており、デザインからコードへの変換やスタイリングの編集を行うことができます。
デザイナーと開発者の連携にどのように役立ちますか?
視覚的なエディタを通じてデザインを構築できるため、デザインの意図を正確に反映したコードの生成や調整がスムーズになります。
AI機能は具体的にどのようなことを行いますか?
AIを活用してアプリケーションのビジュアル構築やスタイリング、編集などの作業を支援し、効率的な開発を可能にします。
Figmaとの関係はどうなっていますか?
Figmaのような操作感を取り入れたデザインツールとして位置づけられており、デザインからコードへの変換プロセスを重視しています。铵
onlookを使って何が作れますか?
onlookの標準機能を土台に、自社データとの連携、画面、自動処理、通知などを組み合わせた仕組みを作れます。用途を伺えば、実現できる範囲と進め方を具体的にお伝えします。
onlookを使った開発を依頼できますか?
可能です。要件と稼働環境を確認し、最短1営業日で動くデモをお出しします。発注後はサーバー設置と稼働確認まで一つの流れで対応し、ソースコードごとお渡しします。
開発者ツールの他のOSSと比べる
同じカテゴリから、スター数・ライセンス・日本語対応を並べました。
