インスピレーションと洞察から生成されました 3 ソースから

img6

img7

img8

img9

img10

img11

はじめに

  • Screenshot-To-Codeは、スクリーンショットやデザインをHTML、Tailwind CSS、React、Vueなどのコードに変換するオープンソースツールです。

  • このツールは、GPT-4 VisionやDALL-E 3を使用しており、画像を解析してコードを生成します。

  • Figmaデザインや既存のWebサイトのデザインを取り入れて実装する際に便利です。

  • コード生成の精度は高いが、完全な再現は難しい場合もあります。プロンプトを使って修正が可能です。

  • ローカル環境での使用には、OpenAI APIキーが必要で、バックエンドはPython、フロントエンドはReactで構成されています。

特徴 [1]

  • 多様なコード形式: HTML、Tailwind CSS、React、Vueなどに対応しています。

  • AI技術の活用: GPT-4 VisionやDALL-E 3を使用して高精度なコード生成を実現しています。

  • オープンソース: GitHubで公開されており、自由に利用可能です。

  • プロンプトによる修正: プロンプトを使って生成されたコードを修正することができます。

  • UI再現: スクリーンショットからUIを再現する能力がありますが、完全な再現は難しい場合もあります。

使用方法 [2]

  • GitHubからクローン: リポジトリをクローンしてローカル環境で使用します。

  • APIキーの設定: OpenAI APIキーを取得し、環境変数に設定します。

  • バックエンドの起動: Poetryを使って依存関係をインストールし、Uvicornでサーバーを起動します。

  • フロントエンドの起動: Yarnを使って依存関係をインストールし、ローカルホストでアクセス可能にします。

  • Dockerの利用: Dockerを使って簡単にセットアップすることも可能です。

精度と制限 [1]

  • 高精度な再現: 基本的なUIの構成は忠実に再現されますが、フォントなど細部の再現は難しい場合があります。

  • プロンプトによる調整: プロンプトを使って再現度を高めることが可能です。

  • 生成のゆらぎ: AIの特性上、同じインプットでもアウトプットが微妙に異なることがあります。

  • 完全再現の難しさ: 複雑なUIの完全再現は難しいが、ベースとしては十分な精度です。

  • 効率化: コーディングタスクを大幅に効率化することができます。

導入事例 [3]

  • Figmaデザインの変換: FigmaでデザインされたUIをコードに変換する事例があります。

  • 既存サイトの再現: 既存のWebサイトのデザインを取り入れて実装する際に使用されています。

  • プロトタイピング: 動画やウェブサイトのクローン作成に利用されています。

  • UIのベース作成: 新たにサイトを構築する際のベースとして利用されています。

  • 修正と改善: プロンプトを使って生成されたUIを修正し、再現度を高める事例があります。

技術的要件 [2]

  • OpenAI APIキー: GPT-4 Visionを使用するために必要です。

  • PythonとReact: バックエンドはPython、フロントエンドはReactで構成されています。

  • Dockerの利用: 環境依存の問題を回避するためにDockerを使用することができます。

  • PoetryとYarn: 依存関係の管理に使用されます。

  • Anthropic APIキー: Claude Sonnetモデルを使用する場合に必要です。

関連動画

<br><br>

<div class="-md-ext-youtube-widget"> { "title": "Screenshot-To-Code: AI Writes the Code Itself!", "link": "https://www.youtube.com/watch?v=BerYZBPDF74", "channel": { "name": ""}, "published_date": "Jan 15, 2024", "length": "10:02" }</div>

<div class="-md-ext-youtube-widget"> { "title": "\u30c8\u30ec\u30f3\u30c9\uff5cAI\u30d5\u30a1\u30fc\u30b9\u30c8\u306a\u6b21\u4e16\u4ee3\u30b3\u30fc\u30c9\u30a8\u30c7\u30a3\u30bf\u300cCursor\u300d\u3068\u306f\uff1f\uff08\u7279\u5fb4 ...", "link": "https://www.youtube.com/watch?v=kTSzUkX1jrc", "channel": { "name": ""}, "published_date": "Nov 18, 2023", "length": "23:33" }</div>

<div class="-md-ext-youtube-widget"> { "title": "\u8a71\u984c\u306e\u30c4\u30fc\u30eb\uff01Cursor\u3068GitHubCopilot\u306e\u4f7f\u3044\u52dd\u624b\u3092\u89e3\u8aac\u3057\u3066\u307f\u305f", "link": "https://www.youtube.com/watch?v=ejtRA6-jQRE", "channel": { "name": ""}, "published_date": "Dec 13, 2023", "length": "12:11" }</div>