Back to stacks

Frontend Developer

by Jonathan S

Design-to-code workflow: Figma for design context, Playwright for testing, Vercel for deployment.

Servers in this stack

file-system
Filesystem

Read and write files on the local filesystem.

@modelcontextprotocol/server-filesystem
developer-tools
GitHub

Interact with GitHub repositories, issues, and pull requests.

@modelcontextprotocol/server-github
developer-tools
Figma

Read Figma files and access design context for development.

figma-developer-mcp
browser
Playwright

Browser automation and end-to-end testing with Playwright.

@playwright/mcp
developer-tools
Vercel

Deploy and manage Vercel projects and deployments.

Copy config

// .vscode/mcp.json
{
  "servers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem"
      ],
      "type": "stdio"
    },
    "github": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-github"
      ],
      "type": "stdio"
    },
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ],
      "type": "stdio"
    },
    "playwright": {
      "command": "npx",
      "args": [
        "-y",
        "@playwright/mcp"
      ],
      "type": "stdio"
    }
  }
}