【Cursor第2回】コードを書かずにTrello風アプリを構築 ─口頭指示だけでどこまでできるか─

テックメンターのかなしーです。
前回（https://rocksystem.co.jp/blog/page.php?entry_id=324）に引き続きCursorについて紹介していきます。
今回はCursorを使用し自然言語のみでアプリ開発をしてみます。

1. はじめに（TL;DR）

• Cursorに自然言語だけで指示し、コードを一切書かずにTrello風アプリを構築
• Next.js App Router構文 + TypeScript + 完全クライアント構成が即時生成
• Tailwind → Material UIへのUI移行も追加指示のみで自動対応
• 抽象的なUI改善要求（色を増やさず視認性向上）も反映
• 「実装はCursorに任せ、自分は仕様だけを考える」開発スタイルが現実に

2. 今回のルール（開発環境と前提）

「コードを一文字も書かずに、どこまで開発できるか？」を検証。自然言語チャットだけで、動くUI付きアプリの構築を目指す。

• OS：Windows 11 + WSL2（Ubuntu 22.04）
• 開発環境：Node.js / npm / Cursor v1.2.2
• フレームワーク：Next.js（App Router構文）、完全クライアント構成

3. 開発開始：まずはTrello風アプリを作れと命令

最初の指示：

「Next.js（App Router構文）とReactで、Trello風のカンバン型タスク管理アプリを作って」
「完全クライアント、状態はuseState＋localStorage、UIはTailwind」

Cursorはすぐにプロジェクト構成、型定義、状態管理、スタイル、コンポーネントなどを一気に生成。コードを一切書かず、npm run devで即動作確認できるレベルに到達。

最初に出した自然言語による指示内容

Cursorが構成ファイルを生成開始

ファイルが次々に生成されていく様子

4. 自動でエラーを検出し、自己修正を開始

ここで驚いたのは、Cursorが自動でエラーを検出し、自発的にその修正を試みたことだった。従来の補完ツールとは次元が異なる。

エラーを自己検知し、自動修正を開始した画面

5. 初回完成報告とそのUI

最初の完成報告が届いた。すぐに動作確認できる段階まで来た。

Cursorからの初回完成メッセージ

6. UIが古い？──改善を要求してみる

UIを見てすぐに、「これはちょっと古臭い」と感じた。

「UIが古い。現代的に刷新して」
「質問せず、一気に完成形にして」

初期UIへの違和感

操作性の問題が浮き彫りに

UI改善を要求した指示内容

7. 再構築と2回目の完成

再設計中の様子

2回目の完成メッセージ

再構築後も納得できないUI

8. UIライブラリを指定して全面再設計

「Tailwindは禁止、Material UIのみで再実装して」

MUIでの再構築を要求

CursorがMUI導入を自動で開始

UI構成がMUIベースに書き換えられていく

9. 最後の抽象要求「もっと見やすくして」

「色は抑えめで、コンポーネントの視認性を向上して」

UIの明確さにまだ課題

抽象的な改善指示を出した場面

最終的に完成度の高いUIに

動作面も問題なしの状態

10. 所感：実装はもう任せていいかもしれない

仕様の指示だけでUI付きアプリが完成。Cursorは、構成提案からUI最適化まで通して対応可能。実装作業をほぼ委ねられる環境が、いよいよ現実のものになってきた。

11. 次回予告

第3回では、Cursorが書いたコードをレビュー。構造の整理度、メンテナンス性、意図の反映精度を検証します。