HTML to React & Figma - WebサイトをReactコンポーネントに変換するChrome拡張機能

• WebページのHTMLをReactコードやFigmaデザインに変換できるツール
  • ユーザーは既存のデザインを取り込み、Reactコードに変換したり、Figmaで編集可能なデザインに変換したりできる
  • AIを使って既存のデザインをカスタマイズし、修正できる機能を提供
• 主な機能
  • 気に入った既存デザインを取り込み、自分のプロジェクトで使えるReactコードに即座に変換可能
  • 既存デザインを取り込んで編集・作業できるため、最初から始める必要がない
  • AIを活用してデザインをカスタマイズし、修正可能

[charychary]

感想
サイト全体を一度に丸ごと複製するのは難しい。
複製するコンポーネントが大きくなるほどエラーが発生する可能性も高くなるため、ヘッダー、メイン、記事、サイド、フッターのような主要コンポーネントは個別に複製し、コンテナのレイアウトは開発者が直接組む必要があった。

スタイリング機能
基本のインライン方式では、コンポーネントごとにstyleタグを生成するか、各htmlにstyle属性を付与していたが、これは開発者目線では保守しにくく、コードがjsと十分に分離されておらず、雑然としていると感じた。
Tailwindcssに変換する機能は本当に良かった。

コンポーネント分割機能
一応あるにはあるが、ほぼ無いと見ていい。さらに、うんざりする量のcssに加え、再利用できそうなコンポーネントのかなりの部分がそのままhtmlとして使われる。
そのため、数千行単位のjsxコードが出てきてしまう。

AIアップデート
AIチャットでデザインコンセプトを変えられたが、思ったほどものすごく斬新なものが出るわけではない。ただ、3回に1回くらいの割合で新鮮なデザインが出てきた。
ただし有料なので、何度も試すことはできなかった。

静的ファイル生成
Svgやpngを1つのファイルに統合する画像スプライト手法を使ってアイコンをまとめる点は良かった。

結論
既存の生成AIを使うときと同じように、
「全体的には悪くないが、細部の詰めが甘く、開発者が手を入れる必要があるコード」 を生成する。
特にコンポーネント分割機能が弱いため、現時点では「レイアウトおよび静的ファイル抽出ツール」程度の用途にとどまりそうだ。
従来のgptのようなaiでは、ビジネスロジックではなくデザインcssのレイアウト関連の問題を扱うのはやや難しかったが、これがその面を補えるのかは、もう少し触ってみる必要がありそうだ。

[iolothebard]

なぜHTMLをReactに変換しなければならないのでしょうか(?)

[yangeok]

UIのアイデアを盗む..

[bobross0]

すごい…

[roxie]

めっちゃよくできてる..

[kws730]

ああ、すごくいいですね

[GN⁺]

Hacker Newsのコメント

• 実際の製品はとても魅力的。基本的なテストだけでも、一般的なLLMモデルよりはるかに洗練されたデザインを生成できることがわかる。今週、プロトタイピングに使う予定

  • 標準的なLLMからどのような変更を加えたのか気になる。ガードレールを設定したり、コンポーネントを提供したり、優れたWebサイトのコーパスをもとにファインチューニングしたりした可能性があると想像できる

• このツールは、ページのセクションをクリーンで印刷可能なHTMLとして取得する良い方法。たとえば、ClaudeのWeb UIではチャット履歴全体を印刷できず、画面に表示されている部分しか印刷できない

  • このツールを使えば、2つのチャットバブルの間の地点を選択して履歴全体を選べる
  • 似た機能を持つ簡単なChrome拡張を作ったことがあるが、出力の品質は劣っていた

• この種のツールの出力物に関する著作権がどうなるのか気になる。すべてのWebサイトにライセンスが含まれているわけではないので、一般的なLLMよりもさらに不明確かもしれない

• とても便利なブラウザ拡張。スタイルをTailwindCSSに変換できる点がとても気に入っている。とても賢い

• このツールは本当に素晴らしい。10サイトほどで試してみたが、Webサイト要素の約80%でうまく動作した

  • 自分たちのサイトでも試してみたところ、最も重要なコンポーネントを完全に複製できた
  • 一部のサイトでは選択ができない。選択モードを有効にして要素の上にマウスを載せても、何も選択されない。自分たちのサイトでも複製を防ぐ方法を考えさせられる
  • 素晴らしい仕事。長く使うことになりそう

• クールなツール。最近のフロントエンド開発が複雑になりすぎて、こうしたツールが必要になっているのは少し残念。昔のview-sourceと単一のstyle.cssの時代が恋しい

• Hacker Newsのロゴのフォントを確認したが、違っていた

  • 元は: Verdana, Geneva, sans-serif
  • あなたのもの: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
  • クールではあるが、なぜこうなるのか理解できない

• 良い仕事。Firefoxと互換性を持たせる予定があるのか気になる

• 自分のFramerページでも動作して、セルフホストできるのか気になる

• WebサイトのHTMLとCSSを取得する非常に便利な方法