Replit Agentで爆速開発術！

今回は、Replit Agentに指示するためのプロンプトやUIの画像を作成する方法について書いていきたいと思います。今のところReplit Agentで指示するときに、要件定義書や画面設計書、UI画像を入れるとなかなかいいものを作ってくれるのでそのやり方を紹介します。

まず、最初に使う生成AIとAPIの紹介です。

使用する生成AI
・Perplexity
・v0
・ChatGPT
・Replit Agent（現在は有料にならないと使えない）

使用するAPI
・OpenAI API

この4つとAPIを使って作成していきます。

これだけだとよくわからないと思うので作った画像を載せておきます。

この動いている動画をファイルにしておいておくので参考にしてみてください。機能は、ちょっとカスタマイズはしていますがUI自体は再現度が高かったです。

Replit Agent.mp4

3.56 MB

ファイルダウンロードについて

ダウンロード

実際僕がReplit Agentでどんなものを作っているかわからないと思うのでいくつかXで投稿しているので参考程度で載せているので興味がある方は見てみてください。

Replit Agentで地球儀作ってみた

せっかく1ヶ月契約したから
遊びつくしてやろう

MapBoxのAPIを使えば作れます！

APIの繋ぎこみをしっかりやってくれる
のでうれしい！ pic.twitter.com/xx1bCCmi1J

— Kai｜生成AI (@KaiArt4) November 14, 2024

Replit Agentでニュースを取得し
ChatGPTで2-3文の簡潔な要約を作成
するアプリ的なの作った

クリックしたらちゃんと記事に
行きます

チャット欄的なの作ってみるのも
ありかもしてない(笑)

日本のニュース指定すればよかった(笑)
もうこれなんでもありやん

この時に使った指示文欲しい方いたら… pic.twitter.com/QUtS0ThfHm

— Kai｜生成AI (@KaiArt4) November 17, 2024

Replit Agentで
Text-2-Image-2-Videoを
作成しました！

最初のたたきのプロンプトは
GPTs的なものを作ってから
やってみました！

でも、一発ではいかなくて
結構試行錯誤しました(笑) pic.twitter.com/7FESWjCwff

— Kai｜生成AI (@KaiArt4) November 30, 2024

他にも、Google ストリートビューを作ったりして遊んでいます。

ここから先は、僕がやっている手順を書いていきます。有料設定はするのですがリポストしていただけたら割引して提供をしようと考えています。注意してほしいのはあくまでも確率があげるというので一発ではいかないケースの方が多いです。なんどもTry & Errorをする場合もあるのでご了承ください。

今回は1つのアプリを作っていきたいと思います。今回チャレンジするのはユーザーが服装の画像を送ったら分析してどんな洋服が似合うのか教えてくれるものを作っていきます。

ChatGPTのAPIを使用するのでReplit AgentでAPIを入れたいという方にはとても参考になるかなって思います。