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

# はじめに

もともと[社内用CSSフレームワーク](https://qiita.com/dsflon/items/d29dd967b8684acd5c2f)がありまして、これと親和性の高い汎用型デザインシステムが作ありました。

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

|settings|components|
|---|---|
|![スクリーンショット 2025-05-06 8.55.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390283/d4557066-9382-4136-bfc0-2e014402556f.png)|![スクリーンショット 2025-05-06 10.25.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390283/dae991e4-f602-49f9-ac15-893164c06dc4.png)|


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


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

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

# FlonCSS MCP
いちおう FlonCSS MCP なんて名前を付けてみました。
以下をAIエージェントに提供するよう作っています。
- 基本的な[FlonCSS](https://floncss.dsflon.net/) の設計思想、設定情報、ユーティリティクラス情報
- `@floncss:setting` と投げかけるとFlonCSSルールに基づき各種設定を行うプロンプト
- `@floncss:coding`と投げかけるとFlonCSSルールにhtml, cssを用いてコーディングを行うプロンプト
- `@floncss:refactor` と投げかけるとFlonCSSルールの観点でリファクタリングを行うプロンプト

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

# 使ってみる
## カラーパレット等の各種設定をしてもらう

### 1. Figma MCP でデザイン読み取り
https://www.figma.com/design/...
まずは上記のようなFigmaからURLを取得し、情報を取得します。

![スクリーンショット 2025-05-06 9.51.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390283/1ced158b-3e38-484d-afd4-3a19cd749540.png)

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

![スクリーンショット 2025-05-06 9.55.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390283/6f1f4fec-8680-413e-8d94-0264cce6e74d.png)

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

|color.css|font.css|
|---|---|
|![スクリーンショット 2025-05-06 9.57.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390283/eb9f5b99-304f-4698-bf0e-aa1f33133916.png)|![スクリーンショット 2025-05-06 10.39.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390283/34a95b50-3843-4154-889b-51e7d675f12b.png)|


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

### 1. Figma MCP でデザイン読み取り
同じよに Figma MCP よりデザイン情報を取得

今回は[こちら](https://www.figma.com/community/file/1460259841530177202)のfigmaに公開されているデザインテンプレートで検証しています。

![スクリーンショット 2025-05-06 11.56.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390283/a2053359-2beb-46bf-a527-e60e831f4182.png)

### 2. エージェントにコーディングしてもらう
こちらも、`@floncss:coding` と投げかけるとFlonCSSルールに基づきhtml, cssのコーディングしてくれます。
![スクリーンショット 2025-05-06 11.58.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390283/ec92e980-2282-4333-ae36-798d4877349a.png)

### 実装結果

|元デザイン|実装されたページ|
|---|---|
|![TOP.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390283/a936924e-8213-4e10-b81a-526a4e2f9243.jpeg)|![FireShot Capture 094 - AYA Design - 自由と成長のきっかけを提供し、共に新しい可能性を切り拓く - [localhost].png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390283/acb81e12-1067-435d-8834-d0f483886614.png)|

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


# おわりに

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

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

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