Cursor×Figmaで、GitHub pagesで公開して見るところまでをやってみる

まずはGitHubのリポジトリつくってcloneしておく。

完全に空っぽのページ。

npx create-next-app@latest

から、nextの新しいパッケージを作成する

kusumure

.cursorディレクトリ配下にmcpの設定ファイルをおく
（API keyを直で書いているので、privateリポジトリでもない限りはgitignoreを設定することを忘れずに。）

mcp.json

{
    "mcpServers": {
      "Framelink Figma MCP": {
        "command": "npx",
// hogehogeは各々のapi key
        "args": ["-y", "figma-developer-mcp", "--figma-api-key=hogehoge", "--stdio"]
      }
    }
  }

kusumure

適当に拾ってきたsvgを配置してたら、エラー出てしまった。
svgが問題かと思ったけど、全部pngに変えても起きたから、そもそも画像の自動exportがちゃんと動いてなさそう。

（Figmaのデータ自体はちゃんと読み込みはできてそう。今回はコーディングがどこら辺までできているのかを知りたかっただけなので、手動でexportで回避。）

こんな感じで追加リクエストしてみた

とりあえず出来上がったページ
初回ではこんなもん

kusumure

とりま、画像のexportができてなかったところは手動で手直しした。
アイコン的に使ってる画像が他の画像と横並びになったり、微妙にスタイル崩れてたりみたいなものが気になる
見た目だけじゃなく、Figmaのデザインデータの構造も踏まえて解釈するとこういう対応をしてくれるのかもしれない。Figma上でコンポーネント化しておけば、ある程度うまくやってくれるのだろうか？

kusumure

レイアウトとか色とか気になったのでコメントしてみたら真摯に直してくれた

kusumure

GitHubPagesへのdeployはこちらを参考

kusumure

完成したページはこちら

kusumure

どっちかというとFigmaに不慣れでデザイン組む方がめっちゃ時間かかりました
デザイン組む -> 3 ~ 4h
コーディング（実際コードいじったのは画像のパス程度）-> 1 ~ 2h
デプロイ周り -> 1hくらい

デザインをみてコーディングしてくれるのはすごい。
が、コーディングのレベルは学生バイトくらいな気がする（デザイン通りには作ってくれないという意味で。時間効率だけで言ったらバカ早い）。
Figmaのデザインの仕方がもっと綺麗だったら、うまく構造を読み取ってくれてももうちょっと精度は上がるかもしれないが、少し構造いじってもう一回コーディングせいよってお願いしたらそれできてるじゃんって言われた。意外と頑固。

kusumure

特定のデザインシステムとか指定するとそれを使って実装とかしてくれると思うので、もうちょっとデザイン通りにコーディングしてくれるかもしれない