Frontend developer

Tools that turn designs into code, make it look good, and check it in a real browser.

Picked by hand, reviewed 2026-10-19. Stars and status update every 4 hours.

1. 01Turn Figma designs into code

   MCP server

   Figma Context MCP

   Gives the agent the layout and styles of a Figma frame, so the code matches the design.

   16k

   Add to Claude Code

   claude mcp add figma -- npx -y figma-developer-mcp --figma-api-key=YOUR-KEY --stdio

2. 02Make the UI look designed

   Skill

   frontend-design

   Anthropic's own skill for distinctive, production grade interfaces instead of generic layouts.

   182k+332 this week

   Install for Claude Code

   npx degit anthropics/skills/skills/frontend-design ~/.claude/skills/frontend-design

3. 03Test in a real browser

   MCP server

   Playwright MCP

   From Microsoft. The agent clicks through your app and checks what actually renders.

   38k+74 this week

   Add to Claude Code

   claude mcp add playwright npx @playwright/mcp@latest

4. 04Debug performance and console errors

   MCP server

   Chrome DevTools MCP

   From the Chrome team. Network, console and performance traces, read by the agent.

   54k+103 this week

   Add to Claude Code

   claude mcp add chrome-devtools -- npx -y chrome-devtools-mcp@latest

5. 05The coding agent itself

   Agent

   Claude Code

   Runs every tool above from one terminal.

   152k+833 this week

   Install

   curl -fsSL https://claude.ai/install.sh | bash

Other kits: Game developer, Product manager