Design Regression Loop

intermediate

Compare implementation against Figma, run browser checks, and open targeted UI fixes.

Architecture

Figma Context MCP

Extracts design context from target Figma nodes

88/100

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

Playwright Testing Skill

Runs viewport and interaction checks

86/100

ls /workspace

Browserbase MCP (Stagehand)

Provides repeatable hosted browser sessions

78/100

npx @browserbasehq/mcp

GitHub MCP Server

Creates focused UI tasks or PRs with evidence

88/100

npx -y @modelcontextprotocol/server-github

Expected Output

Design Regression Loop Figma nodes checked: 4 Viewports tested: desktop, mobile Regressions: 3 Evidence screenshots: 6 -> Fix PR opened with exact selectors

Related Recipes

Full-Stack Testing Suite

INTERMEDIATE

Complete testing pipeline with unit tests, E2E browser tests, and TDD workflow.

codetesting

3 components

API Development Workflow

INTERMEDIATE

Complete API lifecycle from design to testing with GraphQL support.

codeapi

3 components

Visual Technical Briefing

INTERMEDIATE

Create architecture diagrams, editable whiteboards, and browser-ready briefing decks.

docsdesigncode

4 components