fs-editorial-forest
Helps your agent create presentations on art direction and editorial design. It's useful for brand stakeholders and executives to understand visual strategy.
What it does
This system creates presentations with an elegant and calm look, using colors like forest green, dusty pink, and cream. It's ideal for reports and updates that need to feel more personal and less corporate.
When to use it
- ✓For quarterly or annual reports.
- ✓To present internal studio updates.
- ✓To share research recaps in an unhurried way.
Example of what to ask your AI
“Create an annual report using the 'Editorial Forest' theme, with forest green, dusty pink, and cream colors.”
Want more? Open the sections below.
How to use
The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.
Skill link
Ready-to-paste message
How it works
It works by defining a fixed visual style with specific colors and fonts. Presentations are created as a single HTML file, without needing extra programming, and the system handles the appearance.
Installation
Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.
In the terminal (Claude Code, Codex, Cursor), in your project folder:
npx skills add nexu-io/open-design --skill fs-editorial-forestOr download just the file:
curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/plugins/_official/examples/fs-editorial-forest/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
Editorial Forest (林间编辑部)
A quiet, considered editorial deck theme — deep forest green, dusty pink, and warm cream paper meet Source Serif 4. Built for quarterly reviews, internal readouts, studio updates, research recaps, and anything that should feel warm and unhurried rather than corporate. Avoid it for content that needs to feel urgent, punchy, or sales-driven.
Ported from the MIT-licensed zarazhangrui/beautiful-html-templates editorial-forest template.
Start from example.html in this plugin folder. It is the locked seed: keep the inline <deck-stage> runtime script, the :root token block, and every layout skin verbatim — replace only slide content. Do not rewrite the design, do not introduce colors or fonts outside the spec below.
Design tokens (locked — list verbatim in :root)
:root {
--green: #2e4a2a; /* forest green — dark canvas + primary text on cream */
--green-deep: #243a21; /* text on pink surfaces */
--green-lite: #3a5a36; /* lighter green tile variant */
--pink: #e89cb1; /* dusty pink — accent, text on green, bar series A */
--pink-deep: #d27e96; /* pink tile border */
--cream: #efe7d4; /* warm cream paper — light canvas, text on green */
--cream-2: #e6dcc4; /* secondary cream tile */
--ink: #1a1a17; /* body text on cream */
--serif: "Source Serif 4", "Source Serif Pro", Georgia, serif;
--mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}
- No other colors. No gradients, no shadows, no purple/indigo, no pure white or black surfaces.
rgba(239,231,212,0.18)(cream at 18%) is the only permitted alpha, used for chart grid lines. - No other fonts.
Source Serif 4(weights 300–800, weight 500 is the display default) for all headings and body;JetBrains Mono(400/500/700, weight 500 default) for kickers, numbers, captions, and axis labels. Load via the Google Fonts<link>already in the seed.
Typography & signature devices
- Display sizes: cover/summary h1 220px at
line-height: 0.92–0.94, section h2 80–96px, statement quote 140px, KPI numerals 220px (unit 110px in cream). Tracking −0.02em on serif display; mono labels run uppercase atletter-spacing: 0.12–0.18em, 24–28px. .labelmono uppercase kickers anchor every slide's top edge; paired left/right labels are the header signature.- The circular
.markmonogram (130px, 2px border) on the cover; the bottom.footlinerunning foot; 2px rule lines (border-top: 2px solid) above meta rows, KPI rows, and summary columns; cards with 6–8px radius and 2–2.5px borders. These devices are the theme — keep them.
Mixed scheme rhythm (8 slides)
Alternate dark, light, and pink canvases — never run more than two same-tone slides in a row:
| # | Master | Class | Canvas | Role |
|---|---|---|---|---|
| 1 | Cover | .cover |
green | monogram topbar, 220px serif title, mono footline |
| 2 | Agenda | .agenda |
cream | 5-tile mosaic grid (t-green spans 2 rows, t-pink/t-cream/t-greenLite) |
| 3 | Statement | .statement |
pink | 140px serif quote + mono attribution row |
| 4 | Two-column | .two-col |
cream | green figure panel (880px) + serif narrative + 3-col dl.meta |
| 5 | Data | .data |
green | pure-CSS grouped bar chart (pink/cream bars, mono axes, grid-lines) |
| 6 | Framework | .framework |
cream | 4 step cards: outline → pinkfill → fill → outline |
| 7 | Stats | .stats |
green | 3 KPI callouts, 220px pink numerals over a pink rule |
| 8 | Summary | .summary |
green | 220px pink closing word + 3-column takeaways |
Reuse these masters for longer decks (a second .two-col or .data, another .statement); keep the tone alternation. Charts stay pure CSS/HTML (percentage-height .bar divs); diagrams and icons are inline SVG stroked in token colors only — never Chart.js, mermaid, or remote images.
Stage system & runtime (locked)
- Every slide is one
<section class="…" data-screen-label="NN Label">authored at a fixed 1920×1080 (width: 1920px; height: 1080px; overflow: hidden), a direct child of<deck-stage aspect="1920/1080" no-rail>.
…
FAQ
Can I use other colors or fonts?
No, the style is fixed and only uses the specified colors and fonts to maintain the 'Editorial Forest' look.
How is the content organized?
Each slide has a fixed size, and content is arranged to avoid scrolling. The goal is one idea per slide.
Can I add charts or images?
Yes, simple charts made with HTML/CSS and inline SVGs are allowed, as long as they follow the defined colors and style.
Details
Original description by the author
Art-directing a fashion house's annual report — the editorial system, the photography rhythm, and the data spreads. Built as a decision-grade design craft deck for brand stakeholders, exec audience.
repo: nexu-io/open-design
Popularity
- GitHub stars
- 101k
- Ranking position
- #550
- License
- Apache-2.0
- Updated
- 10/16/2026
Comments
- …
More skills from this repository
sample-plugin
Makes your agent create a metadata file for tests. It helps ensure code works correctly in different situations.
nexu-io/open-design
aster-atelier
Helps your agent create an artistic website with a classic look. It uses elegant imagery, blue skies, and serif fonts for a cinematic feel.
nexu-io/open-design
audio-jingle
Makes your agent generate audio like jingles and sound effects. It can create music and voices, saving the result as an audio file.
nexu-io/open-design
blog-post
Helps your agent write long articles or blog posts. It includes space for images, quotes, and author information.
nexu-io/open-design
Similar skills
architecture-decision-records
Has your agent record important project structure decisions. It helps to understand the reasoning behind choices and maintain a clear history of changes.
affaan-m/ECC
code-tour
Lets your agent create step-by-step code walkthroughs with exact file and line anchors. It's useful for project introductions, code explanations, or change reviews. Helps understand how a system works.
affaan-m/ECC
codebase-onboarding
Helps your agent analyze unfamiliar code and create an onboarding guide. It includes an architecture map, entry points, and conventions. Ideal for starting on a new project.
affaan-m/ECC