Cursor 2.2の新機能を活用する方法

TL;DR

Cursor 2.2では、内蔵ブラウザで画面要素を直接調整し、変更内容をAIエージェントへ渡せる。さらに、ログを収集して不具合へ向き合うデバッグモード、図を交えたプランモード、並列エージェントの成果を評価する機能を用途別に活用できる。

Transcript

おスマソです。本日はですね、カーソル から大型の機能がね、ま、いくつか登場し てるんで、これについてお話していこうと 思います。ま、バージョンはね、2.2と いうことで、え、AIがね、ま、コードを 書くところからログを見てバグを直すよう な、ま、専門エンジニアみたいな感じでね 、え、進化したデバック機能とか、ま、 あとはプランニングモードとか、あとは マルチエージェントのね、仕組みの部分が より良くなったりだとか、え、あと1つ 結構今1番初めに取り上げようかなと思っ てるのが、ま、ブラウザーレイアウト エディターというのがね、登場して、ま、 これが、え、ま、アプリをカーソル上で 立ち上げると、ま、その立ち上げたアプリ を、ま、資格的にですね、え、このページ のUIはこういう感じで変えていこう... Read More

Key Insights

• ブラウザレイアウトエディターは、Cursor内で起動したアプリの画面を見ながら、対象要素の色、文字サイズ、枠線、位置などを視覚的に調整できる機能である。
• UI編集の結果は、適用操作によってAIエージェントへの依頼として渡されるため、人間が見た目を判断し、AIが変更を実装する流れをCursor内で完結させやすい。
• CSS編集機能は、視覚操作だけでは扱いにくい細かなスタイル調整の開始点として利用できるが、話者はCSSに関する知識も必要になると説明している。
• デバッグモードは、ログなどの情報を収集しながら不具合へ集中的に向き合い、プロのデバッガーが注意する点や調査手順を専用モードとして実行する仕組みである。
• 用途別モードの利点は、実装、計画、デバッグなどの関心ごとを分離し、それぞれの作業に必要な指示とプロセスへAIの動きを集中させられる点である。
• プランモードは、計画作成に特化した動作に加え、Mermaid JSなどを使って処理の流れを視覚化し、実装前の構造を追いやすくするよう改善されている。
• マルチエージェント評価機能は、複数のAIエージェントに同一タスクを並列実行させた際、生成されたコードのうちどの成果が良かったかを評価できる仕組みである。
• 話者の評価では、Cursor 2.2で最も注目すべき機能は視覚的なUI編集であり、デバッグと計画の専用モードは作業分離の観点から活用価値が高い。
• 🎬 このチャンネルの他の動画:
  • Codexの音声操作で開発タスクを進める方法
  • Ox Alphaの正体と性能は何か？
  • AIの認知ドリフトを防ぐグリルスキルとは？
• 📺 このチャンネル: まさおAIじっくり解説ch

Questions & Answers

Q: Cursor 2.2でUIを視覚的に編集する方法は？

Cursor内でアプリを起動し、新しく用意されたブラウザを開いて編集対象の画面要素を選択する。そこで背景色、フォントサイズ、枠線、ロゴの大きさや位置などを調整し、変更を適用すると、その内容がAIエージェントへの依頼として渡される。

Q: ブラウザレイアウトエディターでは何を変更できますか？

ブラウザレイアウトエディターでは、ボタンの背景色、文字の大きさ、枠線、ロゴのサイズや位置などを変更できる。画面を見ながらサービスの雰囲気に合わせて調整できるほか、より細かなスタイルは用意されたCSS欄から扱える。

Q: Cursor内蔵ブラウザで画面を確認する方法は？

Cursorからアプリを立ち上げ、表示されるブラウザを開く操作を選ぶと、Cursor上でアプリ画面を確認できる。画面内では要素の選択やUI調整に加え、スクリーンショットの取得、コンソールの確認、CSSによるスタイル編集も行える。

Q: Cursor 2.2のデバッグモードとは何ですか？

デバッグモードは、プロのデバッガーや優秀なエンジニアが不具合を調査する過程を、専用の作業モードとして仕組み化した機能である。ログなどの情報を収集し、注意点や調査手順に沿いながら、対象の問題へ集中的に向き合うよう設計されている。

Q: なぜデバッグ専用モードを使うのですか？

デバッグ専用モードを使う理由は、通常の実装と不具合調査を分け、AIをデバッグに必要な注意点と手順へ集中させるためである。話者は、目的に特化した指示から無駄な内容を減らすことで、AIがより適切に動きやすくなるという考えを示している。

Q: Cursor 2.2のプランモードで何ができますか？

プランモードでは、実装作業と切り分けて計画の作成に集中できる。更新後はMermaid JSなどを使い、処理の流れや構造を視覚的に追いやすくする機能も示されており、複雑な作業の着手前に全体像を整理する用途に向いている。

Q: マルチエージェントのコードを比較する方法は？

複数のAIエージェントへ同じタスクを並列で実行させ、生成されたコードに対する評価を確認する。更新では良い成果を示す印によって、どのエージェントのコードが優れていたかを判断できるため、候補を比較して採用する結果を選びやすくなる。

Q: Cursor 2.2で優先して試すべき機能は？

フロントエンドの見た目を頻繁に調整する場合は、ブラウザレイアウトエディターを優先して試すとよい。話者はこれを今後の注目機能と評価し、問題調査ではデバッグモード、実装前の整理ではプランモードを目的別に使い分けることを勧めている。

Summary & Key Takeaways

• ブラウザレイアウトエディターでは、Cursor内でアプリを起動し、表示された画面の要素を視覚的に編集できる。ボタンの背景色やフォントサイズ、枠線、ロゴの大きさや位置などを調整でき、細かなスタイルはCSSから扱える。スクリーンショットやコンソールも利用でき、編集内容を適用するとAIエージェントへ依頼が渡されるため、人が見た目を判断しながら実装を進められる。

• デバッグモードは、優秀なエンジニアが不具合を調べる過程を仕組み化し、ログなどを集めながら問題へ集中的に向き合う機能である。通常の実装とは目的を分け、デバッグ専用の注意点や手順に沿って動かすことで、余計な処理を減らしやすい。プランモードも計画作成へ役割を絞り、Mermaid JSなどを使って処理の流れを視覚的に追いやすくする。

• マルチエージェント機能では、複数のAIエージェントに同じタスクを並列で実行させた後、どのコードが良かったかを評価できる。話者は、今回の更新で特に注目する機能としてブラウザレイアウトエディターを挙げ、デバッグモードとプランモードは関心ごとや仕事を分離する用途で有効だと評価している。一方、マルチエージェントの評価機能は補助的な改善と位置付けている。