コース: Cursorで行うバイブコーディング
今すぐ登録して、24,900件以上登録されている、業界エキスパート指導のコースを受講しましょう。
フロント画面の生成と修正方法
AI にコンポーネントを作らせるだけで 十分でしょうか。 このレッスンでは、 最小の ToDo の UI を AI に作ってもらい、 指示の出し方で 仕上がりがどう変わるかを見ます。 ここでは操作の概要をお見せします。 まず最小 UI の要件を AI に共有してみます。 はい、このように共有しました。 仕様は 「追加・表示・完了トグル」のみに しました。 データはローカルの状態で 後続の API に備えて 関数境界を分離しています。 こちらで Cursor に コーディングをしてもらいましょう。 はい、すべてのファイルが 作成されたようです。 このように それぞれ tailwind など index の css など、 できました。 こちらで「Keep All」をクリックします。 実際に ToDo アプリを見てみましょう。 ターミナルを開き、 こちらに表示されているように npm をインストール後、 サーバーを立ち上げてみます。 で、実際にサーバーを立ち上げてみます。 リンクが表示されたので、 そちらを見ていきましょう。 はい、このように表示されました。 装飾も何もない 単なるタスクアプリです。 仮に入力をして追加をしてみると はい、タスクが追加されましたし、 チェックを押すと完了になりました。 ここからバイブプロンプトで 見た目を整えていきます。 雰囲気と、触って良い範囲を指定し、 波長合わせをしてみます。 はい、それでは次に こちら、 デザインのトーンと色、角丸等を 入力してみました。 Cursor による変更が 終了したみたいなので、 実際にデザインが 変更されたのかを見てみます。 少し画面が 修正されていないように見えるので そちらを Cursor に聞いてみます。 (音声なし) 画面の装飾が変わっていないということを お伝えすると、 インストールする画面が出てくるので 実行します。 もう一度実行します。 (音声なし) はい、できたようなので もう一度サーバーを起動し、 確認してみます。 はい、装飾が切り替わりました。 「タスク」と仮に入力してみると 下にタスクが追加され、 こちらで完了となります。 このように 角丸・影・間隔・リングの統一で 同じ製品の顔になりました。 次は、部分チューニングをしていきます。 部分に対して 一言で目的を伝えるのがコツです。…
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。