Pi для дизайна.

Чем на самом деле является Pi

Pi — это открытый (MIT) ИИ-кодинг-агент для терминала, часть набора инструментов pi от earendil-works. Он читает ваш репозиторий, редактирует файлы и выполняет shell-команды — планируя и проверяя работу по задачам на естественном языке, а не просто дописывая строки. Его ядро намеренно мало: четыре инструмента по умолчанию — read, write, edit и bash — плюс встроенные grep, find и ls.

Для дизайнерской работы выделяющееся свойство в том, что Pi не привязан к провайдеру. Он нормализует Anthropic, OpenAI, Google и многих других провайдеров за единым унифицированным API, поэтому вы подключаете свои собственные ключи и выбираете модель под задачу — например сильную мультимодальную модель, чтобы читать референсные скриншоты — и переключаетесь через /model или Ctrl+L посреди сессии, не меняя рабочий процесс.

• Любая модель, ваши ключи: Pi маршрутизирует к более чем 20 провайдерам, включая Anthropic и OpenAI. Вы аутентифицируетесь своими собственными API-ключами (BYOK) или входите в подписку Claude Pro/Max, ChatGPT Plus/Pro или GitHub Copilot через /login.
• Skills + Extensions: Pi загружает Skills (пакеты возможностей на Markdown по стандарту Agent Skills) и Extensions на TypeScript — естественное место, чтобы зафиксировать ваши дизайн-конвенции и добавить кастомные инструменты.
• Ветвящиеся сессии: Сессии хранятся как деревья JSONL, поэтому вы можете ответвить исследование и навигировать по истории в одном файле, не теряя прежние проходы.

• Вендор: earendil-works (открытый проект сообщества)
• Учётные данные: ваш собственный API-ключ провайдера (BYOK — Anthropic, OpenAI, Google и т. д.) или вход в подписку через /login; хранится локально в ~/.pi/agent/auth.json (0600)
• Лицензия: MIT, открытый исходный код

Почему многопровайдерный, BYOK-агент подходит для дизайна

Преимущество Pi в дизайне — это гибкость, а не одна встроенная модель — но, как и у любого агента, вкус по-прежнему должен задавать человек.

• Выбирайте правильную модель под задачу: Поскольку Pi маршрутизирует к любому провайдеру, вы можете взять сильную мультимодальную модель, чтобы читать референсные скриншоты, затем переключиться на другую для рефакторинга — не покидая агента.
• Ваши ключи, без привязки: BYOK означает, что вы не привязаны к ценам или лимитам контекста одного вендора; выбирайте модель, чьи сильные стороны подходят к дизайн-задаче перед вами.
• Конвенции в Skills: Skill (плюс MCP-источник вроде Figma-сервера) направляет агента на ваши токены, компоненты и реальные спецификации, поэтому он работает на бренд, а не на вид по умолчанию.

Урок тот же, что преподаёт каждый агент: у Pi по умолчанию нет вкуса, и никакой выбор модели его не даёт. Он выдаёт хороший дизайн, когда вы задаёте ему ограничения — дизайн-систему, эстетический навык и конкретные референсы. Open Design упаковывает именно эти вводные — поэтому они так хорошо сочетаются (подробнее ниже).

Настройте Pi для дизайнерской работы с нуля

Вот полный путь от чистой машины до Pi, способного собирать и проверять UI.

# 1. Install the Pi coding agent CLI (Node)
npm install -g --ignore-scripts @earendil-works/pi-coding-agent

# 2. Authenticate with your own provider key (BYOK)
export ANTHROPIC_API_KEY=sk-ant-...   # or OPENAI_API_KEY=sk-...
#    (or run /login inside Pi for a Claude / ChatGPT / Copilot subscription)

# 3. Start it in your project
cd your-project
pi

# 4. Switch models any time with /model or Ctrl+L

• Зафиксируйте свои дизайн-правила: Поместите токены, примитивы и конвенции в Skill и направьте на них Pi, чтобы вывод соответствовал бренду, а не скатывался к шаблонному виду.
• Добавьте проверку в браузере: Подключите Playwright или браузерный MCP, чтобы Pi отрисовывал результат в реальном браузере и проверял вывод на разных брейкпоинтах, а не только подтверждал успешную сборку.

Рабочий процесс «скриншот → UI»

Самый результативный дизайн-цикл с Pi — превращение референсного изображения в рабочий, адаптивный UI и итерации до полного совпадения — опираясь на мультимодальную модель для сравнения вывода с референсом. Поскольку Pi не привязан к провайдеру, направьте его на ту модель, которая лучше всех читает изображения для этого прохода.

1. Начните с самых чётких визуальных референсов, какие у вас есть — и включите несколько состояний (десктоп и мобильный, наведение, пустое, загрузка), а не только один hero-кадр.
2. Выберите сильную мультимодальную модель для прохода через /model, ведь именно понимание изображений определяет качество «скриншот → UI».
3. Будьте конкретны в промпте; расплывчатые промпты дают шаблонный UI даже с сильной моделью.
4. Храните дизайн-систему и конвенции в Skill и укажите Pi, где находятся токены и канонические примитивы.
5. Запустите dev-сервер и пусть Pi отрисует результат в реальном браузере, меняя размер до брейкпоинтов, затем итерируйте, сравнивая реализацию со скриншотами — а не просто подтверждая, что сборка проходит.

Дайте агенту референсы и конкретные ограничения заранее:

pi
# in the prompt:
> Implement reference-desktop.png and reference-mobile.png in
  React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens (see the Skill).
  Match spacing, layout, and hierarchy; make it responsive.
  Render it in the browser and iterate until it matches the references
  across breakpoints.

Держите промпты небольшими и сфокусированными, коммитьте удачные итерации и откатывайте неудачные (сообщая Pi об откате), чтобы каждый проход опирался на чистую базу. Ветвящиеся JSONL-сессии Pi также позволяют исследовать альтернативу, не теряя исходную ветку.

Skills, Extensions и темы

Pi сам себя расширяет во время выполнения через несколько слоёв, и они аккуратно ложатся на открытый дизайн-процесс.

• Skills: Пакеты возможностей на Markdown по стандарту Agent Skills — устойчивый, переносимый дом для ваших дизайн-конвенций, токенов и чек-листов ревью. Тот же Skill работает с совместимыми агентами, не только с Pi.
• Extensions и шаблоны промптов: Extensions на TypeScript добавляют кастомные инструменты, команды и UI; переиспользуемые шаблоны промптов запускаются через /name. И то и другое позволяет скриптовать цикл проверки, не покидая терминал.
• MCP и темы: Pi подключается к MCP-серверам, чтобы внести внешний дизайн-контекст (наиболее уместно Figma MCP-сервер), а темы горячо перезагружаются, чтобы UI терминала оставался читаемым во время работы.

Это переносимые возможности — особенно Skills и MCP — именно то, что Open Design создан оркестрировать, а не воссоздавать в каждом проекте.

Pi против Codex, Claude Code, Cursor и Gemini CLI для дизайна

Единого победителя в дизайнерской работе нет — у каждого агента своя сильная сторона, и опытные команды используют их в связке. Честное резюме:

Угол Pi ортогонален остальным: это агент, который позволяет использовать любую из этих базовых моделей на ваших собственных ключах. Повторяющийся вердикт сообщества по-прежнему верен — вкус исходит от людей: все они скатываются к шаблонной эстетике без навыков, референсов и ограничений. Это и есть настоящая задача, которую нужно решить, и она по форме дизайн-инструмента, а не модели.

Подводные камни и как избежать вида «ИИ-халтуры»

Самая частая претензия к дизайну, сгенерированному ИИ, в том, что он выглядит шаблонно — мягкие градиенты, парящие панели, чрезмерно скруглённые углы, драматичные тени, эстетика «Inter и фиолетовый», которая «кричит, что это сделал ИИ». Среди других сообщаемых проблем — сломанные мобильные макеты и инструкции, протекающие в текст интерфейса. Ничто из этого не уникально для Pi или какой-либо одной модели; так бывает, когда любой агент работает без кураторского дизайн-контекста.

• Добавьте эстетический навык: Кураторский дизайн-навык вынуждает агента выбрать реальное направление вместо вида по умолчанию — а поскольку это переносимый Skill, он путешествует с вами между моделями.
• Проверяйте в реальном браузере: Выберите мультимодальную модель и пусть Pi отрисовывает и сам себя проверяет на разных брейкпоинтах, чтобы макеты не ломались незаметно на мобильных.
• Предоставьте токены и референсы: Реальные дизайн-токены и референсные скриншоты — самый сильный рычаг качества вывода.
• Зафиксируйте правила там, где их читает Pi: Поместите правила вроде «никаких hero-карточек, максимум два шрифта, иерархия от бренда» в Skill, который агент загружает при каждом запуске.

Обратите внимание: каждое средство сводится к тому, чтобы дать агенту кураторский дизайн-контекст — независимо от того, к какому провайдеру вы маршрутизируете. Поддерживать этот контекст вручную в каждом проекте — та рутина, которую Open Design устраняет.

Дизайн с Pi внутри Open Design

Open Design — это открытый дизайн-слой, которого постоянно требует описанный выше процесс. Он относится к Pi как к адаптеру первого класса и оборачивает его кураторской библиотекой навыков и дизайн-систем, структурированным конвейером отрисовки и локальным десктоп-интерфейсом — поэтому дизайн-контекст, который делает Pi хорошим, есть с первого запуска, а не собирается вручную каждый раз. Оба проекта открыты и локальны, что делает связку естественной.

1. Установите Open Design и выберите Pi как своего агента.
2. Аутентифицируйтесь своим собственным API-ключом провайдера (BYOK) или входом в подписку — учётные данные остаются на вашей машине в ~/.pi/agent/auth.json и никогда не проксируются через нас.
3. Выберите дизайн-систему и навык, затем генерируйте презентации, прототипы и лендинги с единообразным вкусом.
4. Каждый артефакт и файл DESIGN.md живёт в вашем собственном репозитории, а не в хостинговом облаке.

Тот же агент Pi, те же ключи, та же свобода переключать модели — плюс настоящий, переносимый, открытый дизайн-процесс вокруг него. Он локален и под лицензией MIT, поэтому ничто из вашей работы или ваших учётных данных не покидает вашу машину.

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

1. 01 Может ли Pi действительно заниматься дизайном? +

   Да — с эстетическим навыком, дизайн-системой и реальными референсными изображениями в контексте Pi выдаёт адаптивный UI продакшен-качества, а вы можете направить его на сильную мультимодальную модель, чтобы сверять вывод с референсами. Без этого контекста он склонен скатываться к шаблонному виду — этот разрыв и закрывает Open Design.

2. 02 Нужно ли платить, чтобы заниматься дизайном с Pi? +

   Сам Pi бесплатен и открыт (MIT). Вы платите только за базовую модель — подключите свой собственный API-ключ провайдера (BYOK) или используйте подписку Claude Pro/Max, ChatGPT Plus/Pro или GitHub Copilot через /login. Open Design в любом случае не проксирует ваши учётные данные.

3. 03 Что делает Pi хорошим именно для дизайна? +

   Он не привязан к провайдеру: вы подключаете свои собственные ключи и маршрутизируете к любому из более чем 20 провайдеров, выбирая модель, чьи сильные стороны подходят к задаче, и переключаясь посреди сессии. Но вкус по-прежнему исходит из дизайн-системы, навыка и референсов, которые предоставляете вы, а не из модели.

4. 04 Какую модель использовать с Pi для фронтенд-дизайна? +

   Pi маршрутизирует ко многим провайдерам, поэтому выбирайте под задачу — сильная мультимодальная модель хорошо читает референсные скриншоты, тогда как другие могут подойти для рефакторинга. Преимущество Pi в том, что вы можете переключаться, не меняя рабочий процесс. Open Design позволяет сохранять один и тот же дизайн-контекст для любой выбранной вами модели.

5. 05 Как подключить Pi к Figma? +

   Pi поддерживает MCP-серверы, поэтому вы можете добавить Figma MCP-сервер и извлекать реальный дизайн-контекст — компоненты, переменные, данные макета — чтобы сгенерированный код совпадал с источником, а не приближался к нему.

6. 06 Связан ли Open Design с Pi? +

   Нет. Pi — независимый открытый проект от earendil-works; Open Design — отдельный независимый открытый проект, который поддерживает Pi как адаптер первого класса.

7. 07 В безопасности ли мои файлы и учётные данные? +

   Да — Open Design локален и открыт. Ваши файлы, артефакты и DESIGN.md остаются в вашем собственном репозитории, а ваши ключи провайдеров используются Pi напрямую (хранятся локально в ~/.pi/agent/auth.json) и никогда не маршрутизируются через серверы Open Design.