Figma を仕様書として AI と一緒に開発している話

このサイト、Syakoo Lab はこれまで私が好き勝手に作ってきました。 ざっくりとした歴史は別でまとめているのでよかったらご覧ください。

このサイトをまた作り直しました 🎉 (v6) - Syakoo Lab

syakoo の個人ブログ

syakoo-lab.com

まあつまり個人開発で運営しつつ、ラフに文章や創作物を公開しつつ、気になった技術が出てくれば実験のように試しつつ、まあとにかく砂場感覚でやってきていました。

しかし、とうとう、個人開発をやめることにしました。...その相手とは...

AI です。

周りの人が AI に詳しすぎてついていけなくなっていることに危機感を覚え、おっっもい腰をあげ、このサイトでも AI を使っていこうと考えました。

Figma を仕様書として使い、開発する

さて、具体的にどうやっているかについて説明していきます。

最近デザインもちゃんと勉強していきたいなと Figma を触っていたので、Figma を仕様書として使い、AI と一緒に実装することにしました。

まずは Figma を用意し、MCP の設定をして Figma にアクセスできるようにします。 環境変数ファイルのようにテンプレートファイルがあると便利です。

GitHub - GLips/Figma-Context-MCP: MCP server to provide Figma layout information to AI coding agents like Cursor

MCP server to provide Figma layout information to AI coding agents like Cursor - GLips/Figma-Context-MCP

github.com

// .cursor/mcp.template.json
{
  "mcpServers": {
    "figma-developer-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=FIGMA_API_KEY",
        "--stdio"
      ]
    }
  }
}

そして、実装したいデザインを Figma で作成。 セクション内に仕様を書くとまとめて渡せるので良さげです。

ここからが勝負です。 先ほど作った Figma の"セクション"のパスを渡して、内容を説明してもらいます。

ページをまるまる渡したり、いきなり実装だと、勝手に解釈したものを実装しやがる（？）ので、Figma から情報が適切に受け取れているかを確認しながら進みます。

仕様が足りない場合は Figma に情報を足し、理解が悪い場合や実装が自由な場合は、ルールを設定していくイメージです。

あとはまあ、コーディング規則や Figma から実装する場合の手順を渡しつつ実装をお願いすると、いい感じに実装してくれます。 ルール周りは GitHub にこのサイトのリポジトリがあるので確認しても問題はないですが、試行錯誤しつつで都度変わっていくと思います。

まとめ

...ということで、Figma を仕様書として自ら AI に仕事を奪われていきました。

便利なのか怖いのかわかりませんが、楽しみといえば個人ゲーム作りのキツい部分が楽になったら嬉しいなと思います。