mirror of https://github.com/ZSeven-W/openpencil.git synced 2026-06-01 03:14:29 +07:00

* fix(ai): add icon name aliases and fix multi-path SVG concatenation

Add 55+ common icon name aliases (burger→hamburger, sushi→fish, etc.)
to both client icon-resolver and server icon API for robust AI-generated
icon resolution. Register Lucide's own aliases for broader coverage.

Fix SVG path concatenation bug where joining multiple <path> d-values
caused incorrect rendering — a standalone <path> treats initial lowercase
"m" as absolute, but after concatenation it becomes relative to the
previous sub-path endpoint. Now ensures each sub-path starts with
absolute "M".

Add tryAsyncIconFontResolution for icon_font nodes that miss local
lookup — fetches from server API, caches result, and triggers canvas
re-render.

* fix(canvas): preserve badge/overlay absolute positioning in auto-layout

Add isBadgeOverlayNode() detector for badge, indicator, notification-dot,
and overlay nodes. These nodes now retain their x/y coordinates instead
of being stripped by layout sanitization.

Update computeLayoutPositions to exclude badge nodes from the layout flow
— they keep absolute positioning and render on top (prepended for correct
z-order in reverse iteration).

* fix(ai): prevent duplicate canvas objects and fix emoji-to-icon pipeline

Streaming path: add ensureUniqueNodeIds before inserting nodes to prevent
ID collisions across multiple AI generations. Track newly inserted IDs
so subsequent streaming nodes don't collide either.

Canvas sync: deduplicate Fabric objects sharing the same penNodeId —
keep only the one tracked in objMap, remove stale duplicates.

Badge nodes: use shared isBadgeOverlayNode() for z-order insertion
and skip x/y stripping in layout parents.

Fix emoji-to-icon pipeline: re-run applyIconPathResolution after
applyNoEmojiIconHeuristic converts emoji text nodes to path nodes,
so the icon resolver can match by name (e.g. "Pizza Emoji Path" → pizza).

* fix(canvas): add async icon resolution fallback for icon_font nodes

When lookupIconByName fails locally, queue tryAsyncIconFontResolution
to fetch from server API. Cache result in ICON_PATH_MAP and trigger
canvas re-render via store update. Store iconFontName and iconStyle
on Fabric object for sync tracking.

* fix(ai): strengthen emoji ban in prompts and improve orchestrator defaults

Update all AI prompts to explicitly ban emoji characters with concrete
examples and redirect to icon_font nodes instead of the previously
incorrect "path nodes" guidance.

Add z-order rule to orchestrator prompt: overlay elements must come
before content they overlap.

Add padding support to OrchestratorPlan rootFrame type. Default mobile
root frame gap to 16 for consistent spacing.

* feat(electron): add publisher name to Windows build configuration

Updated the `electron-builder.yml` to include a publisher name for Windows builds, enhancing the identification of the application during installation. Additionally, revised the README files across multiple languages to reflect the new project description and features, emphasizing OpenPencil as the world's first AI-native open-source vector design tool with concurrent agent teams and design-as-code capabilities.

---------

Co-authored-by: Fini <fini.yang@gmail.com>

2026-03-11 21:18:49 +08:00

16 KiB

Raw Blame History

OpenPencil

Первый в мире AI-нативный инструмент векторного дизайна с открытым исходным кодом.
_{Параллельные команды агентов • Дизайн как код • Встроенный MCP-сервер • Мультимодельный интеллект}

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

_{Нажмите на изображение, чтобы посмотреть демо-видео}

Почему OpenPencil

🎨 Запрос → Холст

Опишите любой интерфейс на естественном языке. Наблюдайте, как он появляется на бесконечном холсте в реальном времени со стриминговой анимацией. Изменяйте существующие дизайны, выбирая элементы и общаясь в чате.

🤖 Параллельные команды агентов

Оркестратор декомпозирует сложные страницы на пространственные подзадачи. Несколько AI-агентов работают над разными секциями одновременно — hero, features, footer — всё стримится параллельно.

🧠 Мультимодельный интеллект

Автоматически адаптируется к возможностям каждой модели. Claude получает полные промпты с thinking; GPT-4o/Gemini — без thinking; маленькие модели (MiniMax, Qwen, Llama) получают упрощённые промпты для надёжного вывода.

🔌 MCP-сервер

Установка в один клик в Claude Code, Codex, Gemini, OpenCode, Kiro или Copilot CLI. Дизайн из терминала — чтение, создание и изменение файлов .op через любой MCP-совместимый агент.

📦 Дизайн как код

Файлы .op — это JSON: удобочитаемые, дружественные к Git, поддерживают diff. Переменные дизайна генерируют CSS custom properties. Экспорт кода в React + Tailwind или HTML + CSS.

🖥️ Работает везде

Веб-приложение + нативный десктоп на macOS, Windows и Linux через Electron. Автообновление из GitHub Releases. Ассоциация файлов .op — двойной клик для открытия.

Быстрый старт

# Установить зависимости
bun install

# Запустить сервер разработки на http://localhost:3000
bun --bun run dev

Или запустить как десктопное приложение:

bun run electron:dev

Требования: Bun >= 1.0 и Node.js >= 18

AI-нативный дизайн

От запроса к UI

Текст в дизайн — опишите страницу и получите её на холсте в реальном времени со стриминговой анимацией
Оркестратор — разбивает сложные страницы на пространственные подзадачи для параллельной генерации
Изменение дизайна — выберите элементы и опишите изменения на естественном языке
Визуальный ввод — прикрепляйте скриншоты или макеты в качестве референса для дизайна

Поддержка нескольких агентов

Агент	Настройка
Claude Code	Без настройки — использует Claude Agent SDK с локальным OAuth
Codex CLI	Подключить в настройках агента (`Cmd+,`)
OpenCode	Подключить в настройках агента (`Cmd+,`)
GitHub Copilot	`copilot login`, затем подключить в настройках агента (`Cmd+,`)

Профили возможностей моделей — автоматически адаптирует промпты, режим thinking и таймауты для каждого уровня моделей. Модели полного уровня (Claude) получают полные промпты; стандартного уровня (GPT-4o, Gemini, DeepSeek) — с отключённым thinking; базового уровня (MiniMax, Qwen, Llama, Mistral) — упрощённые промпты с вложенным JSON для максимальной надёжности.

MCP-сервер

Встроенный MCP-сервер — установка в один клик в Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot CLI
Автоматизация дизайна из терминала: чтение, создание и изменение файлов .op через любой MCP-совместимый агент
Послойный рабочий процесс — design_skeleton → design_content → design_refine для дизайнов высокого качества с несколькими секциями
Сегментированное получение промптов — загружайте только нужные знания о дизайне (schema, layout, roles, icons, planning и т.д.)
Поддержка нескольких страниц — создание, переименование, переупорядочивание и дублирование страниц через инструменты MCP

Генерация кода

React + Tailwind CSS
HTML + CSS
CSS Variables из дизайн-токенов

Возможности

Холст и рисование

Бесконечный холст с панорамированием, масштабированием, умными направляющими и привязкой
Прямоугольник, Эллипс, Линия, Многоугольник, Перо (Безье), Frame, Текст
Булевы операции — объединение, вычитание, пересечение с контекстной панелью инструментов
Выбор иконок (Iconify) и импорт изображений (PNG/JPEG/SVG/WebP/GIF)
Авто-раскладка — вертикальная/горизонтальная с gap, padding, justify, align
Многостраничные документы с навигацией по вкладкам

Система дизайна

Переменные дизайна — цветовые, числовые и строковые токены со ссылками $variable
Поддержка нескольких тем — несколько осей, каждая с вариантами (Светлая/Тёмная, Компактная/Комфортная)
Система компонентов — переиспользуемые компоненты с экземплярами и переопределениями
CSS-синхронизация — автоматически генерируемые пользовательские свойства, var(--name) в выводе кода

Импорт из Figma

Импорт файлов .fig с сохранением раскладки, заливок, обводок, эффектов, текста, изображений и векторов

Десктопное приложение

Нативная поддержка macOS, Windows и Linux через Electron
Ассоциация файлов .op — двойной клик для открытия, блокировка единственного экземпляра
Автообновление из GitHub Releases
Нативное меню приложения и диалоги файлов

Технологический стек


Фронтенд	React 19 · TanStack Start · Tailwind CSS v4 · shadcn/ui
Холст	Fabric.js v7
Состояние	Zustand v5
Сервер	Nitro
Десктоп	Electron 35
AI	Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK
Среда выполнения	Bun · Vite 7
Формат файла	`.op` — на основе JSON, удобочитаемый, дружественный к Git

Структура проекта

src/
  canvas/          Движок Fabric.js — рисование, синхронизация, раскладка, направляющие, инструмент пера
  components/      React UI — редактор, панели, общие диалоги, иконки
  services/ai/     AI-чат, оркестратор, генерация дизайна, стриминг
  services/figma/  Пайплайн бинарного импорта Figma .fig
  services/codegen Генераторы кода React+Tailwind и HTML+CSS
  stores/          Zustand — холст, документ, страницы, история, AI, настройки
  variables/       Разрешение дизайн-токенов и управление ссылками
  mcp/             Инструменты MCP-сервера для интеграции с внешними CLI
  uikit/           Система переиспользуемых наборов компонентов
server/
  api/ai/          Nitro API — стриминговый чат, генерация, валидация
  utils/           Обёртки клиентов Claude CLI, OpenCode, Codex, Copilot
electron/
  main.ts          Окно, форк Nitro, нативное меню, автообновление
  preload.ts       IPC-мост

Горячие клавиши

Клавиша	Действие	Клавиша	Действие
`V`	Выбор	`Cmd+S`	Сохранить
`R`	Прямоугольник	`Cmd+Z`	Отменить
`O`	Эллипс	`Cmd+Shift+Z`	Повторить
`L`	Линия	`Cmd+C/X/V/D`	Копировать/Вырезать/Вставить/Дублировать
`T`	Текст	`Cmd+G`	Сгруппировать
`F`	Frame	`Cmd+Shift+G`	Разгруппировать
`P`	Инструмент пера	`Cmd+Shift+E`	Экспорт
`H`	Рука (панорама)	`Cmd+Shift+C`	Панель кода
`Del`	Удалить	`Cmd+Shift+V`	Панель переменных
`[ / ]`	Изменить порядок	`Cmd+J`	AI-чат
Стрелки	Сдвиг на 1px	`Cmd+,`	Настройки агента
`Cmd+Alt+U`	Булево объединение	`Cmd+Alt+S`	Булево вычитание
`Cmd+Alt+I`	Булево пересечение

Скрипты

bun --bun run dev          # Сервер разработки (порт 3000)
bun --bun run build        # Сборка для продакшена
bun --bun run test         # Запустить тесты (Vitest)
npx tsc --noEmit           # Проверка типов
bun run electron:dev       # Разработка Electron
bun run electron:build     # Упаковка Electron

Участие в разработке

Мы приветствуем вклад в проект! Подробности об архитектуре и стиле кода смотрите в CLAUDE.md.

Сделайте форк и клонируйте репозиторий
Создайте ветку: git checkout -b feat/my-feature
Запустите проверки: npx tsc --noEmit && bun --bun run test
Сделайте коммит в формате Conventional Commits: feat(canvas): add rotation snapping
Откройте PR в ветку main

Дорожная карта

Переменные и токены дизайна с CSS-синхронизацией
Система компонентов (экземпляры и переопределения)
Генерация дизайна с помощью AI и оркестратора
Интеграция с MCP-сервером и послойный рабочий процесс
Поддержка нескольких страниц
Импорт Figma .fig
Булевы операции (объединение, вычитание, пересечение)
Мультимодельные профили возможностей
Совместное редактирование
Система плагинов

Участники

Сообщество

Присоединяйтесь к нашему Discord — Задавайте вопросы, делитесь дизайнами, предлагайте функции.

16 KiB

Raw Blame History

OpenPencil

Почему OpenPencil

🎨 Запрос → Холст

🤖 Параллельные команды агентов

🧠 Мультимодельный интеллект

🔌 MCP-сервер

📦 Дизайн как код

🖥️ Работает везде

Быстрый старт

AI-нативный дизайн

Возможности

Технологический стек

Структура проекта

Горячие клавиши

Скрипты

Участие в разработке

Дорожная карта

Участники

Сообщество

Star History

Лицензия

16 KiB Raw Blame History Unescape Escape

OpenPencil

Почему OpenPencil

🎨 Запрос → Холст

🤖 Параллельные команды агентов

🧠 Мультимодельный интеллект

🔌 MCP-сервер

📦 Дизайн как код

🖥️ Работает везде

Быстрый старт

AI-нативный дизайн

Возможности

Технологический стек

Структура проекта

Горячие клавиши

Скрипты

Участие в разработке

Дорожная карта

Участники

Сообщество

Star History

Лицензия

16 KiB

Raw Blame History