Canvas de Fran

Diseña y construye con IA como un equipo de humanos y agentes

Un canvas multiplayer donde tu equipo y tus agentes trabajan juntos. Edita componentes, observa agentes en acción y sincroniza cada cambio con tu proyecto.

Abrir Canvas Ver guía rápida

Multiplayer y Multi-Agente

Una petición, todo un equipo trabajando

Haz una petición y un equipo completo se pone en marcha, creando múltiples piezas o variaciones de una idea, todo al mismo tiempo. Invita a un colaborador y multiplica fuerzas.

Saber más

Agent 1

Agent 2

Agent 3

Chloe

Sabina

Ecosistema Conectado

Conecta el agente en que confías y trabaja desde cualquier lugar

Conecta tu MCP, tu repositorio, tus herramientas de gestión. Cada agente externo trabaja directamente sobre el canvas de Fran.

Ver en la documentación

Fran

Agente Externo

Herramientas

Documento

1import { Canvas } from '@fran/core';

2import { Agent } from '@fran/agents';

3

4const workspace = new Canvas({

5  name: 'Nova Launch',

6  agents: [Agent.research,

7           Agent.create],

8  sync: true,

9});

10

11await workspace.run();

Código

ID	Título	Estado	Prior.
001	Landing Nova	Done	High
002	API endpoints	In Progress	Medium
003	Auth flow	Todo	High
004	Onboarding UI	In Progress	Low
005	Email templates	Done	Medium

Base de datos

Flujo Bidireccional

Canvas se convierte en entregable, el entregable vuelve al canvas

Lleva componentes del canvas a tu codebase como código listo para commit. Importa archivos existentes, edítalos visualmente y devuélvelos al repositorio.

9:41

●●●

Thursday · June 18

Deep Work

Sprint 3 of 4 · 47 min left

QUEUE

Write proposal introAlta prioridad · 25 min

Review Figma mockupsDiseño · 20 min

Reply to client emailComms · 10 min

Update project docAdmin · 15 min

COMPLETED TODAY

Morning standupComms · 15 min

+ Add task

FocusFlow.tsx

1import React, { useState } from 'react';

2import { Check, Timer } from 'lucide-react';

3

4interface Task {

5  id: string;

6  title: string;

7  meta: string;

8  color: string;

9  completed: boolean;

10}

11

12const tasks: Task[] = [

13  { id: '1', title: 'Write proposal',

14    meta: 'High · 25 min',

15    color: '#e85d4a', completed: false },

16  { id: '2', title: 'Review mockups',

17    meta: 'Design · 20 min',

18    color: '#5b8def', completed: false },

19];

20

21export const FocusFlow = () => {

22  const [queue, set] = useState(tasks);

23  return (

24    <div className='sprint'>

25      {queue.map(t => (

26        <TaskCard key={t.id} {...t}/>

27      ))}

28    </div>

29  );

30};

Del canvas a tu proyecto

Lleva los componentes del canvas directamente a tu codebase como React listo para commit.

De tu proyecto al canvas

Importa componentes existentes al canvas. Edítalos visualmente. Devuélvelos al repo.

Prototipos Reales

No es un archivo estático, es un prototipo real

Código real corriendo en el navegador. Compártelo con un link, recoge feedback en tiempo real y sigue iterando con tu equipo.

✦ Prueba a interactuar con este diseño

https://canvas.fran-ai.com/v1/proyecto-nova

Acme Studios

Search Dashboard

William Tyler

Director

Acme Studios hubTraffic

TOTAL NUMBER OF USERS

Jan 1, 2026 – May 1, 2026

Past users 52%New users 18%Visitors 30%

DEVICE TRAFFIC

Windows 45%

MacOS 35%

Other 20%

INCOME

$58,316.25

Chloe Park9:16 AM

mira el último diseño aquí:
canvas.fran-ai.com/v1/proyecto-nova

Comparte un link a tu diseño al instante

El siguiente paso

Empieza con una petición. Fran construye el espacio.

Crear mi primer Canvas