基礎と応用でコーディングを学んできましたが、現在はAIが進化してコーディングもAIに任せることができるようになりました！
工数を3分の1以下にできるのでぜひこの方法をマスターしていただきたいです。
使用するAI「Figma MCP」 × 「Cursor」
Figma MCPとは「外部のAIとFigmaを繋げるサーバー」です。
これまでのAIコーディングでは、「デザインデータをPDFにして、または画面をスクリーンショットしてAIに画像を解析させる」といった方法が主流でした。しかし、AIの画像認識だけでは「見えている表面的なデザイン」しか把握できず、余白の正確な数値やレイアウトの構造までは完璧に理解できませんでした。
Figma MCPを使えば、AIにFigmaのデザインデータを直接読み取らせることができるので、デザインに忠実かつ実用的なコードを瞬時に自動生成できるようになりました！
「Cursor」とは？
今回Figma MCPと合わせて使用する「Cursor」とはFigma MCPが読み取ったデザインデータを直接受け取ってコードを書くAIコードエディターです。
Cursorは、世界中の開発者に愛用されている「VS Code」をベースに開発されたエディターで、VS Codeユーザーであれば、拡張機能やショートカットキーなど、これまでと同じ操作感ですぐに使い始めることができます。
さらに、単に「エディターの中でChatGPTとチャットできる」というレベルではなく、Cursorは、「プロジェクト全体のコード（Codebase）を深く理解した上でAIがサポートしてくれる」という点で大きな注目を集めています。
CursorとFigma MCPの連携手順
- Cursorをインストール
まずは以下のリンクから公式ページへ
https://cursor.com/ja
ダウンロード後ローカルにdmgファイルが配置されるので、それをダブルクリック。
CursorアプリをApplicationsへ移管(windowsだとこの操作は不要) - アプリからCursorを起動
Sing Upでアカウント作成後Sign inします。
- Figmaと連携
Customizeから検索窓に『Figma』と入れ検索し、表示されたFigmaのaddを選択します
指示文（プロンプト）
あなたはシニアフロントエンドエンジニアです。
Figma のデザインを、再利用しやすく、保守しやすく、アクセシブルで、SEO に配慮したコードにしてください。
添付したベースファイルの上に実装してください。ゼロから新しい構成を作らず、ベースの HTML / CSS / JS を活かして追記・調整します。ベースファイル
– index.html、css/reset.css、css/style.css、js/script.js がすでにあります。
– css/reset.css は書き換えないでください。
– css/style.css の先頭にある次の指定は残してください。
– box-sizing: border-box
– html { scroll-behavior: smooth; }
– .pc / .sp の出し分け。PC の切り替わりは、ベース CSS に書いてある 1024px です
– body の文字指定、img、a、button の共通指定
– スタイルは css/style.css に、セクションごとのコメントを残したまま書いてください。実装条件
– HTML、CSS、JavaScript だけを使う。React、Next.js、Vue などのフロントエンドフレームワークは使わない。
– HTML、CSS、JavaScript は別ファイルにする。
– セマンティックな HTML5 を使い、アクセシビリティの基本を守る。
– 動きとアニメーションは JavaScript で実装する。
– インラインスタイルと、HTML に直接書くイベントハンドラは使わない。
– 見た目は外部 CSS のクラスだけで指定する。
– クラス名は BEM（block、block__element、block–modifier）にする。
– 曖昧な名前、見た目だけを表す名前、極端に省略した名前は使わない。
– HTML、CSS、JavaScript は再利用しやすく、保守しやすく、読みやすく書く。
– JavaScript で要素を取得するときは、専用のクラスか data 属性を使う。BEM の命名は崩さない。
– 操作できる要素はキーボードで使え、必要なときは ARIA 属性を付ける。
– PC と SP の Figma に合わせてレスポンシブにする。
– レイアウト、余白、文字、色、線、影、画像、レスポンシブを、Figma にできるだけ正確に合わせる。
– SEO のため、title、meta description、セマンティックなマークアップ、見出しの階層、整理された HTML を入れる。
– lang はページの言語に合わせる。
– 見出しは、ページの主題が h1、セクション名が h2、その中の項目名が h3。階層を飛ばさない。
– 不要なマークアップやスタイルの重複は作らない。
– 見た目が同じ指定は、セクションごとに繰り返さない。繰り返す内側の幅や見出しは、共通クラスにまとめる。
– 内側の幅と中央寄せは .sec__inner
– 見出しの共通スタイルは .sec__heading
– そのセクションだけの違いだけ、about__heading のように個別のクラスへ書く
– body に書いてある font-family、font-weight、line-height、font-size、color、letter-spacing は、個々の要素に同じ値を書き直さない。デザインが違うところだけ上書きする。
– 横並びは display: flex を使う。
– 内容幅の中央寄せは margin-inline: auto を使う。幅の上限と左右の余白は Figma に合わせる。
– スマホだけで出したい改行は <br class=”sp”> を使う。.sp / .pc の出し分けはベース CSS にある。
– JavaScript は jQuery を使う。ベースの index.html にある jQuery の読み込みを残し、そのあとで js/script.js を読む。
– ヘッダー、メニュー、スクロールで変わる見た目など、Figma にある動きは jQuery でクラスを付け外して実装する。
– 地図がデザインにある場合は、画面に出している住所と同じ住所で埋め込む。タスク
– TOP ページを実装する。
– パスは / にする。
– PC と SP の Figma に合わせたレスポンシブで、ピクセルに近いレイアウトにする。
– 1024px 未満は SP、1024px 以上は PC の並びに切り替える。
– 必要な操作とアニメーションを JavaScript で入れる。
– すべての CSS クラス名に BEM を使う。
– 画像は /img/ に置く。HTML と CSS ではそのパスを使う。
– 画像が必要なときは、ファイル名とパスを明示する。ページパス
– /Figma
– PC: （PC の Figma URL）
– SP: （SP の Figma URL）ファイル構成
– HTML: /index.html
– CSS: /css/style.css（css/reset.css を先に読む）
– JavaScript: /js/script.js
– 画像: /img/出力
– TOP ページに必要な HTML、CSS、JavaScript を完成した状態で出す。
– 次のファイルに分けて出す。
1. index.html
2. css/style.css
3. js/script.js
– css/reset.css は変更しない。
– HTML と CSS で使った画像のパスを書く。
– 画像が必要なときは、/img/ に置くファイル名を一覧にする。
– 見た目は CSS クラスだけを使う。インラインスタイルは使わない。
– ページの操作、UI の動き、アニメーションは JavaScript で実装する。
– ファイルを所定の場所に置けば、そのまま使える状態にする。