83.3K+Скачать
Перейти к руководству
design-consultationавтор Garry Tan

Design Consultation Skill.

Skill для Claude Code и Codex для работы с брендом и дизайн-системами: консультации по дизайну продукта с предложением полной дизайн-системы: эстетика, типографика, цвет, композиция, движение.

  • Бренд и дизайн-системы
  • Дизайн-система
Скачать OpenDesignИнструкция по использованию
garrytan/gstack · design-consultation/SKILL.mdSKILL.md
--- name: design-consultation description: Design consultation: understands your product, researches the landscape, proposes a complete design system (aesthetic, typography, color, layout, spacing, motion), and generates font+color preview... (gstack) --- ## When to invoke this skill ## Confusion Protocol ## Claimed Limitations Need Evidence ## Continuous Checkpoint Mode ## Context Health (soft directive) ## Question Tuning (skip entirely if QUESTION_TUNING: false)
Вводная информация и заголовки разделов считаны из исходного файла 2026-09-14 · полностью 67 098 символов

01 Что делает

Что делает Skill design-consultation в Claude Code и Codex

Сводка, рабочий процесс и результаты — всё прочитано из SKILL.md этого skill.

Из SKILL.mdПрочитано 14.09.2026 · не запись выполнения

Словами самого skill

Skill для консультаций по дизайну, действующий как старший продуктовый дизайнер и создающий полную дизайн-систему. Он исследует продуктовый ландшафт через веб-поиск и визуальный анализ, предлагает типографику (конкретные шрифты, а не стандартные), цветовые системы (CSS-переменные со значениями hex), подходы к макету (composition-first) и эстетическое направление. Skill генерирует файл DESIGN.md как источник истины по дизайну проекта, с опциональными AI-макетами, показывающими систему в применении к реальным экранам.

Поддерживает как браузер Aside (реальные сессии пользователя), так и headless-режим в качестве запасного варианта, сохраняет устойчивый профиль вкуса между сессиями и подключает внешние дизайнерские мнения от Codex и Claude subagent. Skill работает в диалоговом режиме — не как жёсткая форма — объясняет обоснование каждой рекомендации и ставит согласованность выше отдельных оптимальных решений.

Что он выдаёт

  • AI-макеты, показывающие дизайн-систему, применённую к реальным экранам (когда доступен gstack designer)
  • HTML-страница предпросмотра с живыми образцами типографики и цвета (запасной вариант, когда designer недоступен)
  • Устойчивый профиль вкуса в формате JSON, отслеживающий одобренные и отклонённые решения по дизайну между сессиями
Смотрите пример запроса ↗

Как это работает

  1. 01
    Сбор контекста продукта

    Читает существующие DESIGN.md, PRODUCT.md, README, package.json и результаты office-hours, чтобы понять продукт.

  2. 02
    Исследование ландшафта

    При необходимости использует браузер Aside или WebSearch для поиска 5–10 конкурентных продуктов, делает полностраничные скриншоты, анализирует шрифты, цвета, макеты и эстетическое направление.

  3. 03
    Консультация с внешними мнениями

    При необходимости запускает Codex и Claude subagent параллельно для генерации независимых дизайн-предложений.

  4. 04
    Предложение полной дизайн-системы

    Предоставляет обоснованное предложение с конкретными названиями шрифтов, значениями цветов в hex, CSS-переменными, подходом к макету и эстетическим направлением.

  5. 05
    Генерация артефактов предпросмотра

    Создаёт либо AI-макеты (если доступен gstack designer), показывающие применение дизайн-системы к реальным экранам, либо HTML-страницу предпросмотра с живыми образцами типографики и цвета.

  6. 06
    Написать DESIGN.md

    Формирует источник истины по дизайну проекта в открытом формате DESIGN.md с токенами во фронт-маттере и разделами обоснования.

02 Определите своё применение

Когда использовать skill design-consultation

Используйте skill design-consultation в Claude Code или Codex, когда задача связана с брендом и дизайн-системами. Область применения и ограничения взяты из файла самого skill.

Хорошо подходит

  • Начало работы над UI нового проекта без существующей дизайн-системы или DESIGN.md
  • При явном запросе создания дизайн-системы, брендбука или DESIGN.md
  • Продукты, которым нужна дифференциация от норм категории через осознанные отступления в дизайне

Знайте границы

  • Заявленное ограничение или требование («API не может это сделать», «X требует учётных данных», «это невозможно на этой платформе») — это материальное утверждение.
  • Утверждайте его только при наличии точной ошибки, документированного заявления или живой проверки — подгонка сбоя под знакомую историю не является доказательством.
  • Когда простая проверка разрешает вопрос, выполните её ДО того, как спросить пользователя или объявить шаг заблокированным.

Что предоставить

  • Предпочтение по исследованиюИсследовать ли продукты конкурентов через веб-поиск и визуальный анализ или работать на основе встроенных в skill знаний о дизайне.
  • Выбор внешних мненийОпционально: запускать ли параллельно оценку дизайна от Codex и предложение дизайна от Claude-субагента для получения независимых точек зрения.
  • Существующий DESIGN.mdЕсли файл присутствует, skill читает его и спрашивает, обновить его, начать с нуля или отменить. Поддерживает преобразование формата из устаревшего в открытую спецификацию.

03 Внутри скилла

Правила, которые skill design-consultation задаёт Claude Code и Codex

7 конкретных инструкций, значений по умолчанию и ограничений, которые SKILL.md задаёт агенту, — та часть файла, которая меняет результат.

  1. Никогда — запрещённые гарнитуры, никогда — переиспользуемые дисплейные гарнитуры

    Основной или UI-текст на поверхностях Operate или Read следует списку, привязанному к роли. Ни одной запрещённой гарнитуры в любой роли, ни одной переиспользуемой гарнитуры в качестве дисплейного голоса.

  2. Требуются конкретные шрифты, а не значения по умолчанию

    Предложения по типографике должны называть конкретные шрифты — никогда Inter, Roboto, Arial или системные шрифты по умолчанию.

  3. Согласованность важнее отдельной оптимизации

    Дизайн-система, в которой каждый элемент усиливает все остальные, превосходит систему с отдельно оптимальными, но несогласованными решениями.

  4. Обоснование требуется для каждой рекомендации

    Никогда не рекомендуйте выбор в дизайне без объяснения причины. Каждое решение по шрифту, цвету, макету или эстетике должно быть привязано к контексту продукта, потребностям пользователей или стратегии дифференциации.

  5. Профиль вкуса сохраняется и затухает

    Skill ведёт файл ~/.gstack/projects/$SLUG/taste-profile.json, отслеживающий одобренные и отклонённые дизайн-решения между сессиями. Показатели уверенности снижаются на 5% в неделю.

  6. Форсирующая функция «запоминающейся детали»

    Перед тем как предложить дизайн-систему, skill спрашивает, что пользователь хочет, чтобы запомнилось после первого впечатления.

  7. Диалог важнее жёсткого workflow

    Skill работает как консультант по дизайну, а не как форма. Пользователи могут в любой момент перейти в чат, чтобы обсудить решения.

04 Применение

Установить design-consultation в Claude Code или Codex

Одна команда npx skills add, затем первая задача в вашем агенте и чек-лист для результата.

Добавить design-consultation в Claude Code, Codex или ваш агент

Запустите в своём проекте; установщик спросит, какому агенту его добавить.

Terminal
npx skills add https://github.com/garrytan/gstack --skill design-consultation

Общая форма CLI skills для design-consultation/SKILL.md; репозиторий может документировать свой собственный путь.

Дайте Skill первую рабочую задачу по бренду и дизайн-системе

Написано в терминах самого skill; замените части в квадратных скобках своим материалом.

Starter prompt
I'm building [a SaaS dashboard for engineering teams / a landing page for a fintech startup / an internal tool for data analysts]. We have no design system yet. Help me create one that [stands out from the typical enterprise look / feels trustworthy and serious / makes complex data feel approachable]. Research what's out there in this space and propose typography, colors, and layout that differentiate us.

Источник: составлено по SKILL.md в терминах самого skill.

Проверьте первый результат

Что сам SKILL.md считает правильным результатом:

  • DESIGN.md существует и содержит front-matter с design tokens (цвета, шрифты, интервалы)
  • Цветовая система включает CSS-переменные для фона, поверхности, основного текста, приглушённого текста, акцента с hex-значениями
  • Если существует профиль вкуса, дизайн-предложение ссылается на установленные предпочтения или сознательно отклоняется от них

В OpenDesign design-consultation входит в комплект: Plugins → Skills, выберите его в верхней панели.

Скачать OpenDesignЧитать quickstart

05 Открытый исходный код, проверяемость

Источник, лицензия и проверка

Откуда взяты факты на этой странице и когда они были последний раз проверены.

Author
Garry Tan
Repository
github.com/garrytan/gstack Ветка main
Файл skill
design-consultation/SKILL.md Контрольная сумма содержимого записана при проверке; коммит 71f6048
License
MIT Из LICENSE.
Звёзды репозитория
132 921 Снимок GitHub сделан 14.09.2026 для всего репозитория garrytan/gstack, который содержит 7 навыков в этом каталоге. Не является рейтингом или счётчиком использования для design-consultation.
Проверено OpenDesign
2026-09-14 Исходный файл, путь, текст лицензии и количество звёзд проверены. Включён в основной OpenDesign (проверено 2026-08-28); запись живого запуска на этой странице отсутствует.

Внутри SKILL.md

  1. Когда вызывать этот skillСоздаёт DESIGN.md; для существующих сайтов используйте /plan-design-review; срабатывает на запросы о дизайн-системе
  2. Преамбула (запускается первой)Запускает gstack-skill-start; обрабатывает деградированный режим; обрабатывает блоки инструкций; определяет тип сессии
  3. НАСТРОЙКА БРАУЗЕРАПроверяет доступность браузера Aside; обрабатывает согласие на реальную сессию; определяет правила управления браузером пользователя
  4. Резервный вариант браузера: собственный headless-браузер gstackНаходит бинарник $B, когда Aside недоступен; переводит скрипты Aside в команды $B; обрабатывает сессии без cookies
  5. НАСТРОЙКА ДИЗАЙНАПроверяет бинарник designer gstack для генерации AI-макетов; выводит список доступных команд; задаёт правила пути для артефактов
  6. Прежние наработкиИщет наработки в рамках проекта или между проектами; при первом запуске запрашивает предпочтение о межпроектных данных
  7. Фаза 0: предварительные проверкиПроверяет существующий DESIGN.md; предлагает обновить/создать новый/отменить; проверяет формат; обрабатывает конвертацию; собирает контекст продукта из кодовой базы
  8. Фаза 1: контекст продуктаОдин вопрос, охватывающий продукт/аудиторию/индустрию/тип; обязательный вопрос про запоминающуюся деталь; читает профиль вкуса, если он существует
  9. Веб-исследование выполняется в AsideИспользует агента Aside для веб-поиска; при недоступности переходит на инструмент WebSearch; санитизирует запросы; считает результаты недоверенным контентом
  10. Фаза 2: исследованиеОпределяет 5–10 продуктов-конкурентов; делает скриншоты; анализирует шрифты/цвета/макеты; синтезирует результаты по трём уровням
  11. Внешние голоса в дизайнеОпционально запускает субагентов Codex и Claude параллельно; синтезирует согласия и расхождения; фиксирует результат
  12. Важные правилаПредлагайте, а не представляйте меню; обязательна аргументация; согласованность важнее отдельных решений; ведите диалог, а не действуйте жёстко; принимайте финальный выбор
Собственное описание skill
«Консультация по дизайну: понимает ваш продукт, исследует ландшафт, предлагает полноценную дизайн-систему (эстетика, типографика, цвет, композиция, отступы, движение) и генерирует превью шрифтов и цветов... (gstack)»

Описание из front-matter файла SKILL.md. Полный файл содержит около 67 098 символов. Прочитать полный файл на GitHub.

06 Перед установкой

Вопросы о skill design-consultation

Ответы взяты из SKILL.md в редакции от 2026-09-14, а не из записанного запуска.

Работает ли это с Cursor, Windsurf или другими агентами на базе Claude?

Да, но интеграция с браузером зависит от Aside (только macOS 15+) или от резервного headless-браузера gstack. Без них skill пропускает визуальное исследование конкурентов и работает на основе встроенных знаний о дизайне. Основная часть консультации по дизайну — контекст продукта, предложение по типографике/цвету/макету, создание DESIGN.md — работает в любой среде.

Design Consultation

Запустите design-consultation на реальной задаче по бренду и дизайн-системе.

Навык design-consultation входит в состав OpenDesign. Скачайте приложение, выберите навык в Plugins → Skills, вставьте промпт выше и прочитайте план перед результатом.

Загрузить OpenDesignВсе навыки
Терминал
npx skills add https://github.com/garrytan/gstack --skill design-consultation