49 lines
3.8 KiB
Markdown
49 lines
3.8 KiB
Markdown
# 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 проверен)
|
||
1. Пишешь код на VPS в `/root/.hermes/projects/figma plugins/figma-ai-plugin/`
|
||
2. `npm install` + `npm run build` (проверка сборки)
|
||
3. `git push` → Gitea (`admin/figma-ai-plugin`)
|
||
4. Копия на Matebook: `D:\Figma Plugins\figma-ai-plugin\` (через tar-архив по SSH: **исключать только `node_modules` и `.git`, папку `build/` ОБЯЗАТЕЛЬНО включать** — иначе плагин не запустится, см. KNOWLEDGE.md)
|
||
5. В Figma: Plugins → Development → Import plugin from manifest → выбрать `manifest.json` из папки Matebook
|
||
6. Запуск плагина для теста
|
||
|
||
## Правила ведения KNOWLEDGE.md
|
||
|
||
- KNOWLEDGE.md — живая копилка gotcha/решений. Hermes (агент) **имеет право дописывать и править KNOWLEDGE.md самостоятельно, без вопросов к пользователю**, когда находит новую проблему и её решение по ходу работы над проектом.
|
||
- Формат записи: `### Заголовок` + блоки **Симптом / Причина / Решение / Ссылка** (как в текущих записях).
|
||
- Если правишь рабочий флоу здесь (IDEA.md), продублируй связанное gotcha в KNOWLEDGE.md (напр. ловушка с `--exclude build`).
|