こんにちは。
株式会社キカガクの @tetsuro_b です。
弊社はエンジニアチーム以外にも、デザイナーチームも AI 活用に力を入れています。
例えば上記記事から抜粋すると...
- デザインの微修正は Devin で依頼してエンジニアにレビューを出す
- ローカル (Cursor) でデザインを実装し、Figma に MCP(html.to.design) で反映
ただ、デザイナーの AI 活用を推進するうえで「ローカルの環境構築及びアプリの立ち上げ」が、かなりハードル高いです。
実行するコマンドは決まりきっているものの、その時々の変更で特殊なコマンド操作が必要だったりとか、ローカルに差分があることでうまく main を pull できないとか...。
これらをひとつずつデザイナーの方に覚えていただくにはかなりのコストが必要で、AI で業務効率化を進めようとしたにも関わらず逆に時間的コストが増えてしまいます。
そこでいい方法がないか検討していた中で以下のような取り組みを拝見し、弊社でも「Cursor Design Mode」を作ってみることにしました。
Cursor Design Mode って？
ローカル環境の git pull やブランチの作成、Docker アプリの立ち上げなどアプリの正常起動に必要な作業の全てを全自動で行ってくれる Cursor Rules です。
Cursor の Agent チャットにてdesign-modeと入力することで Design Mode 用の Cursor Rules が読み込まれ実行されるイメージです。
「Design Mode」が開始すると具体的に、以下のようなものが実行がされます。
全てのコマンド操作が Cursor の Agent チャット内で行われるため何かしらトラブルがあっても AI がよしなにエラー解消をしてくれる想定です。
※ コマンドを順々にターミナルに打ち込んでもらう運用だと何かしらのイレギュラーがあった時にデザイナーチームでは対応しきれない
Cursor Design Mode 弊社流のこだわり
デザイナーチームがローカルでのアプリ立ち上げに困らないように...と突き詰めるとそれなりにこだわりもでてきたので工夫したポイントなどを紹介します。
Docker アプリ立ち上げの自動化
弊社ではバックエンドのアプリケーションの起動に Docker アプリの立ち上げが必要です。
Docker アプリ自体は macOS のアプリケーションなので手動で立ち上げる必要があると思っていたのですが open コマンドで Docker を立ち上げることも可能でした。
特に、PC 再起動後など Docker アプリの立ち上げを忘れてしまうケースもあるのでこのあたりも自動化をしています。
echo "🐳 Docker起動確認中..."
if ! docker ps >/dev/null 2>&1; then
echo "🐳 Dockerを起動中..."
open /Applications/Docker.app
fi
既存プロセスの停止
例えば Next.js だとデフォルトのポートは 3000 でアプリが起動しますが、既にアプリが立ち上がった状態で起動すると 3001 で起動します。
エンジニアにとっては当たり前ですがポートが違うだけでアクセスするべき URL も変わってしまうため Design Mode 実行時には既存プロセスは全て一旦停止するようにしました。
lsof -ti :3000 | xargs -r kill -9 2>/dev/null || true
pkill -f "yarn dev" 2>/dev/null || true
アプリの起動はターミナルを別ウィンドで立ち上げる
例えば Cursor の Agent チャットでyarn devと入力すると以下の２パターンでコマンドが実行されます。ただしそれぞれ問題があります。
-
Cursor のチャット内
・ チャットを閉じるとそのプロセスは強制終了される
・ → アプリの立ち上げ直しが必要 -
Cursor が自動で立ち上げるターミナル（チャット内ではない）
・こっちのパターンはチャットを閉じても強制終了されない
・ただし私が検証した範囲では Cursor が自動でターミナルを立ち上げるかどうかは制御できない
・→ 確率で 1. Cursor のチャット内で実行されてしまうケースもある
となると、安定してアプリケーションを起動させるためには別の手段を取る必要がありますので Cursor のターミナルには頼らず macOS 純正のターミナルを自動で立ち上げるようにしました。
この方法だと、たとえ Cursor を誤って終了してしまったとしてもプロセスが終了することは無いので PC を再起動しない限りは大丈夫なはずです。
osascript -e "tell application \"Terminal\" to do script \"cd $(pwd) && yarn dev\""
デザインコンテキストの自動読み込み
デザイナーがローカルで Cursor を使って行う作業のひとつにデザインモックの作成があります。
この時、プロンプトを工夫しないとせっかくフロントエンドのリポジトリで作業をしてもプロダクト固有のコンポーネントやカラーテーマが使われず一貫したデザインの生成ができません。
そこでリポジトリ内の共通コンポーネントなどを、チャット内にコンテキストとして追加できるように以下のようなコマンドも実行されるようにしています。
コンポーネントのソースコードの全てを読み込むわけではなく、あくまでコンポーネント名しか取得はしていないですが AI が利用するコンポーネントを判断するうえでは十分な情報だと思います。
また、色や余白などのデザイントークンに関しては一定のルールがあり特定のファイルで管理されているので、そのファイルに関しては cat コマンドで全ての内容をコンテキストとして付与するようにしています。
echo "🎨 デザインコンテキスト読み込み中..."
echo "📁 Part Components:"
ls -1 src/component/xxxx/part/ | grep -v "\.tsx$" | sort
echo "📁 Template Components:"
ls -1 src/component/xxxx/template/ | grep -v "\.tsx$" | sort
echo "🎨 デザイントークン:"
cat src/xxxx/design-token.ts
echo "🎨 コンテキスト読み込み完了"
まとめ
Cursor Design Mode を整備したことで、デザイナーチームがローカルでのアプリケーションの起動につまずくことが減り、より本質的な作業に集中していただく環境を用意することができました。
デザイナーチームの AI 活用を推進するべく、エンジニアチームも一緒になって今後も取り組んでいきたいと思います。
最後に（宣伝）
わたしの X（Twitter） では AI 活用に関する情報を日々情報発信しております！
フォローいただけたらうれしいです！
→ 株式会社キカガクの採用情報は こちらから
Discussion