Deterministic screenshot diffing for AI coding agents. Extract design tokens, diff implementations vs reference, get CSS fix suggestions.
Setup
Choose your client, copy the config, then fill in any required environment variables.
claude mcp add one-shot-ui -- npx -y one-shot-ui~/.codex/config.toml
[mcp_servers.one-shot-ui]
command = "npx"
args = ["-y", "one-shot-ui"]
# codex mcp add one-shot-ui -- npx -y one-shot-ui~/.cursor/mcp.json
{
"mcpServers": {
"one-shot-ui": {
"command": "npx",
"args": [
"-y",
"one-shot-ui"
]
}
}
}.vscode/mcp.json
{
"servers": {
"one-shot-ui": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"one-shot-ui"
]
}
}
}~/.gemini/settings.json
{
"mcpServers": {
"one-shot-ui": {
"command": "npx",
"args": [
"-y",
"one-shot-ui"
]
}
}
}claude_desktop_config.json
{
"mcpServers": {
"one-shot-ui": {
"command": "npx",
"args": [
"-y",
"one-shot-ui"
]
}
}
}.trae/mcp.json
{
"mcpServers": {
"one-shot-ui": {
"command": "npx",
"args": [
"-y",
"one-shot-ui"
]
}
}
}