HQ Pool Services Website

Test w/ Figma MCP server to generate a pool services page

Catalog onlyCatalog onlySTDIO

Overview

HQ Pool Services Website is a responsive website designed for a company that offers pool renovation, repair, and maintenance services, built based on a Figma design.

To view the website locally, clone or download the repository and open the index.html file in your web browser.

Responsive design for desktop, tablet, and mobile devices - Modern UI following Figma design specifications - Interactive elements like smooth scrolling and a testimonial slider - Contact form for quote requests - Sections for services, testimonials, and contact information

Showcasing pool services offered by HQ Pool Services
Allowing customers to request quotes through the contact form
Providing information about services and customer testimonials

Add to your AI client

Use these steps to connect HQ Pool Services Website in Cursor, Claude, VS Code, and other MCP-compatible apps. The same JSON appears in the Use with menu above for one-click copy.

Cursor

Add this to your .cursor/mcp.json file in your project root, then restart Cursor.

.cursor/mcp.json

{
  "mcpServers": {
    "pool-services-figma-mcp-test-emundot": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-pool-services-figma-mcp-test-emundot"
      ]
    }
  }
}

Claude Desktop

Add this server entry to the mcpServers object in your Claude Desktop config, then restart the app.

~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows)

{
  "mcpServers": {
    "pool-services-figma-mcp-test-emundot": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-pool-services-figma-mcp-test-emundot"
      ]
    }
  }
}

Claude Code

Add this to your project's .mcp.json file. Claude Code will detect it automatically.

.mcp.json (project root)

{
  "mcpServers": {
    "pool-services-figma-mcp-test-emundot": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-pool-services-figma-mcp-test-emundot"
      ]
    }
  }
}

VS Code (Copilot)

Add this to your .vscode/mcp.json file. Requires the GitHub Copilot extension with MCP support enabled.

.vscode/mcp.json

{
  "servers": {
    "pool-services-figma-mcp-test-emundot": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-pool-services-figma-mcp-test-emundot"
      ]
    }
  }
}

Windsurf

Add this to your Windsurf MCP config file, then restart Windsurf.

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "pool-services-figma-mcp-test-emundot": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-pool-services-figma-mcp-test-emundot"
      ]
    }
  }
}

Cline

Open Cline settings, navigate to MCP Servers, and add this server configuration.

Cline MCP Settings (via UI)

{
  "mcpServers": {
    "pool-services-figma-mcp-test-emundot": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-pool-services-figma-mcp-test-emundot"
      ]
    }
  }
}

FAQ

Is the website responsive?

Yes! The website is designed to be responsive across various devices.

How can I view the website?

You can view the website by cloning the repository and opening the `index.html` file in a web browser.

What technologies are used in this project?

The project uses HTML5, CSS3, and JavaScript for its implementation.

Developer tools