The idea is to verify if the features created by the coding agent are correct. The strategy is to leverage the Playwright MCP tool and the Figma MCP tool to get data so the agent can reason if the generated feature matches the designs/requirements.

👉 Bitovi can help you integrate this into your own SDLC workflow: AI for Software Teams

1. Configuration

To give your agent the right tools for the job, we need to configure 3 MCP services: Playwright, Figma, and Atlassian.

Playwright

Right now, I’m running the Playwright MCP package with npx. This way, we don’t need to download and install it. It downloads and runs it in memory only.

"playwright": {
    "command": "npx",
    "args": [
        "@playwright/mcp@latest"
    ],
    "type": "stdio"
}

We can also run it through the terminal with:

npx @playwright/mcp@latest --port 8931

Figma

To make it work correctly, the Figma app needs to be installed.

"figma": {
    "type": "http",
    "url": "http://127.0.0.1:3845/mcp"
}

Atlassian (Jira):

Gives the ability to fetch the ticket content.

"atlassian": {
    "url": "https://mcp.atlassian.com/v1/sse"
}

2. Building and QA with Playwright

This is where we come up with strategies on how to make the agent test the feature.

Idea 1:

Make the coding agent generate the feature (testing PLAY-34).
Get a snapshot of the feature from Figma MCP (can we specify the image dimensions?).
Get a snapshot from the created feature with Playwright MCP of the running feature (can we specify the image dimensions?)
Let the agent compare both images.

Results:

I tried using this prompt to get the images from Jira MCP. The agent said it was able to get the images but could not save them locally.
Take screenshots of the figma designs linked on the jira ticket https://bitovi.atlassian.net/browse/PLAY-23 and save it locally.I only care for saved images, don't do readmes.
No luck with saving the design images locally. Created a post on the Figma community asking for help: Help making Jira MCP save images on filesystem | Figma Forum
The agent was able to use Playwright MCP to open the running local project and take screenshots of the generated features.
Playwright was able to resize the browser to what I specified { width: 1024, height: 768 }. This will help us get the exact size of the generated feature.
Claude gave @Ali Shouman a Python script to download images from Figma
Skipping this approach for now.

Idea 2:

Make the coding agent generate the feature (testing PLAY-34).
Get the HTML of the feature from Figma MCP.
Get the HTML from the created feature with Playwright MCP of the running feature.
Let the agent compare both HTMLs

Results:

Tried to get the CSS + HTML code from Figma:
Get the HTML+CSS code of the figma designs linked on the jira ticket https://bitovi.atlassian.net/browse/PLAY-34 and save it locally under the .figma-mcp folder. Only use the result of the FIGMA MCP. DO NOT MASSAGE THE DATA OR CREATE YOUR OWN CODE.
Had a hard time getting Figma MCP to get the data.
It gets the correct data (via get_metadata)
…

Impromptu 1:

Generic prompt for building and testing:

With the feature built and a screenshot from playwright: asked the copilot agent to directly review a design with this prompt: What do you understand by just looking in the figma designs linked https://www.figma.com/design/TvHxpQ3z4Zq5JWOVUkgLlU/Tasks-Search-and-Filter?node-id=17-1623&t=s7QRYnMBmS2VTfT9-4

This was the result:

Used get_metadata to return structural information about the design file in the form of HTML tags. It takes the nodeId as a parameter, and it is able to get only the node linked to the design.

Then, after adding a screenshot of the built feature to the context, I asked Can you check if this images matches the design?

It used the image from the left as context and got the get_metadata from Figma regarding the design from the right. Note that the design points to a section of the feature, while the screenshots are from the full screen, which includes the sidebar.

Built feature

Figma design

Impromptu 2:

You are working on ticket PLAY-34.

1. Open the repository: bitovi/ai-enablement-prompts.
2. Execute the prompt in writing-code/generate-feature/generate-feature.md to generate the feature code.
3. Use Playwright to launch the built feature and extract its metadata (DOM structure, attributes, styles, etc.).
4. Use the Figma MCP to fetch the corresponding design metadata for this feature.
5. Compare the metadata from Figma with the metadata from Playwright.
6. Identify and clearly describe any mismatches between the design and the built feature (missing elements, style differences, layout inconsistencies, etc.).

Make sure your output includes:

A summary of what matches.

A list of what does not match, with details.

With this prompt, the Copilot (Gemini 2.5 Pro) was not able to get the Figma information with Figma MCP. Only 1 out of 9 Figma MCP tool calls worked.

Working mcp call (get_code):

Erroring mcp call (get_code):

This was a total disaster. Without data from the designs, the agent just said he “reviewed” the Jira ticket and assumed the implementation was correct.

Impromptu 3:

With the results of the generated feature from before, I tested with this prompt (added my credentials to log in so Playwright could skip the register step it was doing on other tests):

The feature from jira ticket PLAY-34 was already built. Relevant links are inside the ticket.
Use email "vitor@bitovi.com" and password as "password".
Use Playwright to launch the built feature and extract its metadata (DOM structure, attributes, styles, etc.).
Use the Figma MCP to fetch the corresponding design metadata for this feature.
Compare the metadata from Figma with the metadata from Playwright.
Identify and clearly describe any mismatches between the design and the built feature (missing elements, style differences, layout inconsistencies, etc.).

This was more successful than previous iterations, as the Figma MCP tool didn’t error out. The chat JSON:

It basically got the Jira Ticket data, the data from the running application data with Playwright, and the Figma data with get_metadata, and reasoned on top of it.

The mismatches, it said, it found for the first part:

Missing "Clear" Icon in Search Bar:
- Observation: The Figma design and the Jira ticket's acceptance criteria specify a "clear" icon on the right side of the search bar to clear the input. This icon is missing in the current implementation.
- Severity: Minor. This is a quality-of-life feature that is nice to have.

PARTIALLY WRONG: The clear icon shows up in the build feature when the input is not empty.

Project	Figma
Build Feature	Design

Status and Priority Styling:
- Observation: In the Figma design, the "Status" and "Priority" for each task are displayed within colored badges to make them easily distinguishable. In the implementation, they are plain text.
- Severity: Medium. The colored badges are a key part of the design and improve the user's ability to quickly scan the task list.

PARTIALLY WRONG: First, these tags were not part of the ticket. Second, it doesn’t look like different badge colors were part of the designs.

Project	Figma

Search Bar Placeholder Text:
- Observation: The placeholder text in the implemented search bar is "Search tasks...", while in one of the Figma mockups, it is "Add vide".
- Severity: Trivial. "Search tasks..." is a more appropriate placeholder text. The Figma design likely has a typo.

WRONG: The Figma placeholder it mentions was just an example; in other screens of the Figma design, it shows the correct placeholder "Search tasks...".

Project	Figma

For the second part, it tries to validate the dropdown:

Mismatch 1: "In Progress" Status Capitalization

Observation: In the filter dropdown, the status option for "In Progress" is capitalized differently between the application and the Figma design.
Application (from Playwright): The status is labeled as "In Progress".
Figma Design: The status is labeled as "In progress".
Impact: This is a minor UI inconsistency, but it deviates from the design specification.

WRONG: Both Figma and built feature have the same word capitalization.

Project	Figma

Mismatch 2: Missing "Clear" Icon in Search Bar

Observation: The Jira ticket and the Figma design specify a "clear" icon on the right side of the search bar to clear the input text. This icon is missing in the current implementation.
Application (from Playwright): The search bar component does not contain a "clear" icon.
Figma Design: The design for the search bar clearly includes an "X" icon, which is intended to function as the "clear" button.
Impact: This is a missing feature that was specified in the acceptance criteria. It affects the user experience, as there is no quick way to clear the search input.

PARTIALLY WRONG: Again, it mentions the clear icon that it already mentioned previously.

Things it missed that I thought were important:

Tags for status and priority don’t have different variants on designs, but the implementations have them. (This is not part of the ticket)
Filter dropdown select style is off on the implemented version.
The filter button, on the side of the search bar, doesn’t match the design.
Search input style and icons are slightly off.
In the design, the clear “X” icon inside the input shows up even when there is no input string (I feel like the build feature is correct, and the design is wrong).
…

Project	Figma

Impromptu 4 (only images):

With the features built on the previous steps:

The feature from Jira ticket PLAY-34 is already built. Relevant links are inside the ticket.
Use the credentials:
Email: vitor@bitovi.com
Password: password

Steps:
1. Use Playwright with the browser_take_screenshot tool from the Playwright MCP to launch the built feature and capture screenshots.
2. Use the Figma MCP with the get_image tool to fetch the corresponding design images for this feature. If saving locally is not possible, keep the images in the chat context.
3. Compare the built feature screenshots with the Figma design images.
4. Clearly describe any mismatches, including missing elements, styling differences, or layout inconsistencies.

You don't need to show the images in the chat, I only care about the results.

Did a lot of calls in sequence to get the necessary data.

Summary of Mismatches:

Missing Clear Icon: The "clear" icon for the search bar is not present. PARTIALLY WRONG: As in previous iterations, the clear exists when the input is filled.
Filter Dropdown Not Implemented: The filter functionality, including the dropdown with "Status" and "Priority" options, is completely missing. The filter button is present but has no action associated with it. WRONG: The filter functionality exists, but the agent did not try to open it with the Playwright MCP tool to take the screenshot.

I noticed it did not try to open the filter functionality and take the screenshot, so I asked again in the same context:

You haven’t opened the filter feature and captured a screenshot in the implemented project yet. Could you try doing that and redoing your results?

These are the images the agent used for reasoning (the Figma ones I got from downloading directly from the chat):

Project	Figma

Summary of Mismatches:

Missing Clear Icon: The "clear" icon for the search bar is not present. PARTIALLY WRONG: as before, the clear icon only shows up when the input is filled.

There are differences inside the dropdown. Are you able to indentify any?

Action Items (for the next person):

Ask the agent to fill the app with data that matches the designs. The agent often confuses itself by reasoning on data instead of features.
Prompting might need to be stricter and instruct the tool to attempt to get the app into a state that more closely matches the Figma designs (e.g., opening dialogues, typing in input boxes) before comparison. For example, in the last test, the agent did not automatically open the filter dropdown to take a screenshot with Plawright MCP, requiring an additional prompt.
It was also suggested to tell the agent to be very strict about its output, prioritizing differences like missing functionality, major style differences, and then subtle discrepancies.

References:

Playwright MCP official community videos: MCP Videos | Playwright
Playwright MCP package: GitHub - microsoft/playwright-mcp: Playwright MCP server