Design OS — воркфлоу
Рабочее место для Claude Code: десять команд ведут от идеи продукта к экранам на React и пакету передачи с готовыми промптами для реализации
- 1 864 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- Команды создают и перезаписывают файлы в `product/`, `src/` и `product-plan/` внутри клонированного проекта
- Для работы нужны `npm install` из сети и локальный сервер разработки на порту 5173, а для снимков экранов еще Playwright MCP
- Команда `/export-product` собирает архив `product-plan.zip` со всем содержимым проектирования
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add workflows/design-osОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Команды создают и перезаписывают файлы в `product/`, `src/` и `product-plan/` внутри клонированного проекта
- Для работы нужны `npm install` из сети и локальный сервер разработки на порту 5173, а для снимков экранов еще Playwright MCP
- Команда `/export-product` собирает архив `product-plan.zip` со всем содержимым проектирования
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Design OS — шаблон проекта на Vite и React, к которому подключены команды Claude Code из папки `.claude/commands/design-os/`. Вы клонируете репозиторий, делаете `npm install` и `npm run dev`, открываете http://localhost:5173 и запускаете в той же папке `claude`. Дальше агент ведет разговор по шагам: задает вопросы, вы отвечаете, а результат складывается в файлы и в окно на localhost. Первая фаза — планирование. Команда `/product-vision` собирает описание продукта, разделы дорожной карты и форму данных, `/design-tokens` выбирает цвета и шрифты, `/design-shell` проектирует навигацию и общую рамку. Вторая фаза идет по разделам: `/shape-section` пишет спецификацию, пять–десять записей тестовых данных и типы TypeScript, `/design-screen` строит React-компоненты, которые получают данные и обратные вызовы через props, `/screenshot-design` снимает экраны. Команды `/product-roadmap`, `/data-shape` и `/sample-data` правят уже созданное. Команда `/export-product` проверяет, что есть обзор продукта, дорожная карта и хотя бы один готовый раздел, и собирает каталог `product-plan/`: инструкции для реализации целиком и по этапам, два готовых промпта для кодового агента, `tokens.css` и подсказки по Tailwind и шрифтам, обзор типов данных, компоненты рамки и экранов, а также описания тестов по каждому разделу. Все это же упаковывается в `product-plan.zip`. Экспорт можно запускать повторно по мере добавления разделов.
Для кого. Для основателей и разработчиков, которые хотят сначала спроектировать продукт и интерфейс вместе с агентом, а потом отдать другому агенту или команде готовое задание на реализацию.
Подходит, если
- Идея продукта есть, а требований и экранов нет, и вы хотите пройти их по шагам, не пуская агента сразу в код
- Нужны тестовые данные и типы TypeScript, по которым интерфейс можно спроектировать до появления бэкенда
- Вы хотите передать реализацию другому агенту или команде пакетом с инструкциями, промптами и описанием тестов
- Продукт состоит из нескольких разделов, и каждый надо проработать отдельно: сначала спецификация, потом экран
- Вам нужен единый источник правды о цветах, шрифтах, рамке приложения и сущностях данных до начала разработки
Не подходит, если
- Нужно поправить интерфейс в готовом проекте: Design OS стартует с чистого шаблона, а не подключается к вашему коду
- Ваш агент не умеет запускать пользовательские команды: Design OS работает через слэш-команды, и без них проект остается обычным шаблоном
- Нужен дизайн в Figma: результатом служат файлы и React-компоненты в локальном приложении
- Дизайн-система вашего продукта уже есть: команды создают собственные цвета, шрифты и рамку заново
- Нужны тонкие анимации и полировка: проект строит структуру и экраны, а не доводит детали
Пример запроса к агенту
/product-vision Я делаю сервис учета счетов для небольших студий: клиенты, счета, оплаты и напоминания. Помоги описать продукт и разделыОграничения
Это шаблон проекта: его клонируют, отключают исходный удаленный репозиторий командой `git remote remove origin` и работают в копии. Нужны Node.js версии 18 или новее и помощник, умеющий запускать пользовательские команды: автор рекомендует Claude Code, а Cursor, Windsurf и Codex допускает. Инструкции по установке лежат на сайте buildermethods.com/design-os. Для готовых компонентов проекту-получателю нужны React 18 или новее и Tailwind CSS 4.
Результат остается в этом шаблоне: тестовые данные и экраны лежат в `product/` и `src/sections/`, а в ваш настоящий проект попадает только то, что вы перенесете из `product-plan/`. Команды проектируют интерфейс и данные, а о базе данных и серверной логике не спрашивают.
Команда `/screenshot-design` сама запускает сервер и снимает экраны через Playwright MCP: без него она предлагает инструкции по установке. Поддержка, обучение и сообщество вынесены в Builder Methods Pro. Лицензия MIT.
Как отключить. Удалите склонированную папку проекта целиком: Design OS ничего не ставит за ее пределами. Если вы перенесли в свой проект содержимое `product-plan/`, эти файлы удаляются отдельно. Остановить локальное приложение можно, закрыв процесс `npm run dev`.
Частые вопросы
В каком порядке запускать команды?
Сначала `/product-vision`, затем `/design-tokens` и `/design-shell`. После этого для каждого раздела идут `/shape-section` и `/design-screen`, при желании `/screenshot-design`. Последним запускается `/export-product`. Документация советует не перескакивать шаги: каждый опирается на результат предыдущего.
Что создает /shape-section?
Спецификацию раздела с обзором, сценариями и требованиями к интерфейсу, а также файл с тестовыми данными, где каждая сущность описана в разделе `_meta`, и файл с типами TypeScript. Файлы лежат в `product/sections/<id>/`: spec.md, data.json и types.ts.
Почему экраны получают данные через props?
Компоненты, которые попадут в экспорт, принимают данные и обратные вызовы как параметры и сами ничего не импортируют. Благодаря этому их можно перенести в настоящий проект и подключить к реальным данным. Для просмотра внутри Design OS рядом лежит отдельная обертка, и в экспорт она не входит.
Что внутри пакета product-plan?
Обзор продукта, инструкции одним общим файлом и по этапам (рамка, затем по одному этапу на раздел), промпты one-shot-prompt.md и section-prompt.md, токены и подсказки по шрифтам, типы данных, компоненты рамки и экранов, описания тестов. Пакет дублируется архивом `product-plan.zip`.
Можно ли экспортировать до завершения всех разделов?
Да. Для экспорта достаточно обзора продукта, дорожной карты и одного раздела с готовыми экранами. Отсутствие дизайн-токенов, формы данных или рамки команда помечает предупреждением, но продолжает работу. Следующий экспорт обновит пакет.
Как использовать шаблон в нескольких проектах?
Выложите свою копию в личный репозиторий и отметьте его как шаблонный в настройках GitHub (Template repository). Для нового проекта выберите на GitHub Use this template.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
ВоркфлоуОткрытая альтернатива Claude Design: прототипы, презентации, дашборды и видео через ваших локальных агентов
Набор скиллов, токенов и правил, который делает из Claude дизайн-архитектора: DTCG-токены, компоненты, доступность и объективные проверки качества
designlang
designlang (design-extract)
CLI и MCP-сервер, который читает готовый сайт и достает из него дизайн-систему: токены DTCG, конфиг Tailwind, переменные Figma и брендбук
Awesome Claude Design
awesome-claude-design
Подборка готовых файлов DESIGN.md, которые Claude Design разворачивает в каркас интерфейса: цвета, шрифты, компоненты. Брать как вдохновение
Скилл дизайна веб-страниц для Claude Code: сначала спецификация DESIGN.md, потом код по ней
DESIGN.md от Google Labs
DESIGN.md
Формат DESIGN.md для агентов и CLI: проверка контраста и ссылок, сравнение версий, экспорт токенов в Tailwind и DTCG
Сравнение с похожими
Записи с тем же главным запросом: чем они отличаются.
| Запись | Официальный | Звезды репозитория | Главное отличие |
|---|---|---|---|
| Design OS (эта запись) | да | 1 864 | |
| Designer Skills Collection | нет | 3 047 | набор дизайн-скиллов от исследования до прототипов, без готового шаблона проекта и пакета передачи |
| Effective HTML | нет | 3 740 | шесть скиллов, собирающих отдельные самодостаточные HTML-артефакты: вайрфреймы, прототипы, макеты и планы |
Коротко о README
Описание на английском объясняет проблему: агенты быстро строят код, но получается не то, что вы задумали, потому что решения о продукте принимаются на лету. Далее идет процесс из четырех этапов: планирование продукта, дизайн-система, проработка разделов и экспорт. Установка и документация вынесены на сайт Builder Methods, а в docs/ лежат страницы о начале работы, планировании, проработке раздела, экспорте, использовании, требованиях и внедрении в кодовую базу. Журнал изменений ведется в CHANGELOG.md. Создатель — Брайан Касел из Builder Methods.