设计转代码工具

MCP 设计到代码原型库

这个仓库提供了一个使用多个模型控制程序（MCPs）的代理驱动设计到代码的工作流框架。它旨在作为构建集成的起点，用于将设计产物转换为代码，同时协调Notion、Figma和Playwright之间的任务。

文件夹结构

• Notion/ – 存储用于基于Notion的MCP（可能是指某种自动化流程或工具）的脚本、提示和集成存根，该MCP能够从Notion页面中提取设计规范或文档。
• Figma/ – 包含通过MCP（中间通信协议）与Figma交互的代码，用于检索帧或组件，并将其转换为前端代码。
• Playwright/ – 包含一个用于自动化UI测试和生成代码验证的Playwright MCP（可能是指某种特定的配置或工具包）。

每个文件夹目前都包含一个占位符README文件，您可以在其中开始开发相应的MCP集成。

提示

定义清晰的指令，指导每个MCP（多角色协作参与者）明确其职责：从Notion中检索相关内容，将Figma设计转换为代码组件，并使用Playwright进行端到端测试。这些指令可以与脚本一起存储在相应的文件夹中。

脚本

使用此存储库来组织脚本，以自动化从设计到代码的流程。示例脚本可能包括：

• 从Notion中获取设计规范。
• 使用Figma API下载帧并生成代码存根。
• 运行 Playwright 测试以验证用户界面是否符合设计。

这些脚本可以存放在各自的集成文件夹中，或者存放在一个 scripts/ 如果在多个内容提供者（MCPs）之间共享，则为目录。

持续集成

设置一个基本的持续集成（CI）流水线（例如使用GitHub Actions），以便每次推送时运行自动化任务。典型步骤可能包括：

• 安装依赖项。
• 运行任何代码生成脚本。
• 执行 Playwright 测试。

一个占位符工作流文件（.github/workflows/ci.yml) 可以稍后添加以定义这些步骤。