# saiffmirza/kiyas [Health: Active]

**Category:** 📂 Browser Automation  
**Repository:** https://github.com/saiffmirza/kiyas  
**GitHub Stars:** 0  
**npm Downloads (last month):** 14623580  
**Views:** 4  
**Installs:** 0  
**Upvotes:** 0  
**Directory Page:** https://allmcps.com/mcp/saiffmirza-kiyas

## Description
Design-fidelity checks for AI agents: compare a Figma frame (or any design screenshot) against the rendered implementation and get structured discrepancies with CSS properties and severity. Resolves a natural-language component description to a URL + selector in your codebase, screenshots it with Playwright, and compares via vision AI using your existing Claude Code or Codex subscription — no API keys. 90% mutation recall, zero false positives on its golden eval set. npx -y kiyas-cli mcp

## Claude Desktop Quick Installation
Install path detected from listing signals. Uses `npx` (confidence: high):

```json
"mcpServers": {
  "kiyas": {
    "command": "npx",
    "args": ["-y","electron-builder"],
    "env": {
      "FIGMA_ACCESS_TOKEN": ""
    }
  }
}
```

**Requires environment variables:** `FIGMA_ACCESS_TOKEN` — the values above are empty placeholders; fill in real credentials before running (see the repository for what each one is for).

## Documentation

## What saiffmirza/kiyas MCP server does

saiffmirza/kiyas MCP server exposes design-to-implementation comparison through an MCP server that communicates over stdio. It accepts either a Figma frame URL or a local/remote design image, plus a target component or natural-language component description. The result is a stored comparison report containing identified discrepancies and a summary.

The analysis is intended to explain visual differences rather than only mark changed pixels. Reported findings can include CSS-related details such as spacing, border radius, colors, typography, and other implementation values, along with HIGH, MEDIUM, or LOW severity. Reports include an HTML view with side-by-side images and filters, as well as structured data that MCP clients can retrieve.

## How it works

A comparison follows these stages:

1. The server checks that Claude Code or Codex CLI is installed and authenticated locally. AI requests are delegated to that CLI rather than requiring an AI API key.
2. For a Figma input, the server uses the Figma REST API to export the selected frame as a PNG and obtain design metadata. A supplied image bypasses this step.
3. An AI agent examines the project files, routes, and components to map the requested description to a URL and CSS selector.
4. Playwright launches headless Chromium, opens the resolved page, and captures the implementation.
5. The two images are sent to the CLI with a structured comparison prompt.
6. The findings are saved under `.kiyas/reports/<reportId>/` in the project directory.

The MCP interface provides `compare` for creating a report, `get_diff_report` for retrieving HTML or JSON report content, and `list_issues` for reading discrepancies with optional severity filtering. The returned report ID remains usable across MCP and CLI operations while the report exists.

## Setup and configuration

Install the npm package and the browser binary:

```bash
npm install -g kiyas-cli
npx playwright install chromium
```

A client can start the MCP process with:

```bash
npx -y kiyas-cli@latest mcp
```

Cursor configuration uses an `npx` command with `kiyas-cli@latest` and the `mcp` argument. The README also documents configuration for Claude Code and Codex CLI. Using `@latest` checks for a current npm release at startup; pinning a version is available if reproducible launches or offline behavior matter more.

Set `FIGMA_ACCESS_TOKEN` when comparisons use a Figma URL. It is not needed when `compare` receives a design image instead. The local Claude Code or Codex CLI must already be signed in so it can perform the vision analysis.

## Tools and capabilities

saiffmirza/kiyas MCP server provides three typed tools:

- `compare`: creates a new design-versus-implementation comparison from a Figma URL or design image and a target or component description.
- `get_diff_report`: returns the saved report as HTML or JSON using its report ID.
- `list_issues`: lists stored discrepancies and can filter them by severity.

The project also includes a macOS desktop application for running the same comparison flow without an MCP client. The app can accept a Figma link or image, select a project, preview and crop captures, and show the resulting report. The documented release is for Apple Silicon.

## Limitations and notes

The implementation capture depends on a locally available development server and a component that Playwright can reach. Component resolution is performed by an AI agent searching the project, so descriptions need to identify the intended component clearly.

Figma access is conditional rather than universal: only Figma-URL comparisons need the token. Image-based comparisons avoid the Figma API. AI analysis depends on an authenticated Claude Code or Codex CLI subscription, and the server does not replace those local CLI credentials with its own API key.

The `@latest` launch form can fail when offline because it checks the npm registry during startup. Reports are project-local, so callers should preserve the `.kiyas/reports` directory when they need to reuse report IDs.

_Full upstream README: https://allmcps.com/mcp/saiffmirza-kiyas/readme_