Onlook - オープンソースのWebflowを使ったカスタムアプリ制作ツール

• コーディング不要でWebアプリを修正し、UIを視覚的に構築できるWebベースのツール
• ReactとTailwindCSSをサポート
  • ローカルでReactアプリをリアルタイムに編集・書き換え可能
  • ページに一部のCSSを挿入してDOM要素を選択およびドラッグ＆ドロップ可能にし、変更点を追跡してReactコードへ再変換
• 興味深い点
  • スタイルを解析・挿入・コードへシリアライズするReactパーサーを内蔵
  • DOM要素を対応するコードへ変換するReactプリプロセッサーも含む
  • CSSをパース／インジェクションし、Tailwindに変換
  • ElectronアプリとしてNodeアプリとメッセージ受け渡しを実行

[GN⁺]

Hacker Newsの意見

• Microsoft PCFやビルドツールと統合されるなら、高い価格を支払ってもよい
• componentsが何を意味するのか分からないが、Reactコンポーネントをエディタに取り込み、WYSIWYGデザイナーがpropsを編集できるなら非常に有用だろう
• デザイン/開発モードは、チームの実際の作業方法と合っていない
  • 開発者は思っている以上に多くのデザイン作業を行う
  • デザイナーは複雑な部分を担当し、開発者はシンプルなデザインを担当する
  • ナビゲーションやルーティングは複雑になり得るため、開発者が画面レイアウトを担当することが多い
  • デザインシステムはコンポーネントとして実装され、ユーザビリティの問題や追加デザインによって修正される
  • デザイナーはコンポーネントを再びセクションや画面へ再構成したいと考える
  • デザイナーは画像、テキスト、IDのようなpropsを設定し、開発コンポーネントが自動的に同期されることを望んでいる
• 開発とデザインのバランスをうまく取っているように見える
• オープンソースと有料ホスティング層を提供するのがよいだろう
• このプロジェクトは注目に値する
• コードと差分を見せて再作成できる機能は非常に有用そうだ
• AOLPressユーザーとして、2024年にもっと多くのWYSIWYGツールがないのは驚きだが、デザインが難しい理由も理解できる
• ほとんどのツールは開発者とデザイナーの両方をターゲットにしようとして、どちらも十分にはできていない
• 生成されるコードの品質と保守性も問題だ
• オープンソースとして作ってくれてありがとうという意見
• いくつか追加の質問:
  • 収益化の計画はあるのか、あるならどんなアイデアがあるのか
  • Studioの大きな構想は何か、スタイル編集だけに集中するのか、それともWebサイト構築に必要なすべてを提供する予定なのか
• Webflowのようなビジュアルエディタは欲しいが、BSや攻撃的な価格設定のないものが欲しい
• シンプルなHTML、CSS、JSを生成し、会社の誰もがページを変更したり新しく作ったりできるツールが必要だ
• アニメーションを何で作ったのか気になる
• Reactパーサーを使ってスタイルを挿入し、再びコードへシリアライズするアプローチは興味深い
• ReactではなくSvelteで書き直した理由が気になる
• WebflowのUI組み立てモデルは、シンプルさとカスタマイズ性のよい交差点だと思う
• Webflowは高価で、プロジェクトを彼らの管理下に置くのは嫌だ
• 「創業者と話す」というCTAは分かりにくいかもしれない
  • 「デモを予約」のように、ユーザーへの価値が伝わる文言に変えるのがよさそうだ
• WebflowはSaaSアプリだが、このアプリはホスティングが必要だ
  • 非技術系のユーザーはホスティング方法が分からないかもしれない
  • 開発者はホスティングと保守の時間を考慮する必要がある
  • オープンソースとして提供しつつ、ホスティング版も提供するのがよいだろう