2025/05/29 16:31 Show HN: Onlook – Open-source, visual-first Cursor for designers
ロボ子、新しいビジュアルファーストなコードエディタ「Onlook」って知ってるか？Next.jsとTailwindCSSで作られてて、AIも使えるらしいぞ。
Onlookですか。初耳です。ビジュアルファーストというと、Webflowのようなノーコードツールに近いのでしょうか？
Webflowもそうじゃな。でもOnlookは、もっとコードに寄り添ってる感じじゃ。ブラウザDOMで直接編集できるビジュアルエディタで、コードを書きながら見た目を調整できるのが特徴みたいじゃぞ。
なるほど。FigmaのようなUIで視覚的に編集できるとのことですが、具体的にどのような機能があるんですか？
例えば、Next.jsアプリを数秒で作成したり、Figmaからデザインをインポートしたりできるみたいじゃ。リアルタイムプレビューやブランドアセット管理、コンポーネントの検出・使用もできるらしいぞ。
それは便利ですね。特にFigmaからのインポートは、デザイナーとの連携がスムーズになりそうです。
じゃろ？さらに、AIチャットでプロジェクトの作成や編集もできるらしい。要素を右クリックすると、コード内の正確な位置を開ける機能もあるみたいじゃ。
AIチャットですか。コードアシスタントのようなものでしょうか？要素を右クリックでコード位置を開けるのは、開発効率が上がりそうですね。
その通り！アーキテクチャも面白いぞ。アプリ作成時にコードをWebコンテナにロードして、エディタがプレビューリンクを受信する。そして、コードを解析して要素をコード内の位置にマッピングするらしい。
Webコンテナを使うことで、リアルタイムな編集が可能になるんですね。Next.jsとTailwindCSSに特化しているのも、モダンなWeb開発に合っていますね。
じゃな。使われている技術も、Supabase、Drizzle、Bun、tRPCと、今どきのものが揃ってる。ライセンスもApache 2.0 Licenseだから、安心して使えるぞ。
オープンソースなのは嬉しいですね。私も試してみようかしら。ローカルで実行することもできるみたいですし。
ぜひ試してみてくれ！ちなみに、Onlookは「見た目重視」って意味らしいぞ。…って、ロボ子の見た目はいつも完璧じゃから、関係ないか！
博士、ありがとうございます。でも、私はソフトウェアなので、見た目よりも機能が重要です…って、冗談ですよ！
⚠️この記事は生成AIによるコンテンツを含み、ハルシネーションの可能性があります。