UI Prototype

UI Prototype is an MCP server that connects front-end web development environments to Figma design assets and Playwright testing utilities. Built as a prototype for modern web applications using React 19, TypeScript, and Material-UI, it provides preconfigured Model Context Protocol hooks for developer agents such as Claude Code, GitHub Copilot, and VSCode assistants. Front-end engineers, full-stack developers, and UI designers use this system to inspect Figma design files directly within their development sessions and convert design layouts into structured React components. In addition to retrieving design tokens, layouts, and icons from the official Figma MCP server endpoint, it exposes a local Playwright MCP service. This setup allows connected artificial intelligence agents to generate integration test scripts, run browser operations, and validate user workflows using the Page Object Model pattern. By linking mock API setups through Mock Service Worker, OpenAPI schema generation with Orval, and clean architecture layering, the prototype allows engineers to prototype, test, and synchronize user interfaces from design specifications to deployed code without leaving their development environment.

Category: Design, Media & Creative

Tags: figma, i18n, material-ui, react, typescript

Visit UI Prototype

How to install and configure UI Prototype

1. Clone the repository and install all required dependencies by running pnpm install in your terminal. 2. Install the necessary Playwright browser binaries by running pnpm test:e2e:install. 3. Open .mcp.json (for Claude Code) or .vscode/mcp.json (for VSCode / GitHub Copilot) and verify the figma server configuration targeting https://mcp.figma.com/mcp, supplying your Figma Personal Access Token. 4. Verify the playwright server configuration in the same JSON file using the command pnpm with arguments dlx, @playwright/mcp@latest, and --config pointing to .vscode/playwright-config.json. 5. Run pnpm msw:init to set up mock workers and launch your MCP client to access the registered servers.

What you can do with UI Prototype

• Extract design tokens, dimensions, colors, and layout structures directly from a Figma URL to automatically implement styled Material-UI React components. - Download graphical assets and interface icons directly from Figma design files into the application project directory using AI agent commands. - Generate automated Playwright end-to-end test scenarios for authentication flows and dashboard navigation using natural language prompts in coding assistants. - Execute and debug automated browser testing runs with the Page Object Model pattern through the integrated Playwright MCP connection. - Coordinate OpenAPI schema definitions with Orval and Mock Service Worker to simulate back-end API responses during interface prototyping.

Key facts

• https://github.com/nakai95/ui-prototype
• Design, Media & Creative, Developer Tools & Code Intelligence
• figma, i18n, material-ui, react, typescript

Part of MCP Servers

What can UI Prototype do?

UI Prototype provides a configured React and TypeScript application that integrates with Model Context Protocol servers. It connects AI assistants to Figma for extracting layouts, colors, and design assets, enabling automated component creation with Material-UI. It also integrates Playwright via MCP to generate and execute automated end-to-end browser tests, alongside internationalization, OpenAPI client generation, and API mocking via Mock Service Worker.

How do I configure MCP servers in UI Prototype?

Configuration is managed via .mcp.json for Claude Code or .vscode/mcp.json for VSCode. You configure the Figma MCP server by adding an HTTP entry pointing to https://mcp.figma.com/mcp along with your personal access token. The Playwright MCP server runs via pnpm dlx with the @playwright/mcp package using the configuration file located in the .vscode directory.

Which MCP clients work with UI Prototype?

UI Prototype includes predefined configuration files specifically tailored for Claude Code and VSCode with GitHub Copilot. Because it uses standard Model Context Protocol definitions over HTTP and stdio transports, other compatible MCP client environments such as Cursor or Claude Desktop can also connect by copying the server definitions from the repository configuration files.

Does UI Prototype support end-to-end testing?

Yes, UI Prototype includes Playwright for end-to-end testing. It can run in headless, UI, and debug modes, and it features an MCP server integration using the @playwright/mcp package. This enables AI assistants to inspect application pages, write test cases following the Page Object Model, and run automated browser interactions directly from development prompts.