社内CSSフレームワークとデザインシステムをMCPサーバー化してコーディングをできる限りサボりたい

はじめに

もともと社内用CSSフレームワークがありまして、これと親和性の高い汎用型デザインシステムが作ありました。

このフレームワークは以下のような特徴を持っています。

• 様々なプロジェクトに対応可能な汎用性のある最小限デザインシステム
• カラーパレットやフォントなど各種変数はデザインシステムとCSSフレームワークで共通言語になっていて、デザインと実装の連携◎
• コンポーネントの粒度も共通になっており、デザインと実装の連携◎

settings	components

これらの知識をMCPサーバー化してコーディングをできる限りサボりたいという話です。
社内用なのと、とりあえず勉強もかねて作ってみたくらいではあります。🫣

現状の課題

「デザインと実装の連携◎」とはいえ様々なプロジェクトで初期設定を毎度手動で行うのは面倒だし、なにより基本的なコーディングに工数をかけたくない（レビューも含め）。🤮
また、デザインシステム用いたデザインは figma で行いますが、文字量が多いページでは誤字脱字コピペミスなども未だに起こるのでなんとかしたい。

MCP を知る

そんな中 MCP（Model Context Protocol）なるものを知りました。４月に入ってから関連記事が爆増していますね。
MCP サーバーは「特定のデータソースやツールへのアクセスを提供する軽量サーバ」といことで、これを活用すればデザインシステム → CSSフレームワークを用いたコーディングをいい感じにしてくれるのではないかと考えました。
さらに Figma MCP という最高にありがたいMCPの後押しもあり今回の実装にいたりました。

FlonCSS MCP

いちおう FlonCSS MCP なんて名前を付けてみました。
以下をAIエージェントに提供するよう作っています。

• 基本的なFlonCSS の設計思想、設定情報、ユーティリティクラス情報
• @floncss:setting と投げかけるとFlonCSSルールに基づき各種設定を行うプロンプト
• @floncss:codingと投げかけるとFlonCSSルールにhtml, cssを用いてコーディングを行うプロンプト
• @floncss:refactor と投げかけるとFlonCSSルールの観点でリファクタリングを行うプロンプト

※ @floncss:* はなんだかうまく動かない時がある、、課題です。

使ってみる

カラーパレット等の各種設定をしてもらう

1. Figma MCP でデザイン読み取り

https://www.figma.com/design/...
まずは上記のようなFigmaからURLを取得し、情報を取得します。

2. エージェントにコーディングしてもらう

つぎにFlonCSS MCP を呼び出し取得したデザインを元に、エージェントにコーディングしてもらいます。
なんだかうまく動くときと動かないときがあるが @floncss:setting みたいなメンションで特定の機能やプロンプト含んだ状態でを呼び出し実装を行ってもらうようにしました。

以下のように color.css や font.css など各種ファイルを更新してくれます。

color.css	font.css

コーディングをしてもらう

1. Figma MCP でデザイン読み取り

同じよに Figma MCP よりデザイン情報を取得

今回はこちらのfigmaに公開されているデザインテンプレートで検証しています。

2. エージェントにコーディングしてもらう

こちらも、@floncss:coding と投げかけるとFlonCSSルールに基づきhtml, cssのコーディングしてくれます。

実装結果

元デザイン	実装されたページ

一撃でこれ、十分すぎる！！

おわりに

ここまで FlonCSS MCP を使って「社内デザインシステム＋CSSフレームワーク」をほぼノーコーディングで動かしてみました。

• 工数削減 によってデザインチェックや UX 検証により多くの時間を割けるようになり
• ヒューマンエラー（誤字脱字やクラス名の打ち間違い）が激減
• ナレッジ共有 も「同じプロンプトを使うだけ」でメンバー間の実装ブレをなくせる

まだまだ試作段階ゆえ「メンションが効かない」「細かいスタイル調整が必要」などの課題は残っていますが、MCP 化による自動化の“伸びしろ”を十分に感じられました。