今週のWebデザイン×AI：Figma Specs、デザインシステムのMCP対応、Spline×Claude作例（11月第1週）

2026年11月2日

今週のWebデザイン×AIは「AIエージェントにデザインルールをどう渡すか」が共通テーマでした。Figmaの新機能、デザインシステムのMCP対応、Spline×Claudeの作例、AIで動かすスクロール演出プラグインの4件を短くまとめます。

今週の注目4件

トピック	要点	誰に効くか
Figma Specs / コードレイヤー	デザイン規則をMarkdownで記述。MCPに20超のツール追加	デザインシステム運用者
デザインシステムのMCP	Carbon・PatternFlyなどがエージェント向け資料を提供	AIでUIを量産するチーム
Spline × Claude	Spline MCP経由でClaudeが3Dシーンを作る例が公開	3D表現を試したい人
MotionKit	自然言語でGSAPのスクロール演出を付けるWPプラグイン	WordPress制作者

1. Figma：デザインルールを「エージェントが読める形」に

Figmaは初のConfig India開催に合わせ、チームのデザイン言語をMarkdownで記録する「Figma Specs」を発表しました。人間にもAIエージェントにも同じルールを読ませる狙いです。報道によると、コードレイヤー機能はオープンベータになり、MCP経由で使えるツールが20以上追加されました。Specsの提供時期、Payload（ヘッドレスCMS）とFigma Makeの連携時期は、記事では明示されていません。

ポイント：生成AIの出力がブランドからズレる問題を、プロンプトではなく「仕様書」で抑える方向です。
実務メモ：自社でもDESIGN.mdのようなMarkdown仕様を用意しておくと、ツールが変わっても使い回せます。

2. デザインシステムが「エージェント向け窓口」を持ち始めた

Supernovaが10月26日に再点検した記事では、IBMのCarbonに「Carbon MCP」があり、コンポーネント・トークン・アイコン・コード例へAIクライアントをつなげられると紹介されています。PatternFlyやSAP向けにもMCPサーバーがあります。AIラベルや「AIの元出力に戻す」ボタンなど、AI機能そのもののUI指針も整理されています。

ポイント：AIが書くUIの品質は、使うデザインシステムがエージェントに読めるかで変わります。

3. Spline × Claude：3D作例が出てきた

Splineの公式発信で、Spline MCPとClaudeで作った3Dアニメーションのドローンが紹介されました。比較記事では、Splineは状態とイベントを付けてクリックやスクロールに反応させられる3Dツールとして、Rive（CLIでClaude Code等から.rivを編集可能）と対比されています。2Dの動きならRive、奥行きが要るならSplineという使い分けです。

4. MotionKit：自然言語でスクロール演出

WordPress向けのMotionKitは、「見出しをスクロールでフェードアップ」のような指示でGSAPアニメーションを作る仕組みを説明しています。作られるのは通常のGSAPアニメーションで、タイムラインから手動調整できます。ScrollTriggerの固定セクションや横スクロールにも対応とのことです。