@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.
- package/README.md +28 -57
- 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
|
|
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
|
-
|
|
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
|
-
|
|
34
|
+
[](https://cursor.com/install-mcp?name=zeplin-mcp&config=eyJjb21tYW5kIjoibnB4IC15IEB6ZXBsaW4vbWNwLXNlcnZlckBsYXRlc3QiLCJlbnYiOnsiWkVQTElOX0FDQ0VTU19UT0tFTiI6IiJ9fQ%3D%3D)
|
|
52
35
|
|
|
53
|
-
|
|
36
|
+
### Manual installation
|
|
54
37
|
|
|
55
|
-
|
|
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
|
-
```
|
|
58
|
-
|
|
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:
|