Kiyas

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:

npm install -g kiyas-cli
npx playwright install chromium

A client can start the MCP process with:

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.