Chrome拡張を捨てたOnlookが、デザイナー向けIDEでGitHub 2万7千スターを集めるまで

Onlookは、デザイナーが本番のReactコードベースをそのまま編集できるオープンソースのビジュアルエディタだ。

2024年7月のHacker Newsで1位になり、GitHubのスターは2万7千近くまで積み上がった。

2026年はMac上で動くデスクトップアプリとして、Claude CodeやChatGPTと並走しながら実コードを直接いじる形に進んでいる。出典

2026年10月、OnlookのGitHubリポジトリは2万7千近いスターを集めている。

共同創業者のDaniel Farrellは、2年前の転換を「We pivoted from the Chrome Extension to Onlook Studio, our open-source desktop app」と振り返った。出典

デザイナーとエンジニアの境界から始まった

出発点は、デザインと実装のあいだで毎回失われる意図だった。

Danielは10年以上デザイナーとして働き、Kiet HoはAmazonとServiceNowでエンジニアをしていた。

設計を決める人と、コードを書く人が分かれているほど、作られる画面は当初の意図から離れていく。出典

Kietは2024年1月に会社を立ち上げ、Y Combinatorの共同創業者マッチングでDanielに声をかけた。

デザインと開発の両側を見てきた2人が、同じ問題に対して別の角度から不満を持っていた。出典

最初の製品はChrome拡張だった

最初に作ったのは、ブラウザ上でページを直接いじるChrome拡張だった。

だが、デザイナーが使いたいという声と、エンジニアがそのコードを信頼できるかという声は噛み合わなかった。

既存のコードベースに1対1で対応しないツールは、現場のレビューに耐えられない。出典

そこで2024年7月、デスクトップアプリのOnlook Studioへ作り直し、そのままオープンソースにした。

コードを読めることが開発者の買い込みにつながり、ユーザーがそのままコントリビューターになる。

配布と信頼を同時に取るための選択だった。出典

Hacker Newsが2度、スターの形を変えた

転機はローンチの順番だった。

リポジトリを作って数日後にKietがHacker Newsへ投稿し、7月8日のShow HNは1位に入って336ポイント、94コメントを集めた。

この1回で7月中に1,200スターが積み上がる。出典

8月には2回目の投稿を打った。

同じリンクの再投稿は目立たなくなるため、タイトルでlocal-firstを押し出し、別の層に届くようにした。

結果としてスターは1,500から2,500へ増えている。出典

当時を振り返り、Danielは投稿の準備そのものが成果を決めると書いている。

タイトルを友人に見せ、Xで反応を試し、投稿後は自分で最初のコメントを置いて議論を立ち上げる。

地味だが再現できる手順として記録されている。出典

YC W25を経て、AIと並走する形へ

2025年1月、OnlookはY CombinatorのWinter 2025バッチに参加した。

会社名はOn Off, Inc.で、サンフランシスコを拠点に4人のチームで開発している。出典

2026年になると、プロダクトの重心は「AIに作らせる」から「AIと一緒に直す」へ移った。

Mac上で動くデスクトップアプリは、プロジェクトのgit worktreeコピーを作り、そのコピーの中だけでAIエージェントを走らせる。

変更はプルリクエストとしてチームに戻る。出典

この設計について、公式ドキュメントは「Your code never runs on Onlook's servers」と明記している。

デザイナーがコードを触るという文化を受け入れてもらうには、触り方を安全にするほうが先だという判断に見える。出典

受け渡しをなくすという長い賭け

2026年5月のブログで、Onlookは「AIがデザインの床を上げたぶん、差別化の価値は上がった」と主張した。

誰でもそこそこ作れる時代に、自社のデザインシステムと実コードで作れることが差になる。出典

2万7千スターは、その主張が開発者に一定届いた証拠ではある。

ただし収益はまだ非公開で、ツールの形もまだ動いている。

受け渡しをなくすという賭けは、決着ではなく途中経過と言える。出典

Onlookが刺さるのは、デザインシステムを運用しているのに、デザイナーがコードに触れないことで手戻りが起き続けているチームだ。

Figmaで作った画面をエンジニアが実装し直すたび、余白や状態の意図が少しずつ落ちる。

Onlookはデザイナーに本番のReactコードそのものを渡し、編集をプルリクエストとして返す形にした。

「デザインの原本がコードになる」ことで、受け渡しのたびに失われていた意図が残る。出典

プロンプト一発の試作ではなく、既存プロダクトの継続的な変更に向いている点が、他の生成ツールとの境界になっている。出典

参入障壁は、デザインツールとコードの同期をgitの単位で扱う実装にある。

編集をworktree上のコピーに閉じ込め、変更をPRとして返す設計は、デザインツール側の都合ではなくエンジニアのレビュー文化に合わせたものだ。出典

加えて2万7千近いスターと貢献者が、OSSとしての信頼と採用の入口を作っている。出典

ネットワーク効果は弱い。

デザインの編集はチーム内で完結し、ユーザーが増えるほど他のユーザーの成果が良くなる構造ではない。出典

一方で、OSSのコントリビューターとテンプレートの蓄積は、時間とともにリポジトリの価値を上げる弱いながら蓄積型の効果を持つ。出典

対象は、デザインシステムとStorybookを運用しているプロダクトチームのデザイナー、およびデザインと実装の両方を触るデザインエンジニア。

プロンプトから雛形を作って終わりにしたい人や、コードを触りたくない人は対象外だと明示している。出典

第一に、作った直後にHacker Newsへ出したこと。

リポジトリ公開の数日後に投稿し、7月だけで1,200スターを獲得した。出典

第二に、local-firstという設計判断をマーケティングの言葉にしたこと。

2回目のローンチではタイトルでlocal-firstを前面に出し、スターが1,500から2,500へ増えた。出典

第三に、オープンソースを配布と信頼の両方に使ったこと。

コードを読めることが開発者の買い込みにつながると明言している。出典

収益の実態はまだ公開されていない。

ARRや調達額は非公開で、マネタイズはチーム向けのホスト版が中心だが、価格も非公開の見積りだ。出典

プロダクトの形は何度も変わっている。

Chrome拡張からデスクトップアプリへピボットし、2026年にはAI-native designer向けの第2プロダクトをearly accessとしている。出典

初期は認証がなく、誰が使っているのか把握できないまま約1ヶ月を過ごしたと自ら記録している。出典

対応がNext.jsやReact中心であるため、他フレームワークのチームには訴求しにくい。出典

成長の主軸はコミュニティ経由の配布だ。

Hacker Newsに2回、Product Huntに1回出し、いずれもスターの変曲点になった。出典

自社ブログとSubstackでローンチの作法やデザイン論を書き、SEOと信頼を同時に積む。

Xでは編集中のUIを見せてフォロワーを増やした。出典

トレードオフは、この経路が開発者に強く、デザイナー組織の予算権限者には届きにくいことだ。

だからこそチーム向けのホスト版とデモ商談を用意している。出典

主要チャネル: hacker_news, product_hunt, github, x, substack

ツールの形は最初から正しくなくてよい。

OnlookはChrome拡張で始め、数ヶ月でデスクトップアプリへ作り直した。

早く出して反応を取り、設計そのものを差し替える判断のほうが、完成度を上げてから出すより速い。出典

もう一つは、技術的な設計判断をそのまま言葉にすること。

local-firstという一文が、2回目のローンチのフックになった。出典

日本では、デザイナーがコードを触ることを前提にした求人や評価制度がまだ少ない。

だからこそ、デザインシステムを運用している事業会社の内製チームに、「デザイナーがPRを出す」ワークフローを小型に試す形で入るのが現実的だと考えられる。

セルフホストが無料な点は、情報システム部門の審査を通しやすい一方、Mac (Apple silicon) 前提という制約は導入時に確認が必要だ。出典