скилл CX Codex

tesseract-design — скилл для Claude Code: дизайн и установка

Q: Как установить tesseract-design в Claude Code?

Выполните `npx skills add mirage-hq/Tesseract --skill tesseract-design -a claude-code`. Скилл устанавливается по пути `~/.claude/skills/tesseract-design/SKILL.md`.

Скилл создаёт статичные макеты в Tesseract и выводит их в PNG. Пригодится для постеров, слайдов, схем и макетов интерфейсов.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓

npx skills add mirage-hq/Tesseract --skill tesseract-design -a claude-code

Открыть на GitHub

Что делает tesseract-design

По описанию задачи скилл собирает композицию в редактируемом файле .tsrct, а затем рендерит PNG командой tsrct preview. Текст, фигуры и геометрия остаются отдельными слоями, поэтому композицию можно править. Поддерживаются постеры, графика для соцсетей, слайды, диаграммы и макеты веб-интерфейсов.

Скилл предписывает сверяться со схемами установленной версии CLI, а не придумывать поля API. PNG нужно открыть и проверить: рендер сам по себе не гарантирует удачный результат. Это статичный дизайн: готовый сайт, работающие взаимодействия и файл PowerPoint не входят в результат.

Какие задачи решает

собрать постер из описания и заданных размеров
подготовить квадратную графику для соцсетей
разложить слайд или диаграмму на редактируемые слои
переделать макет интерфейса под мобильную ширину

Примеры запросов агенту

Создай постер по этому описанию и сохрани исходник .tsrct вместе с PNG.
Сделай квадратный макет для соцсетей из этих материалов.
Перестрой этот макет под мобильную ширину и покажи итоговый PNG.

Как установить tesseract-design

1Через Skills CLI (Vercel)

npx skills add mirage-hq/Tesseract --skill tesseract-design -a claude-code

2Вручную: положить файлы

~/.claude/skills/tesseract-design/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/tesseract-design/

1Через Skills CLI (Vercel)

npx skills add mirage-hq/Tesseract --skill tesseract-design -a codex

2Вручную: положить файлы

.agents/skills/tesseract-design/SKILL.md

Для всех проектов — ~/.agents/skills/

1Через Skills CLI (Vercel)

npx skills add mirage-hq/Tesseract --skill tesseract-design -a cursor

2Вручную: положить файлы

.cursor/skills/tesseract-design/SKILL.md

Cursor читает и .agents/skills/, и .claude/skills/

1GitHub CLI

gh skill install mirage-hq/Tesseract tesseract-design

2Вручную: положить файлы

.github/skills/tesseract-design/SKILL.md

1Через Skills CLI (Vercel)

npx skills add mirage-hq/Tesseract --skill tesseract-design -a gemini-cli

2Командой платформы

gemini skills install https://github.com/mirage-hq/Tesseract --path skills/tesseract-design

Вручную: положить файлы

.devin/skills/tesseract-design/SKILL.md

Старый путь .windsurf/skills/ тоже читается

Через Skills CLI (Vercel)

npx skills add mirage-hq/Tesseract --skill tesseract-design -a opencode

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о tesseract-design

Как установить tesseract-design в Claude Code?

Выполните npx skills add mirage-hq/Tesseract --skill tesseract-design -a claude-code. Скилл устанавливается по пути ~/.claude/skills/tesseract-design/SKILL.md.

Что делает tesseract-design?

Создаёт статичные композиции в редактируемом формате Tesseract и рендерит их в PNG. Исходник .tsrct остаётся доступен для правок.

Что выдаёт скилл для макета интерфейса?

PNG и редактируемый файл Tesseract. Макет показывает статичный дизайн, а не готовый сайт или работающие взаимодействия.

Похожие скиллы

Всё по теме «Дизайн» →

frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. 1 025 790установок grill-me Matt Pocock Скилл проводит жёсткое интервью по плану или дизайну, чтобы найти пробелы и уточнить решения. Подойдёт перед началом разработки. 1 424 476установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. CX Codex +1 678 700установок prototype Matt Pocock Создаёт временный прототип, чтобы проверить логику, модель состояния или вид интерфейса до работы над основным кодом. 986 201установок grilling Matt Pocock Стресс-тестирует план, решение или идею сериями уточняющих вопросов. Подходит, когда нужно вскрыть допущения до начала работы. 979 543установок codebase-design Matt Pocock Скилл помогает проектировать модули с небольшим интерфейсом и скрытой внутри сложностью. Подходит для рефакторинга, тестируемости и поиска чистого seam. 850 344установок

Из того же набора4

tesseract-motion Скилл помогает создавать в Tesseract редактируемую анимацию: от титров и схем до сцен на весь кадр и графики поверх видео. Нужен для работы над отдельными моушн-элементами, а не для монтажа целого ролика. CX Codex +1 3 000установок tesseract-video Скилл для локального монтажа уже отснятого материала: режет, чистит диалоги, сводит звук и добавляет графику в проекты Tesseract. CX Codex +1 3 000установок tesseract-editor Скилл помогает собрать или изменить браузерный редактор проектов Tesseract .tsrct. Он пригодится для настройки элементов управления, предпросмотра и сохранения. CX Codex +1 1 200установок