通过 MCP 将 Figma 设计实现为网站首页

在 Lovable 的结果未达预期后，作者通过 MCP 连接 Figma 和 Cursor，为字体资料库制作新首页，并对效果表示满意。

具体怎么做

作者将本地 Git 仓库同步到 GitHub，并在其免费 Pro 试用版中打开该仓库，同时连接了 Figma 的 MCP。在 Figma 开发模式下，他们选择设计板块进行构建，并复制了该页面的 URL。他们将该 URL 粘贴到简单的 Cursor 提示词中，请求生成 HTML 和 CSS 代码。Cursor 会高亮显示生成的代码，以便他们审核并保留或重新生成。

做到了什么

某个提示词生成的缩略图部分颜色、布局及按钮悬停状态都非常准确，远优于Lovable的输出。它忽略了字体和字重问题，可能是因为Rotis并非免费网络字体。仍需进一步调整。

上手要点

作者因为需要每月 17 美元的 Pro 计划才选择不使用 Claude Code；Cursor 的免费 Pro 试用版足以让用户开始使用。