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

Чим насправді є Pi

Pi — це відкритий (MIT) AI-агент для кодування в терміналі, частина набору інструментів 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) і TypeScript Extensions — природне місце, щоб закодувати ваші дизайн-конвенції та додати кастомні інструменти.
• Гілкування сесій: Сесії зберігаються як 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. Починайте з найчіткіших візуальних референсів, які у вас є — і додавайте кілька станів (десктоп і мобільний, наведення, порожній, завантаження), а не лише один головний кадр.
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 саморозширюється під час виконання через кілька шарів, і вони чітко лягають на відкритий дизайн-процес.

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

Це переносні можливості — особливо Skills і MCP — саме те, що Open Design створений оркеструвати, а не відтворювати в кожному проєкті.

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

Немає єдиного переможця для дизайнерської роботи — кожен агент має різну сильну сторону, і досвідчені команди поєднують їх. Чесне зведення:

Кут зору Pi ортогональний до інших: це агент, який дозволяє використовувати будь-яку з тих базових моделей на ваших власних ключах. Повторюваний вердикт спільноти все одно тримається — смак походить від людей: усі вони за замовчуванням переходять до шаблонної естетики без навичок, референсів та обмежень. Це і є справжня проблема, яку треба вирішити, і вона має форму інструмента дизайну, а не моделі.

Пастки та як уникнути вигляду «AI-шаблону»

Найпоширеніша скарга на згенерований AI дизайн — що він виглядає шаблонно: м'які градієнти, плаваючі панелі, надмірно округлені кути, драматичні тіні, вайб «Inter-і-фіолетовий», який «кричить, що це зробив AI». Серед інших повідомлених проблем — зламані мобільні макети та інструкції, що просочуються в текст UI. Жодна з цих проблем не унікальна для Pi чи для якоїсь однієї моделі; так трапляється, коли будь-який агент працює без кураторського дизайн-контексту.

• Додайте естетичну навичку: Кураторська дизайн-навичка змушує агента зобов'язатися до реального напрямку замість вигляду за замовчуванням — а оскільки це переносна Skill, вона мандрує з вами між моделями.
• Перевіряйте у справжньому браузері: Виберіть мультимодальну модель і нехай Pi рендерить і самоперевіряється на різних точках перелому, щоб макети не ламалися мовчки на мобільному.
• Надайте токени та референси: Справжні дизайн-токени та референсні скриншоти — це найбільший важіль якості результату.
• Закодуйте правила там, де Pi їх читає: Розмістіть правила стилю на кшталт «без головних карток, максимум два шрифти, ієрархія від бренду» в Skill, яку агент завантажує щоразу.

Зверніть увагу: кожне пом'якшення стосується надання агенту кураторського дизайн-контексту — незалежно від того, на якого провайдера ви маршрутизуєте. Підтримувати цей контекст вручну для кожного проєкту — саме та рутина, яку усуває Open Design.

Дизайн з Pi всередині Open Design

Open Design — це відкритий дизайн-шар, якого постійно потребує наведений вище процес. Він розглядає Pi як адаптер першої сторони й огортає його кураторською бібліотекою навичок і дизайн-систем, структурованим конвеєром рендерингу та локальним десктопним UI — тож дизайн-контекст, що робить 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.