4月で正式創業を迎えたDress Code株式会社で働いているかわうそです。
今回は正式創業を迎えるにあたり、コーポレートサイトを公開したのですが、
コーポレートサイトをCursorのAgent Modeを活用して、どこまで乗り切れるのか試しみました。
ということで、どんな風にトライしたのかについて簡単にご紹介します。
（ついでに、Figma MCP × Cursor Agent Modeだけでは無理でしたw多少、実装してますw）
ある程度のディレクトリ構成や実装方針を簡単に決めて決めておきたかったので、
まずはProject Ruleを先に作成しておきました。
Project Ruleの作成については以下を参考にしています。
構成を固めた段階でCursorにコーディングルールを作成させています。
Cursor の Project Rule を作りたいです。
ルールの内容は、このリポジトリにおけるフロントエンドのコーディングルールです。
./src以下を分析し、ルールを作成してください。
# フロントエンドコーディングルール
## 1. コンポーネント設計
### 1.1 コンポーネントの構造
- コンポーネントは`src/components`ディレクトリに配置する
- 関連するコンポーネントはサブディレクトリでグループ化する
- コンポーネント名はPascalCaseを使用する
- コンポーネントファイルは`.tsx`拡張子を使用する
### 1.2 Propsの定義
- Propsの型定義は`interface`を使用する
- オプショナルなPropsには`?`を付ける
- Propsのデフォルト値はコンポーネントの引数で定義する
### 1.3 コンポーネントの分割
- 再利用可能なUI要素はコンポーネントとして切り出す
- ロジックとUIは分離する
- 共通のレイアウトコンポーネント（VStack, HStack）を使用する
...
結果的に、これだけの情報では多言語対応がうまくいかなかったので、少し詳細に補足情報を追記しました。
コーポレートサイトでは英語と日本語を対応していきます。
辞書ファイルは`messages`ディレクトリ内に`messages/en.json`と`messages/ja.json`が存在します。
実際に多言語対応を実装する場合は以下のように実装してください。
'```'
const Sample = (props) => {
const t = useTranslations('XXXX');
return t('YYYY')
}
'```'
また、 FigmaのMCPサーバーを見に行く先のURLも記載しておくと、Cursorからアクセスしやすくなるので、追記しました。
Figmaの情報を参照したいときは「MCPサーバー」を利用してください。
対象ファイルのURLは以下になります。
https://www.figma.com/design/XXXX/Corporate?node-id=000
Figmaにあるデザインデータを取得するために、MCPサーバーを設定しました。
以下を参考にしています。
(設定が終わったらEnabledになっていることも確認)
準備が整ったのでAgent Modeにやってもらいましょう。
ただし、進める前にそれぞれ簡単なプロンプトを用意しながら進めました。
また、指摘した内容から学習した内容はログとして残してコーディングルールに反映できるよう、学習結果もログに残すようにしています。
マークアップ用のプロンプトは以下になります。
これからFigmaのデザインを元にコーポレートサイトを作成していきます。
今回の対象のページは「`XXXX`」です。
対象のルーティング（page.tsx）は「`XXXX`」になります。
Figma上のデザインはMCPサーバーを利用して確認してください。対象のデザインは以下のURLで確認できます。
https://www.figma.com/design/XXXX/Corporate?node-id=000
基本的にはFigma上のデザインを忠実に再現してください。
もしわからないことがあれば、自分に相談してください。
セクションごとに分けて作成していきます。まずは「`XXXX`」から改修していきましょう。
また、指摘や修正があった際には「.cursor/learnings」に`yyyy-MM-dd_学び.md`というファイルを作成して指摘や修正事項をまとめてください。
yyyy-MM-ddは今日の日付を入れてください。すでに同じ日付のファイルがある場合は、上書きで構いません。
ここでのポイントが「該当のデザインファイルはできる限りNode付きのURLを共有する」になります。
実際にMCPサーバーへのリクエストとレスポンスは以下のようになるのですが、
nodeIdがないと全てのNodeを検索しようとしてしまい、Agentの実行時間がかなり伸びてしまうので、対象のデザインを一発でヒットできるようにした方が良いです。
{
"fileKey": "xxxx",
"nodeId": "000-00000"
}
metadata:
name: Corporate
lastModified: '2025-04-19T06:59:41Z'
...
そのために、このデザインを一気に作ってというよりは、セクションごとに分けながら段階的に作らせていく方が進めやすいのかなと思いました。
以下のCTAもプロンプトが出来上がってくると、レスポンシブ対応含めて10分足らずで完成するので、改めて感動しました。
多言語対応用のプロンプトは以下になります。
多言語対応を実現するためにnext-intlを導入しています。
多言語対応を行っていきます。
コーポレートサイトでは英語と日本語を対応していきます。
辞書ファイルは`messages`ディレクトリ内に`messages/en.json`と`messages/ja.json`が存在します。
今回、対応するページは「`XXXX`」なので、`XXXX`というキーの配下に辞書を作成していきましょう。
Figma上のデザインから文言を取得したいときはMCPサーバーを利用して確認してください。対象のデザインは以下のURLで確認できます。
https://www.figma.com/design/XXXX/Corporate?node-id=000
対象のルーティング（page.tsx）は「`XXXX`」になります。
実際に多言語対応を実装する場合は以下のように実装してください。
'```tsx'
const Sample = (props) => {
const t = useTranslations('XXXX');
return t('YYYY')
}
'```'
それではセクションごとに分けて対応していきます。まずは「`XXXX`」から改修していきましょう。
ここでのポイントは「辞書ファイルの場所と作り方を指定していること」と「文言もFigmaから取得させていること」です。
messagesディレクトリで辞書ファイルを管理しており、作り方を指定することで問題なく作成してくれました。
$ tree messages
messages
├── en.json
└── ja.json
en.json
{
...,
"company": {
"mv": {
"title": "...",
"heading": "...",
"subHeading": "..."
},
"profile": {
...
},
"access": {
...
}
}
}
文言もFigmaから取得したものを使うように指示しているので、Agent側が勝手に翻訳したりせず、デザインデータ通りの文言で辞書ファイルを作成してくれます。
Figma MCP × Cursor Agent Mode はまじで革命だと思った。
開発環境さえ準備できれば、あとはデザインデータを元に指示するだけでやりたいことは7~8割くらいは実現できる。
細かい微修正とかは指示するよりも実装した方が早いケースもあるので、ケースバイケースで使い分ければ最強のツールだなと感じた。
もっと精度を上げていくために、いろんな検証を進めていきたい。
Be the first to comment
