К основному содержанию
скилл Claude Code CX Codex Cursor GitHub Copilot

field-notes-editorial-template — скилл для Claude Code: что делает

Скилл генерирует вёрстку бизнес-отчёта в стиле журнала в одном HTML-файле. Пригодится для оформления заметок совета директоров и аналитики.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add nexu-io/open-design --skill field-notes-editorial-template -a claude-code
Открыть на GitHub

Что делает field-notes-editorial-template

Агент создаёт автономный HTML-отчёт в журнальной эстетике. Вёрстка сочетает бумажный фон с виньеткой и заголовки с засечками. Для аналитики предусмотрены пастельные карточки и график удержания.

Интерактивные элементы работают сразу. Скилл включает анимацию счётчика чисел и плавное появление линии графика. Если точных цифр нет, разметка использует прочерки вместо выдуманных данных. Готовый файл проверяется по чеклисту references/checklist.md.

Для работы скиллу требуется право на запись файлов (file_write). Палитра берётся из файла DESIGN.md и переносится в CSS-переменные.

Какие задачи решает

  • оформить отчёт для совета директоров в журнальном стиле
  • собрать интерактивный дашборд в одном HTML-файле
  • визуализировать динамику удержания пользователей на графике
  • сверстать карточки аналитики на пастельном фоне

Примеры запросов агенту

  • Сделай отчёт в стиле Field Notes с тремя карточками выводов, метриками и графиком удержания в одном HTML
  • Оформи одностраничный меморандум для совета директоров в журнальной вёрстке

Как установить field-notes-editorial-template

1Через Skills CLI (Vercel)

npx skills add nexu-io/open-design --skill field-notes-editorial-template -a claude-code

2Вручную: положить файлы

~/.claude/skills/field-notes-editorial-template/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/field-notes-editorial-template/

Из того же набора106

Весь набор →
ui-ux-pro-max nexu-io Каталожная карточка для обнаружения скилла UI/UX Pro Max в репозитории OpenDesign. Помогает агенту распознавать запросы к паттернам интерфейсов и эвристикам юзабилити. Claude Code CX Codex Cursor +1 5 400установок frontend-design nexu-io Скилл для создания фронтенд-интерфейсов с продуманной типографикой, цветом и вёрсткой — от лендингов до дашбордов. Claude Code CX Codex Cursor +1 4 800установок threejs nexu-io Помогает ассистенту создавать 3D-сцены, настраивать материалы, камеру и пост-обработку на Three.js прямо в браузере. Claude Code CX Codex Cursor +1 3 400установок creative-director nexu-io Скилл ведёт разработку креативной концепции от брифа до презентации и проверяет идеи по трём осям. Нужен для кампаний и критики концепций. Claude Code CX Codex Cursor +1 3 400установок design-brief nexu-io Преобразует дизайн-бриф в формате I-Lang в конкретную спецификацию с палитрой, типографикой, плотностью и ограничениями. Устраняет неопределённость из фраз вроде «сделай профессионально». Claude Code CX Codex Cursor +1 3 400установок apple-hig nexu-io Подключает базу Apple Human Interface Guidelines для iOS, macOS, visionOS, watchOS и tvOS к агенту при проектировании интерфейсов. Claude Code CX Codex Cursor +1 3 200установок hatch-pet nexu-io Создаёт и упаковывает спрайтшиты анимированных питомцев для Codex в формате 8×9. Пригодится для сборки пиксельного компаньона по концепту или картинке-референсу. Claude Code CX Codex Cursor +1 3 100установок design-md nexu-io Создаёт и ведёт DESIGN.md с направлением дизайна, токенами и визуальными правилами. Пригодится, когда агенту нужен единый документ по дизайн-системе. Claude Code CX Codex Cursor +1 3 100установок

Похожие

event-store-design Seth Hobson Скилл помогает спроектировать хранилище событий для event-sourced системы и выбрать подходящую технологию. Пригодится, когда вы строите инфраструктуру хранения событий. Claude Code CX Codex Cursor 10 800установок answer-me-with-html QingYunA Скилл превращает сложный ответ в одностраничное HTML-объяснение. Пригодится, когда нужно показать схему, сравнение или ход разбора. Claude Code CX Codex Cursor +1 5 200установок antislop miqdadbadjuber Фильтрует шаблонные решения ИИ при работе с интерфейсами и кодом. Нужен, когда агент должен следовать заданным правилам оформления и текста. Claude Code CX Codex Cursor +1 7 300установок frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. Claude Code Claude.ai 1 025 790установок grill-me Matt Pocock Скилл проводит жёсткое интервью по плану или дизайну, чтобы найти пробелы и уточнить решения. Подойдёт перед началом разработки. Claude Code 1 424 476установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. Claude Code CX Codex Cursor +1 673 100установок prototype Matt Pocock Создаёт временный прототип, чтобы проверить логику, модель состояния или вид интерфейса до работы над основным кодом. Claude Code 986 201установок grilling Matt Pocock Стресс-тестирует план, решение или идею сериями уточняющих вопросов. Подходит, когда нужно вскрыть допущения до начала работы. Claude Code 979 543установок

Вопросы о field-notes-editorial-template

Как установить field-notes-editorial-template в Claude Code?

Выполните команду npx skills add nexu-io/open-design --skill field-notes-editorial-template -a claude-code. Скилл загрузится в окружение Claude Code.

Что делает field-notes-editorial-template?

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

Что требуется для работы скилла?

Агенту нужно право на запись файлов (file_write). Для настройки шрифтов и палитры скилл считывает параметры из файла DESIGN.md в проекте.

Исходный текст

SKILL.md · Apache-2.0
---
name: field-notes-editorial-template
description: |
  Editorial "Field Notes" report template with soft paper background, serif hero
  typography, rounded pastel insight cards, and a retention chart panel.
  Use when users ask for a premium magazine-style business report, board memo
  one-pager, or elegant data storytelling layout.
triggers:
  - "field notes editorial template"
  - "editorial report template"
  - "magazine style business report"
  - "pastel insight dashboard"
  - "高级编辑风报告模板"
  - "奶油底粉彩卡片数据报告"
od:
  mode: template
  surface: video
  type: hyperframes
  platform: desktop
  preview:
    type: html
    entry: index.html
    reload: debounce-100
  design_system:
    requires: true
    sections: [color, typography, layout, components]
  outputs:
    primary: index.html
    secondary:
      - template.html
      - example.html
  example_prompt: "Create an editorial Field Notes style report with three insight cards, key metrics blocks, and a retention line chart in one polished single-file HTML page."
  capabilities_required:
    - file_write
---

# Field Notes Editorial Template

Produce a premium editorial data report in a single self-contained HTML file.

## Resource map

```text
field-notes-editorial-template/
├── SKILL.md
├── assets/
│   └── template.html
├── references/
│   └── checklist.md
└── example.html
```

## Workflow

1. Read active `DESIGN.md` and map palette/typography to root CSS variables.
2. Copy `assets/template.html` to `index.html` as the working artifact.
3. Keep the editorial frame language:
   - paper-like background and subtle vignette
   - serif display headlines plus clean sans-serif body copy
   - rounded pastel metric / insight cards
   - chart panel with legend and axis labels
4. Keep interactions lightweight and presentation-safe:
   - page view switcher (metrics / insights / retention)
   - number count-up animation for key metrics
   - chart line reveal animation
5. Use honest placeholders (`—` or neutral labels) where data is unknown.
6. Validate against `references/checklist.md` before emitting.

## Output contract

One short orientation sentence, then:

```xml
<artifact identifier="field-notes-editorial" type="text/html" title="Field Notes Editorial Report">
<!doctype html>
<html>...</html>
</artifact>
```

© nexu-io · Apache-2.0 · nexu-io/open-design

Смотрите также

Спонсоры проекта

Компании, которые помогают держать аналитику открытой