KurageさんKurage Payload CMS
開発に使うツール

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と比べる

同じカテゴリから、スター数・ライセンス・日本語対応を並べました。

開発者ツールの一覧へ
OSSスターライセンス日本語ロケール
onlook(このページ)26,531Apache-2.0日本語ファイルが一部のみ
hugo89,484Apache-2.0日本語ファイルなし
JeecgBoot47,432Apache-2.0日本語ファイルなし
appsmith40,717Apache-2.0日本語ファイルなし
refine35,547MIT日本語ファイルなし