Figma设计转像素完美落地页工具

Figma MCP+反重力演示

该项目展示了使用 Figma MCP, 反重力，以及 代理配置 （技能和规则）将Figma设计转换为像素完美的登录页面。

能力

🎨 Figma MCP

通过以下方式直接与Figma的开发模式集成 figma-dev-mode-mcp-server 致：

• 获取设计上下文和属性。
• 将Figma节点映射到代码组件。
• 生成像素完美的资源和CSS。

🤖 反重力

利用高级代理编码功能：

• 计划和执行复杂的实施任务。
• 跨多个步骤管理状态和上下文。
• 自主验证和更正。

⚙️ 代理配置

通过专业技能和规则定制行为：

技能：

• database-schema-validator：确保数据库完整性。
• user-stories：生成用于测试的Gherkin验收标准。

规则：

• database-access.md：数据库交互协议（DBngin、PostgreSQL）。
• design-implementation.md：像素完美设计实施的工作流程。
• tech-stack-guide.md：Next.js、Drizzle ORM和样式的指令。

了解更多

模型上下文协议（MCP）

• MCP文件 -MCP官方规范和指南
• Figma MCP服务器指南 -Figma开发模式集成
• MCP服务器存储库 -官方MCP服务器集合

反重力和代理配置

• 谷歌反重力文档 -高级代理编码AI
• 代理技能文档 -开放代理技能标准文档
• 代理技能集 -出色的代理技能集合

原始演示上下文

Figma文件

第一步

在运行此演示之前，请确保您已经：

1. Figma桌面应用程序 -Antigravity仅适用于Figma的桌面版（不适用于网络版）
2. 在Figma中启用开发模式 -打开Figma文件并切换到开发模式（这是MCP访问设计属性所必需的）
3. 启用Figma MCP连接 -在反重力设置中配置Figma MCP服务器连接

第一提示

Review the design and make the implemenation plan for this landing page
i want it to be pixel perfect.

Features and reviews should be loaded dynamically from the database using one API call

Write user stories first, so testers can easy validate the functionality
@https://www.figma.com/design/Vz3PXmIf4wkkOmDU7vXfiK/SaaS-Landing-Page-Template---Landing-Page-Template-ready-to-export-to-HTML---Landing-page-for-SaaS--Community-?node-id=47-686&m=dev