Hermes
6c7be98a82
- package.json: add relaunchButtons (runAI) for right-panel shortcut - main.ts: setRelaunchData + RESIZE_WINDOW handler (figma.ui.resize) - ui.tsx: useWindowResize native drag handle + expand/collapse toggle - .gitignore: exclude _reference/ (temp old-plugin copy) - IDEA.md: commit+push to Gitea is mandatory workflow
4.5 KiB
4.5 KiB
IDEA — Figma AI Plugin (MVP)
Проект: автономный Figma-плагин с AI-ассистентом. Локальная копия:
/root/.hermes/projects/figma plugins/figma-ai-plugin/Копия на Matebook:D:\Figma Plugins\figma-ai-plugin\Gitea: http://x1qnvk08zec2u5cx6yh5iexh.155.212.186.39.sslip.io/admin/figma-ai-plugin
Ресурсы
UI-фреймворк (@create-figma-plugin/ui)
- Storybook компонентов (живые примеры, темы Light/Dark/FigJam): https://yuanqing.github.io/create-figma-plugin/ui/
- Репозиторий фреймворка: https://github.com/yuanqing/create-figma-plugin
- Cheat-sheet компонентов (InvStd): https://github.com/invstd/Figma-Plugin-Quickstart/blob/main/FIGMA-PLUGIN-UI-COMPONENTS-REFERENCE.md
Официальная документация по созданию плагинов Figma
- Plugin API (официальная): https://www.figma.com/plugin-docs/
- Quick start (plugin setup): https://www.figma.com/plugin-docs/plugin-quickstart/
- Руководство по UI (design/iframe): https://www.figma.com/plugin-docs/how-plugins-work/#the-iframe
- Типы плагина (plugin-typings): npm
@figma/plugin-typings
Примеры плагинов (уже есть / опорные)
- Исходный плагин «AI assistant» (Николай, Matebook):
D:\YandexDisk\Figma Plugins DEVs\AI assistant— рабочий движок (eval + RPC, CodeMirror), оттуда переиспользуемmain.ts/ui.tsx. - create-figma-plugin templates: https://github.com/yuanqing/create-figma-plugin/tree/main/templates
- Figma Plugin Quickstart (InvStd): https://github.com/invstd/Figma-Plugin-Quickstart
- create-figma-plugin-native (кастомные компоненты Tabs/Modal/Checkbox): https://www.npmjs.com/package/@inversestudio/create-figma-plugin-native
Стек
- TypeScript (зафиксирован
~5.6.3— TS 7 ломает@create-figma-plugin/build) @create-figma-plugin/ui+@create-figma-plugin/utilities(Preact)- Сборка:
build-figma-plugin(npm run build/npm run watch) - Важно: tsconfig наследует
@create-figma-plugin/tsconfig(jsx: react + jsxFactory: h). Не оверрайдитьjsxнаreact-jsx.
Рабочий флоу (Hello World проверен)
- Пишешь код на VPS в
/root/.hermes/projects/figma plugins/figma-ai-plugin/ npm install+npm run build(проверка сборки)git push→ Gitea (admin/figma-ai-plugin)- Копия на Matebook:
D:\Figma Plugins\figma-ai-plugin\(через tar-архив по SSH: исключать толькоnode_modulesи.git, папкуbuild/ОБЯЗАТЕЛЬНО включать — иначе плагин не запустится, см. KNOWLEDGE.md) - В Figma: Plugins → Development → Import plugin from manifest → выбрать
manifest.jsonиз папки Matebook - Запуск плагина для теста
Правила ведения репозитория
- Коммит + пуш в Gitea — обязательная часть рабочего флоу. Любое осмысленное изменение в коде/доках коммитится и пушится в
origin/mainсразу по завершении задачи (не копить локально). _reference/— временные копии чужих/старых плагинов для сверки; в git не попадают (в.gitignore).build/иnode_modules/не коммитятся (собираются локально / на Matebook), см. синхронизацию через tar в KNOWLEDGE.md.
Правила ведения KNOWLEDGE.md
- KNOWLEDGE.md — живая копилка gotcha/решений. Hermes (агент) имеет право дописывать и править KNOWLEDGE.md самостоятельно, без вопросов к пользователю, когда находит новую проблему и её решение по ходу работы над проектом.
- Формат записи:
### Заголовок+ блоки Симптом / Причина / Решение / Ссылка (как в текущих записях). - Если правишь рабочий флоу здесь (IDEA.md), продублируй связанное gotcha в KNOWLEDGE.md (напр. ловушка с
--exclude build).