最近、AIを開発のフローにいかに落とし込むかに興味があるので、以下の話もどこかでまとめようと思うのですが、一旦メモとして残しておきます。
今日は会社のオフィスで集まって開発をしていたのですが、同僚が Claude で出力した HTML のコードを Cursor にぺたっと貼って、それに対して Cursor Chat で指示出しして修正することでプロトタイピングをしていました。
最高だと思いました。このやり方が一番筋がいいと思って、絶対取り入れようと心に決めました。
というわけで、今日は試しに UI のトレスを同じフローでやってみました。
全体の所要時間は3時間くらいで、完成度と比較して大分短時間で作れていると感じました。
自分がこのフローで作らなかったら、大体5, 6時間くらいかかっていると思います。しかも今回作ったものよりも低いクオリティになっていたかと思います。
あと、時間に対しての疲れの度合いがかなり低いのもいい点かな、と思いました。最後に演出を少しだけ工夫する元気が十分にありました。
これいいぞ。
やってみたら結果として、以下のような流れになりました。
Claude 上で作りたいものの方向性が見えるまで作る。
Chat による指示で、Chat 上で話が通じなくなる限界まで作り込む
コードを理解しながら、自分の手で実装の続き・仕上げを行う
1. Claude 上で作りたいものの方向性が見えるまで作る。
トレスしたい画像を貼り付けて、実装の依頼を出しました
完成とは遠いのですが、一発で方向性が見えたのでコードをコピーして 、一旦 Claude は閉じました
2. Chat による指示で、Chat 上で話が通じなくなる限界まで作り込む
上記で作ってもらったコードを、自前の Playground プロジェクトに貼り付けてスタートします。
Next.js で TailwindCSS をセットアップしたプロジェクトです
チャットで指示出しを繰り返して、徐々に思い描いているものに近づけていきます。
今回は23回指示出しをしたタイミングで、指示が達成されなくなったり、エラーが出たりし始めました。おそらく、複雑度が高くなりすぎたのが原因かと思います。
そのタイミングで手作業での実装に移行しました。
3. コードを理解しながら、自分の手で実装の続き・仕上げを行う
上記まででほとんどいい感じに動くようになっていたので、指示出しで改善しなかった挙動の改善や仕上げのアレンジを行いました。
ここでかかった時間は大体3, 40分くらいです。