LoginSignup
7
4
@Jasmine_teeeeee(ジャスミン茶)

自分で実装したくないので、Cursor（AI搭載エディタ）にReact開発全部してもらった結果

Last updated at Posted at 2024-07-22

はじめに

Cursorのインストールまではこちらの方の記事を参考にしました
https://qiita.com/railgun-0402/items/717f44df9d68d77309f1

vueで触った時の記事はこちら
https://qiita.com/Jasmine_teeeeee/items/b443c90f37a10276ff53

Reactのインストール～起動まではこちらの方の記事を参考にしました
https://qiita.com/y_kato_eng/items/68e6c971358ddffbc5ff

使用しているAIモデルは、Claude 3.5 Sonnetです。

ゴール

Amazonのセール画面のデザイン再現

image.png

実務で、デザイン部隊が持ってきた画面デザインを実装するときに、
Cursorを使えば爆速だと思ったので、手順を残しておきます。

デザインはキャプチャでも大丈夫でした。
今度figumaとの連携方法も記事にできたらいいなと思っています。

初回生成

Reactを起動している状態
image.png

Cursorエディタの左側に色々出ているようであれば、クリアしましょう
image.png

「Open Folder」ボタンからReactのプロジェクトを選択
image.png

新規ファイル作成が度々発生するので、ターミナルを開いておく
rootフォルダで右クリック
image.png

ターミナルが開きます
image.png

AIさんにディレクトリ構成を理解してもらう
rootフォルダで右クリック→パスをコピー
image.png

このフォルダ構成を把握して的なプロンプトで自動的になんの言語なのか理解しておいてもらう
（ここはもっといい方法がありそう）
image.png

デザイン画像をコピペして、目的を伝える
image.png

色々提案してくれるので、コードを以下アイコンで選択して、
image.png

何すりゃいいんじゃいと質問
image.png

フォルダを作って、ファイルを作って
とのことなので、先ほど開いたターミナルでフォルダを作成
image.png

一つづつ進めて、都度質問しても優しく教えてくれます
image.png

提案されたコードを適用するには以下アイコンをクリック
image.png

自動でコードを書き込んでくれるので、以下ボタンが表示されたら押下し、保存（Ctrl+S）
image.png

基本的には、次は？と聞いていけばアテンドしてくれます
image.png

手順に沿って、
先ほど開いておいたターミナルで再起動（npm start）するとブラウザが自動的に起動します。
image.png

１発で完全一致したことがないです。
やり方ご存じの方いらっしゃいましたら是非ともコメント頂けるとありがたいです。

チューニング

画面中央にあるのは画像だと思うので、差し替え依頼
image.png

手順に従うとこんな感じ
image.png

横いっぱいにしてもらう
image.png

なりました
image.png

検索用テキストボックスも配置してみましょう
image.png

ちょっと位置がずれていますが、画像から属性を判断していい感じのテキストボックスを配置してくれました。
image.png

こんな感じで一つ一つ指摘すると対応してくれます

デグレ、エラー対応

たまに前の依頼をすっかり忘れて、画面が初期状態に戻ってしまうことがあります。
image.png

色々やり方があるのですが、

以下のようにファイルを指定してチャットに追加し、ここを直してと依頼もできますし、
image.png

チャットの履歴から、当時依頼したチャットをクリックして、
以下ボタンから再度依頼をすることもできます。
image.png

感想

まだ「全部お願い！」とすることは出来なそう。
私のプロンプト技術が上達するのが先か、このツールがバージョンアップするのが先か、乞うご期待ｗ

7
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
7
4