Zenn
🕺

コーディングAIにおけるプロンプトエンジニアリング

2024/12/03に公開
promptengineering
windsurf
tech

はじめに

今回はプロンプトの渡し方によってどのようにAIの生成結果が変わるのかをフロントエンドに注目してまとめてみようと思います。プロンプトエンジニアリングの参考にしてください。

テスト環境

今回テストを行なっていく環境を説明します。

  • Wind surf(AI)
  • 日本大学芸術学部のHP(模倣するHP)
    今回は僕が通っていた大学のHPを使用してAIに模倣させていこうと思います。
    なおテストを行う際は比較検証ができるように毎回AIを初期化することとします。

プロンプトの渡し方による出力変化の違い

言葉だけでプロンプトを渡す

最初に渡すプロンプトは僕が日本語で口語で指示を渡すだけでどこまで近づけるのか検証してみます。実際に渡したプロンプトがこちら

次にホームページの模倣を行います。
模倣するホームページは日本大学芸術学部のホームページです。
日本大学芸術学部のホームページのフロント部分を模倣してください。

これを経てAIが作成したフロント部分がこちらです(スクリーンショットだけで失礼します。)

もっと悲惨な出来になると思いましたが、意外と上出来ですね。ただしナビゲーションバーなどが参考サイトに比べると全然違うものになってしまします。

参考サイトの画像を添付してプロンプトを渡す

次に、参考サイトのスクリーンショットを添付して実行してみます。
比較のために文章は変えずに画像だけ追加で添付してプロンプトを渡してみます。

AIの出力結果がこちらです。


写真などの素材がなく空白が目立ちますがこちらの方が実際のサイトの構造に、より近づきました。

参考サイトのURLを渡してプロンプトを作成。

次に、画像ではなくURLを実際に渡してみるとどのような出力結果になるのでしょうか。
今回も比較として渡すプロンプトの文面は変えずにURLだけ添付してみます。

AIの出力結果がこちらです。



一番参考サイトに近づいたのではないでしょうか。
このことからプロンプトとして渡すInputData(参考データ)の強さは
URL>スクリーンショット>文面で特徴を伝えるの関係性になりそうです。

まとめ

このようにプロンプトが出力結果に与える影響力が大きいことがわかります。
試行錯誤しながら完成度の高い生成物を効率よく作成するためにもプロンプトエンジニアリングの需要はあ今後ますます高まっていくと思います。

Discussion