mcp

This MCP server provides three core capabilities for D-ZERO frontend development: retrieving data from Figma files and nodes, delivering coding guidelines used by D-ZERO frontend teams, and integrating with CLINE to support AI-assisted conversations. When running the server via the configured MCP entry (coding_guidelines), you can ask the AI assistant to fetch Figma design data, reference design tokens and node properties, and consult the D-ZERO coding guidelines during conversations. The CLINE integration allows you to engage with an AI assistant that can interpret Figma structures and provide guidance aligned with your development standards.

To use these tools, start the MCP server through the configured command (for example using npx to run @d-zero/mcp-server). Once running, CLINE can connect to the MCP server as an MCP provider under the Installed tab in the MCP Servers list. Provide the required Figma access token (FIGMA_ACCESS_TOKEN) to authorize data retrieval, and make sure the token has access to the target Figma files. In conversations, you can request actions such as fetching a Figma file's metadata, querying node details, or retrieving coding guideline snippets to assist coding decisions.

Prerequisites:

• Node.js (recommended v14+ or as required by the MCP server package)
• npm or yarn
• A Figma API access token
• (Optional) CLINE setup if you plan to use the MCP server inside CLINE workflows

Installation steps:

1. Ensure Node.js and npm are installed. Verify:

node -v
npm -v

2. Obtain a Figma API access token from https://www.figma.com/developers/api#access-tokens and save it securely.
3. Install and run the MCP server via npx (as configured in cline_mcp_settings.json):

npx -y @d-zero/mcp-server

If you prefer to install globally or provide a full path, you can place the server under CLINE using the full command path as noted in the repository instructions.

4. Configure CLINE to use the MCP server by editing cline_mcp_settings.json (as shown in the repository README):

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

5. Create a local environment file if needed and keep the FIGMA_ACCESS_TOKEN secure, e.g. via a .env file as described in the README.

Optional: If the MCP server package cannot be executed (e.g., npx execution issues), install the package globally or provide the full path to the executable as per the referenced issue in the README.

Notes:

• FIGMA_ACCESS_TOKEN is required to access Figma data. Keep it secure and do not commit to public repos.
• If running into issues with the MCP server execution via npx, consider installing the package globally and using the full path as a workaround.
• CLINE configuration requires updating cline_mcp_settings.json under the Installed MCP Servers section; ensure the server-name matches (coding_guidelines in the example).
• You can supply a FIGMA_TEST_URL for test scenarios; store environment variables in a local .env file if preferred for convenience.
• The MCP server is designed to provide both data retrieval from Figma and access to coding guidelines, plus enabling AI-assisted conversations through CLINE.