figma-mcp-cli 1.0.2
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/index.js +118 -0
- package/my-new-project/.env +1 -0
- package/my-new-project/.vscode/settings.json +13 -0
- package/package.json +22 -0
package/index.js
ADDED
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
#!/usr/bin/env node
|
|
2
|
+
|
|
3
|
+
import { program } from "commander";
|
|
4
|
+
import inquirer from "inquirer";
|
|
5
|
+
import fs from "fs";
|
|
6
|
+
import path from "path";
|
|
7
|
+
import dotenv from "dotenv";
|
|
8
|
+
import { fileURLToPath } from "url";
|
|
9
|
+
|
|
10
|
+
dotenv.config();
|
|
11
|
+
|
|
12
|
+
// 在ES模块中获取 __dirname 的等效值
|
|
13
|
+
const __filename = fileURLToPath(import.meta.url);
|
|
14
|
+
const __dirname = path.dirname(__filename);
|
|
15
|
+
|
|
16
|
+
program
|
|
17
|
+
.version("1.0.0")
|
|
18
|
+
.description(
|
|
19
|
+
"CLI Tool: Automate Figma MCP Configuration and Code Generation"
|
|
20
|
+
);
|
|
21
|
+
|
|
22
|
+
program
|
|
23
|
+
.command("init")
|
|
24
|
+
.description("Initialize Figma MCP environment in VS Code")
|
|
25
|
+
.action(async () => {
|
|
26
|
+
const answers = await inquirer.prompt([
|
|
27
|
+
{
|
|
28
|
+
type: "input",
|
|
29
|
+
name: "figmaToken",
|
|
30
|
+
message: "Please enter your Figma Personal Access Token:",
|
|
31
|
+
validate: (input) => (input ? true : "Token cannot be empty"),
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
type: "input",
|
|
35
|
+
name: "projectPath",
|
|
36
|
+
message:
|
|
37
|
+
"Please enter the VS Code project root path (or press Enter to use current directory):",
|
|
38
|
+
default: process.cwd(),
|
|
39
|
+
},
|
|
40
|
+
]);
|
|
41
|
+
|
|
42
|
+
const envContent = `FIGMA_PERSONAL_ACCESS_TOKEN="${answers.figmaToken}"`;
|
|
43
|
+
const settingsContent = JSON.stringify(
|
|
44
|
+
{
|
|
45
|
+
mcpServers: {
|
|
46
|
+
"Figma MCP": {
|
|
47
|
+
command: "npx",
|
|
48
|
+
args: [
|
|
49
|
+
"-y",
|
|
50
|
+
"figma-developer-mcp",
|
|
51
|
+
`--figma-api-key=${answers.figmaToken}`,
|
|
52
|
+
"--stdio",
|
|
53
|
+
],
|
|
54
|
+
},
|
|
55
|
+
},
|
|
56
|
+
},
|
|
57
|
+
null,
|
|
58
|
+
2
|
|
59
|
+
);
|
|
60
|
+
|
|
61
|
+
// 写入 .env 文件
|
|
62
|
+
fs.writeFileSync(path.join(answers.projectPath, ".env"), envContent);
|
|
63
|
+
console.log("✅ Created. env file at project root.");
|
|
64
|
+
|
|
65
|
+
// 确保 .vscode 目录存在
|
|
66
|
+
const vscodeDir = path.join(answers.projectPath, ".vscode");
|
|
67
|
+
if (!fs.existsSync(vscodeDir)) {
|
|
68
|
+
fs.mkdirSync(vscodeDir, { recursive: true });
|
|
69
|
+
}
|
|
70
|
+
fs.writeFileSync(path.join(vscodeDir, "settings.json"), settingsContent);
|
|
71
|
+
console.log("✅ Updated .vscode/settings.json file");
|
|
72
|
+
console.log(
|
|
73
|
+
"\n🎉 Initialization complete! Please restart VS Code, then use `figma-cli gen` to generate code."
|
|
74
|
+
);
|
|
75
|
+
});
|
|
76
|
+
|
|
77
|
+
program
|
|
78
|
+
.command("gen")
|
|
79
|
+
.description("Generate frontend code from Figma link using Copilot")
|
|
80
|
+
.action(async () => {
|
|
81
|
+
if (!process.env.FIGMA_PERSONAL_ACCESS_TOKEN) {
|
|
82
|
+
console.error(
|
|
83
|
+
"❌ Error: FIGMA_PERSONAL_ACCESS_TOKEN not found. Please run `figma-cli init` first."
|
|
84
|
+
);
|
|
85
|
+
return;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
const answers = await inquirer.prompt([
|
|
89
|
+
{
|
|
90
|
+
type: "input",
|
|
91
|
+
name: "figmaUrl",
|
|
92
|
+
message:
|
|
93
|
+
'Please paste the Figma design link (obtained via "Copy link to selection"):',
|
|
94
|
+
validate: (input) =>
|
|
95
|
+
input.includes("https://www.figma.com/file/")
|
|
96
|
+
? true
|
|
97
|
+
: "The link format seems to be incorrect.",
|
|
98
|
+
},
|
|
99
|
+
{
|
|
100
|
+
type: "list",
|
|
101
|
+
name: "framework",
|
|
102
|
+
message: "Please select the target frontend framework:",
|
|
103
|
+
choices: ["React", "Vue", "HTML/CSS", "Other"],
|
|
104
|
+
},
|
|
105
|
+
]);
|
|
106
|
+
|
|
107
|
+
console.log("\n🔄 Please follow these steps:\n");
|
|
108
|
+
console.log(
|
|
109
|
+
`1. Ensure VS Code is running and Copilot (Agent mode) is open.`
|
|
110
|
+
);
|
|
111
|
+
console.log(`2. Paste the design link into the Copilot chat:`);
|
|
112
|
+
console.log(` ${answers.figmaUrl}`);
|
|
113
|
+
console.log(
|
|
114
|
+
`3. Enter a prompt, for example: “Convert this to a ${answers.framework} component using Tailwind CSS.”`
|
|
115
|
+
);
|
|
116
|
+
});
|
|
117
|
+
|
|
118
|
+
program.parse(process.argv);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
FIGMA_PERSONAL_ACCESS_TOKEN="1111"
|
package/package.json
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "figma-mcp-cli",
|
|
3
|
+
"version": "1.0.2",
|
|
4
|
+
"description": "A CLI to automate Figma MCP setup and code generation",
|
|
5
|
+
"main": "index.js",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"test": "echo \"Error: no test specified\" && exit 1"
|
|
8
|
+
},
|
|
9
|
+
"bin": {
|
|
10
|
+
"figma-cli": "./index.js"
|
|
11
|
+
},
|
|
12
|
+
"type": "module",
|
|
13
|
+
"keywords": [],
|
|
14
|
+
"author": "",
|
|
15
|
+
"license": "ISC",
|
|
16
|
+
"dependencies": {
|
|
17
|
+
"axios": "^1.13.2",
|
|
18
|
+
"commander": "^14.0.2",
|
|
19
|
+
"dotenv": "^17.2.3",
|
|
20
|
+
"inquirer": "^13.1.0"
|
|
21
|
+
}
|
|
22
|
+
}
|