https://techblog.roxx.co.jp/entry/2026/03/19/083000

ROXXでエンジニアをしている小山です。

弊社ではAI駆動開発を進める中で、エンジニア・デザイナーが各々使いたいAIツールを使える環境があります。

その中でデザイナーにCursor Visual Editorを導入し、スタイル修正からPull Request作成までをデザイナーのみで完結する体制を作った話をまとめます。

デザイナー目線での実践的な情報が少なく感じたので参考になる方がいれば嬉しいです。

従来のフロー、課題

スタイル修正のフローは以下のような形で地味にラリーが多く、1px単位の調整のためにコンテキストスイッチが発生するのはお互いにとってコストでした。

（エンジニア）開発完了→デザイナーにスタイルチェック依頼
（デザイナー）修正点をまとめてエンジニアに共有
エンジニアが修正→再度デザイナー確認→修正漏れがあればもう一周

デザインの検討段階でも、理想のデザイン像のすり合わせはデザイナーがFigmaでデザイン作成後になるため実装開始までのリードタイムが伸びます。また、口頭やテキストベースで伝えてもニュアンスが噛み合わないことがありました。

Cursor Visual Editor

Cursor Visual Editorは2025年11月にCursorが発表した新機能で、コードベース上のUIをFigmaに近い操作感でスタイルを直接変更できます。

変更内容をApplyすることで、Cursorがその内容に基づいて実際のコードを修正します。

準備

前提として、デザイナーのCursorや各ツールのセットアップと環境構築は完了しているものとします。

まずプロジェクト内でCursorを使ってざっくりデザイナー向けのRulesを作成します。

例：
非エンジニアのデザイナーです。
デザインを検討するにあたってCursor Visual Editorを使用したスタイル修正や、
仕様の確認、デザインの壁打ちをするためにCursorを使用します。
非エンジニアでも調べやすくできることも加味しながらAGENTS.mdを作ってください。

次にgit操作やPR作成を行う Slash Command を作成します。

ブランチ切り替え（/checkout）

# ブランチ切り替えと最新差分取得

GitHub CLIを使用して指定されたブランチに切り替えて、
リモートから最新の変更を取得してください。

## 手順

1. `git fetch origin` でリモートの最新情報を取得
2. `git checkout $ARGUMENTS` で指定されたブランチに切り替え
3. `git pull origin $ARGUMENTS` で最新の変更を取得

スタイル修正PR作成（/create-style-pr）

# スタイル修正PR作成コマンド

現在のブランチを元にスタイル修正用の新しいブランチを作成し、
変更したファイルをコミット・プッシュしてPull Requestを作成します。

## ポイント

- 現在のブランチがmasterまたはmainの場合は中断する
- スタイル関連ファイルのみをコミット対象にする
- 大きな変更がある場合は警告して中断する
- ブランチ名は `fix/{元のブランチ名}-style` で作成
- PRのベースブランチは元の作業ブランチ

レビュー対応（/fix-pr-comment）

# PRレビューコメント対応

GitHub CLIを使用してPRに対するレビューコメントを確認し、
必要であれば修正してください。

## ポイント

- 対応したコメント単位でpushする
- pushしたら対象コメントに修正内容とcommitリンクを返信
- resolveされているコメントは除外
- 対応不要なコメントには理由を返信