@zeplin/mcp-server 0.2.0 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +28 -57
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,8 +1,6 @@
1
1
  # Zeplin MCP Server for AI-Assisted UI Implementation
2
2
 
3
- This project implements a Model Context Protocol (MCP) server designed to assist developers in implementing UI screens and components directly from Zeplin designs. By providing Zeplin shortlinks (e.g., `https://zpl.io/...`) in your prompts to AI agents, this server fetches the necessary design specifications and asset details, enabling the models to generate corresponding code for your target framework.
4
-
5
- The primary goal is to streamline the developer workflow by bridging the gap between design specifications in Zeplin and actual code implementation.
3
+ This project is a Model Context Protocol server designed to assist developers in implementing UI screens and components directly from Zeplin designs. By providing Zeplin shortlinks (e.g., `https://zpl.io/...`) in your prompts to AI agents, this server fetches the necessary design specifications and asset details, enabling the models to generate corresponding code for your target framework.
6
4
 
7
5
  ## Table of Contents
8
6
 
@@ -31,35 +29,31 @@ The primary goal is to streamline the developer workflow by bridging the gap bet
31
29
 
32
30
  ## Installation
33
31
 
34
- 1. **Clone the repository:**
35
- ```bash
36
- git clone https://github.com/zeplin/zeplin-mcp.git
37
- ```
38
-
39
- 2. **Install dependencies:**
40
- Using npm:
41
- ```bash
42
- npm install
43
- ```
44
-
45
- 3. **Build the project:**
46
- The TypeScript code needs to be compiled to JavaScript. Assuming you have a build script in your `package.json` (e.g., `tsc` or `esbuild`):
47
- ```bash
48
- npm run build
49
- ```
32
+ ### One click cursor install
50
33
 
51
- This will typically create a `dist` directory with the compiled JavaScript files (e.g., `dist/index.js`).
34
+ [![Install MCP Server](https://cursor.com/deeplink/mcp-install-dark.svg)](https://cursor.com/install-mcp?name=zeplin-mcp&config=eyJjb21tYW5kIjoibnB4IC15IEB6ZXBsaW4vbWNwLXNlcnZlckBsYXRlc3QiLCJlbnYiOnsiWkVQTElOX0FDQ0VTU19UT0tFTiI6IiJ9fQ%3D%3D)
52
35
 
53
- ## Configuration
36
+ ### Manual installation
54
37
 
55
- Create a `.env` file in the root directory of the project with the following content:
38
+ To integrate this server with an MCP client, you need to configure the client to connect to this server. Add the following to Cursor's `settings.json` (accessible via `Cmd/Ctrl + Shift + P` -> "Configure Language Specific Settings..." -> "JSON") or a similar configuration file for MCP providers:
56
39
 
57
- ```bash
58
- ZEPLIN_ACCESS_TOKEN=your_zeplin_personal_access_token
40
+ ```jsonc
41
+ // In your MCP client's configuration (e.g., Cursor's settings.json)
42
+ {
43
+ "mcpServers": {
44
+ "zeplin-mcp": {
45
+ "command": "npx",
46
+ "args": [
47
+ "@zeplin/mcp-server@latest"
48
+ ],
49
+ "env": {
50
+ "ZEPLIN_ACCESS_TOKEN": "<YOUR_ZEPLIN_PERSONAL_ACCESS_TOKEN>" // Replace with your actual token
51
+ }
52
+ }
53
+ }
54
+ }
59
55
  ```
60
56
 
61
- Replace `your_zeplin_personal_access_token` with your actual Zeplin Personal Access Token.
62
-
63
57
  ## Development
64
58
 
65
59
  This project includes several npm scripts to help you with development:
@@ -81,6 +75,14 @@ npm run lint:fix
81
75
  npm run inspect
82
76
  ```
83
77
 
78
+ For debugging purposes if you want to run `npm run inspect` create a `.env` file in the root directory of the project with the following content:
79
+
80
+ ```bash
81
+ ZEPLIN_ACCESS_TOKEN=your_zeplin_personal_access_token
82
+ ```
83
+
84
+ Replace `your_zeplin_personal_access_token` with your actual Zeplin Personal Access Token.
85
+
84
86
  ### Code Style and Linting
85
87
 
86
88
  This project uses ESLint to enforce code quality and consistency. The configuration is in `eslint.config.js`. Key style guidelines include:
@@ -93,35 +95,6 @@ This project uses ESLint to enforce code quality and consistency. The configurat
93
95
 
94
96
  When contributing to this project, please ensure your code follows these guidelines by running `npm run lint:fix` before submitting changes.
95
97
 
96
- ## Usage with MCP Clients (e.g., Cursor)
97
-
98
- To integrate this server with an MCP client like Cursor, you need to configure the client to connect to this server. Add the following to Cursor's `settings.json` (accessible via `Cmd/Ctrl + Shift + P` -> "Configure Language Specific Settings..." -> "JSON") or a similar configuration file for MCP providers:
99
-
100
- ```jsonc
101
- // In your MCP client's configuration (e.g., Cursor's settings.json)
102
- {
103
- // ... other configurations
104
- "mcpServers": {
105
- // ... other providers
106
- "zeplin-mcp": {
107
- "command": "node",
108
- "args": [
109
- "/path/to/your/zeplin-mcp/dist/index.js" // IMPORTANT: Update this path
110
- ],
111
- "env": {
112
- "ZEPLIN_ACCESS_TOKEN": "<YOUR_ZEPLIN_PERSONAL_ACCESS_TOKEN>" // IMPORTANT: Replace with your actual token
113
- }
114
- }
115
- // ...
116
- }
117
- // ...
118
- }
119
- ```
120
-
121
- **Important:**
122
- * Replace `"/path/to/your/zeplin-mcp/dist/index.js"` with the **absolute path** to the compiled `index.js` file in your `zeplin-mcp` project directory.
123
- * Replace `<YOUR_ZEPLIN_PERSONAL_ACCESS_TOKEN>` with your actual Zeplin PAT.
124
-
125
98
  ## Crafting Effective Prompts
126
99
 
127
100
  The quality and specificity of your prompts significantly impact the AI's ability to generate accurate and useful code. These are not mandatory but will increase the output quality. Here are some examples to guide you:
@@ -170,8 +143,6 @@ Now, using the components you just implemented (and any other existing component
170
143
  * **Builds on previous work:** The AI can use the components it just created.
171
144
  * **Clear Zeplin references:** Ensures each piece is based on the correct design.
172
145
 
173
-
174
-
175
146
  ### Strategies to deal with context window limitations
176
147
 
177
148
  When dealing with complex Zeplin screens or components with many variants and layers, the amount of design data fetched can sometimes be extensive. This can potentially exceed the context window limitations of the AI model you are using, leading to truncated information or less effective code generation. Here are several strategies to manage the amount of information sent to the model:
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zeplin/mcp-server",
3
- "version": "0.2.0",
3
+ "version": "1.0.1",
4
4
  "description": "An MCP server for Zeplin for AI assisted UI development.",
5
5
  "author": "Zeplin",
6
6
  "license": "MIT",