O que pencil-design faz?
Projete UIs em Pencil (arquivos .pen) e gere código de produção a partir deles. Use ao trabalhar com arquivos .pen, projetar telas ou componentes no Pencil ou gerar código a partir de designs do Pencil. Ativa em tarefas que envolvam Pencil, arquivos .pen, fluxos de design para código ou design de UI com as ferramentas MCP do Pencil.
Descrição
Esta skill integra o fluxo de design de UI usando o formato Pencil com a geração automática de código de produção. Ao detectar arquivos .pen ou comandos relacionados ao Pencil, ela permite que o agente de IA crie, edite e exporte designs, além de converter protótipos em código funcional.
Principais Funcionalidades
- Design de UIs: Crie telas e componentes interativos usando a ferramenta de prototipagem Pencil.
- Geração de Código: Transforme designs do Pencil em código de produção (React, Vue, HTML/CSS, etc.).
- Suporte a MCP: Utiliza as ferramentas MCP do Pencil para operações como abrir arquivos
.pen, adicionar elementos, modificar estilos e exportar. - Fluxo Contínuo: Integre design e desenvolvimento sem interrupções, mantendo a consistência visual.
Como Usar
- Certifique-se de que o Pencil MCP está configurado no ambiente do agente.
- Crie ou abra um arquivo
.pencom comandos comopencil open <caminho-do-arquivo>. - Desenhe a interface usando comandos para adicionar elementos (botões, campos de texto, imagens, etc.).
- Solicite a geração de código com um prompt como "Gere código React para este design do Pencil".
- O agente produzirá o código correspondente, pronto para uso.
Exemplo de Prompt
Desenhe uma tela de login no Pencil com campos de usuário e senha, e depois gere o código HTML/CSS correspondente.
Plataformas Suportadas
- Claude Code
- Cursor
- Codex
- Outros agentes compatíveis com MCP
Notas
- Mantenha os nomes dos elementos e estilos consistentes para facilitar a geração de código.
- A skill é ativada automaticamente quando arquivos
.pensão detectados no contexto. - Para designs complexos, divida em componentes menores e reutilizáveis.