🎨

AI実装の精度を高めるデザインデータとコーティングのあり方を考える

に公開
AI
Figma
Model Context Protocol
デザインシステム
cssフレームワーク
tech

はじめに

クライアントワーク中心のWeb制作をしていると、デザイナーとエンジニア間のコミュニケーションコストってやっぱりまだまだあります。
また、FigmaからMCP経由で実装をしようにもデザインデータがイマイチで思うようにレイアウト、スタイリングしてくれないことが結構あります。

  • デザインカンプの色やサイズが実装時にズレる
  • デザイントークンの命名がFigmaとCSSで違う
  • ブレイクポイントやスペーシングの認識違い
  • 案件ごとにゼロから設計し直す非効率さ

これらの課題を解決するために作ったCSSフレームワーク「FlonCSS」と、デザインシステムとの連携について紹介します。

FlonCSSとは

FlonCSS 公式サイト

FlonCSSは、ITCSSベースのCSS設計思想と最小限のutility-first CSSを組み合わせたハイブリッドなフレームワークです。

スクリーンショット 2025-11-29 18.51.56.png

インストール

npmパッケージとして公開しているので、簡単に導入できます。
FlonCSS npm

npm install floncss

スクリーンショット 2025-11-29 18.52.35.png

特徴

  • ITCSSベースの階層構造（Settings → Generic → Base → Objects → Components）
  • utility-firstとコンポーネントベースのハイブリッド
  • モバイルファーストなブレイクポイント設計（@sm、@md、@lg、@xl）
  • CSS変数を中心とした設定システム

ディレクトリ構成

floncss
├── settings
│   ├── colors.css
│   ├── fonts.css
│   ├── gutters.css
│   └── ...
├── generic
├── base
├── objects
├── components
└── global.css

デザインシステムとCSSフレームワークの親和性

ここが今回一番伝えたいところです。
現状公開できないのがあれですが、。

スクリーンショット 2025-11-29 19.05.13.png

FlonCSSはデザインシステムとの親和性を意識して設計しています。カラーパレットやフォントなど各種変数はデザインシステムとCSSフレームワークで共通言語になっていて、デザインと実装の連携がスムーズになります。

変数名の1対1対応

デザインシステム側（Figma）とCSS側（FlonCSS）で、同じ命名規則を使っています。

Figma Variables FlonCSS CSS Variables 値の例
color-primary --color-primary #08435E
color-900 --color-900 #000000
color-100 --color-100 #F5F5F5
gutter/base --gutter-base 32px
font-size/2xl --font-size-2xl 64px

スクリーンショット 2025-11-29 18.53.29.png

例1: カラー設定

Figma側：

color-primary: #08435E
color-primary-light: #DFEEF4
color-900: #000000
color-700: #333333
color-500: #808080
color-100: #F5F5F5

FlonCSS側（settings/colors.css）：

:root {
  --color-primary: #08435E;
  --color-primary-light: #DFEEF4;
  --color-900: #000000;
  --color-700: #333333;
  --color-500: #808080;
  --color-100: #F5F5F5;
}
Figma Variables FlonCSS CSS Variables
スクリーンショット 2025-11-29 18.46.22.png スクリーンショット 2025-11-29 18.48.34.png

そのままです。

例2: スペーシング（Gutters / Gaps）の設定

FlonCSS側（settings/gutters.css）：

:root {
  --gutter-base: 32px;
  --gutter-2xl: 80px;
  --gutter-xl: 64px;
  --gutter-lg: 48px;
  --gutter-xs: 4px;
  --gutter-sm: 8px;
  --gutter-md: 16px;
}
Figma Variables FlonCSS CSS Variables
スクリーンショット 2025-11-29 18.55.48.png スクリーンショット 2025-11-29 18.57.02.png

このメリット

  • デザイナーが「--color-primaryを使って」と言えば、エンジニアはそのままCSS変数として使える
  • ブランドカラー変更時も1箇所の修正で全体に反映
  • 新規案件でもフレームワークを複製→変数を調整するだけでベース構築完了
  • Figmaとコードで同じ値を参照している状態（Single Source of Truth）を維持できる
  • Figmaでバリアブルを用いてデザインすることで、どの変数を使っているかが一目瞭然
    スクリーンショット 2025-11-29 18.58.48.png

要するに「デザイナーとエンジニアで同じ言葉を使える」ってことですね。

FlonCSS MCPによるAI支援開発

FlonCSS MCP npm

FlonCSSにはMCP（Model Context Protocol）サーバーも用意しています。ClaudeなどのAIツールと連携した開発が可能です。

FlonCSS MCPでできること

以下をAIエージェントに提供するよう作っています。

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

Figma MCP × FlonCSS MCPの連携

1. Figma MCPでデザインデータを取得
   └─ カラー、タイポグラフィ、スペーシングの値を抽出

2. FlonCSS MCPでsettings.cssを生成
   └─ Figmaの値をそのままCSS変数として出力

3. 実装時もFlonCSS MCPが最適なクラスを提案
   └─ 「この見出しには font:xl mb:lg@xl を使うべき」

新規案件の初期設定を、Figmaのデザインシステムから自動的にFlonCSSのsettings.cssに変換できます。セットアップ時間かなり短縮できますね。

具体的なワークフロー例

Case: コーポレートサイトリニューアル

1. デザインフェーズ

Figmaでデザインシステムを構築して、カラー、フォント、余白などの変数を定義します。この時点でFlonCSSの命名規則を意識しておくと後が楽です。

2. 設計フェーズ

FlonCSSのテンプレートをダウンロード（またはnpm install）して、settings配下のCSSファイルをFigmaの変数に合わせて調整します。

npm install floncss

3. 実装フェーズ

Objectsレイヤーでボタンやカードなどの共通UIを定義して、utility classでレスポンシブ対応します。

<section class="mt mt:lg@xl">
  <h2 class="font:xl font:2xl@xl mb:md">サービス紹介</h2>
  <p class="font:base color:700">
    私たちは、クライアントのビジネス課題を解決するための
    Webソリューションを提供しています。
  </p>
  <a href="#" class="o-button:primary mt:md">詳しく見る</a>
</section>

ユーティリティクラスの解説：

クラス 説明
mt margin-top: var(--gutter-base)
mt:lg@xl 1280px以上でmargin-top: var(--gutter-lg)
font:xl font-size: var(--font-size-xl)
font:2xl@xl 1280px以上でfont-size: var(--font-size-2xl)
mb:md margin-bottom: var(--gutter-md)
color:700 color: var(--color-700)

4. 更新・保守フェーズ

ブランドカラーの変更が必要になっても、--color-primaryを1箇所変更するだけで全体に反映。デザイナーもCSS変数名で会話できるので齟齬が起きにくいです。

導入のヒント

既存プロジェクトへの段階的導入

いきなり全面置き換えしなくても大丈夫です。

  1. まずsettingsレイヤーのCSS変数を統一
  2. 新規コンポーネントからFlonCSSの設計思想を適用
  3. 徐々にutility classを活用

チーム内への浸透

  • デザイナーにもCSS変数名を意識してもらう
  • Figmaのコンポーネント命名とFlonCSSのclass命名を揃える
  • 定期的にデザイナー・エンジニア間でトークンの同期を確認

MCPの活用

FlonCSS MCPを使えば学習コストもかなり下がります。「このレイアウトを実装したい」と生成AIに相談すれば、FlonCSSのドキュメントを参照した上で最適なアプローチを提案してくれます。

「同じプロンプトを使うだけ」でメンバー間の実装ブレをなくせるのも良いですね。

おわりに

AIに実装させるにもデザインがFigma上でいかに正確に構築されているかが重要なので、このようなデザインシステムとCSSフレームワークの親和性を高めるアプローチは有効なんじゃないかなぁと考えています。

参考リンク

Discussion