pdp_figma_2_code_mcp

pdp figma 2 code

- 1.修改版本
package.json
- 2.编译
pnpm build
- 3.发布
npm publish
- 4.更新版本
npm install -g pdp_figma_2_code_mcp@latest

//mcp路径
{
"mcpServers": {
"Framelink Figma MCP": {
"command": "npx",
"args": [
"-y",
"pdp_figma_2_code_mcp@latest",
"--techStack=kmp",
"--colorCodePath=/Users/anker/Desktop/charging_code/charging-flutter/module/base/resource/lib/res/colors/color_config.dart",
"--fontCodePath=/Users/anker/Desktop/charging_code/charging-flutter/module/base/resource/lib/res/styles.dart",
"--fileDownloadDir=/Users/anker/Desktop/charging_code/charging-flutter/module/base/business/electricity_price/lib/assets/img",
"--componentCodePath=/Users/anker/Desktop/charging_code/charging-flutter/module/base/base_service/lib/view",
"--dataEnhancement=1",
"--depth=8",
"--stdio"
]
}
}
}

测试地址
figma.com/design/IE2jalh3R75ddlpWHjhpNt/测试文档?node-id=0-1&p=f&t=30528CrqUF0fk7xm-0

{
"mcpServers": {
"Framelink Figma MCP": {
"command": "npx",
"args": [
"/Users/anker/Downloads/Figma-Context-MCP-main/dist/cli.js",
"--techStack=react",
"--fontCodePath=/Users/anker/Desktop/eufy-security-portal/src/assets/antd-reset.less",
"--depsLibPath=/Users/anker/Desktop/eufy-security-portal/package.json",
"--fileDownloadDir=/Users/anker/Desktop/eufy-security-portal/src/assets",
"--componentCodePath=/Users/anker/Desktop/eufy-security-portal/src/components",
"--dataEnhancement=1",
"--depth=8",
"--stdio"
]
}
}
}

这个prompt的核心优势：
明确响应式绝对定位策略：解决了绝对定位与响应式的冲突
提供具体的转换公式：确保坐标和尺寸的精确转换
强调样式优先级处理：解决第三方组件样式覆盖问题
完整的验证清单：确保代码质量
实用的代码模板：提供可直接使用的代码结构
使用这个prompt，AI应该能够生成既保持设计稿精确性，又具备良好响应式效果的代码。