Digital Eguide
- 247 installs
- 84k repo stars
- Updated August 6, 2026
- nexu-io/open-design
digital-eguide is an agent skill that creates downloadable digital guides and lead-magnet ebooks with structured chapters, visuals, and CTAs for developers supporting content marketing and prospect nurture flows.
About
digital-eguide is a Design & UI/UX skill from nexu-io/open-design for producing downloadable digital guides and lead-magnet ebooks. The skill structures chapters, inserts supporting visuals, and places CTAs that connect readers to signup or demo flows. It targets content marketing programs that need a polished PDF or web guide rather than a single blog post. Developers and growth engineers reach for digital-eguide when building nurture assets, onboarding ebooks, or gated resources that must read coherently across multiple sections while driving a clear conversion action at chapter breaks.
- lead magnets
- chapter structure
- downloadable guides
- nurture CTAs
- educational layouts
Digital Eguide by the numbers
- 247 all-time installs (skills.sh)
- +2 installs in the week ending Aug 4, 2026 (Skillselion tracking)
- Ranked #211 of 688 Office & Documents skills by installs in the Skillselion catalog
- Data as of Aug 6, 2026 (Skillselion catalog sync)
npx skills add https://github.com/nexu-io/open-design --skill digital-eguideAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 247 |
|---|---|
| repo stars | ★ 84k |
| Last updated | August 6, 2026 |
| Repository | nexu-io/open-design ↗ |
How do you design a lead-magnet ebook with chapters and CTAs?
Create downloadable digital guides and lead-magnet ebooks with structured chapters, visuals, and CTAs to nurture prospects and support content marketing.
Who is it for?
Developers building gated ebooks or nurture guides that need chapter structure, visuals, and conversion CTAs for content marketing funnels.
Skip if: Short single-page landing copy tasks or automated Shopify inventory reconciliation workflows.
When should I use this skill?
A content marketing funnel needs a downloadable guide or ebook with chapters, visuals, and embedded CTAs for lead nurture.
What you get
Structured digital guide with chapters, visuals, and embedded lead-capture CTAs
Files
Digital E-Guide Skill
Produce a two-page digital guide preview side-by-side. Cover on the inline-start, inside spread on the inline-end. Lifestyle creator tone, lots of negative space, serif display headings, careful column rhythm.
Workflow
1. Read the active DESIGN.md (injected above). Pick a serif display token for the title (italic ligatures encouraged), a body serif for long-form, and a mono token for stats / labels. 2. Pick the topic + author from the brief. Generate a real title (e.g. "The Creator's Style & Format Guide"), a real subtitle, and a one-line author byline. 3. Layout — center two pages on a tinted backdrop:
- Page 1 — cover:
- Eyebrow ("STYLE & FORMAT GUIDE FOR CREATORS").
- Display title with mixed weights and one italic flourish word
("The Creator's Style & Format guide" — & and guide italic).
- 3-cell stat row ("16 PRINCIPLES OF STYLE", "38 DOS & DON'TS",
"1 BLOCK, ZERO TEMPLATES") in mono, separated by ·.
- "What's inside" header with a 2-column TOC (chapters + page numbers
in mono, leader dots).
- Footer: "FIND YOUR VOICE" + page 01 mono.
- Subtle decorative dot or sticker (CSS) in a corner.
- Page 2 — spread:
- Eyebrow with chapter number + name ("CHAPTER 02 · TONE").
- Display sub-title ("Write like you talk — only sharper.").
- 2-column body: opening paragraph + a numbered 4-step list ("01 Pick
the rule", "02 Drop the filler"…).
- Pull-quote pinned to inline-end: for Latin scripts use large italic display
and accent color; for Arabic, Persian, and Urdu use regular or light emphasis (no italics); for Hebrew use regular or light emphasis (no italics). Include attribution. (script-aware)
- Bottom strip with "EXERCISE" callout (mono label + 1 sentence prompt
in italic).
- Footer: chapter title + page 18 mono.
4. Write a single HTML document:
<!doctype html>through</html>, CSS inline.- Pages are 600×860 paper-tone cards with 6px shadow, slight rotation
opposing each other (±0.6deg) for a magazine-on-desk feel.
data-od-idon cover, spread, toc, pull-quote, exercise.
5. Self-check:
- Type hierarchy is editorial — title owns page 1, sub-title owns page 2.
- Italic accent appears once per page.
- Mono used only for labels, stats, and TOC numbers.
Output contract
Emit between <artifact> tags:
<artifact identifier="eguide-slug" type="text/html" title="E-Guide — Title">
<!doctype html>
<html>...</html>
</artifact>One sentence before the artifact, nothing after.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>The Creator's Style & Format Guide — Auny</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,700;1,500;1,700&family=DM+Serif+Text:ital@0;1&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet" />
<style>
:root {
--backdrop: #d8c8c0;
--paper: #faf3ea;
--paper-2: #f4ecdf;
--ink: #1f1c14;
--muted: #837964;
--rule: #d3c9b3;
--accent: #c44a47;
--accent-2: #e07d52;
--serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
--serif-body: 'DM Serif Text', Georgia, serif;
--sans: -apple-system, system-ui, 'Inter', sans-serif;
--mono: 'IBM Plex Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
color: var(--ink);
background:
radial-gradient(ellipse 80% 60% at 50% 20%, #e8d4cc, transparent 70%),
radial-gradient(ellipse 60% 60% at 80% 90%, #c79a8e, transparent 70%),
var(--backdrop);
font: 14px/1.55 var(--serif-body);
padding: 60px 40px;
display: flex; gap: 36px; justify-content: center; align-items: flex-start;
flex-wrap: wrap;
}
.page {
width: 540px; min-height: 740px;
background: var(--paper);
border-radius: 4px;
padding: 44px 44px 36px;
box-shadow: 0 30px 60px rgba(31,28,20,0.18), 0 4px 8px rgba(31,28,20,0.06);
position: relative;
}
.page.left { transform: rotate(-0.6deg); }
.page.right { transform: rotate(0.6deg); background: var(--paper-2); }
.eyebrow {
font: 10.5px/1 var(--mono);
letter-spacing: 0.22em;
color: var(--muted);
text-transform: uppercase;
display: flex; justify-content: space-between; align-items: center;
padding-bottom: 22px;
border-bottom: 1px solid var(--rule);
}
.eyebrow .left, .eyebrow .right { display: flex; align-items: center; gap: 10px; }
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
/* Cover */
.cover h1.title {
font-family: var(--serif);
font-weight: 700;
font-size: clamp(60px, 7.5vw, 92px);
line-height: 0.96;
letter-spacing: -0.01em;
margin: 32px 0 8px;
color: var(--ink);
}
.cover h1.title .creator { color: var(--accent); font-style: italic; }
.cover h1.title .amp { color: var(--accent-2); font-style: italic; font-weight: 500; padding: 0 6px; }
.cover h1.title .guide { font-style: italic; font-weight: 500; }
.cover h1.title .format { font-style: italic; font-weight: 500; padding-right: 4px; }
.cover .author { font: 12px/1 var(--mono); color: var(--muted); letter-spacing: 0.18em; text-transform: uppercase; margin: 16px 0 18px; display: flex; align-items: center; gap: 10px; }
.cover .author b { color: var(--ink); font-weight: 500; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 18px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin: 22px 0 28px; }
.stat .num { font: 700 36px/1 var(--serif); letter-spacing: -0.005em; }
.stat .lbl { font: 10px/1.4 var(--mono); color: var(--muted); letter-spacing: 0.16em; text-transform: uppercase; margin-top: 6px; max-width: 16ch; }
.cover h2.inside { font: italic 700 36px/1 var(--serif); margin: 14px 0 14px; letter-spacing: -0.005em; }
.cover h2.inside em { font-style: italic; color: var(--accent); }
.toc { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 36px; }
.toc .item { display: flex; align-items: baseline; gap: 6px; font: 14.5px/1.4 var(--serif-body); }
.toc .item .name { font-style: italic; color: var(--ink); }
.toc .item .leader { flex: 1; border-bottom: 1px dotted var(--muted); transform: translateY(-2px); margin: 0 4px; }
.toc .item .pn { font: 11px/1 var(--mono); color: var(--muted); letter-spacing: 0.06em; }
.cover-footer { position: absolute; left: 44px; right: 44px; bottom: 28px; display: flex; justify-content: space-between; align-items: center; font: 10.5px/1 var(--mono); color: var(--muted); letter-spacing: 0.18em; text-transform: uppercase; padding-top: 14px; border-top: 1px solid var(--rule); }
.sticker { position: absolute; top: 280px; right: 44px; width: 92px; height: 92px; border-radius: 50%; background: var(--accent-2); transform: rotate(8deg); display: grid; place-items: center; color: #fff; font: italic 700 14px/1.1 var(--serif); text-align: center; padding: 10px; }
.sticker::after { content: ''; position: absolute; inset: 6px; border: 1px dashed rgba(255,255,255,0.5); border-radius: 50%; }
/* Spread */
.spread h2.head { font: italic 700 44px/1 var(--serif); letter-spacing: -0.005em; margin: 32px 0 6px; max-width: 18ch; }
.spread h2.head .accent { color: var(--accent); }
.spread .deck { font: italic 16px/1.5 var(--serif-body); color: var(--muted); margin: 0 0 22px; max-width: 50ch; }
.columns { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-top: 14px; border-top: 1px solid var(--rule); }
.columns p { margin: 0 0 14px; font: 14.5px/1.6 var(--serif-body); color: var(--ink); }
.columns p:first-letter { font-family: var(--serif); font-size: 38px; line-height: 0.85; padding: 4px 6px 0 0; float: left; font-weight: 700; color: var(--accent); font-style: italic; }
.steps { display: flex; flex-direction: column; gap: 10px; }
.steps .row { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px dashed var(--rule); }
.steps .row .n { font: 700 12px/1 var(--mono); color: var(--accent); letter-spacing: 0.08em; }
.steps .row .body { font: 14px/1.45 var(--serif-body); }
.steps .row .body b { color: var(--ink); font-weight: 700; font-style: italic; }
.pullquote {
position: absolute; right: -16px; top: 280px;
width: 250px;
padding: 18px 22px;
background: var(--paper);
border: 1px solid var(--rule);
border-radius: 4px;
box-shadow: 0 8px 18px rgba(31,28,20,0.10);
font: italic 700 22px/1.2 var(--serif);
color: var(--ink);
transform: rotate(2.4deg);
}
.pullquote .open { font-size: 56px; line-height: 0.4; color: var(--accent); display: block; height: 24px; }
.pullquote .by { font: 11px/1 var(--mono); color: var(--muted); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 400; font-style: normal; margin-top: 14px; display: block; }
.exercise { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--accent); border-radius: 4px; background: rgba(196,74,71,0.05); display: flex; gap: 14px; align-items: center; }
.exercise .label { font: 10.5px/1 var(--mono); color: var(--accent); letter-spacing: 0.2em; text-transform: uppercase; padding: 6px 8px; border: 1px solid var(--accent); }
.exercise .text { font: italic 14px/1.4 var(--serif-body); color: var(--ink); }
.spread-footer { position: absolute; left: 44px; right: 44px; bottom: 28px; display: flex; justify-content: space-between; align-items: center; font: 10.5px/1 var(--mono); color: var(--muted); letter-spacing: 0.18em; text-transform: uppercase; padding-top: 14px; border-top: 1px solid var(--rule); }
@media (max-width: 1180px) {
.pullquote { right: 16px; }
.page { width: 92vw; max-width: 540px; }
}
</style>
</head>
<body>
<article class="page left cover" data-od-id="cover">
<div class="eyebrow">
<div class="left"><span class="dot"></span>STYLE & FORMAT GUIDE FOR CREATORS</div>
<div class="right">2026 EDITION</div>
</div>
<h1 class="title">The <span class="creator">Creator's</span> Style <span class="amp">&</span> <span class="format">Format</span> <span class="guide">guide</span></h1>
<div class="author">— BY <b>AUNY</b> · CREATOR EDUCATOR · 18 / 04 / 2026</div>
<div class="stats">
<div class="stat"><div class="num">16</div><div class="lbl">Principles of style</div></div>
<div class="stat"><div class="num">38</div><div class="lbl">Do's & Don'ts</div></div>
<div class="stat"><div class="num">1</div><div class="lbl">Block, zero templates</div></div>
</div>
<h2 class="inside">What's <em>inside.</em></h2>
<div class="toc" data-od-id="toc">
<div class="item"><span class="name">Find your voice</span><span class="leader"></span><span class="pn">04</span></div>
<div class="item"><span class="name">Pick a format</span><span class="leader"></span><span class="pn">12</span></div>
<div class="item"><span class="name">Tone & tension</span><span class="leader"></span><span class="pn">18</span></div>
<div class="item"><span class="name">Visual rhythm</span><span class="leader"></span><span class="pn">24</span></div>
<div class="item"><span class="name">Headlines that hold</span><span class="leader"></span><span class="pn">32</span></div>
<div class="item"><span class="name">Editing the cut</span><span class="leader"></span><span class="pn">40</span></div>
</div>
<div class="sticker">FOR THE FIRST DRAFT</div>
<div class="cover-footer"><span>FIND YOUR VOICE</span><span>01 / 64</span></div>
</article>
<article class="page right spread" data-od-id="spread">
<div class="eyebrow">
<div class="left"><span class="dot"></span>CHAPTER 02 · TONE</div>
<div class="right">3 — RULES, 1 — EXERCISE</div>
</div>
<h2 class="head">Write like you talk —<br/><span class="accent">only sharper.</span></h2>
<p class="deck">Your voice already exists. The work is to remove the parts that aren't you, then put what's left in the order people remember. Three small rules and one Sunday-morning exercise.</p>
<div class="columns">
<p>Strong writing has the cadence of speech and the precision of editing. Most beginners pick one and stop. Read your draft aloud. The sentences that catch in your throat are the ones to cut.</p>
<div class="steps">
<div class="row"><span class="n">01</span><span class="body"><b>Pick the rule.</b> One idea per paragraph. If two appear, split the paragraph.</span></div>
<div class="row"><span class="n">02</span><span class="body"><b>Drop the filler.</b> "I think", "kind of", "in my opinion" — they soften, then they erase.</span></div>
<div class="row"><span class="n">03</span><span class="body"><b>End with a verb.</b> The last beat lands harder when it asks for an action, not an adjective.</span></div>
<div class="row"><span class="n">04</span><span class="body"><b>Read aloud once.</b> Always. The microphone is the editor.</span></div>
</div>
</div>
<div class="pullquote" data-od-id="pullquote">
<span class="open">"</span>
Specificity is the unlock — write what only you saw.
<span class="by">— AUNY · CHAPTER 02</span>
</div>
<div class="exercise" data-od-id="exercise">
<span class="label">EXERCISE</span>
<span class="text">Rewrite your last three captions without the words <em>just</em>, <em>really</em>, or <em>very</em>. Keep what survives.</span>
</div>
<div class="spread-footer"><span>TONE & TENSION</span><span>18 / 64</span></div>
</article>
</body>
</html>
Related skills
Lark DocGenerate, update, and maintain structured documentation directly inside Lark/Feishu using natural language and agentic workflows.494kLark DriveLet their coding agents read, create, update and search documents stored in Lark (Feishu) Drive directly from prompts.493kLark SheetsConnect Claude, Cursor or other agents directly to Feishu/Lark spreadsheets for live data reads, writes, and structured automation.493kLark WikiGenerate, update, and sync structured knowledge bases inside Lark (Feishu) directly from code, specs, or agent output.493kLark WhiteboardGenerate, edit, and collaborate on visual diagrams and flowcharts directly inside Claude, Cursor or other agents.493kLark SlidesInstantly generate polished, professional slide decks from specs, roadmaps, or meeting notes using Lark/Feishu.493kFAQ
What assets does digital-eguide help developers create?
digital-eguide from nexu-io/open-design helps developers create downloadable digital guides and lead-magnet ebooks with structured chapters, supporting visuals, and CTAs. Output supports content marketing nurture flows and gated resource campaigns.
How is digital-eguide different from the blog-post skill?
digital-eguide targets multi-chapter downloadable guides and lead magnets with nurture CTAs. blog-post focuses on single long-form article typography and hierarchy for live site publishing rather than gated ebook-style assets.