From Design Process
Готовые сценарии пошаговых flow для типовых задач: питч-дек, прототип онбординга, дизайн-система, лендинг, видео — от запроса до результата.
How this skill is triggered — by the user, by Claude, or both
Slash command
/design-process:cookbookWhen to use
Когда пользователь сформулировал задачу типового вида — питч, прототип, дизайн-система, лендинг, видео.
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Сценарии. Каждый — последовательность из существующих скиллов под конкретную задачу.
Сценарии. Каждый — последовательность из существующих скиллов под конкретную задачу.
Запрос: «Сделай дек на 8 слайдов, питчим инвесторам, темa — наш AI-продукт».
Шаги:
questions-protocol — задай 6-8 вопросов: размер раунда, кто инвесторы, главная цифра, бренд, тон.document-import — если приложен PRD/одностраничник, извлеки из него.design-orchestrator решает: slides + deck-themes:editorial или :dark.placeholders для логотипов и скринов продукта.content-rules — пройти весь дек, выкинуть слова-паразиты.verifier — открыть, поймать ошибки, скриншоты.export-pdf или export-pptx (editable, через pptx-editable-extractor).Антипаттерны: не плодить filler-слайды, не делать «Why us» из 4 общих слов.
Запрос: «Сделай интерактивный онбординг для приложения доставки еды».
Шаги:
questions-protocol — платформа, шаги, что валидируется на каждом, тёмная тема, реальные данные?wireframe — 6-8 экранов в storyboard, согласовать структуру.frontend-design — выбрать направление (soft / minimal).design-system-create (минимальная) — токены, кнопка, инпут, карточка.interactive-prototype + device-frames:ios (или android).mobile-overlays — клавиатура, bottom sheet, тосты по контексту.tweaks-panel — 2-3 крутилки для перебора (тёмная тема, цвет акцента, копирайт CTA).states-checklist — empty/loading/error для каждого экрана с данными.claude-in-html — если есть AI-фича.verifier, proto-smoketest — критичные пути работают.Антипаттерны: не имитировать клавиатуру картинкой, не делать «Welcome» на 3 экрана.
Запрос: «Нужна дизайн-система для продукта, света и темы, веб + мобайл».
Шаги:
questions-protocol — продуктовые домены, акцентные цвета, существующие гайды, конкуренты.moodboard — собрать 10-15 референсов в один HTML.frontend-design — выбрать направление.color-system-builder — токены light + dark, 9-step scales.type-scale — modular scale, font-pair.design-system-create — структура файлов, tokens.css, базовые компоненты.component-playground — страница со всеми вариантами всех компонентов.dark-mode-add — добавить тёмную тему.forms-a11y — формы с правильной семантикой.a11y-audit — пройти axe, починить.dev-handoff — собрать пакет для разраба.Антипаттерны: не делать 50 компонентов сразу, не добавлять цвета без проверки контраста.
Запрос: «Лендинг для нашей SaaS, нужен интерактивный демо-блок с реальными данными».
Шаги:
questions-protocol — аудитория, главное обещание, есть ли бренд, формат демо.wireframe — 4-6 структур, согласовать.figma-import — если есть бренд в Figma.frontend-design — направление.design-canvas — 2-3 варианта первого экрана бок-о-бок.microinteractions — skeleton, hover-states, scroll-reveal.real-data — подключить демо-блок к настоящему датасету.print-styles — чтобы PDF лендинга выглядел прилично.perf-audit — Lighthouse, починить LCP.a11y-audit, i18n-stress-test (если многоязычный).standalone-html для шаринга по почте.Антипаттерны: не делать hero «Welcome to », не плодить секции.
Запрос: «Нужно объяснить нашу фичу за 30 секунд видео для твиттера».
Шаги:
questions-protocol — формат (квадрат / горизонталь / вертикаль), длительность, со звуком ли.wireframe — раскадровка.frontend-design — выбрать визуал, чтобы читалось на маленьком экране.animations — <Stage> + <Sprite> для каждого кадра.placeholders для скринов продукта.verifier — анимация без ошибок в консоли.video-export — MP4 1080×1080 или 1080×1920.Антипаттерны: не делать длиннее 30 сек, не помещать мелкий текст, не использовать linear easing.
Возвращайся к design-orchestrator. Он решает, какие скиллы запускать, без жёсткого сценария.
npx claudepluginhub jhamidun/claude-code-config-pack --plugin design-processSets up isolated workspaces using native worktree tools or git worktree fallback. Use before starting feature work to protect the current branch.