最近、Vibe Coding が流行っています。初めての記事ですが、Vibe Codingについて紹介し、実際に試してみた感想を共有します。
Vibe Codingとは？
開発者がコードを書く際に、AI と緩やかに対話しながら “雰囲気（vibe）” を伝えて、細かい仕様を完全に言語化しなくてもコード生成や設計支援を受けられる開発スタイルを指す概念です。
事前準備
- Cursor
- Proプランのアカウント
お試し１
作業フォルダーを用意し、作業フォルダーにindex.htmlを生成し、CursorのAI Agentモードのチャットにて下記の順番通りに依頼してみました。
手順
-
Agentモードにし、Sonnet4.5に指定する。
-
@マークのAdd Contextで生成したindex.htmlを指定する。
指示
「簡単なランディングページを制作して」っていう指示する。
生成結果（gif）
AIが生成してくれた結果物です。意外と標準的な構成で作られています。
index.htmlではCSS、JS含めて405行ぐらいのソースコードが生成されました。（たっだ2分で！）
お試し２
指示
条件はお試し１と同じです。
今回は下記のスクショのように指示しました。
生成結果（gif）
JSONのデータも用意されていますし、いい感じですね。
但し、デザインはお試し１と比べて予想可能なデザインに決まっていますね。
色とかグラデーション効果とか。
お試し３
今回は前回より曖昧な指示ではなく、細かい指示してどんどん改善しつつ、完成してみます。
指示 ①
バナーカードを生成してみます。
- Tailwind CSSという条件を追加しました。
- 背景イメージは先に用意しました。
生成結果 ①（png）
今回も前回と似ている色とグラデーションで生成されています。
指示 ②
今回は色の組み合わせからより細かい指示をしてみます。
- フォントは Google Fonts から探しました。
- イメージも別のイメージに変更しました。
生成結果 ②（png）
今回は余計なグラデーション効果は適用されていないですね。個人的に満足しています。
指示 ③
指示②まで生成したmaster.htmlを活用してtest.htmlに5つのデザインを生成してみます。
- ルールを守らずに生成されないようにルールを追加しました。
生成結果 ③（gif）
余白が変なカードも生成されていますが、いい感じですね。
指示 ④
今まで生成した結果物を活用してランディングページを生成してみます。
生成結果 ④（gif）
細かい部分の修正が要ると思いますが、短時間でこんな結果物ができるなんって凄いですね！
感想
- AIが生成するデザインはグラデーションなどである程度は予想できる結果でした。
- お試し３のように細かいデザインを修正していくつかのデザインUIを生成した後、それを活用してランディングページを生成することは凄く面白かったです。
- あと、余談なんですが、重複するプロンプトはCursorからルールの設定ができますので、便利ですね。
- フロントエンドエンジニアとしてはデザイナーさんがいない場合はHTML、CSSのようなデザイン的な部分はAIに任せて参考し、コンポーネント設計周りや内部ロジックに集中することもありかなと思いますね。
今後
- Figma MCPを使ってデザインファイルから決まっている開発環境で生成してみたいですね。
- プロジェクト管理用のMCPを使ってPMなしでAIの指示に従って開発できるのかもやってみたいです。