ascii-ui-mockup-generator — субагент для Claude Code: ASCII-макеты
Субагент рисует ASCII-макеты будущего интерфейса: несколько вариантов вёрстки, форм и дашбордов до того, как написан код.
npx claude-code-templates@latest --agent development-tools/ascii-ui-mockup-generatorЧто делает ascii-ui-mockup-generator
Субагент разбирает идею интерфейса на компоненты, связи данных и ограничения вёрстки, а потом выдаёт 3–5 разных ASCII-макетов одного и того же экрана. Каждый вариант показывает секции, расположение данных и подписи к интерактивным элементам. Рядом идёт короткое объяснение: почему выбрана такая сетка, что она даёт под конкретную задачу и где может не сработать.
Макеты нумеруются, дальше вы выбираете нужный. Можно попросить доработать его, смешать элементы из разных вариантов или разобрать решение подробнее. После выбора субагент разбивает макет на компоненты, советует стек, порядок реализации и даёт указания по стилям и раскладке.
Инструменты у него только Read и Write — файлы он читает и пишет, но ничего не запускает и в сеть не ходит. Перед генерацией субагент сначала проговаривает, как понял требования, и ждёт подтверждения. Если нужно нарисовать что-то за пределами текстовой сетки — например точные отступы в пикселях — это уже не к нему.
Какие задачи решает
- сравнить несколько вариантов раскладки экрана до начала вёрстки
- показать заказчику структуру дашборда без Figma
- разложить идею интерфейса на компоненты и связи данных
- выбрать макет и получить из него план реализации по шагам
- согласовать расположение форм и полей до написания кода
Примеры запросов агенту
- нарисуй ASCII-макеты экрана настроек профиля, дай 4 варианта
- возьми вариант 2 и добавь блок с историей платежей
- разбей выбранный макет на компоненты и предложи порядок реализации
Как установить ascii-ui-mockup-generator
1Через claude-code-templates
npx claude-code-templates@latest --agent development-tools/ascii-ui-mockup-generator2Вручную: положить файлы
.claude/agents/ascii-ui-mockup-generator.mdДля всех проектов — ~/.claude/agents/. Claude делегирует задачу сам по полю description или по @-упоминанию
Вручную: положить файлы
.codex/agents/ascii-ui-mockup-generator.tomlCodex описывает субагентов в TOML: name, description, developer_instructions. Текст из Markdown перенесите в developer_instructions вручную. Для всех проектов — ~/.codex/agents/
Вручную: положить файлы
.cursor/agents/ascii-ui-mockup-generator.mdCursor понимает и .claude/agents/
По шагам, с командами для каждой платформы: Субагенты Claude Code: как создать, вызвать и не утопить контекст
Из того же набора205
Весь набор →Похожие
Рядом в теме «Дизайн»
Все субагенты по теме «Дизайн» →Вопросы о ascii-ui-mockup-generator
Как установить ascii-ui-mockup-generator в Claude?
Через шаблоны: npx claude-code-templates@latest --agent development-tools/ascii-ui-mockup-generator. После этого файл субагента лежит в .claude/agents/ascii-ui-mockup-generator.md.
Что делает ascii-ui-mockup-generator?
Превращает описание интерфейса в несколько ASCII-макетов с подписями секций и данных, объясняет логику каждого варианта и после выбора разбивает его на компоненты для реализации.
Какие инструменты доступны субагенту?
Только Read и Write. Он читает и создаёт файлы, но не выполняет команды и не обращается к внешним сервисам.
