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

Kayshen-X 29e0bdaeeb docs: move MseeP badge to bottom of all README versions

2026-04-29 22:00:00 +08:00

30 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, ориентированный на визуальный дизайн, совместимый с Figma, с совместной работой в реальном времени. Этот проект ориентирован на AI-нативные рабочие процессы «дизайн в код».

Почему 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 — двойной клик для открытия.

⌨️ CLI — `op`

Управляйте инструментом дизайна из терминала. op design, op insert — пакетный DSL дизайна, манипуляция узлами. Ввод через pipe из файлов или stdin. Работает с десктопным приложением или веб-сервером.

🎯 Мультиплатформенный экспорт кода

Экспорт из одного файла .op в React + Tailwind, HTML + CSS, Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, React Native. Переменные дизайна превращаются в пользовательские свойства CSS.

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

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

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

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

bun run electron:dev

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

Docker

Доступно несколько вариантов образов — выберите подходящий для ваших нужд:

Образ	Размер	Содержит
`openpencil:latest`	~226 МБ	Только веб-приложение
`openpencil-claude:latest`	—	+ Claude Code CLI
`openpencil-codex:latest`	—	+ Codex CLI
`openpencil-opencode:latest`	—	+ OpenCode CLI
`openpencil-copilot:latest`	—	+ GitHub Copilot CLI
`openpencil-gemini:latest`	—	+ Gemini CLI
`openpencil-full:latest`	~1 ГБ	Все CLI-инструменты

Запуск (только веб):

docker run -d -p 3000:3000 ghcr.io/zseven-w/openpencil:latest

Запуск с AI CLI (например, Claude Code):

AI-чат использует OAuth-авторизацию Claude CLI. Используйте Docker-том для сохранения сессии авторизации:

# Шаг 1 — Авторизация (однократно)
docker volume create openpencil-claude-auth
docker run -it --rm \
  -v openpencil-claude-auth:/root/.claude \
  ghcr.io/zseven-w/openpencil-claude:latest claude login

# Шаг 2 — Запуск
docker run -d -p 3000:3000 \
  -v openpencil-claude-auth:/root/.claude \
  ghcr.io/zseven-w/openpencil-claude:latest

Локальная сборка:

# Базовый (только веб)
docker build --target base -t openpencil .

# С конкретным CLI
docker build --target with-claude -t openpencil-claude .

# Полный (все CLI)
docker build --target full -t openpencil-full .

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

От запроса к UI

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

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

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

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

i18n — Полная локализация интерфейса на 15 языках: English, 简体中文, 繁體中文, 日本語, 한국어, Français, Español, Deutsch, Português, Русский, हिन्दी, Türkçe, ไทย, Tiếng Việt, Bahasa Indonesia.

MCP-сервер

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

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

React + Tailwind CSS, HTML + CSS, CSS Variables
Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, React Native

CLI — `op`

Установите глобально и управляйте инструментом дизайна из терминала:

npm install -g @zseven-w/openpencil

op start                     # Запустить десктопное приложение
op design @landing.txt       # Пакетный дизайн из файла
op insert '{"type":"RECT"}'  # Вставить узел
op import:figma design.fig   # Импортировать файл Figma
cat design.dsl | op design - # Передача через stdin

Поддерживает три метода ввода: строка, @filepath (чтение из файла) или - (чтение из stdin). Работает с десктопным приложением или веб-сервером разработки. Подробнее в CLI README.

LLM-навык — установите плагин OpenPencil Skill, чтобы научить ИИ-агентов (Claude Code, Cursor, Codex, Gemini CLI и др.) проектировать с помощью op.

Возможности

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

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

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

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

AI и агенты

Prompt-to-canvas с потоковой генерацией и разбиением пространства под управлением оркестратора
Параллельные команды агентов — несколько дизайнеров одновременно работают над разными секциями с индикаторами на холсте по каждому участнику
Послойный рабочий процесс — design_skeleton → design_content → design_refine со сфокусированными промптами на каждой фазе
Руководства по стилю — 50+ встроенных стилей (glassmorphism, brutalist, retro и т. д.) с нечётким сопоставлением по тегам, интегрированным в планирование и генерацию
Профили возможностей мультимодели — автоматически подстраивает режим размышления, уровень усилий и форму промпта в зависимости от уровня модели
Встроенный рантайм агентов (agent-native, Zig NAPI) + провайдеры Anthropic, Claude Agent SDK, OpenCode, Codex, Copilot, Gemini
Проброс формата Anthropic для китайских провайдеров LLM — Kimi, Zhipu, GLM, DouBao, Ark, Bailian/DashScope, ModelScope, Coding Plans

Интеграция с Git

Мастер клонирования с аутентификацией SSH / HTTPS и управлением SSH-ключами
Выбор ветки — создание, переключение, удаление, слияние — всё прямо из панели Git
Каскады pull / push с повтором аутентификации и обработкой non-fast-forward
Трёхстороннее слияние в режиме папки с отслеживанием состояния MERGE_HEAD на диске
Панель конфликтов с трёхсторонними карточками по узлам/полям, встроенным редактором JSON, массовыми действиями и встроенным блоком diff
Интерфейс настроек удалённых репозиториев и SSH-ключей; i18n на 15 языков по всей поверхности Git

Экспорт

Экспорт холста — PNG, JPEG, WEBP, PDF (Cmd+Shift+P)
Экспорт кода — React + Tailwind, HTML + CSS, Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, React Native
Инкрементальный конвейер генерации кода MCP — codegen_plan, codegen_submit_chunk, codegen_assemble, codegen_clean

Импорт из Figma

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

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

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

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


Фронтенд	React 19 · TanStack Start · Tailwind CSS v4 · shadcn/ui · i18next
Холст	CanvasKit/Skia (WASM, GPU-ускорение)
Состояние	Zustand v5
Сервер	Nitro
Десктоп	Electron 35
CLI	`op` — управление из терминала, пакетный DSL дизайна
AI	Vercel AI SDK v6 · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK
Среда выполнения	Bun · Vite 7
Формат файла	`.op` — на основе JSON, удобочитаемый, дружественный к Git

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

openpencil/
├── apps/
│   ├── web/                 Веб-приложение TanStack Start
│   │   ├── src/
│   │   │   ├── canvas/      Движок CanvasKit/Skia — рисование, синхронизация, раскладка
│   │   │   ├── components/  React UI — редактор, панели, общие диалоги, иконки
│   │   │   ├── services/ai/ AI-чат, оркестратор, генерация дизайна, стриминг
│   │   │   ├── stores/      Zustand — холст, документ, страницы, история, AI
│   │   │   ├── mcp/         Инструменты MCP-сервера для интеграции с внешними CLI
│   │   │   ├── hooks/       Горячие клавиши, перетаскивание файлов, вставка из Figma
│   │   │   └── uikit/       Система переиспользуемых наборов компонентов
│   │   └── server/
│   │       ├── api/ai/      Nitro API — стриминговый чат, генерация, валидация
│   │       └── utils/       Обёртки клиентов Claude CLI, OpenCode, Codex, Copilot
│   ├── desktop/             Десктопное приложение Electron
│   │   ├── main.ts          Окно, форк Nitro, нативное меню, автообновление
│   │   ├── ipc-handlers.ts  Нативные файловые диалоги, синхронизация темы, настройки IPC
│   │   └── preload.ts       IPC-мост
│   └── cli/                 CLI-инструмент — команда `op`
│       ├── src/commands/    Команды: дизайн, документ, экспорт, импорт, узлы, страницы, переменные
│       ├── connection.ts    WebSocket-соединение с запущенным приложением
│       └── launcher.ts      Автоопределение и запуск десктопного приложения или веб-сервера
├── packages/
│   ├── pen-types/           Определения типов для модели PenDocument
│   ├── pen-core/            Операции с деревом документа, движок раскладки, переменные
│   ├── pen-codegen/         Генераторы кода (React, HTML, Vue, Flutter, ...)
│   ├── pen-figma/           Парсер и конвертер файлов Figma .fig
│   ├── pen-renderer/        Автономный рендерер CanvasKit/Skia
│   ├── pen-sdk/             Зонтичный SDK (реэкспортирует все пакеты)
│   ├── pen-ai-skills/       Движок AI-навыков (фазовая загрузка промптов)
│   └── agent/               SDK AI-агента (Vercel AI SDK, мультипровайдер, команды агентов)
└── .githooks/               Pre-commit синхронизация версий из имени ветки

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

Клавиша	Действие	Клавиша	Действие
`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+P`	Экспорт (PNG/JPG/WEBP/PDF)
`H`	Рука (панорама)	`Cmd+Shift+C`	Панель кода
`Del`	Удалить	`Cmd+Shift+V`	Панель переменных
`[ / ]`	Изменить порядок	`Cmd+J`	AI-чат
Стрелки	Сдвиг на 1px	`Cmd+,`	Настройки агента
`Cmd+Alt+U`	Булево объединение	`Cmd+Alt+S`	Булево вычитание
`Cmd+Alt+I`	Булево пересечение	`Cmd+Shift+S`	Сохранить как

Скрипты

bun --bun run dev          # Сервер разработки (порт 3000)
bun --bun run build        # Сборка для продакшена
bun --bun run test         # Запустить тесты (Vitest)
npx tsc --noEmit           # Проверка типов
bun run bump <version>     # Синхронизация версий во всех package.json
bun run electron:dev       # Разработка Electron
bun run electron:build     # Упаковка Electron
bun run cli:dev            # Запуск CLI из исходников
bun run cli:compile        # Компиляция CLI в dist

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

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

Сделайте форк и клонируйте репозиторий
Настройте синхронизацию версий: git config core.hooksPath .githooks
Создайте ветку: 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
Булевы операции (объединение, вычитание, пересечение)
Мультимодельные профили возможностей
Реструктуризация в монорепозиторий с переиспользуемыми пакетами
CLI-инструмент (op) для управления из терминала
Встроенный SDK AI-агента с поддержкой нескольких провайдеров
i18n — 15 языков
Интеграция с Git (клон, ветки, push/pull, трёхстороннее слияние в режиме папки)
Растровый экспорт холста (PNG / JPEG / WEBP / PDF)
Совместное редактирование
Система плагинов

Участники

Спонсоры

OpenPencil бесплатен и open source. Разработка финансируется теми, кому он полезен — спасибо, что держите холст открытым.

Спасибо MrQyun — хотите видеть здесь своё имя? Стать спонсором →

Сообщество

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

30 KiB

Raw Blame History

OpenPencil

Почему OpenPencil

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

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

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

🔌 MCP-сервер

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

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

⌨️ CLI — `op`

🎯 Мультиплатформенный экспорт кода

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

Docker

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

CLI — `op`

Возможности

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

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

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

Скрипты

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

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

Участники

Спонсоры

Сообщество

Star History

Лицензия

30 KiB Raw Blame History Unescape Escape

OpenPencil

Почему OpenPencil

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

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

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

🔌 MCP-сервер

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

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

⌨️ CLI — op

🎯 Мультиплатформенный экспорт кода

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

Docker

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

CLI — op

Возможности

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

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

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

Скрипты

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

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

Участники

Спонсоры

Сообщество

Star History

Лицензия

30 KiB

Raw Blame History

⌨️ CLI — `op`

CLI — `op`