Skill

Pass

Audit score 90

field-notes-editorial-template

nexu-io/open-design

Premium editorial data report template with serif typography, pastel insight cards, and retention charts in a single HTML file.

Source View on skills.sh

What is field-notes-editorial-template?

A magazine-style business report template designed for elegant data storytelling. Use it when creating board memos, one-pagers, or premium editorial-style dashboards with soft paper backgrounds, rounded metric cards, and interactive chart panels.

Generates self-contained single-file HTML reports with editorial design system
Renders rounded pastel insight cards and key metrics blocks with count-up animations
Includes interactive page view switcher for metrics, insights, and retention data
Integrates serif display headlines with clean sans-serif body typography
Provides chart panel with legend, axis labels, and line reveal animations
Maps design system colors and typography from active DESIGN.md

How to install field-notes-editorial-template

npx skills add https://github.com/nexu-io/open-design --skill field-notes-editorial-template

Prerequisites

Active DESIGN.md file with color, typography, layout, and components sections
File write capability enabled

Claude Code

Cursor

Windsurf

Cline

How to use field-notes-editorial-template

1.Read the active DESIGN.md and extract palette and typography settings
2.Copy assets/template.html to index.html as your working artifact
3.Customize the editorial frame: adjust background, vignette, and card styling to match your design system
4.Populate metric blocks, insight cards, and chart data with your actual values
5.Use honest placeholders (— or neutral labels) for unknown data
6.Add page view switcher logic to toggle between metrics, insights, and retention views
7.Test count-up animations for key metrics and chart line reveal animations
8.Validate output against references/checklist.md before delivery

Use cases

Good for

Creating premium board presentation one-pagers with key metrics and insights
Designing editorial-style business reports with data visualization
Building elegant client dashboards with magazine-quality typography and layout
Producing polished single-file HTML reports for email or web distribution
Presenting quarterly performance reviews with retention trend charts

Who it's for

Product managers creating executive summaries
Designers building premium report templates
Business analysts presenting data-driven insights
Marketing teams producing editorial content with metrics
Anyone needing publication-quality HTML reports without external dependencies

field-notes-editorial-template FAQ

Can I use this template with my own data?

Yes. The template uses honest placeholders for unknown data. Replace the example metrics, card content, and chart datasets with your actual values while maintaining the editorial design structure.

Does this require external libraries or dependencies?

No. The output is a single self-contained HTML file with embedded CSS and JavaScript. No external assets or build tools are required.

How do I customize colors and typography?

The template reads your active DESIGN.md file and maps palette and typography to root CSS variables. Update your DESIGN.md color and typography sections, and the template will reflect those changes.

What interactions are included?

The template includes a page view switcher (metrics/insights/retention), count-up animations for key metrics, and chart line reveal animations. All interactions are lightweight and presentation-safe.

Can I export this as a PDF or email it?

Yes. Since it's a single HTML file, you can open it in a browser and use print-to-PDF, or email the HTML file directly. The design is optimized for both screen and print viewing.

Full instructions (SKILL.md)

Source of truth, from nexu-io/open-design.

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

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

Workflow

Read active DESIGN.md and map palette/typography to root CSS variables.
Copy assets/template.html to index.html as the working artifact.
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
Keep interactions lightweight and presentation-safe:
- page view switcher (metrics / insights / retention)
- number count-up animation for key metrics
- chart line reveal animation
Use honest placeholders (— or neutral labels) where data is unknown.
Validate against references/checklist.md before emitting.

Output contract

One short orientation sentence, then:

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

Related skills

More from nexu-io/open-design and the wider catalog.

figma-code-connect-components

nexu-io/open-design

Connect Figma design components to code components for automatic design-system synchronization.

1.3k installs

figma-create-design-system-rules

nexu-io/open-design

Generate project-specific design system rules for Figma-to-code workflows.

1.3k installsAudited

figma-create-new-file

nexu-io/open-design

Create a new blank Figma Design or FigJam file for design workflows.

1.3k installsAudited

figma-generate-design

nexu-io/open-design

Build or update Figma screens from code or descriptions using design system components and tokens.

1.3k installsAudited

figma-generate-library

nexu-io/open-design

Build or update a professional-grade design system library in Figma from a codebase.

1.3k installs

figma-implement-design

nexu-io/open-design

Translate Figma designs into production-ready code with 1:1 visual fidelity.

1.3k installs