ДОПОЛНИТЕЛЬНОЕ ЧТЕНИЕ
Дополнительные материалы по Pi
Туториалы, документация и разборы по дизайну с Pi из опубликованного руководства.
Pi 
OpenDesign Проектируйте с
Pi в
OpenDesign.
Как проектировать интерфейсы с Pi в OpenDesign: переносимые skill, модель и ключ, которые вы выбираете, одна задача сравнения планов от брифа до проверенного файла, и ограничения, которые нужно знать перед началом.
От брифа к интерфейсу01 / Pi
ВЫ ПРИНОСИТЕ ИДЕЮ↗
«Сравнение планов с одним
переносимым skill, любая модель».
ТРИ СПОСОБА НАЧАТЬ С ЭТИМ ГАЙДОМ ПО PI
Выберите, с чего начать с Pi
ЭТО РУКОВОДСТВО · ДИЗАЙН ИНТЕРФЕЙСОВ
Создайте интерфейс продукта с Pi
Это руководство: бриф, референсы, правила дизайна и проверенный результат в HTML.
Читать это руководство НАСТРОЙКАНастройте Pi с нуля
Вот полный путь от чистой машины до Pi, способного создавать и проверять UI.
Перейти к настройке СРАВНЕНИЕСравните Pi с другими агентами
Чем Pi отличается от Codex, Claude Code, Cursor для работы с дизайном и когда выбрать другой workflow.
Посмотреть сравнениеНа этой странице Пример
Одна полная задача по дизайну с Pi
Задача по дизайну с Pi, от брифа до интерфейса
Одна задача, показанная от начала до конца: бриф и ограничения, которые вы передаёте, артефакт, который возвращается, и проверки, которые вы всё равно выполняете до завершения. Интерфейс ниже — иллюстративный пример, созданный для этой страницы, а не зафиксированный запуск Pi.
1Дизайн-бриф и ограничения
БрифСпроектируйте страницу сравнения планов для приложения для заметок: бесплатный, личный и командный планы, сравнение функций и краткий FAQ. Десктоп и телефон.
- Дизайн-системаOpenDesign paper canvas: Albert Sans, один зелёный акцент
- Брейкпоинты1440px десктоп и 390px мобильный, без горизонтального скролла
- ВзаимодействияПереключатель тарификации, CTA планов, раскрытие строки сравнения
- РезультатОдин самодостаточный HTML-файл со стабильными хуками
data-od-id
2Разделение работы: вы, Pi и OpenDesign
- Вы
Пишете бриф, выбираете дизайн-систему и определяете критерии приёмки.
- Pi
Планирует макет, пишет HTML, CSS и JavaScript и корректирует по запросу.
- OpenDesign
Предоставляет дизайн-систему и skill, рендерит превью и сохраняет каждую версию как файл в проекте.
- Проверка
Перед передачей проверяются визуальная иерархия, отступы по сетке 8px, оба брейкпоинта и каждое взаимодействие.
3Артефакт Pi: страница сравнения планов при 1440px и 390px
4Проверка перед передачей
Layout
Сетка и отступы
Три плана и сравнение используют общую сетку 8px; строки функций выровнены по колонкам.
Иерархия
Визуальная иерархия
Сначала цена и название плана; акцент отмечает самый выбираемый бейдж и его кнопку.
Responsive
Мобильная раскладка
Сначала личный план, затем бесплатный, затем командный; переключатель остаётся сверху.
Interaction
Проверка взаимодействия
Переключите тумблер, пройдите по CTA с помощью табуляции, раскройте одну строку сравнения.
Fit
Когда Pi подходит для задачи, а когда нет
Pi подходит, когда
- Любая модель, ваши ключи. Подключайтесь к Anthropic, OpenAI, Google и другим на своих ключах; выберите мощную мультимодальную модель для перехода от скриншота к UI и переключайтесь с помощью /model.
- Переносимые Skills. Кодируйте свои конвенции дизайна как Skills стандарта Agent-Skills, которые переносятся между совместимыми агентами, а не только Pi.
- MCP + расширения. Подключайте реальный дизайн-контекст через MCP-сервер Figma и автоматизируйте цикл проверки с помощью расширений TypeScript.
- Открытый и BYOK. Лицензия MIT и локальный подход; вы платите только за используемую модель, а ваши учётные данные остаются на вашем компьютере.
Выберите другой workflow, если
- Вам нужны редактируемые векторные файлы. Артефакт — это HTML, а не редактируемый дизайн-документ. Проверьте отдельный векторный workflow для нужного вам формата файлов.
- У вас нет ни референса, ни ограничений. Без дизайн-системы или примеров результат стремится к типовому виду; сначала напишите бриф.
- У вас нет учётных данных, необходимых этому агенту. Требуется: собственный API-ключ провайдера (принесите свой ключ) или вход по подписке через /login. OpenDesign не предоставляет и не проксирует учётные данные.
- Ваша команда работает в Aider или OpenCode. У этих агентов есть свои страницы; рабочее пространство одно и то же, различается настройка. См. похожие агенты.
Совместимость
Требования Pi перед началом работы
Это руководство описывает Pi при подключении через настольное приложение OpenDesign. Ссылки на источники проверены 6 сентября 2026 года.
Область инструментаPi, от сообщества
Pi — это open-source (MIT) терминальный AI-агент для кода от earendil-works. Он читает вашу кодовую базу, редактирует файлы и выполняет команды на основе небольшого ядра из четырёх инструментов — read, write, edit, bash. Эта страница посвящена проектированию интерфейсов с Pi через OpenDesign, а не собственному интерфейсу Pi. В заметках по настройке OpenDesign перечислены доступные агенты.
Учётные записи и аутентификацияСобственный API-ключ провайдера (BYOK) или
Собственный API-ключ провайдера (BYOK) или вход по подписке через /login. Аутентифицируйтесь с помощью собственного API-ключа провайдера (BYOK) или входа по подписке — учётные данные остаются на вашей машине. Эта страница не гарантирует квоту или цену.
Система и версииДесктопное приложение или сборка из исходников
Проверьте страницу загрузки на наличие десктопных сборок. Требования к Node.js и pnpm в исходном quickstart относятся к запуску из исходного кода, а не к установке десктопного пакета. Минимальная совместимая версия Pi здесь не проверена.
Проверка подключенияСигнал об успехе
Следуйте инструкциям по подключению, показанным в вашей установленной версии, затем выполните небольшую задачу. Убедитесь, что Pi справился с ней и что артефакт открывается. Одной загрузки недостаточно для установления рабочего подключения.
Начните с десктопного приложения
Настройка Pi в три шага
Сначала загрузите, затем завершите настройку Pi для вашей установленной версии, после чего проверьте небольшой результат. Вам не нужно собирать OpenDesign из исходного кода, чтобы пройти этот путь.
- 1
Загрузите десктопное приложение OpenDesign
Выберите пакет для вашего компьютера, установите его и откройте приложение.
Скачать OpenDesignКОНТРОЛЬНАЯ ТОЧКАОткрывается настольное приложение. Уже установлено? Переходите к следующему шагу — повторно скачивать не нужно. - 2
Подготовьте подключение Pi
Следуйте инструкциям Pi для вашей установленной версии. Аутентифицируйтесь с помощью собственного API-ключа провайдера (BYOK) или входа по подписке — учётные данные остаются на вашей машине.
Документация Pi по провайдерам и аутентификации# 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)Из заметок по настройке Pi в опубликованном руководстве; актуальную команду проверяйте в документации поставщика.
КОНТРОЛЬНАЯ ТОЧКАУбедитесь, что выбраны нужный агент и аккаунт. Если он недоступен, проверьте совместимость, прежде чем браться за более крупную задачу. - 3
Выполните одну небольшую задачу с Pi
Используйте небольшой бриф, чтобы оценить весь цикл, включая одну доработку.
Начальный брифСоздайте экран настроек с формой профиля и подтверждением сохранения. Используйте мои правила дизайна. Проверьте на ширинах для десктопа и мобильных устройств.
КОНТРОЛЬНАЯ ТОЧКАОткройте результат, проверьте состояние сохранения и запросите одно конкретное изменение. Сгенерированный файл — это начало проверки, а не её конец.
Чтобы запустить OpenDesign из исходного кода, следуйте техническому quickstart.
Рабочий процесс дизайна в Pi
Рабочий процесс дизайна в Pi в пять шагов
Одна и та же задача по странице сравнения планов, пройденная от брифа до проверенного файла. На каждом шаге указано, что предоставляете вы, что делает Pi, чем помогает OpenDesign и что вы проверяете.
- 1
Дизайн-бриф
Простой язык, от трёх до шести строк. Укажите аудиторию, задачу экрана и платформы.
- ВыНапишите бриф; приложите референсный скриншот, если он есть.
- PiЧитает бриф и файл инструкций проекта; задаёт вопросы, если что-то неоднозначно.
- OpenDesignПредоставляет проект, поверхность для промптов и skill для нужного типа артефакта.
- ПроверкаУбедитесь, что в брифе указаны критерии приёмки. Добавить их сейчас дешевле, чем после генерации.
- 2
Дизайн-ограничения
Дизайн-система и несколько строгих правил. Именно это отличает результат в стиле бренда от универсального вида.
- ВыВыберите дизайн-систему; укажите breakpoints и обязательные к использованию компоненты.
- PiЗагружает токены и правила стиля из DESIGN.md в контекст, прежде чем написать хоть строку.
- OpenDesignПоставляет библиотеку дизайн-систем и привязывает выбранную к шаблону skill.
- ПроверкаТокены соответствуют вашему бренду. Один акцентный цвет, нужные шрифты, нужный радиус.
- 3
Сгенерировать интерфейс
Pi пишет автономный HTML-файл: разметку, стили, интерактивность и стабильные хуки.
- ВыПодождите или ответьте на уточняющий вопрос. Настраивать ничего не нужно.
- PiПланирует секции, пишет HTML, CSS и JavaScript, запускает файл и исправляет то, что не работает.
- OpenDesignСохраняет артефакт в папку проекта и индексирует его для предпросмотра.
- ПроверкаПока ничего. Оценивайте файл после рендеринга, а не по исходному коду.
- 4
Предпросмотр
Файл отображается внутри OpenDesign при указанных вами ширинах. Именно здесь оценивается дизайн.
- ВыПереключаете ширины, кликаете по интерактивным элементам, оставляете комментарии к элементам.
- PiЧитает ваши комментарии к превью и готовит следующую редакцию.
- OpenDesignОтображает предпросмотр, предоставляет цели
data-od-idдля комментариев и правок. - ПроверкаИерархия, контраст, переполнение при 390px, состояния фокуса и то, используется ли акцент умеренно.
- 5
Правки и проверка
Запрашивайте изменения, указывая на элементы в предпросмотре. Каждая правка — это новый файл; ничего не перезаписывается тихо.
- ВыПревращаете комментарии в запросы; решаете, когда задача выполнена.
- PiПрименяет изменения на месте и повторно запускает файл.
- OpenDesignХранит версии рядом друг с другом; экспортирует изображение или HTML, когда вы закончили.
- ПроверкаПовторно проверяете только изменённую область, затем всю страницу целиком на каждой контрольной точке.
Ресурсы
Ресурсы по дизайну для Pi
Skills Просмотреть skills Дизайн-системы Просмотреть системы Шаблоны Просмотреть шаблоны
Skills для дизайна
Типы артефактов, которые Pi может создавать в OpenDesign — один skill на тип.
Дизайн-системы
Токены бренда и компоненты, которые нужно привязать до того, как Pi что-то сгенерирует.
Шаблоны
Отправные точки для презентаций, лендингов и экранов продукта.
Ограничения
Ограничения Pi, ручные проверки и запасные варианты
- Область примененияPi не привязан к конкретному провайдеру: он унифицирует работу с Anthropic, OpenAI, Google и более чем 20 провайдерами, так что вы используете свои ключи и переключаете модели прямо в ходе сессии. Эта страница описывает Pi как агента, подключённого к OpenDesign, а не все возможности Pi.
- Лимиты использованияЛимиты использования и стоимость зависят от того, какие учётные данные вы используете (собственный API-ключ провайдера или подписка через /login). Эта страница не делает заявлений о бесплатных квотах.
- СетьЛокальные файлы проекта не означают офлайн-инференс. Прежде чем передавать конфиденциальные данные, ознакомьтесь с настройками провайдера вашего агента и политиками обработки данных.
- Результат — HTMLПродукты представляют собой HTML-файлы, а не векторные файлы дизайна.
- Ручная проверкаДоступность, реальный контент, соответствие бренду и корректность взаимодействия проверяете вы сами в предпросмотре. Любую самопроверку агента следует считать лишь первым проходом.
- Запасной вариантЕсли агент недоступен или задача завершилась ошибкой, проверьте инструкции по подключению и авторизации для установленной версии. Перед изменением конфигурации сохраните ошибку и последний работающий артефакт.
Вопросы и ответы
Частые вопросы о Pi и OpenDesign
Может ли Pi реально выполнять дизайнерскую работу?
Да — при наличии эстетического skill, дизайн-системы и реальных референсных изображений в контексте Pi выдаёт адаптивный UI на уровне production, и вы можете направить его на мощную мультимодальную модель, чтобы проверить результат по референсам. Без такого контекста он склоняется к общему безликому виду — этот разрыв и закрывает OpenDesign.
Нужно ли платить, чтобы заниматься дизайном с Pi?
Сам Pi бесплатен и с открытым исходным кодом (MIT). Вы платите только за используемую модель — подключаете собственный API-ключ провайдера (BYOK) или используете подписку Claude Pro/Max, ChatGPT Plus/Pro или GitHub Copilot через /login. OpenDesign в любом случае никогда не проксирует ваши учётные данные.
Что делает Pi особенно подходящим для дизайна?
Pi не привязан к провайдеру: вы используете свои ключи и можете обратиться к любому из более чем 20 провайдеров, выбирая модель, чьи сильные стороны подходят под задачу, и переключаясь прямо в ходе сессии. Но вкус всё равно берётся из дизайн-системы, skill и референсов, которые вы предоставляете, а не из модели.
Какую модель использовать с Pi для фронтенд-дизайна?
Pi работает с множеством провайдеров, поэтому модель стоит выбирать под задачу — мощная мультимодальная модель хорошо читает референсные скриншоты, тогда как другие могут лучше подходить для рефакторинга. Преимущество Pi в том, что вы можете переключаться без изменения рабочего процесса. OpenDesign позволяет сохранять один и тот же дизайн-контекст независимо от выбранной модели.
Как подключить Pi к Figma?
Pi поддерживает MCP-серверы, поэтому вы можете подключить MCP-сервер Figma и получать реальный дизайн-контекст — компоненты, переменные, данные макета, — чтобы сгенерированный код соответствовал источнику, а не был приближением.
Выполните первую дизайн-задачу с Pi
Начните с небольшой задачи, оцените результат обмена, а затем переходите к реальному брифу. Выберите вариант, соответствующий вашей настройке; страница не определяет её автоматически.