prototype-prompt-generator — скилл для Claude Code: что делает
Скилл превращает требования к интерфейсу в подробный технический промпт для генерации HTML, CSS или React-прототипов.
npx skills add stellarlinkco/myclaude --skill prototype-prompt-generator -a claude-codeЧто делает prototype-prompt-generator
Скилл пошагово собирает вводные о будущей программе: тип продукта, пользовательские сценарии, экраны и целевую платформу (веб, мобильные приложения или мини-программы WeChat). Вопросы задаются небольшими порциями, по две или три за раз, чтобы не перегружать контекст. Если параметры вёрстки неизвестны, скилл опирается на значения по умолчанию вроде экрана 375px для смартфона или 1200px для десктопа.
На втором этапе выбирается дизайн-система. В наборе предусмотрены готовые стили: WeChat Work, iOS Native, Material Design и Ant Design Mobile. Для каждого стиля подключаются спецификации палитр, скруглений, теней и отступов. Без прямых указаний в запросе скилл сам назначит стиль под целевую платформу или географию аудитории.
В итоговое описание входят роль разработчика, постановка задачи, стек с Tailwind CSS, раскладка Flexbox или Grid, а также реальные тексты вместо пустых заполнителей.
Какие задачи решает
- составить детальное ТЗ для верстки прототипа
- подобрать дизайн-систему под iOS, Android или веб
- сформировать палитру и параметры Tailwind CSS для макета
- структурировать промпт для фронтенд-агента без текста-рыбы
Примеры запросов агенту
- Помоги составить промпт для мобильного прототипа в стиле iOS Native
- Сгенерируй спецификацию для корпоративного дашборда на Ant Design Mobile
- Нужен детальный промпт для создания веб-прототипа на Tailwind CSS
Как установить prototype-prompt-generator
1Через Skills CLI (Vercel)
npx skills add stellarlinkco/myclaude --skill prototype-prompt-generator -a claude-code2Вручную: положить файлы
~/.claude/skills/prototype-prompt-generator/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/prototype-prompt-generator/
1Через Skills CLI (Vercel)
npx skills add stellarlinkco/myclaude --skill prototype-prompt-generator -a codex2Вручную: положить файлы
.agents/skills/prototype-prompt-generator/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add stellarlinkco/myclaude --skill prototype-prompt-generator -a cursor2Вручную: положить файлы
.cursor/skills/prototype-prompt-generator/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install stellarlinkco/myclaude prototype-prompt-generator2Вручную: положить файлы
.github/skills/prototype-prompt-generator/SKILL.md1Через Skills CLI (Vercel)
npx skills add stellarlinkco/myclaude --skill prototype-prompt-generator -a gemini-cli2Командой платформы
gemini skills install https://github.com/stellarlinkco/myclaude --path skills/prototype-prompt-generatorВручную: положить файлы
.devin/skills/prototype-prompt-generator/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add stellarlinkco/myclaude --skill prototype-prompt-generator -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о prototype-prompt-generator
Как установить prototype-prompt-generator в Claude Code?
Выполните команду npx skills add stellarlinkco/myclaude --skill prototype-prompt-generator -a claude-code. Также файл скилла можно положить напрямую в ~/.claude/skills/prototype-prompt-generator/SKILL.md.
Какие дизайн-системы поддерживает скилл?
Встроены профили для WeChat Work, iOS Native, Material Design и Ant Design Mobile с правилами по шрифтам, цветам и поведению компонентов.
Как скилл собирает требования к проекту?
Он задаёт вопросы последовательно, группами по две или три штуки, уточняя стек, раскладку, целевые устройства и тестовый контент.
