Design Studio

Design Studio — встроенная рабочая среда AI-дизайна в Elftia. Она объединяет три абстракции — дизайн-Skills, Design Systems (дизайн-системы) и Craft-сниппеты — чтобы AI мог генерировать готовые к использованию материалы: веб-страницы, постеры, презентации и социальную графику, основываясь на единой визуальной системе, с поддержкой встроенного предпросмотра, Lint-валидации и экспорта.

Точка входа: Design Studio в левой навигации (маршрут /design-studio).

Что делает трио

Абстракция	Роль	Источник
Skill (дизайн-навык)	Инкапсулирует «что создать» в виде многоразового промпта и входной схемы — например, «лендинг продукта», «постер мероприятия», «обложка подкаста».	70+ встроенных + определяемые пользователем
Design System (дизайн-система)	Инкапсулирует «как это выглядит» в виде токенов и ссылок на компоненты — цвет, типографика, отступы, радиус скругления, тени, стили кнопок и т.д.	140+ встроенных + определяемые пользователем
Craft (библиотека сниппетов)	Составные HTML / CSS / SVG-фрагменты — декоративные элементы, скелеты макетов, шаблоны диаграмм.	7 встроенных категорий + определяемые пользователем

При создании нового проекта вы выбираете оси Mode + Skill + Design System. AI генерирует результат на основе этого контекста в сочетании с библиотекой Craft.

Четыре режима

При создании нового проекта выберите один из следующих режимов. Режим определяет тип артефакта и процесс редактирования:

Режим	Артефакт	Особенности
Prototype	Одностраничный HTML-прототип	Режим по умолчанию; чат слева + рабочее пространство справа, поддержка комментариев и точечных правок
Deck	Многостраничные слайды	iframe + следующая/предыдущая страница + полноэкранный режим + быстрый обзор + экспорт PDF/PPTX
Template	HTML, управляемый формой	Шаблоны с плейсхолдерами в подмножестве EJS; автоматически генерирует форму; ввод обновляет предпросмотр в правой панели в реальном времени
Design System	DESIGN.md + пример страницы	Двухпанельный вид (слева: источник DESIGN.md + образцы токенов / справа: пример дашборда); сохраняется в <userData>/elftia/design-systems/<slug>/

Основной интерфейс

Главная страница (/design-studio)

Две верхних вкладки, полноширинный макет (без боковой панели):

Вкладка	Содержимое
Examples (Примеры)	Просмотр готовых примеров проектов по Skill; создание новой сессии одним кликом через форк.
Design Systems (Дизайн-системы)	Просмотр встроенных + пользовательских Design Systems, предпросмотр шаблонов и переключение дефолтной системы.

Исторические Design-проекты отображаются в обычном списке сессий как сессии с kind='design' — они разделяют ту же природу с чат-сессиями и поддерживают ветвление, регенерацию и вложения.

Создание нового проекта

Точка входа — персонаж DesignStudio на странице новой сессии:

1. На странице новой сессии выберите DesignStudio в выборе персонажа вверху
2. Выберите Skill (слева) + Design System (справа)
3. Опишите свои требования и отправьте
4. AI выдаёт артефакт → панель предпросмотра открывается автоматически

Подробнее см. Новая сессия и персонаж.

Предпросмотр артефакта

После того как AI генерирует артефакт (как правило, HTML-документ), срабатывает действие «открыть рабочее пространство», переключающее правую панель в режим предпросмотра:

• Preview — живой рендеринг HTML; поддерживает переключение ширины области просмотра (mobile / tablet / desktop)
• Source — просмотр исходного кода артефакта (CodeMirror, с возможностью копирования)
• Lint — автоматически проверяет, соответствует ли артефакт ограничениям Design System (цвета вне диапазона, шрифты не из набора токенов и т.д.)

Каждое сообщение, породившее артефакт, также отображает отдельную кнопку Preview — вы можете воспроизвести исторические версии, не переключая рабочее пространство обратно на текущую.

Экспорт

Кнопка Export вверху панели предпросмотра:

Тип	Результат
HTML	Одностраничный HTML (со встроенными ресурсами)
PNG / JPG	Снимок экрана области просмотра в заданном разрешении
PDF	Многостраничный PDF (подходит для постеров, презентаций)
Deck	Многостраничный пакет слайдов в стиле Reveal.js

Источник встроенных ресурсов

Три каталога design-skills/, design-systems/ и craft/ материализуются в пользовательский каталог данных (<userData>/elftia/) при первом запуске — они не записываются в каталог установки Elftia.

Это означает:

• Вы можете настраивать встроенные Skills / DS / Craft, редактируя файлы напрямую в пользовательском каталоге
• Ваши правки не будут перезаписаны при обновлении Elftia (обновления только добавляют новые файлы, не затрагивая существующие)
• Встроенные ресурсы происходят из открытого upstream-проекта nexu-io/open-design, зафиксированного по снимку коммита

Чтобы обновиться до последней версии upstream (операция для разработчиков), см. документацию для разработчиков: Процесс синхронизации встроенных ресурсов.

Связь с системой чата

Design-проекты в основе своей являются обычными строками chat_sessions (kind='design'), поэтому они:

• Поддерживают ту же конфигурацию LLM, переключение провайдеров и пул API-ключей
• Поддерживают ветвление сообщений и регенерацию (каждая регенерация = новая версия артефакта)
• Поддерживают загрузку вложений (референсные изображения, бренд-материалы)
• Отображаются вместе с обычными чат-сессиями в боковой панели истории; можно добавлять папки / теги

Отличия:

• Должны быть привязаны к Skill + Design System, определённым при создании сессии; нельзя изменить в середине сессии
• На уровне движка используется Design Adapter — не все движки его поддерживают. claude-sdk / tinyelf / chat и другие можно использовать напрямую через стратегию Prompt Injection; cli (Claude Code, Codex CLI) использует стратегию FilePlaced; чистый движок api не поддерживается и отображает заглушку

0.1.7+: включено по умолчанию (флаг экспериментальных функций не нужен)

Начиная с версии 0.1.7, Design Studio включена по умолчанию — не нужно переключать её в Настройки → Система → Экспериментальные функции. Пункт Design Studio напрямую появляется в панели навигации.

Единственное оставшееся требование: движок текущего LLM-провайдера должен поддерживать Design Adapter.

Матрица поддержки:

Тип движка	Поддержка	Метод внедрения
claude-sdk	✅	Нативная загрузка skill; поддерживает комментарии точечного редактирования и локальные правки
tinyelf	✅	Prompt Injection — SKILL.md + DESIGN.md встраиваются в системный промпт
chat	✅	Prompt Injection (отклоняется при >16k токенов для предотвращения переполнения)
cli (Claude Code, Codex)	✅	FilePlaced — записывает в .cursorrules / .aider.conf.yml и т.д.
api	❌	Не поддерживается; отображает заглушку «Adapter unavailable»

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

Проблема	Решение
Страница Design Studio показывает «Adapter unavailable»	Текущий LLM-провайдер использует движок, не поддерживающий Design Adapter (скорее всего api); переключитесь на Claude SDK / TinyElf / Chat / поддерживаемый CLI-бэкенд
Пользовательская Design System не отображается	Проверьте, содержит ли <userData>/elftia/design-systems/<your-ds>/ файл manifest.json с валидной схемой; нажмите «Rescan» на вкладке Design Systems
Встроенные Skills / DS не обновились после обновления Elftia	Так задумано — существующие файлы не перезаписываются (обнаруживаются по SHA-1 для правок пользователя). Чтобы сбросить файл, удалите соответствующий файл в пользовательском каталоге; при перезапуске он будет материализован заново
Lint в предпросмотре артефакта сообщает «color out of range»	Артефакт использует значение цвета, отсутствующее в дизайн-токенах; либо обновите артефакт для использования токенов, либо расширьте таблицу токенов Design System
Точечное редактирование (комментарии / Send to chat) недоступно	Доступно только при движке claude-sdk. В других движках ящик Comments можно только просматривать, но не отправлять в чат

Связанные ссылки

• Система Skill — Skills в Design Studio повторно используют абстракцию Skill системы Agent
• LLM-провайдеры — настройка модели, используемой в Design Studio
• Для разработчиков: архитектура Design Studio
• Для разработчиков: процесс синхронизации встроенных ресурсов