Jhony MCP Server: Streamlined Design Token Extraction for AI Applications

Overview: What is Jhony MCP Server?

Jhony MCP Server is an advanced server infrastructure powered by Model Context Protocol (MCP) designed to extract and process design tokens from Figma designs, enabling seamless integration with popular development frameworks like Flutter and React. This server acts as a universal adapter, allowing AI applications such as Claude Desktop, Continue, Cursor, and others to connect to specific data sources through a standardized set of protocols.

🔧 Core Features & MCP Capabilities

Jhony MCP Server offers developers an extensive range of features tailored for design and development workflows. Key among them are:

• Figma Design Token Extraction: Automatically analyzes designs from Figma and extracts essential tokens like colors, typography, spacing, borders, and shadows.
• JSON Structure Generation: Produces a well-structured JSON file that adheres to industry best practices, making it easier for developers to integrate into their applications.
• Multi-Theme Support: Supports both light and dark themes, accommodating different user preferences and environment requirements.
• Platform-Specific Configurations: Provides configurations for web (CSS/SCSS), iOS (SwiftUI), and Android (Jetpack Compose).
• Integrated Documentation: Includes comprehensive metadata and descriptions to aid developers in understanding and using the design tokens effectively.

⚙️ MCP Architecture & Protocol Implementation

The architecture of Jhony MCP Server is built around the Model Context Protocol (MCP). MCP ensures a consistent protocol for interacting with various AI tools and services, making integration more reliable and robust. The server leverages the standardization provided by MCP to facilitate seamless interaction between the AI application clients and the Figma design data.

MCP Protocol Flow Diagram

graph TD
    A[AI Application] -->|MCP Client| B[MCP Protocol]
    B --> C[MCP Server]
    C --> D[Data Source/Tool]
    style A fill:#e1f5fe
    style C fill:#f3e5f5
    style D fill:#e8f5e8

MCP Client Compatibility Matrix

MCP Client	Resources	Tools	Prompts	Status
Claude Desktop	✅	✅	✅	Full Support
Continue	✅	✅	✅	Full Support
Cursor	❌	✅	❌	Tools Only

🚀 Getting Started with Installation

Seeding the Server via Smithery

For an easy setup, you can deploy Jhony MCP Server through Smithery. This method ensures that your development environment is fully configured with all necessary dependencies.

npx -y @smithery/cli install @joao-loker/jhony-mcp --client claude

Quick Installation from GitHub

Running the server directly from GitHub is an efficient alternative for immediate setup without cloning.

npx --yes git+https://github.com/joao-loker/jhony-mcp.git --env FIGMA_API_KEY=sua-chave-de-api

💡 Key Use Cases in AI Workflows

Design Token Extraction Workflow for Figma-Based Projects

1. Design Phase (Figma): Create and curate your designs using Figma, following a structured design system.
2. Extract Tokens (Jhony MCP Server): Utilize the Jhony server to extract tokens from these designs.
3. Integrate Tokens (AI Application): Use the extracted tokens in your AI application for improved consistency and maintainability.

Dynamic Theme Switching for User-Centric Applications

1. Theme Customization: Define themes using the JSON structure generated by Jhony MCP Server.
2. Dynamic Rendering: Implement dynamic switching between light and dark modes based on user preferences, ensuring a consistent visual experience across different environments.

🔌 Integration with MCP Clients

Integrating Jhony MCP Server with AI applications like Claude Desktop or Continue is straightforward. These clients leverage the standardized protocol provided by MCP to interact seamlessly with your setup:

Sample Configuration Code

{
  "mcpServers": {
    "[server-name]": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-[name]"],
      "env": {
        "API_KEY": "your-api-key"
      }
    }
  }
}

📊 Performance & Compatibility Matrix

Jhony MCP Server is designed to work with various AI applications through the MCP protocol, ensuring compatibility and ease of use. The server supports multiple themes, platform-specific configurations, and detailed documentation for developers.

Example Integration Scenario

Imagine you are building a cross-platform application that requires a dynamic theme system. Jhony MCP Server can extract Figma design tokens which are then seamlessly integrated into your application using the provided JSON structure. This ensures both consistency in design and ease of maintenance, especially when making updates or adjustments to your designs.

🛠️ Advanced Configuration & Security

Jhony MCP Server includes advanced security measures and configuration options to safeguard data integrity and ensure smooth operations:

• Data Access Control: Implement access control mechanisms to restrict unauthorized access to extracted tokens.
• API Management: Manage API keys securely, ensuring they are protected from misuse or unintended leaks.

Sample Code for Secure Configuration

{
  "serverConfig": {
    "apiKeys": [
      {
        "name": "designTokens",
        "hash": "a1b2c3d4e5f6g7h8",
        "permissions": ["read", "write"]
      }
    ],
    "environmentVariables": [
      {
        "key": "FIGMA_API_KEY",
        "value": "sua-chave-de-api-secreta"
      }
    ]
  }
}

❓ Frequently Asked Questions (FAQ)

How do I start the server?

To start Jhony MCP Server, you can run the following command:

npx -y @joao-loker/jhony-mcp

Ensure Node.js version is v18.0.0 or above and all dependencies are installed correctly.

Can I integrate Jhony MCP with other AI tools?

Yes, Jhony MCP Server supports integration with multiple AI clients including Claude Desktop and Continue.

How do I handle errors during design token extraction?

Errors can often be traced back to misconfigurations in the .env file or issues with Figma access. Ensure your environment variables are correctly set up and that you have the necessary permissions on Figma.

👨‍💻 Development & Contribution Guidelines

Contributions to Jhony MCP Server are encouraged for developers looking to enhance the platform's functionality and usability. Contributions should follow established guidelines:

• Fork the repository
• Create a branch with descriptive naming
• Commit changes with detailed descriptions
• Submit pull requests for review

🌐 MCP Ecosystem & Resources

Explore other tools, servers, and resources within the broader Model Context Protocol ecosystem to discover additional capabilities and integrations.

Resources

• Figma API
• Model Context Protocol
• Style Dictionary

By incorporating Jhony MCP Server into your development workflow, you can streamline design token extraction and application integration, leading to more efficient and consistent AI-driven applications.