saiffmirza/kiyas

"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** (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:
---
How It Works
**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:
| Tool | Description | Required input |
| ----------------- | --------------------------------------------------------------------------- | ----------------------------- |
| compare | Run a fresh design-vs-implementation comparison; returns reportId + summary | (figma or designImage) + (target or component) |
| get_diff_report | Fetch a stored report's HTML or JSON content | reportId |
| list_issues | List discrepancies from a stored report, optionally filtered by severity | reportId |
Reports are persisted under .kiyas/reports/ / in your project directory, so the same reportId stays valid across calls and across CLI/MCP usage.
Install
Wire it up
**Claude Code**
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.