Editorial Tri-Tone
FreeA tri-tone design system for editorial presentations.
Free · Opens the source repo
What Editorial Tri-Tone does
The Editorial Tri-Tone skill provides a cohesive design framework tailored for editorial and design teams, particularly those involved in fashion, lifestyle, and art direction. This skill features a tri-tone color palette consisting of dusty pink, mustard cream, and deep burgundy, complemented by carefully selected typography using Bricolage and Instrument Serif. The system is designed to maintain a medium-high formality and medium density, making it suitable for a range of presentations that require a polished, magazine-like aesthetic.
The skill is delivered as a self-contained HTML deck, which includes all necessary elements such as typography, color palette, and decorative systems. Users are encouraged to adhere strictly to the design specifications to preserve the integrity of the visual identity. The layout kit is structured to ensure that mixing templates is avoided, thus maintaining a consistent look throughout any presentation created with this skill.
This skill is ideal for creating editorial pitches, fashion brand decks, and lifestyle media presentations. It can also be utilized for tech or business decks that aim to break away from conventional neutral color schemes, providing a fresh and engaging alternative. However, it is important to note that this design system is not suitable for decks that require a softer or more comforting appearance due to its high-contrast color choices.
Users will find that the workflow is straightforward: clone the provided HTML and assets, replace placeholder content with their own, and ensure that the design system is preserved throughout. The skill also includes a navigation runtime that enhances user interaction, making it easy to present in a dynamic manner. Overall, the Editorial Tri-Tone skill is a valuable tool for those looking to create visually striking presentations that stand out in a competitive landscape.
When to use it
Use this skill when creating editorial or design presentations that require a strong visual identity and a tri-tone color scheme.
When not to use it
Avoid this skill for presentations that need to convey a soft or comforting tone, as the color palette is intentionally high-contrast.
What you can build with it
Creating Fashion Brand Decks
Utilize the tri-tone design to craft visually appealing presentations that align with fashion branding.
Editorial Pitches for Magazines
Present editorial concepts with a polished, magazine-like aesthetic that captures attention.
Art Direction Reviews
Use the skill to create decks that effectively communicate art direction ideas with a strong visual identity.
How to install Editorial Tri-Tone
View source1. Install with the skills CLI
npx skills add nexu-io/open-design/html-ppt-zhangzara-editorial-tri-tone --agent claude-code2. Or install it manually
Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.
Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs
Inside SKILL.md
Written by nexu-ioEditorial Tri-Tone
Three-color editorial system: dusty pink, mustard cream, and deep burgundy, set in Bricolage + Instrument Serif.
A single self-contained HTML deck — typography, palette, decorative system, and slide vocabulary are all tuned together. Mixing layouts across templates breaks the system; stay inside this one.
At a glance
- Scheme: mixed
- Formality: medium-high
- Density: medium
- Slides in demo: 8
Best for
Anything that should feel like a fashion-magazine spread: editorial pitches, fashion brand decks, lifestyle media, art direction reviews. Equally good for any deck — including tech, research, or business — that wants tri-tone discipline and serif/sans contrast instead of the usual neutrals.
Avoid for
Decks that need to read as soft or comforting — the burgundy/pink/cream tri-tone is intentionally high-contrast and styled.
Workflow
- Clone
example.htmlAND theassets/folder into the user's workspace. This template ships anassets/deck-stage.jsruntime (keyboard navigation, stage rendering); the HTML references it asassets/deck-stage.js, so the file must sit next to the cloned HTML or that path will 404 in the generated artifact and navigation will silently break. Inlining the JS into a single<script>block in the HTML is an acceptable alternative when a single self-contained file is preferred. - Replace placeholder content with the user's real headlines, body copy, numbers, names, dates, and section labels. Match existing dimensions when swapping image placeholders.
- Preserve the design system. Never substitute fonts, recolor the palette, restructure the layout grid, or strip decorative elements (corner brackets, paper grain, geometric shapes, illustrated SVGs). They are part of the identity.
- Adjust deck length by duplicating layouts. If the user has more content than the demo holds, duplicate an existing slide of the most appropriate layout. If less, drop slides from the bottom. Update page-number labels.
- Designing missing layouts: if a slide needs a layout the template doesn't have, design it from scratch using the same fonts, palette, decorative vocabulary, spacing rhythm, and component grammar — never bail to a different template.
- Keep the navigation runtime as shipped. If the deck ships an
assets/deck-stage.jsor inline keyboard handler, leave it intact.
Output contract
Emit between <artifact> tags:
<artifact identifier="zhangzara-editorial-tri-tone" type="text/html" title="Deck Title">
<!doctype html>
<html>...</html>
</artifact>
Source & license
Vendored from upstream MIT-licensed
zarazhangrui/beautiful-html-templates.
The full upstream MIT license text — including the original copyright notice — ships in this skill at
LICENSE and must be redistributed alongside any copy of example.html,
template.json, or any vendored assets/ runtime. See template.json for the upstream metadata snapshot.
Frequently asked questions about Editorial Tri-Tone
Similar skills
PPTX HTML Fidelity Audit
Ensure your PPTX matches its HTML source perfectly.
HTML PPT Studio
Create professional HTML presentations effortlessly.
Humanize PPT
Transform raw material into presentation-ready outlines.
Replit Deck
Create visually cohesive decision decks with ease.
Open Design Landing Deck
Create engaging marketing decks with a magazine-style format.
Magazine Web Presentation
Create visually striking HTML presentations with ease.