[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-74791":3},{"id":4,"name":5,"fullName":6,"owner":5,"repo":5,"description":7,"homepage":8,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":15,"forks30d":15,"starsTrendScore":19,"compositeScore":20,"rankGlobal":9,"rankLanguage":9,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":22,"hasPages":22,"topics":24,"createdAt":9,"pushedAt":9,"updatedAt":34,"readmeContent":35,"aiSummary":36,"trendingCount":15,"starSnapshotCount":15,"syncStatus":37,"lastSyncTime":38,"discoverSource":39},74791,"open-pencil","open-pencil\u002Fopen-pencil","AI-native design editor. Open-source Figma alternative.","https:\u002F\u002Fopenpencil.dev",null,"TypeScript",5512,509,44,40,0,81,216,677,243,39.12,"MIT License",false,"master",[25,26,27,28,29,30,31,32,33],"ai","collaboration","design-editor","figma-alternative","open-source","skia","tauri","vue","webgpu","2026-06-12 02:03:28","# OpenPencil\n\nOpen-source design editor. Opens `.fig` and `.pen` design files, includes built-in AI, and ships as a programmable toolkit with a headless Vue SDK for building custom editors.\n\n> **Status:** Active development. Not ready for production use.\n>\n> **Note:** There is another open-source project with the same name — [OpenPencil by ZSeven-W](https:\u002F\u002Fgithub.com\u002FZSeven-W\u002Fopenpencil), focused on AI-native design-to-code workflows. This project focuses on Figma-compatible visual design with real-time collaboration.\n\n**[Try it online →](https:\u002F\u002Fapp.openpencil.dev\u002Fdemo)** · [Download](https:\u002F\u002Fgithub.com\u002Fopen-pencil\u002Fopen-pencil\u002Freleases\u002Flatest) · [Documentation](https:\u002F\u002Fopenpencil.dev)\n\n![OpenPencil](packages\u002Fdocs\u002Fpublic\u002Fscreenshot.png)\n\n## Installation\n\n**macOS (Homebrew):**\n\n```sh\nbrew install open-pencil\u002Ftap\u002Fopen-pencil\n```\n\nOr download from the [releases page](https:\u002F\u002Fgithub.com\u002Fopen-pencil\u002Fopen-pencil\u002Freleases\u002Flatest), or [use the web app](https:\u002F\u002Fapp.openpencil.dev) — no install needed.\n\n## What it does\n\n- **Opens `.fig` and `.pen` files** — read and write native Figma files, open supported Pencil documents from the app or OS file browser, copy & paste nodes between apps\n- **AI builds designs** — describe what you want in chat, 90+ tools create and modify nodes. Connect OpenRouter, Anthropic, OpenAI, Google AI, Z.ai, MiniMax, or compatible endpoints\n- **Fully programmable** — headless CLI, XPath queries, Figma Plugin API via `eval`, MCP server for AI agents, and desktop agent integrations for Claude Code, Codex, and Gemini CLI\n- **Lint, convert, and extract tokens** — inspect documents, lint naming\u002Flayout\u002Faccessibility, convert between supported formats, analyze colors\u002Ftypography\u002Fspacing\u002Fclusters, and extract design tokens\n- **Components and variants** — create reusable components, group variants into component sets, insert local assets as instances, and switch variants from the inspector\n- **Design-to-code export** — export selections as JSX\u002FTailwind, generate token outputs, and map designs into component-oriented code workflows\n- **Vue SDK for custom editors** — headless components and composables for embedding OpenPencil into other apps or building workflow-specific editing surfaces. [Read the SDK docs →](https:\u002F\u002Fopenpencil.dev\u002Fprogrammable\u002Fsdk\u002F)\n- **Real-time collaboration** — P2P via WebRTC, no server, no account. Cursors, presence, follow mode\n- **Auto layout & CSS Grid** — flex and grid layout via Yoga WASM, with gap, padding, alignment, track sizing\n- **~7 MB desktop app** — Tauri v2 for macOS, Windows, Linux. Also runs in the browser as a PWA\n\n## CLI\n\n```sh\nbun add -g @open-pencil\u002Fcli\n```\n\n### Inspect design files\n\nBrowse node trees, search by name or type, dig into properties — all without opening the editor:\n\n```sh\nopen-pencil tree design.fig\nopen-pencil find design.pen --type TEXT\nopen-pencil node design.fig --id 1:23\nopen-pencil info design.fig\n```\n\n```\n[0] [page] \"Getting started\" (0:46566)\n  [0] [section] \"\" (0:46567)\n    [0] [frame] \"Body\" (0:46568)\n      [0] [frame] \"Introduction\" (0:46569)\n        [0] [frame] \"Introduction Card\" (0:46570)\n          [0] [frame] \"Guidance\" (0:46571)\n```\n\n### Query with XPath\n\nUse XPath selectors to find nodes by type, attributes, and structure:\n\n```sh\nopen-pencil query design.fig \"\u002F\u002FFRAME\"                              # All frames\nopen-pencil query design.fig \"\u002F\u002FFRAME[@width \u003C 300]\"                # Frames under 300px\nopen-pencil query design.fig \"\u002F\u002FTEXT[contains(@name, 'Button')]\"     # Text with 'Button' in name\nopen-pencil query design.fig \"\u002F\u002F*[@cornerRadius > 0]\"               # Rounded corners\nopen-pencil query design.fig \"\u002F\u002FSECTION\u002F\u002FTEXT\"                       # Text inside sections\n```\n\n### Export\n\nRender to PNG, JPG, WEBP, SVG, `.fig`, or JSX — or export selections\u002Fpages as `.fig` and convert whole documents between supported formats:\n\n```sh\nopen-pencil export design.fig                           # PNG\nopen-pencil export design.fig -f jpg -s 2 -q 90        # JPG at 2x, quality 90\nopen-pencil export design.fig -f fig --page \"Page 1\"   # Export a page as .fig\nopen-pencil export design.fig -f jsx --style tailwind   # Tailwind JSX\nopen-pencil convert design.pen output.fig               # Convert between document formats\n```\n\n```html\n\u003Cdiv className=\"flex flex-col gap-4 p-6 bg-white rounded-xl\">\n  \u003Cp className=\"text-2xl font-bold text-[#1D1B20]\">Card Title\u003C\u002Fp>\n  \u003Cp className=\"text-sm text-[#49454F]\">Description text\u003C\u002Fp>\n\u003C\u002Fdiv>\n```\n\n### Lint design files\n\nCatch naming, layout, structure, and accessibility issues from the terminal:\n\n```sh\nopen-pencil lint design.fig\nopen-pencil lint design.pen --preset strict\nopen-pencil lint design.fig --rule color-contrast\nopen-pencil lint design.fig --list-rules\n```\n\n### Analyze and extract design tokens\n\nAudit an entire design system from the terminal — find inconsistencies, extract the real palette, and spot components waiting to be extracted:\n\n```sh\nopen-pencil analyze colors design.fig\nopen-pencil analyze typography design.fig\nopen-pencil analyze spacing design.fig\nopen-pencil analyze clusters design.fig\nopen-pencil variables design.fig\n```\n\n```\n#1d1b20  ██████████████████████████████ 17155×\n#49454f  ██████████████████████████████ 9814×\n#ffffff  ██████████████████████████████ 8620×\n#6750a4  ██████████████████████████████ 3967×\n\n3771× frame \"container\" (100% match)\n     size: 40×40, structure: Frame > [Frame]\n\n2982× instance \"Checkboxes\" (100% match)\n     size: 48×48, structure: Instance > [Frame]\n```\n\n### Script with Figma Plugin API\n\n`eval` gives you the full Figma Plugin API. Modify the file, write it back:\n\n```sh\nopen-pencil eval design.fig -c \"figma.currentPage.children.length\"\nopen-pencil eval design.fig -c \"figma.currentPage.selection.forEach(n => n.opacity = 0.5)\" -w\n```\n\n### Control the running app\n\nWhen the desktop app is running, omit the file argument — the CLI connects via RPC and operates on the live canvas. Useful for automation scripts, CI pipelines, or AI agents that need to interact with the editor:\n\n```sh\nopen-pencil tree                               # Inspect the live document\nopen-pencil export -f png                      # Screenshot the current canvas\nopen-pencil eval -c \"figma.currentPage.name\"   # Query the editor\n```\n\nAll commands support `--json` for machine-readable output.\n\n## AI & MCP\n\n### Built-in chat\n\nPress \u003Ckbd>⌘\u003C\u002Fkbd>\u003Ckbd>J\u003C\u002Fkbd> to open the AI assistant. It has 100+ tools that can create shapes, set fills and strokes, manage auto-layout, work with components and variables, run boolean operations, analyze design tokens, and export assets. Bring your own API key for OpenRouter, Anthropic, OpenAI, Google AI, Z.ai, MiniMax, or compatible endpoints. No backend, no account.\n\n### Coding agents (desktop)\n\nUse Claude Code, Codex, or Gemini CLI directly in the chat panel. The agent connects to the editor's MCP server and uses all 100+ design tools. Requires the desktop app and the agent CLI installed locally.\n\n**Setup (Claude Code):**\n\n1. Install the ACP adapter: `npm i -g @agentclientprotocol\u002Fclaude-agent-acp`\n2. Add MCP permission to `~\u002F.claude\u002Fsettings.json`:\n   ```json\n   {\n     \"permissions\": {\n       \"allow\": [\"mcp__open-pencil\"]\n     }\n   }\n   ```\n3. Open the desktop app → \u003Ckbd>Ctrl\u003C\u002Fkbd>\u003Ckbd>J\u003C\u002Fkbd> → select **Claude Code** from the provider dropdown\n\n### MCP server\n\nConnect Claude Code, Cursor, Windsurf, or any MCP client to inspect, modify, and export design documents headlessly. 100+ tools. [Full docs →](https:\u002F\u002Fopenpencil.dev\u002Freference\u002Fmcp-tools)\n\n**Stdio** (Claude Code, Cursor, Windsurf):\n\n```sh\nbun add -g @open-pencil\u002Fmcp\n```\n\n```json\n{\n  \"mcpServers\": {\n    \"open-pencil\": {\n      \"command\": \"openpencil-mcp\"\n    }\n  }\n}\n```\n\n**HTTP** (scripts, CI):\n\n```sh\nopenpencil-mcp-http   # http:\u002F\u002Flocalhost:3100\u002Fmcp\n```\n\n**File access:** Set `OPENPENCIL_MCP_ROOT` to scope file operations (`open_file`, `new_document`, export `path` param) to a directory. Defaults to the current working directory.\n\n### AI agent skill\n\nTeach your AI coding agent to use OpenPencil — inspect designs, export assets, analyze tokens, modify .fig files:\n\n```sh\nnpx skills add open-pencil\u002Fskills@open-pencil\n```\n\nWorks with Claude Code, Cursor, Windsurf, Codex, and any agent that supports [skills](https:\u002F\u002Fskills.sh).\n\n## Collaboration\n\nShare a link to co-edit in real time. No server, no account — peers connect directly via WebRTC.\n\n1. Click the share button in the top-right panel\n2. Share the generated link (`app.openpencil.dev\u002Fshare\u002F\u003Croom-id>`)\n3. Collaborators see your cursor, selection, and edits in real time\n4. Click a peer's avatar to follow their viewport\n\n## Why\n\nFigma is a closed platform that actively fights programmatic access. Their MCP server is read-only. [figma-use](https:\u002F\u002Fgithub.com\u002Fdannote\u002Ffigma-use) added full read\u002Fwrite automation via CDP — then [Figma 126 killed CDP](https:\u002F\u002Fforum.figma.com\u002Freport-a-problem-6\u002Fremote-debugging-port-not-working-in-figma-desktop-126-1-2-50858). Your design files are in a proprietary binary format that only their software can fully read. Your workflows break when they decide to ship a point release.\n\nOpenPencil is the alternative: open source (MIT), reads .fig files natively, every operation is scriptable, and your data never leaves your machine.\n\n## Roadmap\n\n- 100% Figma compatibility — full import\u002Fexport fidelity, rendering parity, and broader automated compatibility coverage\n- Prototyping — frame transitions, interaction triggers, overlay management, preview mode\n- Shader effects (SkSL) — custom visual effects via GPU shaders\n- Raster tile caching — instant zoom\u002Fpan for complex documents\n- Component libraries — publish, share, and consume design systems across files\n- CI tools — design linting, code export, visual regression in pipelines\n- Grid child positioning UI — column\u002Frow span controls, grid overlay on canvas\n- Windows code signing (Azure Authenticode certificates)\n\n## Contributing\n\n### Setup\n\n```sh\nbun install\nbun run dev        # Dev server at localhost:1420\nbun run tauri dev  # Desktop app (requires Rust)\n```\n\n### Quality gates\n\n| Command | Description |\n|---------|-------------|\n| `bun run check` | Lint + typecheck |\n| `bun run test` | E2E visual regression |\n| `bun run test:unit` | Unit tests |\n| `bun run format` | Code formatting |\n\n### Project structure\n\n```\npackages\u002F\n  core\u002F           @open-pencil\u002Fcore — engine (scene graph, renderer, layout, file formats, tools)\n  vue\u002F            @open-pencil\u002Fvue — headless Vue SDK\n  cli\u002F            @open-pencil\u002Fcli — headless CLI\n  mcp\u002F            @open-pencil\u002Fmcp — MCP server (stdio + HTTP)\n  docs\u002F           Documentation site (openpencil.dev)\nsrc\u002F              Vue app (components, composables, stores)\ndesktop\u002F          Tauri v2 (Rust + config)\ntests\u002F            E2E (188 tests) + unit (764 tests)\n```\n\n### Tech stack\n\n| Layer | Tech |\n|-------|------|\n| Rendering | Skia (CanvasKit WASM) |\n| Layout | Yoga WASM (flex + grid via [fork](https:\u002F\u002Fgithub.com\u002Fopen-pencil\u002Fyoga\u002Ftree\u002Fgrid)) |\n| UI | Vue 3, Reka UI, Tailwind CSS 4 |\n| File format | Kiwi binary + Zstd + ZIP |\n| Collaboration | Trystero (WebRTC P2P) + Yjs (CRDT) |\n| Desktop | Tauri v2 |\n| AI\u002FMCP | Multi-provider (Anthropic, OpenAI, Google AI, OpenRouter), MCP SDK, Hono |\n\n### Desktop builds\n\nRequires [Rust](https:\u002F\u002Frustup.rs\u002F) and platform-specific prerequisites ([Tauri v2 guide](https:\u002F\u002Fv2.tauri.app\u002Fstart\u002Fprerequisites\u002F)).\n\n```sh\nbun run tauri build\n```\n\n## Acknowledgments\n\nThanks to [@sld0Ant](https:\u002F\u002Fgithub.com\u002Fsld0Ant) (Anton Soldatov) for creating and maintaining the [documentation site](https:\u002F\u002Fopenpencil.dev).\n\n## License\n\nMIT\n","OpenPencil 是一个开源的设计编辑器，旨在成为Figma的替代品。它支持打开和编辑.fig和.pen格式的设计文件，并集成了AI功能以辅助设计工作。项目使用TypeScript开发，基于Vue、Skia和Tauri等技术栈构建，提供了一个轻量级（约7MB）的跨平台桌面应用及Web版本。其核心功能包括实时协作、自动布局、设计到代码导出以及可编程性，允许开发者通过CLI或Vue SDK自定义编辑器。适用于需要高效协作和灵活定制设计工具的团队和个人，特别是在寻求从Figma迁移至开放源码解决方案的情况下。尽管当前仍处于积极开发阶段，尚未推荐用于生产环境，但已展现出强大的潜力。",2,"2026-06-11 03:50:50","high_star"]