# qt-figma-token-extraction

Достаёт переменные, текстовые стили и токены из файла Figma и превращает их в design-tokens.json и готовые QML-синглтоны с общим Theme.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 432 установки · ★ 507
- Автор: qt-ai-skills
- Лицензия: не указана · policy=link-only · показываем только описание, файл — у автора
- Исходник: https://github.com/TheQtCompanyRnD/agent-skills/tree/HEAD/skills/qt-figma-token-extraction/SKILL.md
- Обновлён: 2026-10-20
- HTML: https://affpapa.org/nevibecode/skills/qt-figma-token-extraction

## Что делает

Скилл ведёт агента по шагам: сначала спрашивает, в каком Qt-проекте наводить порядок, потом выясняет, есть ли в файле Figma несколько режимов переменных, и только затем просит ссылки. Автоматически определяет, что в файле — Variables или Styles, и строит из них JSON-файл токенов. Для нового проекта заодно создаёт каркас: `main.cpp` на `QGuiApplication` и заглушку `Main.qml`.

В комплекте лежит справочник по сопоставлению типов Figma и QML, а также шаблоны пяти синглтонов: `Primitives.qml`, `Theme.qml`, `FontInterface.qml`, `Spacing.qml`, `Typography.qml`. Их имена и структура повторяют то, как устроен Qt Design Studio, поэтому готовые файлы потом проще переносить в существующий проект. Синглтоны прописываются в `CMakeLists.txt` на последнем шаге, когда список файлов уже известен.

Для проекта на Qt 6 это важно: `loadFromModule()` ищет `Main.qml` под `qrc:/qt/qml/<URI>/`, а старый путь `qrc:/<URI>/` из Qt 5 даёт тихую ошибку загрузки. Если режимов несколько, а терминала вы избегаете, агент предложит MCP-способ с ручным переключением режимов. Нужен доступ к Figma из вашего агента: без него шаг извлечения просто не начнётся.

## Требования
- Работает с: Figma

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add TheQtCompanyRnD/agent-skills --skill qt-figma-token-extraction -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/qt-figma-token-extraction/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/qt-figma-token-extraction/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add TheQtCompanyRnD/agent-skills --skill qt-figma-token-extraction -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/qt-figma-token-extraction/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add TheQtCompanyRnD/agent-skills --skill qt-figma-token-extraction -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/qt-figma-token-extraction/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install TheQtCompanyRnD/agent-skills qt-figma-token-extraction
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/qt-figma-token-extraction/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add TheQtCompanyRnD/agent-skills --skill qt-figma-token-extraction -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/TheQtCompanyRnD/agent-skills --path skills/qt-figma-token-extraction
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/qt-figma-token-extraction/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add TheQtCompanyRnD/agent-skills --skill qt-figma-token-extraction -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/TheQtCompanyRnD/agent-skills/tree/HEAD/skills/qt-figma-token-extraction/SKILL.md

## Когда брать
- вытащить цветовую палитру и типографику из файла Figma
- получить JSON с токенами дизайн-системы
- сгенерировать QML-синглтоны под Qt Design Studio
- разложить светлую и тёмную темы на режимы переменных
- поднять каркас Qt Quick-проекта с нуля

## Примеры запросов агенту
- Вытяни дизайн-токены из нашего файла Figma и сделай `design-tokens.json` плюс QML-синглтоны
- Обнови цвета в проекте по свежей версии дизайн-системы из Figma
- Перенеси переменные Figma в QML и зарегистрируй синглтоны в `CMakeLists.txt`

## Похожие
- [frontend-design](https://affpapa.org/nevibecode/skills/frontend-design.md) — скилл · 1025790 установок
- [grill-me](https://affpapa.org/nevibecode/skills/grill-me.md) — скилл · 1424476 установок
- [design-taste-frontend](https://affpapa.org/nevibecode/skills/design-taste-frontend.md) — скилл · 678700 установок
- [prototype](https://affpapa.org/nevibecode/skills/prototype.md) — скилл · 986201 установка
- [grilling](https://affpapa.org/nevibecode/skills/grilling.md) — скилл · 979543 установки
- [codebase-design](https://affpapa.org/nevibecode/skills/codebase-design.md) — скилл · 850344 установки

Из того же набора: [theqtcompanyrnd/agent-skills](https://affpapa.org/nevibecode/by/theqtcompanyrnd/agent-skills.md) — 12 карточек

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md