Editor de diseño local · agentes por MCP
Diseña con tus agentes de IA en el mismo lienzo.
Trazo es un editor de diseño UX/UI de escritorio. Claude Code, Codex, Gemini CLI y OpenCode diseñan dentro de tu archivo, y tú ves cada cambio mientras ocurre.
Agente
Agente
Claude Code · Opus
Haz la pantalla de reservas, un panel de pedidos y las tarjetas del menú.
Claude Code · líder
Reparto en 3 zonas: Reservas para mí, el panel para Codex y las tarjetas para Gemini CLI.
split_work
apply_operations
render_image
Codex · Panel de pedidos: render e inspección, 0 problemas
Gemini CLI · armando las tarjetas del menú…
@ Reservas
Diseña lo que sea…
Reservas 390 × 844
Reserva tu mesa
Jueves 14 de noviembre · 2 personas
13:30
Terraza
14:00
Salón
14:30
Barra
Panel de pedidos
Pedidos de hoy
Mesa 4 · Lucía R.
En cocina
Mesa 7 · Andrés P.
Servido
Codex
Tarjetas de menú
Flat white
Claude Code · líder
Gemini CLI
78%
Cómo funciona
Tres pasos y tu agente ya está diseñando.
01
Abre un archivo .trazo
Crea uno nuevo o abre uno que ya tengas. El archivo vive en tu equipo, no en un servidor.
02
Conecta tu agente
Claude Code, Codex, Gemini CLI u OpenCode entran a tu archivo por MCP, desde tu terminal.
03
Pide y mira cómo trabaja
Diseña en el lienzo, te pide permiso en lugar de negarse y revisa su trabajo con render e inspección automática.
Y un editor completo para ti
Auto-layout
Componentes, instancias y variantes
Variables con modo claro y oscuro
Pluma con curvas Bézier
Skills de diseño para los agentes
Varios agentes a la vez
Un líder reparte. Los ayudantes diseñan en paralelo.
Cada agente tiene cursor, nombre y color propios, así que siempre sabes quién está haciendo qué. El líder divide el trabajo en zonas y cada ayudante diseña la suya.
Piden permiso en lugar de negarse. Tú decides.
Revisan su propio trabajo con render e inspección automática.
Cada cambio queda en tu historial, firmado por el agente que lo hizo.
Zona A · Reservas
Zona B · Panel de pedidos
Zona C · Tarjetas de menú
14:02:11
Claude Code repartió 3 zonas
14:03:40
Codex terminó el panel de pedidos y lo revisó
14:04:05
Gemini CLI pidió permiso para leer DESIGN.md
HTML+CSS
Tailwind
React
Vue
kit: shadcn/ui
import { Button } from "@/components/ui/button"
export function Reservas() {
return (
<main className="flex flex-col gap-3 p-4">
<h1 className="text-xl font-bold">Reserva tu mesa</h1>
<Horario hora="14:00" lugar="Salón" />
<Button className="w-full">Reservar 14:00</Button>
</main>
)
}
Del lienzo al código
Lo que diseñas sale en el formato que usas.
Exporta imágenes y documentos, o genera código como punto de partida con los componentes de tu kit.
Archivos
PNG · JPG · WEBP · SVG · PDF · HTML
Código
HTML+CSS · Tailwind · React · Vue
Kits
Tailwind · shadcn/ui · daisyUI · Bootstrap · Bulma
Prototipo y app móvil
Pruébalo como se va a usar. Sigue a tus agentes desde el teléfono.
Teléfono
Tablet
Prototipo y presentación
Conecta pantallas con interacciones y preséntalas dentro de un marco de teléfono, tablet o navegador.
cafe-lunar.trazo
Codex: panel listo. ¿Agrego el estado vacío?
Sí, y uno de error.
Escribe a tus agentes
Escritorio
Tailscale
Teléfono
App móvil espejo
Mira el lienzo y habla con tus agentes desde el teléfono. Se conecta con tu escritorio por Tailscale.
Agentes compatibles
Trae el agente que ya usas.
Corren en tu equipo y se conectan a Trazo por MCP. Puedes usar uno o varios en el mismo archivo.
Claude Code
CLI · MCP
Codex
CLI · MCP
Gemini CLI
CLI · MCP
OpenCode
CLI · MCP