Use This MCP server To

Fetch Figma file and node data via API for design reference Provide D-ZERO frontend coding guidelines to developers Integrate with CLINE MCP client for AI assistant conversations Enable real-time design and coding standard lookups during development Support frontend developers with contextual design and code rules Automate retrieval of design specs from Figma within development tools

README

ディーゼロ開発環境用 MCPサーバー

D-ZEROフロントエンド開発環境用のModel Context Protocol（MCP）サーバーです。以下の機能を提供します：

Figmaデータの取得: FigmaファイルやノードのデータをAPIを通じて取得
コーディングガイドラインの提供: D-ZEROのフロントエンド開発規約の提供
CLINEとの統合: CLINEのMCPサーバーとして動作し、AIアシスタントとの対話をサポート

このサーバーを使用することで、開発者はFigmaデザインの参照やコーディング規約の確認をAIアシスタントとの会話を通じて行うことができます。

`cline_mcp_settings.json`

CLINEの「MCP Servers」設定から、「Installed」タブを選択し、Configure MCP Serversでcline_mcp_settings.jsonファイルを編集します。

{
	"mcpServers": {
		"coding_guidelines": {
			"command": "npx",
			"args": ["-y", "@d-zero/mcp-server"],
			"env": {
				"FIGMA_ACCESS_TOKEN": "abcd_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
			},
			"disabled": false,
			"autoApprove": []
		}
	}
}

@d-zero/mcp-serverパッケージの実行に失敗する場合は、グローバルにインストールしてフルパスを指定してください（参考Issue）。

Figmaのアクセストークンは https://www.figma.com/developers/api#access-tokens から取得してください。

Contribution

このMCPサーバー自体の開発には.envファイルが必要です。

# Figma API設定
FIGMA_ACCESS_TOKEN=abcd_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

# テスト用のFigma URL
FIGMA_TEST_URL=https://www.figma.com/file/abcdef123456/FileName

mcp-server FAQ

How do I configure the mcp-server with CLINE?

Edit the cline_mcp_settings.json file under MCP Servers, specifying the command to run @d-zero/mcp-server and set the FIGMA_ACCESS_TOKEN environment variable.

Where do I get the Figma access token required by the mcp-server?

Obtain the token from Figma's developer portal at https://www.figma.com/developers/api#access-tokens.

What happens if the @d-zero/mcp-server package fails to run?

Try installing it globally and specify the full path to the executable as a workaround.

Does the mcp-server support integration with AI models like OpenAI, Claude, or Gemini?

Yes, it integrates with MCP clients like CLINE that can connect to OpenAI, Claude, Gemini, and other LLM providers.

Is there any special setup needed for development of the mcp-server itself?

Yes, a .env file with the FIGMA_ACCESS_TOKEN is required for local development and testing.

Can the mcp-server provide coding guidelines dynamically?

Yes, it serves D-ZERO frontend coding standards to developers on demand via the MCP protocol.

How does the mcp-server enhance developer workflows?

By enabling AI assistants to fetch design data and coding rules in real time, it reduces context switching and manual lookups.