Перейти к руководству
Power Designавтор ItsssssJack

Power Design Skill.

Сначала выберите формат, затем применяйте бренд, не смешивая требования к слайдам и к сайтам.

  • Веб-дизайн
  • Презентации
  • Системы бренда
Обзор источника · Power DesignSKILL.md
Задача Веб-дизайн Результат • Презентация или адаптивный сайт HTML; для подключённых шрифтов и изображений может потребоваться доступ к сети. • Повторно используемое описание стиля бренда при извлечении нового исходного бренда. • Результат, проверенный по чек-листу для слайдов или сайта: содержание, вёрстка и доступность. Перед началом Для извлечения бренда по URL нужен Firecrawl. Результаты по умолчанию не используют внешние зависимости JavaScript, но для шрифтов и изображений всё равно могут понадобиться доступность и права на использование.
Редакционное резюме · проверенный источник 2026-10-07 · не сгенерированный пример

01 Возможности

Создавайте презентации или сайты HTML на основе бренда

Рабочий процесс дизайна HTML с общим извлечением бренда и отдельными правилами для презентаций и адаптивных сайтов.

Процесс на основе источникаНе тест выполнения

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

У Power Design два пути вывода с общей основой бренда: презентация HTML с фиксированным кадром и адаптивный сайт. Можно использовать URL бренда через Firecrawl, встроенный стиль бренда или нейтральный вариант по умолчанию. Затем одни и те же ссылки на фон, основной цвет, акцент, шрифт, скругление и стиль подачи передаются в правила для нужного формата.

Это различие важно: читаемый проецируемый слайд и удобная веб-страница подчиняются разным ограничениям. Для слайдов важны ограниченный объём содержимого, безопасная зона, одна визуальная мысль и понятный режим показа. Для сайта добавляются адаптивная вёрстка, семантическая структура, доступ с клавиатуры, поведение тем, формы и метаданные. Это проектные цели, а не измеренные показатели производительности.

Ожидаемые результаты

  • Презентация или адаптивный сайт HTML; для подключённых шрифтов и изображений может потребоваться доступ к сети.
  • Повторно используемое описание стиля бренда при извлечении нового исходного бренда.
  • Результат, проверенный по чек-листу для слайдов или сайта: содержание, вёрстка и доступность.
Смотреть пример брифа

От брифа до проверки

  1. 01
    Выберите презентацию или сайт

    Определите формат результата до выбора правил или холста.

  2. 02
    Подготовьте данные бренда

    Используйте разрешённое извлечение по URL, существующий стиль из библиотеки или нейтральную основу.

  3. 03
    Примените нужный свод правил

    Для слайдов используйте ограничения презентации, для сайтов — требования к адаптивному взаимодействию.

  4. 04
    Сохраните и проверьте

    Откройте результат, проверьте поведение, свойственное формату, и дорабатывайте по фактическому результату.

02 Когда использовать

Когда использовать

Для извлечения бренда по URL нужен Firecrawl. Результаты по умолчанию не используют внешние зависимости JavaScript, но для шрифтов и изображений всё равно могут понадобиться доступность и права на использование.

Подходит для

  • Брендированные презентации HTMLПолезно, когда нужный результат — презентация в браузере.
  • Адаптивные маркетинговые страницыДаёт вариант по умолчанию без фреймворков, с токенизированным оформлением светлой и тёмной тем.

Ограничения, которые нужно проверить

  • Не экспортёр PPTXДокументированный результат по умолчанию — HTML, а не нативный файл PowerPoint.
  • Для извлечения бренда нужен доступБрендинг по URL зависит от доступной интеграции Firecrawl и доступных исходных материалов.
  • Целевые значения — не измеренияУказанные бюджеты производительности и пороги читаемости нужно проверять в реальном результате, а не заявлять автоматически.

Что подготовить

  • Формат и цельУкажите, что нужно получить — презентацию или сайт, — и какое действие или сообщение результат должен поддерживать.
  • Источник брендаПредоставьте URL, известный бренд из библиотеки или разрешение использовать нейтральный стиль.
  • Содержание и аудиторияДайте реальные утверждения, разделы, ключевые мысли и целевых зрителей.

03 Важные решения

Важные решения

  1. Правила для каждого формата

    Фиксированный холст слайда не должен наследовать плотность сайта, а веб-страница — допущения о взаимодействии, характерные только для презентаций.

  2. Общая запись бренда

    Извлечённый стиль бренда может использоваться на обоих путях, при этом правила вёрстки остаются раздельными.

  3. Простой вариант HTML по умолчанию

    Источник предпочитает самодостаточный результат, если явно не нужен более крупный проект или фреймворк.

04 Пример задания

Попробуйте сфокусированный бриф

Приведённый ниже пример брифа не тестировался. Перед использованием проверьте настройку навыка.

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

Храните принципы, библиотеку брендов и справочные материалы по извлечению вместе с навыком. Источник не задаёт универсальный установщик в одну строку.

Исходный файл в репозитории
https://github.com/ItsssssJack/power-design/blob/f0c4143a38787aa33975b0e1811ccdf27d3014a1/SKILL.md

Для извлечения бренда по URL нужен Firecrawl. Результаты по умолчанию не используют внешние зависимости JavaScript, но для шрифтов и изображений всё равно могут понадобиться доступность и права на использование.

Начните с одного результата

Перед запуском навыка адаптируйте объём, исходные материалы и ограничения в этом брифе.

Пример брифа
Используйте power-design, чтобы создать адаптивную страницу HTML, а не презентацию, для предоставленного воркшопа. Используйте наш файл стиля бренда и проверенные данные о мероприятии. Оставьте одно действие для регистрации, поддержку клавиатуры и светлую и тёмную темы, а фактические проверки области просмотра и производительности указывайте отдельно от проектных целей.

Проверьте результат

Сверьте фактический результат с этими наблюдаемыми критериями.

  • Выбранный результат соответствует правилам нужного формата.
  • Значения бренда можно отследить до предоставленного или извлечённого стиля.
  • Сайт или презентация проверены в том браузерном контексте, для которого они предназначены.

OpenDesign предоставляет локальное дизайн-пространство для кодирующих агентов. Эта запись не означает, что навык входит в комплект или что внешние инструменты, учётные данные и программные зависимости включены.

05 Источник и лицензия

Источник и лицензия

На этой странице описана закреплённая версия источника, ссылка на которую приведена ниже. Поведение и требования в исходном репозитории могут измениться.

Владелец источника
ItsssssJack
Репозиторий
ItsssssJack/power-design
Файл навыка
SKILL.md
Лицензия
MIT
Проверенный снимок
2026-10-07 · f0c4143a3878
Редакционное резюме источника
Рабочий процесс дизайна HTML с общим извлечением бренда и отдельными правилами для презентаций и адаптивных сайтов.

Оригинальное резюме от OpenDesign на основе указанного источника. Звёзды репозитория — датированный показатель популярности, а не данные об использовании навыка или оценка качества.

06 Вопросы перед началом

Вопросы перед началом

Может ли он создавать файлы PowerPoint?

В источнике описаны презентации HTML. Для нативного результата PPTX нужен отдельный процесс конвертации или создания.

Всегда ли нужен Firecrawl?

От него зависит только извлечение по URL; источник также предлагает существующие стили брендов и нейтральный вариант по умолчанию.

Входят ли светлая и тёмная темы для сайтов?

Они входят в документированный вариант сайта по умолчанию вместе с сохраняемым ручным переключателем, если не изменить объём работы.

OpenDesign

Оставьте место для следующей итерации дизайна.

Храните бриф, исходные материалы и дизайн-работу вместе в локальном рабочем пространстве. Перед добавлением навыка в рабочий процесс проверьте его собственную настройку.

Исходный файл в репозитории
https://github.com/ItsssssJack/power-design/blob/f0c4143a38787aa33975b0e1811ccdf27d3014a1/SKILL.md