OpenPencil

Ferramenta de design open-source nativa com IA. Design-as-Code.
Do prompt à UI no canvas. Orquestração multi-agente. Servidor MCP integrado. Geração de código.

English · 简体中文 · 繁體中文 · 日本語 · 한국어 · Français · Español · Deutsch · Português · Русский · हिन्दी · Türkçe · ไทย · Tiếng Việt · Bahasa Indonesia

Início Rápido · IA · Funcionalidades · Discord · Contribuindo

_{Clique na imagem para assistir ao vídeo de demonstração}

## Início Rápido ```bash # Instalar dependências bun install # Iniciar servidor de desenvolvimento em http://localhost:3000 bun --bun run dev ``` Ou executar como aplicativo desktop: ```bash bun run electron:dev ``` > **Pré-requisitos:** [Bun](https://bun.sh/) >= 1.0 e [Node.js](https://nodejs.org/) >= 18 ## Design Nativo com IA O OpenPencil é construído com IA desde o início — não como um plugin, mas como um fluxo de trabalho central. **Do Prompt à UI** - **Texto para design** — descreva uma página e ela será gerada no canvas em tempo real com animação de streaming - **Orquestrador** — decompõe páginas complexas em sub-tarefas espaciais para geração paralela - **Modificação de design** — selecione elementos e descreva as alterações em linguagem natural - **Entrada de visão** — anexe capturas de tela ou mockups para design baseado em referência **Suporte Multi-Agente** | Agente | Configuração | | --- | --- | | **Claude Code** | Sem configuração — usa o Claude Agent SDK com OAuth local | | **Codex CLI** | Conectar nas Configurações do Agente (`Cmd+,`) | | **OpenCode** | Conectar nas Configurações do Agente (`Cmd+,`) | **Servidor MCP** - Servidor MCP integrado — instalação com um clique no Claude Code / Codex / Gemini / OpenCode / Kiro CLIs - Automação de design pelo terminal: leia, crie e modifique arquivos `.op` via qualquer agente compatível com MCP **Geração de Código** - React + Tailwind CSS - HTML + CSS - CSS Variables a partir de tokens de design ## Funcionalidades **Canvas e Desenho** - Canvas infinito com pan, zoom, guias de alinhamento inteligentes e snapping - Retângulo, Elipse, Linha, Polígono, Caneta (Bezier), Frame, Texto - Operações booleanas — união, subtração, interseção com barra de ferramentas contextual - Seletor de ícones (Iconify) e importação de imagens (PNG/JPEG/SVG/WebP/GIF) - Auto-layout — vertical/horizontal com gap, padding, justify, align - Documentos com múltiplas páginas e navegação por abas **Sistema de Design** - Variáveis de design — tokens de cor, número e string com referências `$variable` - Suporte a múltiplos temas — vários eixos, cada um com variantes (Claro/Escuro, Compacto/Confortável) - Sistema de componentes — componentes reutilizáveis com instâncias e substituições - Sincronização CSS — propriedades personalizadas geradas automaticamente, `var(--name)` na saída de código **Importação do Figma** - Importe arquivos `.fig` preservando layout, preenchimentos, traços, efeitos, texto, imagens e vetores **Aplicativo Desktop** - macOS, Windows e Linux nativos via Electron - Atualização automática a partir do GitHub Releases - Menu de aplicativo nativo e diálogos de arquivo ## Stack Tecnológica | | | | --- | --- | | **Frontend** | React 19 · TanStack Start · Tailwind CSS v4 · shadcn/ui | | **Canvas** | Fabric.js v7 | | **Estado** | Zustand v5 | | **Servidor** | Nitro | | **Desktop** | Electron 35 | | **IA** | Anthropic SDK · Claude Agent SDK · OpenCode SDK | | **Runtime** | Bun · Vite 7 | | **Formato de arquivo** | `.op` — baseado em JSON, legível por humanos, compatível com Git | ## Estrutura do Projeto ```text src/ canvas/ Motor Fabric.js — desenho, sincronização, layout, guias, ferramenta caneta components/ UI React — editor, painéis, diálogos compartilhados, ícones services/ai/ Chat IA, orquestrador, geração de design, streaming services/figma/ Pipeline de importação binária do Figma .fig services/codegen Geradores de código React+Tailwind e HTML+CSS stores/ Zustand — canvas, documento, páginas, histórico, IA, configurações variables/ Resolução de tokens de design e gerenciamento de referências mcp/ Ferramentas do servidor MCP para integração com CLI externo uikit/ Sistema de kit de componentes reutilizáveis server/ api/ai/ API Nitro — chat em streaming, geração, validação utils/ Wrappers de cliente Claude CLI, OpenCode, Codex electron/ main.ts Janela, fork do Nitro, menu nativo, atualizador automático preload.ts Ponte IPC ``` ## Atalhos de Teclado | Tecla | Ação | | Tecla | Ação | | --- | --- | --- | --- | --- | | `V` | Selecionar | | `Cmd+S` | Salvar | | `R` | Retângulo | | `Cmd+Z` | Desfazer | | `O` | Elipse | | `Cmd+Shift+Z` | Refazer | | `L` | Linha | | `Cmd+C/X/V/D` | Copiar/Recortar/Colar/Duplicar | | `T` | Texto | | `Cmd+G` | Agrupar | | `F` | Frame | | `Cmd+Shift+G` | Desagrupar | | `P` | Ferramenta caneta | | `Cmd+Shift+E` | Exportar | | `H` | Mão (pan) | | `Cmd+Shift+C` | Painel de código | | `Del` | Excluir | | `Cmd+Shift+V` | Painel de variáveis | | `[ / ]` | Reordenar | | `Cmd+J` | Chat IA | | Setas | Mover 1px | | `Cmd+,` | Configurações do agente | | `Cmd+Alt+U` | União booleana | | `Cmd+Alt+S` | Subtração booleana | | `Cmd+Alt+I` | Interseção booleana | | | | ## Scripts ```bash bun --bun run dev # Servidor de desenvolvimento (porta 3000) bun --bun run build # Build de produção bun --bun run test # Executar testes (Vitest) npx tsc --noEmit # Verificação de tipos bun run electron:dev # Desenvolvimento com Electron bun run electron:build # Empacotamento do Electron ``` ## Contribuindo Contribuições são bem-vindas! Consulte o [CLAUDE.md](./CLAUDE.md) para detalhes de arquitetura e estilo de código. 1. Faça fork e clone 2. Crie uma branch: `git checkout -b feat/my-feature` 3. Execute as verificações: `npx tsc --noEmit && bun --bun run test` 4. Faça commit com [Conventional Commits](https://www.conventionalcommits.org/): `feat(canvas): add rotation snapping` 5. Abra um PR contra `main` ## Roadmap - [x] Variáveis de design e tokens com sincronização CSS - [x] Sistema de componentes (instâncias e substituições) - [x] Geração de design com IA e orquestrador - [x] Integração com servidor MCP - [x] Suporte a múltiplas páginas - [x] Importação do Figma `.fig` - [x] Operações booleanas (união, subtração, interseção) - [ ] Edição colaborativa - [ ] Sistema de plugins ## Contribuidores

## Comunidade