关键词

网页样式分析CSS转换TailwindCSS前端开发工具组件代码生成

项目简介

Design Copier 是一个基于 Model Context Protocol (MCP) 实现的后端服务。它通过 MCP 协议，为 LLM (大型语言模型) 客户端提供能力，使其能够捕获指定网页或元素的样式和 HTML 内容，进行 CSS 分析，并能将样式信息转换为不同的格式，例如推荐 Tailwind CSS 类或生成 React 等框架的组件代码。

主要功能点

  • 网页内容捕获: 能够访问指定的 URL，捕获页面的完整 HTML 结构和所有相关的 CSS 样式 (包括行内样式、内嵌样式和外部样式表内容)，甚至可以针对页面中的特定元素进行捕获。
  • 样式分析与转换: 对捕获到的 CSS 样式进行解析和分析。特别是，它可以尝试将传统的 CSS 属性映射或转换为相应的 Tailwind CSS 类名，这对于前端开发者迁移或学习 Tailwind CSS 非常有用。
  • 代码生成: 基于分析或提供的样式信息，可以生成针对特定前端框架 (如 React) 的组件代码片段，例如生成 styled-components 格式的代码。
  • 工具接口: 所有功能都通过标准化的 MCP 工具（Tools）接口暴露给 LLM 客户端，LLM 可以根据用户指令调用这些工具来执行任务。

安装步骤

该服务器是使用 Node.js/TypeScript 构建的。您需要先安装 Node.js 和 npm (通常 Node.js 安装包会包含 npm)。

  1. 克隆仓库: 使用 Git 命令将项目仓库克隆到您的本地计算机。 
    git clone https://github.com/chipsxp/design-copier.git
cd design-copier
  2. 安装依赖: 进入项目目录后，使用 npm 安装所有必要的项目依赖。 
    npm install
  3. 构建项目: 首次运行或更新代码后，需要构建项目生成可执行的 JavaScript 文件。 
    npm run build
    如果您在开发过程中需要自动重新构建，可以使用 'npm run watch' 命令。

服务器配置

安装完成后，您需要将此 MCP 服务器添加到您的 MCP 客户端 (如 Claude Desktop, VS Code 的 Cline/Roo 扩展等) 的配置中。配置通常是一个 JSON 文件，您需要提供服务器的名称、启动命令和参数。

以下是配置时需要提供的信息的描述：

  • 'server name': 服务器的唯一标识符，例如设置为 'design-copier'。
  • 'command': 启动服务器进程的命令，通常是 'node'。
  • 'args': 传递给启动命令的参数列表。对于此项目，参数是构建后服务器主文件的路径。您需要将 './build/index.js' 替换为该文件在您系统中的绝对路径。例如：
    • 在 Windows 上可能类似于 '["C:\Users\您的用户名\您的文件夹\design-copier\build\index.js"]'
    • 在 macOS/Linux 上可能类似于 '["/Users/您的用户名/您的文件夹/design-copier/build/index.js"]'
  • 'transportType': 服务器与客户端通信的协议类型，此服务器使用 'stdio'。
  • 其他可选配置如 'timeout' 等可根据客户端文档设置。

请查阅您的 MCP 客户端的具体文档，了解如何编辑其配置文件并添加上述 MCP 服务器信息。

基本使用方法

一旦在 MCP 客户端中配置并成功启动 Design Copier 服务器，您的 LLM 将能够发现并调用该服务器提供的工具。您可以通过与 LLM 自然语言交互来利用这些工具的功能。

例如，您可以尝试向 LLM 发出指令：

  • “请帮我捕获 'https://example.com' 页面的所有样式和 HTML。” (可能会触发 'designcopier_snapshot' 工具)
  • “使用 Design Copier 工具，把这段 CSS [粘贴 CSS 内容] 转换为 Tailwind 类名建议。” (可能会触发 'designcopier_extract' 工具，指定 'format: "tailwind"')
  • “从我提供的样式 [粘贴样式内容]，用 Design Copier 工具生成一个名为 MyStyledButton 的 React styled-component 组件代码。” (可能会触发 'designcopier_apply' 工具，指定 'targetFramework: "react"' 和 'componentName: "MyStyledButton"')

LLM 会根据您的指令解析意图，并调用相应的 'designcopier_snapshot'、'designcopier_extract' 或 'designcopier_apply' 工具，服务器执行操作后会将结果（如捕获的 HTML/CSS、转换后的 Tailwind 类、生成的代码等）返回给 LLM，LLM 再将结果呈现给您。

信息

分类

开发者工具

访问项目