🆒

2分で全自動でwebアプリを生成できる。そう、Cool Clineならね。

2025/01/14に公開

すみません、盛りました。

「2分で生成できる」は間違いではありませんが、生成したのは超簡単なデモアプリケーションです。
画面数が増えればもっと時間がかかります。
それでも、自分でゼロから書くよりは圧倒的に早そうです。

実際に生成したときの解説

ちょうどOCRをさっくり試したかったので、OCRをしてくれるwebアプリを作ってもらいました。
以下、私が試した手順です:

  1. cool clinedeepsheekを使うように設定
    • LLMは何でも良いと思いますが、deepsheekは安価なので試しました。
    • deepseekのAPIは先に$2課金しないといけないですが、結構長持ちします。
      • (余談)Cursorは無料プランで使っているのですが、deepseekのAPIと繋げるのも良いかも。
    • cool clineの設定については、こちらなどの記事を参考にしました。
  2. cool clineに指示するためのプロンプト(要件)を考える
    • 実際に使用したpromptは後述します。
  3. cool clineに要件を渡す
  4. cool clineが動いている間は待機
  5. 2分待って完成!

使用したプロンプト

以下は実際に使用したプロンプトです

アップロードした画像をgemini APIでOCRして結果を返すwebサービスを作ってください。 APIキーはXXXXXです。

結果

  • 生成時間:⭐⭐⭐ 2分 ⭐⭐⭐

  • 生成されたwebアプリのスクリーンショット

まず最初の状態
画像1

画像選択後のOCR結果を表示する状態
画像2

生成されたアプリはちゃんと動きました!
(OCRはgeminiを使っています)

。。。

はい、そうです。

これだけ!

小さい!規模が小さい!

もっと画面があるケースについても検証してみましょう。


実際に業務や個人開発で使う場合の注意点

業務や個人開発で使うには、もっと詳しく指示する必要がありますね
例)

  • 使用する言語フレームワークの指定
  • 他の技術スタックの選定
  • 必要に応じた詳細な設計書の準備

などなど、与える情報によって生成一発目のクオリティが結構違ってくる気がします。

もっと、、、もっと上手に情報を与えれば生成物のクオリティ上がらないか?

この記事で生成AIを駆使してドキュメントを作る検証をしたので、
次のステップとして作ったドキュメントをAIに読み込ませてコーディングしてみます。
https://zenn.dev/ken_5/articles/756ee9393cb2e0

  1. ChatGPT o1で設計書を生成
  2. Cool Clineに設計書を渡して、webアプリを生成してもらう
    という流れでどんなものができるか検証してみます。

この続きの検証結果については、次の記事として投稿します!
ぜひお楽しみに 🎉

投稿しました!
https://zenn.dev/ken_5/articles/51c88566e14a24


XでもAI情報を発信しています。
よかったらフォローお願いいたします⭐️
Xはこちら

Discussion