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

はじめに

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

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

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

FlonCSSとは

FlonCSS 公式サイト

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

インストール

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

npm install floncss

特徴

• 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フレームワークの親和性

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

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

例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

そのままです。

例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

このメリット

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

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

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フレームワークの親和性を高めるアプローチは有効なんじゃないかなぁと考えています。

参考リンク

• FlonCSS 公式サイト
• FlonCSS npm
• FlonCSS MCP npm