VisualSpec

Name: VisualSpec
Author: utkarshx27

de utkarshx27versión 0.1.0i★ 0iSe ejecuta en tu computadora

Nombre en el registroio.github.utkarshx27/visualspec

Cómo instalar

What it does

Structured, constraint-aware visual generation and deterministic layout for AI agents

Connects Se ejecuta en tu computadora
Account or key Needs OPENAI_API_KEY, GEMINI_API_KEY
Category Otros

Instalación

Elige la app de IA que usas y copia la configuración.

Pasó 2/2 revisiones · Funciona en tu computadora

Primero: ¿qué IA usas?

ClaudeWeb · app · móvilChatGPTWebClaude CodeTerminalCursorEditor de códigoVS CodeEditor de códigoOtrasOtras apps

Elige tu app y los pasos aparecen abajo.

Funciona con Claude, pero hay que preparar algo antes

Necesitas una clave de VisualSpec (créala en el sitio del autor) · Instala Node.js en tu computadora primero (una sola vez) · Solo en la app de Claude para computadora (Windows o Mac), no en la web ni en el móvil

Instala Node.js
Una sola vez; sirve para todos los servidores que necesitan Node.js
Abrir la página de descarga de Node.js ↗
Hecho
Regístrate y crea una clave de VisualSpec
Abre el sitio del autor, crea una cuenta y una clave de API para el siguiente paso. Consulta precios y planes gratis en su sitio.
Cómo obtener la clave está en el README del autor, más abajo
Hecho
Abre el archivo de configuración de la app de Claude de escritorio
SettingsDeveloperEdit Config
Hecho

Pega esta configuración y guarda el archivo

{
  "mcpServers": {
    "visualspec": {
      "command": "npx",
      "args": [
        "-y",
        "@utkarshx27/visualspec"
      ],
      "env": {
        "OPENAI_API_KEY": "your-value",
        "GEMINI_API_KEY": "your-value"
      }
    }
  }
}

Pega la clave solo en el campo de la app; nunca en un chat ni se la envíes a nadie

Hecho

Cierra Claude y vuelve a abrirlo
Hecho
Pruébalo
Usa VisualSpec y dime qué puedes hacer por mí; luego muéstrame una cosa
✓ Si Claude dice que está usando VisualSpec o muestra una herramienta de VisualSpec en la respuesta, ya está conectado

Nombres de menú comprobados con la ayuda de Anthropic el 11 nov 2026 · tu pantalla puede variar un poco según la versión

ChatGPT todavía no puede conectar VisualSpec

VisualSpec se instala en tu computadora, pero ChatGPT solo conecta servidores que funcionan en la web

Lo que puedes hacer en su lugar

A · Usa una app que pueda conectar VisualSpec

Pasos para Claude →Necesitas una clave de VisualSpec (créala en el sitio del autor) · Instala Node.js en tu computadora primero (una sola vez) · Solo en la app de Claude para computadora (Windows o Mac), no en la web ni en el móvil
Pasos para Claude Code →Necesitas una clave de VisualSpec (créala en el sitio del autor) · Instala Node.js en tu computadora primero (una sola vez)
Pasos para Cursor →Necesitas una clave de VisualSpec (créala en el sitio del autor) · Instala Node.js en tu computadora primero (una sola vez)
Pasos para VS Code →Necesitas una clave de VisualSpec (créala en el sitio del autor) · Instala Node.js en tu computadora primero (una sola vez)

B · Otros en Otros que funcionan con ChatGPT

Elegidos entre los más usados de la misma categoría, solo los que se conectan con una dirección y sin clave

Hostinger✓ ChatGPT
World Monitor✓ ChatGPT
Svelte MCP✓ ChatGPT

Funciona con Claude Code, pero hay que preparar algo antes

Necesitas una clave de VisualSpec (créala en el sitio del autor) · Instala Node.js en tu computadora primero (una sola vez)

Instala Node.js
Una sola vez; sirve para todos los servidores que necesitan Node.js
Abrir la página de descarga de Node.js ↗
Hecho
Regístrate y crea una clave de VisualSpec
Abre el sitio del autor, crea una cuenta y una clave de API para el siguiente paso. Consulta precios y planes gratis en su sitio.
Cómo obtener la clave está en el README del autor, más abajo
Hecho
Abre la Terminal
Mac: pulsa Command+Espacio y escribe Terminal · Windows: abre PowerShell
Hecho
4
Pega este comando y pulsa Enter
```
claude mcp add --scope user visualspec --env OPENAI_API_KEY=your-value --env GEMINI_API_KEY=your-value -- npx -y @utkarshx27/visualspec
```
Cambia “your-value” por tu clave antes de pulsar Enter
Pega la clave solo en el campo de la app; nunca en un chat ni se la envíes a nadie
Hecho
Escribe /mcp en Claude Code
Deberías ver VisualSpec en la lista como conectado
Hecho
Pruébalo
Usa VisualSpec y dime qué puedes hacer por mí; luego muéstrame una cosa
✓ Si Claude Code dice que está usando VisualSpec o muestra una herramienta de VisualSpec en la respuesta, ya está conectado

Nombres de menú comprobados con la ayuda de Anthropic el 11 nov 2026 · tu pantalla puede variar un poco según la versión

Funciona con Cursor, pero hay que preparar algo antes

Necesitas una clave de VisualSpec (créala en el sitio del autor) · Instala Node.js en tu computadora primero (una sola vez)

Instala Node.js
Una sola vez; sirve para todos los servidores que necesitan Node.js
Abrir la página de descarga de Node.js ↗
Hecho
Regístrate y crea una clave de VisualSpec
Abre el sitio del autor, crea una cuenta y una clave de API para el siguiente paso. Consulta precios y planes gratis en su sitio.
Cómo obtener la clave está en el README del autor, más abajo
Hecho
Pulsa este botón para abrir Cursor
Abrir en Cursor
Cursor te pedirá confirmar; pulsa Install
Hecho
Escribe tu clave
En la configuración de VisualSpec, OPENAI_API_KEY, GEMINI_API_KEY está vacío; añade tu clave y guarda
Pega la clave solo en el campo de la app; nunca en un chat ni se la envíes a nadie
Hecho
Abre el chat de IA de Cursor en modo Agent
Hecho
Pruébalo
Usa VisualSpec y dime qué puedes hacer por mí; luego muéstrame una cosa
✓ Si Cursor dice que está usando VisualSpec o muestra una herramienta de VisualSpec en la respuesta, ya está conectado

Nombres de menú comprobados con la ayuda de Cursor el 11 nov 2026 · tu pantalla puede variar un poco según la versión

Funciona con VS Code, pero hay que preparar algo antes

Necesitas una clave de VisualSpec (créala en el sitio del autor) · Instala Node.js en tu computadora primero (una sola vez)

Instala Node.js
Una sola vez; sirve para todos los servidores que necesitan Node.js
Abrir la página de descarga de Node.js ↗
Hecho
Regístrate y crea una clave de VisualSpec
Abre el sitio del autor, crea una cuenta y una clave de API para el siguiente paso. Consulta precios y planes gratis en su sitio.
Cómo obtener la clave está en el README del autor, más abajo
Hecho
Pulsa este botón para abrir VS Code
Abrir en VS Code
VS Code te pedirá confirmar; pulsa Install
Hecho
Escribe tu clave
En la configuración de VisualSpec, OPENAI_API_KEY, GEMINI_API_KEY está vacío; añade tu clave y guarda
Pega la clave solo en el campo de la app; nunca en un chat ni se la envíes a nadie
Hecho
Abre el chat de IA de VS Code en modo Agent
Hecho
Pruébalo
Usa VisualSpec y dime qué puedes hacer por mí; luego muéstrame una cosa
✓ Si VS Code dice que está usando VisualSpec o muestra una herramienta de VisualSpec en la respuesta, ya está conectado

Nombres de menú comprobados con la ayuda de VS Code el 11 nov 2026 · tu pantalla puede variar un poco según la versión

Otras apps que usan MCP, como Windsurf, Zed o Gemini CLI, añaden servidores de forma distinta. Míralo en la lista de apps

Ver todas las apps que usan MCP →

La configuración JSON está en “Para desarrolladores”, abajo

¿Te atascaste? Pregunta a quien usa VisualSpec💬 Conversación →

Para desarrolladores: comandos de Terminal y configuración JSON

Instalado en tu computadora

Claude Code

claude mcp add --scope user visualspec --env OPENAI_API_KEY=your-value --env GEMINI_API_KEY=your-value -- npx -y @utkarshx27/visualspec

Claude Desktop (claude_desktop_config.json)

{
  "mcpServers": {
    "visualspec": {
      "command": "npx",
      "args": [
        "-y",
        "@utkarshx27/visualspec"
      ],
      "env": {
        "OPENAI_API_KEY": "your-value",
        "GEMINI_API_KEY": "your-value"
      }
    }
  }
}

Cursor (~/.cursor/mcp.json)

{
  "mcpServers": {
    "visualspec": {
      "command": "npx",
      "args": [
        "-y",
        "@utkarshx27/visualspec"
      ],
      "env": {
        "OPENAI_API_KEY": "your-value",
        "GEMINI_API_KEY": "your-value"
      }
    }
  }
}

VS Code (mcp.json)

{
  "servers": {
    "visualspec": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@utkarshx27/visualspec"
      ],
      "env": {
        "OPENAI_API_KEY": "your-value",
        "GEMINI_API_KEY": "your-value"
      }
    }
  }
}

Valores que debes completar

OPENAI_API_KEY secreto env
Optional API key for OpenAI image generation
GEMINI_API_KEY secreto env
Optional API key for Google Gemini image generation

Esta configuración se genera a partir de la ficha del creador en el registro. Si el README dice otra cosa, sigue el README.

De un vistazo

Estrellas de GitHub i: 0
Descargas por semanai: 37/sem
Licencia i: Sin licencia indicada
Conexión: Se ejecuta en tu computadora
Transporte: stdio
Última versióni: 0.1.0
Categoríai: Otros
Publicado en el registroi: 10 sept 2026
Último cambio de códigoi: 10 sept 2026
Creador: utkarshx27
Paquetes: npm: @utkarshx27/visualspec
Repo: utkarshx27/visualspec
Estado en el registro: Activo

Qué apps pueden usarlo

Según cómo se conecta este servidor y la documentación de cada app, comprobado el 10 nov 2026.

Se ejecutan en tu computadora en

Claude Goose LM Studio Msty Studio Cherry Studio Cursor VS Code + GitHub Copilot Visual Studio Windsurf (Devin Desktop)Zed Kiro Cline Continue JetBrains AI Assistant Claude Code Codex CLI Gemini CLI OpenCode nodecode Warp LibreChat Raycast

Todas las apps, con ventajas y desventajas →

Qué puede hacer

Se ejecuta en tu computadora; la lista de herramientas aparece en tu app de IA después de instalarlo.

Revisiones básicasi

Revisamos información que cualquiera puede ver; no hemos leído el código. Las revisiones que no aplican no se cuentan. · Revisado el 12 nov 2026

✓ Superada
El creador coincide con el repo
El nombre en el registro se verificó con la cuenta de GitHub utkarshx27, dueña del repo
✓ Superada
Sigue en mantenimiento
Último cambio de código: hace 2 meses
… Aún sin revisar
Tiene licencia
Todavía no hemos leído este repo en GitHub
– No aplica
El endpoint responde
Este se ejecuta en tu computadora; no hay endpoint en internet
– No aplica
Inicio de sesión con OAuth
Se ejecuta en tu computadora y usa ajustes locales en su lugar
… Aún sin revisar
Sin instrucciones ocultas en las descripciones de herramientas
Se ejecuta en tu computadora; solo podemos leer listas de herramientas de endpoints en internet

Conversación

Pregunta, comparte un consejo o avisa de que no funciona. Ordenado por lo que la gente marcó como útil.

Aún no hay publicaciones. Sé la primera persona en preguntar o compartir.

Lo publicado aquí lo escriben usuarios, no el equipo de PopNx.

Inicia sesión con Google para publicar

Reseñas de usuarios

Aún no hay reseñas

Inicia sesión con Google para escribir una reseña

Comparado con otros en Otrosi

Más estrellas que el 0% de los otros 19298 servidores de esta categoría
Publicado en el registro más recientemente que el 38% de los otros 19298 servidores de esta categoría
Revisiones básicas iguales o mejores que el 100% de los otros 19298 servidores de esta categoría

Comparado con todos los servidores activos de esta categoría en el registro. Las estrellas solo cuentan cuando quien lo publica es dueño del repo.

Preguntas frecuentes

¿Es seguro VisualSpec?

Superó 2 de 2 revisiones básicas aplicables. No hemos leído el código. Antes de agregar una clave o un token, revisa qué acceso pide el servidor y usa una clave que tenga solo los permisos que necesitas.

¿Qué claves o códigos necesita?

Debes completar: OPENAI_API_KEY, GEMINI_API_KEY

¿Se ejecuta en mi computadora o en la nube?

Se ejecuta en tu computadora. Tu app de IA lo inicia cuando hace falta, y los datos no pasan por los servidores del creador (a menos que el propio servidor llame a un servicio en línea).

¿Sigue en mantenimiento?

El repo de GitHub cambió por última vez hace 2 meses, y la última versión (0.1.0) llegó al registro hace 2 meses.

¿Qué apps pueden usarlo?

Las apps compatibles con MCP, como Claude Desktop, Claude Code, Cursor y VS Code. También necesitas Node.js en tu computadora.

¿Qué puedo usar en su lugar?

En la misma categoría: World Monitor, Claude Flow, Tldraw

Otros de la misma categoría

Servidores de la misma categoría hechos por otros creadores, ordenados por estrellas.

Cómo leer una tarjeta:↓ Descargas por semanai★ Estrellas de GitHubiTres pilares: reseñas · revisiones · usoiActualizado = fecha en que se publicó la última versión en el registroi

World Monitor

Real-time global intelligence on conflict, markets, energy, trade, shipping and cyber. 102 tools.

de koala73Muy usado★ 90,5 milActualizado hoy

Se ejecuta en la nube✓ del servicio · worldmonitor.app

Instalar

Claude Flow

AI orchestration with hive-mind swarms, neural networks, and 87 MCP tools for enterprise dev.

de ruvnetMuy usado↓ 13,5 mil/sem★ 81,5 milActualizado hace 14 meses

Se ejecuta en tu computadora

Instalar

Tldraw

Draw and visually collaborate with your agents on tldraw's canvas.

de tldrawMuy usado★ 51,4 milActualizado hace 8 meses

Se ejecuta en la nube

Instalar

README del creador

Abrir el README

Copiado tal cual del repo del creador. PopNx MCP no lo ha revisado ni lo respalda. Se quitaron HTML, imágenes y scripts. Los enlaces llevan fuera de este sitio.

VisualSpec

Deterministic visual generation for AI agents.

AI creates the imagery. VisualSpec guarantees the typography and layout.

# Instant workspace setup (no clone required)

npx @utkarshx27/visualspec init

Launch local MCP Server for Cursor, Claude Desktop, or Antigravity

npx @utkarshx27/visualspec mcp

The Core Problem

Most image-generation workflows fail for social and marketing graphics because a single natural-language prompt is expected to handle too many concerns at once:

subject & background
exact typography & wording
platform dimensions & safe margins
visual hierarchy & negative space
brand color rules & constraints

Image models frequently hallucinate gibberish text, truncate words, or disregard composition rules.

The Solution: Layer Separation

VisualSpec separates generative concerns from deterministic concerns:

Generative Layers (AI Models): Photography, 3D subjects, atmospheric backgrounds, textures, lighting.
Deterministic Layers (Code & SVG Engine): Exact headlines, subtitles, badges, logos, metrics, safe margins, and layout rules.
Structured Visual Spec: A machine-readable YAML specification that acts as the single contract.
Visual QA & Targeted Repair: Verifies geometry, margins, and exact copy invariants, synthesizing localized repairs without regenerating entire scenes.

User Brief / Intent

│ ▼ Visual Spec (spec.yaml) │ ┌───┴──────────────┐ ▼ ▼ Platform Pack Template Pack │ │ └───┬──────────────┘ ▼ Spec Resolver │ ┌───┴───────────────────────┐ ▼ ▼ Model Adapter Deterministic Layout (Generative Base) (SVG Typography / Overlay) │ │ └───┬───────────────────────┘ ▼ Compositor (Sharp) │ ▼ Visual QA (Constraints, Safe Margins, Exact Copy) │ ├── PASS ──► Final Asset Bundle │ └── FAIL ──► Targeted Repair Planner

Documentation

Quickstart

Instant Run (No Install Required)

# Initialize a new VisualSpec workspace

npx @utkarshx27/visualspec init

Launch local MCP Server for Cursor, Claude, or Antigravity IDE

npx @utkarshx27/visualspec mcp

Or Install Globally

npm install -g @utkarshx27/visualspec

Use CLI commands directly

visual init visual mcp

Or Build from Source

git clone https://github.com/utkarshx27/visualspec.git

cd visualspec npm install npm run build

1. Initialize a Project

npx @utkarshx27/visualspec init

2. Validate a Visual Spec

npx @utkarshx27/visualspec validate examples/product-launch/spec.yaml

3. Inspect the Compiled Generation Prompt

npx @utkarshx27/visualspec compile examples/product-launch/spec.yaml --provider openai

4. Deterministic Render (No API Key Required)

Render layout, typography, and background styling locally:

npx @utkarshx27/visualspec render examples/product-launch/spec.yaml --output ./output/demo-launch

5. Run the Full Generation Pipeline

npx @utkarshx27/visualspec generate examples/product-launch/spec.yaml --provider mock --output ./output/demo-launch

6. Verify Asset Quality with Visual QA

npx @utkarshx27/visualspec check ./output/demo-launch/final.png --spec examples/product-launch/spec.yaml

Model Context Protocol (MCP) Server

VisualSpec runs as a native MCP server over stdio, enabling AI coding assistants (Cursor, Claude Code, Gemini CLI, and Antigravity IDE) to invoke visual tools directly:

# Launch MCP server over stdio

npx @utkarshx27/visualspec mcp

Or if installed globally

visual mcp

Available MCP Tools

visual_brief_to_spec: Convert natural language requests into valid VisualSpec YAML.
visual_validate_spec: Schema validation for specs.
visual_render: Deterministic layout & typography rendering (zero API key).
visual_generate: Full image model adapter + deterministic text overlay pipeline.
visual_check_qa: Inspect safe margins, line counts, dimensions, and invariants.
visual_repair: Automated diagnosis and localized typography/layout repair.
visual_list_resources: List supported platform packs and templates.

See the MCP Setup Guide for Cursor, Claude Desktop, and Antigravity IDE configuration snippets.

Output Bundle

Every generation creates a complete, reproducible debug bundle:

output/demo-launch/

├── final.png # Platform-ready asset ├── visual-spec.yaml # Original input specification ├── resolved-spec.yaml # Full spec with platform & template rules applied ├── generation-request.json # Exact prompt and negative parameters sent to model ├── qa-report.json # Deterministic and constraint QA verification results └── metadata.json # Execution timestamps and file index

Supported Platforms & Templates

Platforms

Instagram: Feed portrait (1080x1350, 4:5), Square (1080x1080, 1:1), Story (1080x1920, 9:16).
LinkedIn: Feed portrait (1080x1350), Square (1080x1080), Banner (1200x628).
Generic Social: Universal 1:1, 4:5, and 16:9 social formats.

Templates

Product Launch: High-impact headline, feature pill, product visual region, supporting subhead.
Quote Card: Center-focused editorial quote, author attribution, minimal atmospheric glow.
Stat Card: Large numeric hero metric, descriptive label, and data context notes.

Agent Skills

The framework includes 10 standardized skill definitions located in ./skills/:

using-visualspec: Master workflow instructions.
visual-brief: Brief extraction and analysis.
visual-spec: YAML authoring and schema rules.
composition: Spatial hierarchy and negative space allocation.
typography: Font family classing and line budgeting.
strict-constraints: Invariant taxonomy and forbidden parameters.
social-instagram: Instagram-specific design reasoning.
social-linkedin: LinkedIn-specific design reasoning.
visual-qa: Automated inspection and validation.
visual-repair: Localized diagnosis and patch generation.

Roadmap & Open Contributions

We welcome contributions! Key areas to build together:

Additional Platforms: X/Twitter (Header, Post), YouTube Thumbnails, Pinterest, TikTok Cover.
Additional Templates: Testimonial, Product Comparison, Event Announcement, Feature List.
Additional Image Model Adapters: Flux, Stable Diffusion / ComfyUI, Midjourney API.
Brand Packs: Multi-brand palette overrides, custom font loading, logo clear space rules.
Visual Studio: Local web playground / viewer for real-time spec inspection and margin toggling.

Contributing

Contributions are welcome! Please check our:

Testing

Run the automated test suite:

npm test

All 28 tests run offline without requiring any third-party API keys.

License

Licensed under the Apache License, Version 2.0.

VisualSpec

What it does

Instalación

Instala Node.js

Regístrate y crea una clave de VisualSpec

Abre el archivo de configuración de la app de Claude de escritorio

Pega esta configuración y guarda el archivo

Cierra Claude y vuelve a abrirlo

Pruébalo

Lo que puedes hacer en su lugar

Instala Node.js

Regístrate y crea una clave de VisualSpec

Abre la Terminal

Pega este comando y pulsa Enter

Escribe /mcp en Claude Code

Pruébalo

Instala Node.js

Regístrate y crea una clave de VisualSpec

Pulsa este botón para abrir Cursor

Escribe tu clave

Abre el chat de IA de Cursor en modo Agent

Pruébalo

Instala Node.js

Regístrate y crea una clave de VisualSpec

Pulsa este botón para abrir VS Code

Escribe tu clave

Abre el chat de IA de VS Code en modo Agent

Pruébalo

Instalado en tu computadora

Valores que debes completar

De un vistazo

Qué apps pueden usarlo

Qué puede hacer

Revisiones básicasi

El creador coincide con el repo

Sigue en mantenimiento

Tiene licencia

El endpoint responde

Inicio de sesión con OAuth

Sin instrucciones ocultas en las descripciones de herramientas

Conversación

Reseñas de usuarios

Comparado con otros en Otrosi

Preguntas frecuentes

Otros de la misma categoría

World Monitor

Claude Flow

Tldraw

README del creador

VisualSpec

Launch local MCP Server for Cursor, Claude Desktop, or Antigravity

The Core Problem

The Solution: Layer Separation

Documentation

Quickstart

Instant Run (No Install Required)

Launch local MCP Server for Cursor, Claude, or Antigravity IDE

Or Install Globally

Use CLI commands directly

Or Build from Source

1. Initialize a Project

2. Validate a Visual Spec

3. Inspect the Compiled Generation Prompt

4. Deterministic Render (No API Key Required)

5. Run the Full Generation Pipeline

6. Verify Asset Quality with Visual QA

Model Context Protocol (MCP) Server

Or if installed globally

Available MCP Tools

Output Bundle

Supported Platforms & Templates

Platforms

Templates

Agent Skills

Roadmap & Open Contributions

Contributing

Testing

License