2.9 KiB
OpenPencil for VS Code — Исследование и план
Исследовательский документ по созданию VS Code расширения для OpenPencil — аналога Figma for VS Code.
Цель
Интегрировать OpenPencil в VS Code, чтобы разработчики могли:
- Просматривать .fig файлы из дизайна прямо в редакторе
- Подтягивать стили (цвета, типографику, spacing) в код через autocomplete
- Навигировать между кодом и дизайном
- Копировать CSS/Tailwind из дизайн-элементов
Навигация
| # | Документ | Содержание |
|---|---|---|
| 01 | Figma for VS Code Analysis | Что делает Figma for VS Code — полный разбор фич, cloud vs local |
| 02 | OpenPencil Reuse Audit | Какие модули OpenPencil переиспользуемы в extension — верифицированный import-граф |
| 03 | VS Code API Integration | Точки интеграции с VS Code Extension API |
| 04 | Architecture | Архитектура расширения, communication protocol, config schema |
| 05 | Roadmap | Фазированный план реализации с Phase 0 PoC spike |
Ключевые выводы
-
CanvasKit WASM работает в VS Code webview — подтверждено примерами: pixcil (WASM image editor), crabviz (WASM graph viz), matterviz (WebGL 3D viewer). Требуется CSP
'wasm-unsafe-eval'+'nonce-...'. -
Engine-код OpenPencil полностью переиспользуем —
src/engine/иsrc/kiwi/не имеют Vue-зависимостей. Импортируют только@/types,culori,canvaskit-wasm,fflate,fzstd,yoga-layout. -
Local-first vs Cloud-first — Figma for VS Code подключается к облаку через API. OpenPencil работает с локальными .fig файлами. Это упрощает архитектуру (нет auth, нет API, нет real-time sync), но ограничивает collaborative сценарии.
-
Монорепо-рефакторинг не обязателен — engine-код можно подключить в extension через esbuild alias без перестройки основного проекта.
-
Scope: Desktop VS Code only на старте. VS Code Web (vscode.dev) отложен — CanvasKit WASM ~5MB и WebGL не гарантированы в browser context.