Pen (rebrand e telas)
Baixe o design system Kasy como arquivo do Pen, troque a marca e peça para a IA implementar no Flutter.
O Kasy também entrega o design system como arquivo do Pen (pen.dev, o
mesmo produto que já se chamou "Pencil"; se você ver pencil em algum nome de
pacote ou ferramenta, é a mesma coisa). Você baixa uma pasta zipada (o arquivo
.pen e as imagens que ele usa, juntos), extrai, abre o .pen no app do Pen
no seu computador, edita as variáveis (cores, fonte) e a IA do editor aplica
no Flutter.
Pen é uma das duas opções de ferramenta de design do Kasy, a outra é o Figma. Os dois entregam exatamente o mesmo design system (mesmos tokens de cor, espaçamento, raio e tipografia) e os dois têm MCP próprio, usável em qualquer IDE (Cursor, Claude Code, Claude Desktop…). Escolha o que preferir; esta página cobre o caminho pelo Pen.
Pen é só uma das peças. A tela Design System no app espelha o código; o
DESIGN_SYSTEM.md é o contrato pra IA. Papéis dos três: Design System.
Com o MCP do Kasy, o rebrand é uma conversa. Peça "faz o rebrand do meu app" e a tool rebrand_project pergunta o essencial (documento de marca, logo, tipografia, arquivo Pen), mostra um preview e só aplica depois do seu sim. As instruções saem pelo MCP, com assinatura ativa. Não são página pública nem arquivo do projeto.
Implementação
Baixar o design system
Diferente do Figma, o Pen não tem uma página na nuvem pra "duplicar": é um zip mesmo, que você baixa uma vez e já é seu.
- Baixe
Kasy-Design-System.zipno link acima. - Extraia o zip, vira uma pasta com o arquivo
.pene as imagens que ele usa, lado a lado. Não separe o.pendas imagens, senão ele perde as imagens. - Abra o
.pen(de dentro da pasta extraída) no app do Pen (baixe o app em pen.dev, se ainda não tiver). - Deixe o app do Pen aberto com o arquivo enquanto pede pra IA mexer nele, o MCP do Pen conversa com o app que está rodando, não com um link.
Rebrand em 4 passos
1. Abrir as variáveis
No Pen: encontre a coleção de variáveis de cor do arquivo (o equivalente às "Variables" do Figma).
2. Mudar sua marca
- Cor principal (primary/accent): comece por aqui.
- Cor de fundo (background): também afeta a splash.
- Cor do texto (foreground).
- Fonte padrão do kit: Poppins.
3. Prompt para a IA
Com o MCP do Kasy instalado, é só pedir: "faz o rebrand do meu app com base no meu Pen: [URL]". A tool rebrand_project (designTool: "pen") pergunta o que faltar, mostra um preview e só aplica depois do seu sim.
Use a tool rebrand_project do MCP do Kasy, com designTool "pen".
Meu design system está aberto no app do Pen agora.
Chame get_editor_state e depois get_variables pra ler os tokens.
Sincronize TODAS as cores em lib/core/theme/colors.dart
(KasyColors.light() e KasyColors.dark()), não só a cor principal.
Se o fundo mudou, atualize a cor do splash no pubspec.yaml.
Confira Design System no app (claro e escuro).
flutter analyze sem erros.Telas novas: com o Kasy MCP instalado, peça "cria a tela [nome] igual ao frame do Pen: [URL]". A tool create_screens constrói na hora.
4. Conferir no app
kasy run --webHome → Design System. Alterne claro/escuro em Configurações.
Só crie telas novas depois que o rebrand estiver certo.
Criar uma tela nova
- Desenhe no mesmo arquivo do Pen (ou em um novo), usando as mesmas variáveis.
- Peça à IA para implementar o frame (fiel, funcional, componentes Kasy, i18n).
- Rode
kasy run --webe teste.
Informações
O que vem no projeto
Depois de kasy new:
| Arquivo | O que é |
|---|---|
DESIGN_SYSTEM.md | Contrato do design system pra IA/dev (não é o lugar de editar cor) |
As instruções de rebrand e de criação de telas não vêm no projeto. Saem pelo MCP, com assinatura ativa.
O design system não vem como arquivo pronto no projeto: baixe pelo link acima.
Telas do seu produto podem ficar no mesmo arquivo .pen ou em um novo.
Comandos úteis
| Comando | Para quê |
|---|---|
kasy new | Cria projeto (inclui docs de Pen e Figma) |
kasy run --web | Roda no navegador |
flutter analyze | Deve ficar zerado |
Erros comuns
| Problema | O que fazer |
|---|---|
| Ferramenta do Pen não conecta | Abra (ou reabra) o arquivo no app do Pen, precisa estar rodando |
| App continua com a cor antiga | Sync de todas as cores, não só a principal |
| IA usou Material cru | Peça KasyButton, KasyCard, KasyTextField |
| Cor fora do mockup | Entra no design system antes do código |
Resumo
- Rebrand nas variáveis do Pen → IA →
lib/core/theme/. - Telas no mesmo arquivo → IA → fiel e funcional.
- Cor fora do DS → IA avisa, não hardcode.
Veja também Figma (a outra opção de design), Cores e Design System.
Atualizado em 03/11/2026