Copie o prompt e cole na conversa do projeto com seu agente de código. Ele conecta o design e abre o Studio para você.
Use o Canon como design system deste projeto.
Leia e siga: __CANON_CONNECTION_URL__
Funciona em projetos novos ou em andamento e preserva um Canon já conectado.
Continue de onde parou
O agente importa o design salvo neste Studio, integra os estilos no app existente e abre um Studio próprio do projeto. Se o projeto já usa Canon, ele mantém a fonte e as personalizações atuais.
Explore o catálogo público e conecte o Canon pelo prompt. O agente abre um Studio próprio para você personalizar o design antes de criar as telas e durante todo o desenvolvimento.
Já tenho o MCP conectado
Use o mesmo prompt de conexão. O agente preserva a configuração existente, atualiza as referências e abre o Studio vinculado ao projeto.
Seu design system, à vista
Explore e ajuste no Studio
Explore os componentes e layouts aqui. Para personalizar, copie o prompt de conexão: o agente abre um Studio vinculado ao seu projeto.
Use a busca ou as categorias do catálogo. Em Example, escolha a variante ou etapa que quer ver. Alterne entre Desktop e Mobile; use 100% para conferir os detalhes em tamanho real e Fit para ver o conjunto. Links e formulários dos exemplos mantêm você no Studio.
Personalize o visual
No Studio do projeto, abra Customize → Style para ajustar cores, fontes, formas e espaçamento. Os componentes acompanham suas escolhas. Confira também o tema claro e escuro.
Ajuste uma peça
Com o editor aberto, clique em um componente para abrir Inspect. Escolha a parte e confira Apply changes to: você pode editar o estilo compartilhado ou uma variante específica. Os ajustes ficam agrupados em layout, tipografia, cores e efeitos. Reset remove apenas a alteração da variante escolhida. Direction guarda a orientação visual que o agente recebe.
Salve e continue com o agente
No Studio aberto pelo agente, clique em Save. Isso atualiza os estilos do app e as referências que o agente usa nas próximas alterações. Suas escolhas ficam no seu projeto.
Quero desfazer uma alteração
Use Undo no editor. Se a mudança já tiver sido salva, clique em Save novamente para gravar a reversão.
O visual aparece no app na atualização normal da prévia. Para mudar a estrutura de uma tela ou seu comportamento, continue a conversa com o agente.