Pencil

Что такое Pencil?

Pencil — это управляемый агентами дизайн-холст, построенный на открытом формате дизайна, который живет непосредственно в вашей кодовой базе и IDE (Cursor, VS Code, Claude Code). Он устраняет традиционную передачу дизайн-в-код, внося пиксельно-идеальный векторный холст в вашу среду разработки. Файлы дизайна хранятся как контролируемые версиями файлы на основе JSON (формат .pen) в вашем Git-репозитории, позволяя командам управлять дизайнами, используя те же рабочие процессы ветвления, слияния и сотрудничества, что и код. Pencil интегрируется с Claude Code, поддерживает компонентные дизайн-системы и обеспечивает двунаправленные рабочие процессы с Figma через функциональность копирования-вставки. Платформа использует архитектуру Model Context Protocol (MCP), позволяя другим инструментам и агентам программно читать и записывать дизайны.

Ключевые функции

• Интегрированный Дизайн-Холст

  Пиксельно-идеальный бесконечный WebGL холст, встроенный непосредственно в вашу IDE, устраняющий переключение контекста между инструментами дизайна и редакторами кода.

• Контроль Версий на Основе Git

  Файлы дизайна, хранящиеся в формате JSON в вашем репозитории, обеспечивают контроль версий, ветвление и слияние дизайнов наряду с кодом, используя стандартные рабочие процессы Git.

• Параллельная AI Генерация

  Запускайте несколько дизайн-агентов одновременно для исследования различных направлений дизайна, обеспечивая быструю итерацию и экспериментирование без линейных рабочих процессов.

• Компоненты и Дизайн-Системы

  Используйте предварительно созданные библиотеки компонентов и подключайте существующую дизайн-систему вашей команды непосредственно из кодовой базы для обеспечения согласованности и повторного использования.

• Интеграция с Figma

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

• Расширяемость на Основе MCP

  Полный доступ для чтения и записи через Model Context Protocol позволяет интеграцию с базами данных, API, библиотеками диаграмм, Playwright/Puppeteer и пользовательскими агентами.

Варианты использования

• Ускорение Дизайн-в-Код : Продуктовые команды могут проектировать интерфейсы в IDE и немедленно генерировать готовый к продакшену код, устраняя фазу передачи дизайна и уменьшая несоответствие между намерением дизайна и реализацией.
• Рабочие Процессы Vibe Coding : Разработчики могут итерировать UI/UX через высокоуровневые промпты и визуальные манипуляции на холсте, сочетая скорость агентной генерации кода с точным контролем визуального дизайна.
• Управление Дизайн-Системой : Организации могут обеспечить согласованность дизайна, встраивая утвержденные библиотеки компонентов и дизайн-токены непосредственно в кодовую базу, делая невозможным для разработчиков отклонение без явных изменений контроля версий.
• Совместный Дизайн и Разработка : Кроссфункциональные команды могут работать синхронно на одном холсте через функции мультиплеера, при этом дизайнеры обеспечивают визуальное направление, а разработчики параллельно реализуют функциональные компоненты.
• Быстрое Прототипирование : Быстро исследуйте множественные направления дизайна на общем холсте с возможностью ветвления дизайнов как код, затем развивайте выигрышную итерацию в продакшн-приложение.

Часто задаваемые вопросы