Перейти к руководству
Beautiful Articleавтор ConardLi

Beautiful Article Skill.

Создайте документ, который стоит читать, не превращая его в дашборд.

  • Редакционный дизайн
  • HTML
  • Лонгрид
Проверка источника · Beautiful ArticleSKILL.md
Задача Редакционный дизайн Результат • Автономный файл article.html со встроенными стилями и скриптами • Извлечённый исходный текст в Markdown и заметки о качестве извлечения • Редакционный план и проверенный первый разворот статьи Прежде чем начать Документированная сборка использует Node/npm, Vite, React, TypeScript и Reacticle. Для извлечения данных из документов и необязательного вывода в PDF могут понадобиться дополнительные инструменты; для генерации изображений нужен отдельно доступный бэкенд.
Редакционное резюме · источник проверен 2026-10-07 · не сгенерированный пример

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

Beautiful Article

Редакционный конвейер, разделяющий извлечение, планирование статьи, утверждение первого разворота, полную вёрстку и офлайн-доставку.

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

Принцип работы

Beautiful Article — процесс ConardLi от источника к статье. Он начинается с уже имеющегося материала: URL статьи, Markdown, документа, PDF или скриншотов. Ожидаемый результат — полноценный материал для вдумчивого чтения, а не короткое маркетинговое резюме. Извлечённый исходный материал остаётся доступным, чтобы факты, примеры и технические детали можно было сверять на протяжении всей сборки.

Ключевое решение — проверить первый разворот до создания всей статьи. Обложка, начальный раздел и типичный визуальный блок показывают, как будет читаться материал. Reacticle предоставляет семантические компоненты статьи, а ограниченный пользовательский слой может добавлять диаграммы и другие средства для чтения. Результат — автономный файл HTML; PDF — отдельный результат по запросу, а не вариант по умолчанию.

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

  • Автономный article.html со встроенными стилями и скриптами
  • Извлечённый исходный текст в Markdown и заметки о качестве извлечения
  • Редакционный план и проверенный первый разворот статьи
Посмотреть пример задания

От задания до проверки

  1. 01
    Восстановить источник

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

  2. 02
    Спланировать чтение

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

  3. 03
    Проверить первый разворот

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

  4. 04
    Завершить и упаковать

    Проверьте каждый раздел и готовую статью, исправьте ошибки, затем получите итоговое решение о выдаче перед экспортом офлайн-HTML. Проверка первого разворота и финальная проверка выполняются независимыми агентами, если они доступны; любой возврат к основному агенту нужно раскрыть. Экспортируйте PDF только по запросу.

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

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

Документированная сборка использует Node/npm, Vite, React, TypeScript и Reacticle. Для извлечения данных из документов и необязательного вывода в PDF могут понадобиться дополнительные инструменты; для генерации изображений нужен отдельно доступный бэкенд.

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

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

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

  • Не конструктор приложенийИсточник прямо отделяет этот процесс от дашбордов, форм, универсальных веб-приложений и прототипов продуктов.
  • Не автоматическая иллюстрацияВнешние и сгенерированные изображения — осознанный выбор. Статья без изображений всё равно может использовать объяснения CSS или SVG, основанные на содержании, без скрытого обращения к сервису изображений.

Какие данные подготовить

  • Исходный материалПредоставьте сам документ или доступную статью, а также разделы, цитаты и иллюстрации, которые должны сохраниться при преобразовании.
  • Читатель и цельУкажите, это учебное руководство, брифинг, рецензия или эссе и какой уровень знаний у предполагаемого читателя.
  • Разрешения для визуалаВыберите предоставленные материалы, заглушки, сгенерированные изображения или отсутствие изображений; укажите ограничения бренда и нужен ли вывод в PDF.

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

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

  1. Сначала содержание, потом декор

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

  2. Ранний образец для чтения

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

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

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

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

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

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

Исходный файл в репозитории
https://github.com/ConardLi/garden-skills/blob/aaf9a82f5efd73e87cc0998edc398e75bfc35901/skills/beautiful-article/SKILL.md

Документированная сборка использует Node/npm, Vite, React, TypeScript и Reacticle. Для извлечения данных из документов и необязательного вывода в PDF могут понадобиться дополнительные инструменты; для генерации изображений нужен отдельно доступный бэкенд.

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

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

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

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

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

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

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

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

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

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

Владелец источника
ConardLi
Репозиторий
ConardLi/garden-skills
Лицензия
MIT
Проверенный снимок
2026-10-07 · aaf9a82f5efd
Редакционное резюме источника
Редакционный конвейер, разделяющий извлечение, планирование статьи, утверждение первого разворота, полную вёрстку и офлайн-доставку.

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

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

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

Делает ли он краткое изложение источника по умолчанию?

Нет. Процесс в первую очередь сохраняет информацию источника. Тип статьи и плотность могут менять подход, но сокращение должно быть явным редакционным решением.

Может ли он переводить статью?

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

Является ли PDF основным результатом?

Нет. Основной результат — автономный HTML. Для PDF нужен отдельный проход для печати, включая оформление обложки и пагинации.

OpenDesign

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

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

Исходный файл в репозитории
https://github.com/ConardLi/garden-skills/blob/aaf9a82f5efd73e87cc0998edc398e75bfc35901/skills/beautiful-article/SKILL.md