はじめに
本記事の位置づけ
今回ご紹介する方法は、吉川聡史さんの記事の基本フローを踏襲しています。
吉川さんの記事では Claude を使ってデザインをHTML化し、プラグインでFigmaに戻すフローが紹介されています。
本記事も基本の流れは同じですが、AIツールを Cursor に置き換えて実装しています。
経緯・背景
私はエンジニアですが、UIデザインにも興味があり、新規プロジェクトのMVPデザインを担当することになりました。最初は、自分が想定している画面に合うUI kitを参考にしながらFigmaで作っていました。けれど、プロジェクトはスピード感を持って進める必要がある一方で、UIデザイン初心者の私にとっては効率が悪く、時間がかかっていました。
そこで選んだのが shadcn/ui Figma kit です。
-
よく使うコンポーネントが一通り揃っている
-
デザインの統一感が保てる
-
実装コンポーネント（React＋Tailwind）も提供されていて、そのままコードに反映できる
という理由から、デザイン作成も実装もスムーズになると判断しました。
さらに、MCP連携の存在を知り、Figma kitと組み合わせればAIで大枠を作り、人が仕上げるというフローが実現できると考え、導入しました。
ClaudeではなくCursorを使用した理由
吉川聡史さんの記事ではClaudeを使用していましたが、以下の理由からCursorを使用することにしました。
-
普段から使い慣れている
-
Claudeはコードの編集環境がない
-
CursorはAIを統合したエディタのため、必要であればその場でコードを編集・調整可能
使用するツール
- Figma
- デザインファイル：shadcn/ui kit for Figma
- プラグイン：html.to.design
- Cursor
料金について
本記事で紹介する方法は無料で試すことが可能です。
無料で利用できる範囲
- Figma：無料プラン
- Cursor：無料枠
- shadcn/ui Figma kit ： 無料版
- 吉川さんの記事ではこちらを活用していた
- html.to.design ： 無料枠
- 月に10回HTMlをデザインに変換可能
実際の環境（有料利用含む）
- Figma：無料プラン
- Cursor：Businessプラン（有料）
- shadcn/ui Figma kit：チームプロフェッショナル Basic Package（359 USD ≒ 約5万4千円）を購入
- html.to.design：Proプラン（現在は無料枠を利用中）
- ProプランではHTMLのデザイン変換が無制限
- 1ヶ月単位購入の場合：18 USD／月（約2,700円／月）
- 年間プラン購入の場合：10 USD／月（約1,500円／月）
デザイン作成の流れ
1. FigmaからCursorへデザインを読み込む
- MCP連携を利用して、Figma上のコンポーネントやレイヤー情報をCursorに渡す
- Cursor上でプロンプトを入力し、大枠のHTMLデザインを生成
- shadcn/uiのコンポーネントを活かした構成を指定可能
2. Cursorでデザインを生成
- プロンプトをベースにデザインの大枠を生成
- HTMLとして出力されるため、コードとしても確認・調整可能
- 出力されたHTMLデザインに対して修正指示を加え、理想の形に近づける
3. CursorからFigmaへデザインを反映
- 生成されたHTMLをFigmaプラグイン経由で再びFigmaに反映
4. Figma上でブラッシュアップ
- デザインを確認し、必要に応じて修正
手順
① Figma → Cursor でのコード生成
この部分はoke331さんの記事を参照し、FigmaのフレームをCursorに読み込ませ、HTML／コードを生成しました。
② Cursor → Figma でのデザイン反映（プラグイン利用）
吉川聡史さんの記事で使用されていた「html.to.design」を使い、HTMLを再びFigmaに戻します。
MCP連携を使用せず、下記のEditorタブのHTMLの箇所に生成されたコードをそのまま貼り付けることでも反映可能です🙆🏻
補足
CursorのMCP設定について
MCP連携の設定コードを記述する場所が分かりにくかったため、補足として記載します。
- 設定を開く
- Tools & Integrationsを選択
- MCP Tools の New MCP Server を選択
- mcp.jsonに設定を記述
html.to.designのMCP設定について
吉川聡史さんの記事ではClaudeの設定コードが表示されていたため、一応記載します。
- デザインファイルを開く
- 下記画像の赤く囲んであるアイコンを選択
- html.to.designと検索し、インストール
- ポップアップがでてくるので、「MCP」タブを選択し、「Enable MCP endpoint」をアクティブにする
- 「How to configure your AI tool?」をクリック
- 「MCP Configuration」が表示される
- 「cursor」タブをクリックする
- すると、mcp.jsonに記述するコードが出てくるのでコピーして、mcp.jsonに貼り付ける
最終的なmcp.jsonの記述例
{
"mcpServers": {
"Framelink Figma MCP": {
"command": "npx",
"args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
},
"html.to.design": {
"url": "YOUR-URL"
}
}
}
CursorのMCP設定
設定ができていると以下のような表示になります。
※表示されない場合は再起動することをおすすめします。
実際にやってみた
今回はシンプルな設定画面を題材にしました。
読み込むデザイン
プロンプト（Cursorに入力した内容）
@figmaの使いたいデザインコンポーネントのリンク
上記のデザインデータを活用して、新しいファイルを作成し、
ユーザーの基礎情報を入力できる設定画面を作成してください。
以下の項目を入力できるフォームにしてください：
- 名前（テキスト入力、ユーザーアイコン付き）
- メールアドレス（email入力、メールアイコン付き）
- 電話番号（tel入力、電話アイコン付き）
- 身長（数値入力、身長アイコン付き）
- 体重（数値入力、体重アイコン付き）
要件:
- デザインは青と白を基調に、クリーンで見やすい印象にする
Cursor生成HTMLの見え方
下記は作成したHTMLファイルをブラウザで確認したときの表示です。
Figmaに戻した後の見え方
ブラウザで確認した表示と全く同じように反映されました!
結果
今回試した設定画面はほぼshadcnのデザイン通りで、中身だけカスタマイズする場面を想定しました。この場合、HTML生成からFigmaへの反映までおよそ5分程度で作成できました。
まとめ
本記事では、MCP連携を活用し効率的にUIデザインを作成する方法を紹介しました。現在は、Figma MakeというFigma上でAIを使用してデザインを作成できる仕組みがありますが、こちらは有料プランでしか利用できません。無料でデザインを作成したい方にとって、本記事が参考になれば幸いです💫
採用情報
メディロムグループでは以下のようなサービスを展開しています。
全国300店舗以上のリラクゼーションスタジオ「Re.Ra.Ku」
世界初！充電不要の活動量計「MOTHER bracelet」
ヘルスケアコーチングアプリ「Lav」
ヘルスケア領域に興味があるエンジニア、PMを絶賛募集中です！
少しでも興味を持っていただけた方は、ぜひ以下のリンクからエントリーしてみてください。
一緒に新しいヘルスケアサービスをつくっていきましょう🌟
「Re.Ra.Ku」など全国 300 店舗以上のリラクゼーションスタジオを展開. 自社管理のサイト・決済・アプリ開発、充電不要な活動量計「MOTHER bracelet」関連開発を行っています. 主な技術スタック Ruby / TypeScript / Swift / Kotlin / AWS / GCP など.
Discussion