AIパーソナル・ラーニング
と実践的なガイダンス

スクリーンショットをコードに:スクリーンショットをクリーンなフロントエンドコードに変換するAIツール

はじめに

Screenshot-to-Codeは、人工知能を使用してスクリーンショット、デザインドラフト、Figmaデザインをクリーンで機能的なコードに変換するオープンソースツールです。このツールは、HTML、Tailwind CSS、React、Vueなど、複数のフロントエンド技術スタックをサポートしています。 クロード コードを生成するSonnet 3.5などの高度なAIモデルや、ビデオや画面録画を機能的なプロトタイプに変換するためのサポート。

スクリーンショットをコードに: スクリーンショットをきれいなフロントエンドコードに変換するAIツール-1


 

機能一覧

  • スクリーンショットからコードへスクリーンショットやデザインをHTML、Tailwind CSS、ReactまたはVueのコードに変換します。
  • ビデオからプロトタイプへビデオやスクリーン録画を機能的なプロトタイプに変換します。(実験的機能)
  • 複数の技術スタックをサポートHTML、Tailwind CSS、React、Vue、Bootstrap、Ionicに対応。
  • AIモデルのサポートGPT-4 VisionとClaude Sonnet 3.5を使用したコード生成。
  • オンラインテストツールの機能をリアルタイムで体験できるオンラインテスト版もあります。

 

ヘルプの使用

設置プロセス

  1. クローン倉庫ターミナルで実行 git clone https://github.com/abi/screenshot-to-code.git クローン倉庫
  2. 依存関係のインストールプロジェクト・ディレクトリに入った後 cd backend && poetry install バックエンドの依存関係をインストールし cd frontend && yarn フロントエンドの依存関係をインストールします。
  3. APIキーの設定を作成する。 環境 ファイルに、OpenAI API キーと Anthropic API キーを追加します。
    OPENAI_API_KEY=sk-your-key
    ANTHROPIC_API_KEY=your-key
    
  4. バックエンドのプライミング走る 詩の実行 uvicorn main:app --reload --port 7001 バックエンド・サービスを開始する。
  5. フロントエンドの立ち上げ走る 糸開発 フロントエンド・サービスを起動し、ブラウザーを開いて、以下にアクセスする。 http://localhost:5173.

使用プロセス

  1. スクリーンショットのアップロードスクリーンショットやデザインをアップロードして、フロントエンドのインターフェイスに変換します。
  2. テクノロジー・スタックの選択コードを生成する必要がある技術スタック(HTML、Tailwind CSS、React、Vueなど)を選択します。
  3. コードの生成生成ボタンをクリックすると、ツールはAIモデルを使用して対応するフロントエンド・コードを生成します。
  4. コードの表示と編集生成されたコードはインターフェイスに表示され、ユーザーはコードを閲覧・編集することができます。
  5. ダウンロードコード満足したら、ユーザーは生成されたコードファイルをダウンロードできます。

機能 操作の流れ

  1. スクリーンショットからコードへ::
    • スクリーンショットまたはデザインをアップロードしてください。
    • コードを生成する必要があるテクノロジー・スタックを選択します。
    • Generateボタンをクリックし、AIモデルがコードを生成するのを待つ。
    • 生成されたコードを表示、編集、ダウンロードする。
  2. ビデオからプロトタイプへ::
    • ビデオまたは画面録画ファイルをアップロードします。
    • このツールは自動的にビデオコンテンツを分析し、機能的なプロトタイプを生成する。
    • 生成されたプロトタイプコードを表示、編集、ダウンロードできます。
  3. 複数の技術スタックをサポート::
    • スクリーンショットまたはビデオをアップロードした後、希望の技術スタックを選択します。
    • このツールは、HTML、Tailwind CSS、React、Vue、Bootstrap、Ionicといった複数の技術スタックをサポートしている。
  4. AIモデルのサポート::
    • このツールは、GPT-4 VisionやClaude Sonnet 3.5といった高度なAIモデルを使用してコードを生成する。
    • ユーザーは設定で使用するAIモデルを選択できる。
AIイージー・ラーニング

AIを始めるための素人ガイド

AIツールの活用方法を、低コスト・ゼロベースから学ぶことができます。AIはオフィスソフトと同様、誰にとっても必須のスキルです。 AIをマスターすれば、就職活動で有利になり、今後の仕事や勉強の労力も半減します。

詳細を見る
無断転載を禁じます:チーフAIシェアリングサークル " スクリーンショットをコードに:スクリーンショットをクリーンなフロントエンドコードに変換するAIツール

チーフAIシェアリングサークル

チーフAIシェアリングサークルは、AI学習に焦点を当て、包括的なAI学習コンテンツ、AIツール、実践指導を提供しています。私たちの目標は、高品質のコンテンツと実践的な経験の共有を通じて、ユーザーがAI技術を習得し、AIの無限の可能性を一緒に探求することです。AI初心者でも上級者でも、知識を得てスキルを向上させ、イノベーションを実現するための理想的な場所です。

お問い合わせ
ja日本語