Kiyas

AI-Powered Design Fidelity — MCP Server & CLI

"comparison" — pronounced "key-AHS"

A developer-first MCP server (also runnable as a CLI) that compares Figma designs against rendered UI components and surfaces an AI-powered semantic diff. Plugs into Claude Code, Cursor, Codex CLI, and any other MCP-compatible client.

Unlike pixel-diff tools, kiyas uses vision AI to understand _what_ is different and _why_ it matters — outputting actionable, human-readable feedback like:

• "border-radius is 8px in implementation but 12px in design"
• "spacing between title and subtitle is 16px tighter than the design"

Just describe the component by name. kiyas finds it in your codebase, screenshots it, and compares it against the Figma design.

Prefer an app over a terminal? There's also a desktop app.

Desktop App

A native macOS app for running the same comparisons point-and-click — built for designers and anyone who'd rather not touch a terminal. Pick a project, paste a Figma link (or drop in a screenshot), describe the component, and get the full report in-app. It uses the same engine and the same subscription-based auth: AI calls go through the Claude Code or Codex CLI on your machine, never an API key.

[⬇ Download the latest release](https://github.com/saiffmirza/kiyas/releases/latest) (Apple Silicon)

1. Download the .dmg, drag Kiyas to Applications.
2. Preview builds aren't notarized yet — on first launch, right-click → Open (or run xattr -dr com.apple.quarantine /Applications/Kiyas.app).
3. Sign in to Claude Code or Codex in any terminal once; the app picks it up from there.

Highlights: project sidebar with dev-server detection, capture preview + crop before comparing, built-in terminal, full dark mode, and a Liquid Glass icon on macOS 26.

To build from source instead:

git clone https://github.com/saiffmirza/kiyas && cd kiyas

npm install npm run desktop # dev mode

or package a .app/.dmg:

cd apps/desktop && npx electron-builder --mac

How It Works

                          ┌─────────────────────┐

│ kiyas │ │ (MCP server / CLI) │ │ │ │ figma / design img │ │ + target/component │ └──────────┬───────────┘ │ ┌──────────────┼──────────────┐ ▼ ▼ ▼ ┌──────────────┐ ┌───────────┐ ┌─────────────┐ │ 1. Auth │ │ 2. Design │ │ 3. Resolve │ │ │ │ Capture │ │ Component │ │ Verify │ │ │ │ │ │ Claude Code │ │ Figma API │ │ AI agent │ │ or Codex CLI │ │ PNG export│ │ searches │ │ is installed │ │ — or your │ │ codebase, │ │ & signed in │ │ own image │ │ finds URL + │ │ │ │ (--design)│ │ CSS selector│ └──────┬───────┘ └─────┬─────┘ └──────┬──────┘ │ │ │ │ ▼ ▼ │ ┌────────────┐ ┌────────────┐ │ │ Figma │ │ Playwright │ │ │ design │ │ screenshot │ │ │ (PNG) │ │ (PNG) │ │ └─────┬──────┘ └─────┬──────┘ │ │ │ │ └───────┬───────┘ │ ▼ │ ┌──────────────────────┐ └─────────►│ 4. Vision AI Compare │ │ │ │ Both images sent to │ │ Claude Code CLI with │ │ a structured prompt │ │ │ │ Returns JSON array │ │ of discrepancies │ └──────────┬───────────┘ │ ▼ ┌──────────────────────┐ │ 5. HTML Report │ │ │ │ Side-by-side images │ │ Severity badges │ │ Interactive filters │ │ HIGH / MEDIUM / LOW │ │ │ │ file:// link in │ │ terminal output │ └──────────────────────┘

Step-by-step:

1. Authenticate — kiyas delegates AI calls to the Claude Code or Codex CLI. Your existing subscription handles everything — no API keys needed.
2. Get the design image — Parses the Figma URL, calls the Figma REST API to export the frame as a PNG (at the same scale as the screenshot — adaptive, see --scale), and fetches node metadata (colors, fonts, spacing). Or skip Figma entirely: pass --design with your own design image and no Figma token is needed.
3. Resolve component — An AI agent scans your codebase (file tree, routes, components) and maps your natural-language description to a URL on your dev server + a CSS selector.
4. Screenshot implementation — Playwright launches headless Chromium, navigates to the resolved URL, and captures the component.
5. AI comparison — Both PNGs are passed to the Claude Code CLI with a structured prompt. The AI identifies every discrepancy with specific CSS properties and values.
6. Report — Results are formatted into an HTML report with side-by-side image comparison, severity badges, and interactive filters. A file link is printed to the terminal for easy access.

Use as an MCP Server

kiyas exposes its comparison engine as an MCP server over stdio. Three tools, all with Zod-typed input schemas:

Reports are persisted under .kiyas/reports/ / in your project directory, so the same reportId stays valid across calls and across CLI/MCP usage.

Install

npm install -g kiyas-cli

npx playwright install chromium

Wire it up

Claude Code

claude mcp add kiyas -- npx -y kiyas-cli@latest mcp

with a Figma token (only needed for Figma-URL comparisons):

claude mcp add kiyas -e FIGMA_ACCESS_TOKEN=figd_xxx -- npx -y kiyas-cli@latest mcp

kiyas is also listed in the official MCP Registry as io.github.saiffmirza/kiyas, so registry-aware clients can install it directly from their MCP catalog.

Cursor — edit ~/.cursor/mcp.json:

{

"mcpServers": { "kiyas": { "command": "npx", "args": ["kiyas-cli@latest", "mcp"] } } }

Codex CLI — edit ~/.codex/config.toml:

[mcp_servers.kiyas]

command = "npx" args = ["kiyas-cli@latest", "mcp"]

Staying up to date

The configs above use kiyas-cli@latest so npx picks up new releases on every launch — the tradeoff is a registry check per start, and launches can fail offline. If you'd rather pin a version (kiyas-cli@1.3.1) or use a global install, that's safe too: kiyas checks npm once at startup (non-blocking) and logs a notice to stderr when a newer version is available.

Figma access for MCP users

The compare tool needs Figma access only when you pass a figma URL. Three ways to provide it:

1. Pass your token via the server config (recommended):

claude mcp add kiyas -e FIGMA_ACCESS_TOKEN=<your-token> -- npx -y kiyas-cli@latest mcp

or in .mcp.json / mcp.json / config.toml, add an env block:

{

"mcpServers": { "kiyas": { "command": "npx", "args": ["kiyas-cli@latest", "mcp"], "env": { "FIGMA_ACCESS_TOKEN": "your-token" } } } }

2. A `.kiyasrc` file in the project root or home directory: { "figmaAccessToken": "..." }

3. No token at all — pair with the Figma MCP server. If the agent already has Figma's own MCP server connected, it can export the frame as an image itself and pass the file path (or image URL) as designImage instead of a figma URL. kiyas never touches the Figma API in this mode:

Export node 1:234 from the Figma file as a PNG, then use kiyas to compare it against the primary button on the login page.

If a figma URL is used with no token configured, the tool fails fast with these instructions rather than hanging.

Once connected, you can ask the agent things like:

Compare the Figma frame at against the primary button on the login page, then list only the high-severity issues.

The agent will call compare to produce a reportId, then list_issues with severity: "high" against that ID.

Quick Start (CLI)

Prerequisites

• Node.js 20+
• Claude Code installed and signed in (Pro, Max, or Team subscription), or Codex for OpenAI
• A Figma personal access token (generate one here) — only needed for --figma; comparing against a local screenshot with --design requires no token

Install

npm install -g kiyas-cli

npx playwright install chromium

Setup

kiyas setup

This walks you through:

1. Figma token — creates a read-only personal access token and saves it to .env
2. AI provider — checks for Claude Code or Codex and sets the default

Run

# Describe the component by name — kiyas finds it automatically

kiyas --figma "https://www.figma.com/design/abc123/Design?node-id=1:234" \ --component "eventHeader on the redemption screen"

Or provide a direct URL if you already know it

kiyas --figma "https://www.figma.com/design/abc123/Design?node-id=1:234" \ --target "http://localhost:3000/redemption" \ --selector ".event-header"

Save the report to a specific path

kiyas --figma "https://www.figma.com/design/abc123/Design?node-id=1:234" \ --component "primary button" \ --output report.html

Output as JSON (for CI pipelines)

kiyas --figma "https://www.figma.com/design/abc123/Design?node-id=1:234" \ --component "primary button" \ --format json

Compare against a design screenshot instead of Figma (no Figma token needed)

kiyas --design ./design.png \ --component "primary button" \ --output report.html

Use OpenAI instead of Claude

kiyas --figma "https://www.figma.com/design/abc123/Design?node-id=1:234" \ --component "nav bar" \ --model openai

CLI Reference

| Flag | Description