Deck Guizang Editorial
- 1.7k installs
- 82k repo stars
- Updated July 28, 2026
- nexu-io/open-design
deck-guizang-editorial is an agent skill that editorial magazine meets e-ink: 10 layouts and 5 palettes (ink, indigo porcelain, forest ink, kraft paper, dune).
About
deck-guizang-editorial is an agent skill from nexu-io/open-design that editorial magazine meets e-ink: 10 layouts and 5 palettes (ink, indigo porcelain, forest ink, kraft paper, dune). 【模板: 归藏编辑墨水 Deck (Editorial × E-Ink)】 【意图】叙事、观点、分享、个人风格表达。墨纸印刷感, 不要科技感。Inspired by op7418/guizang-ppt-skill Style A。 【调色板 — 5 选 1, 严禁改 hex、严禁混用】 - 🖋 **墨水经典 Monocle** — ink `#0a0a0b`, paper `#f1efea`, paper-tint `#e8e5de`, ink-tint `#18181a`. 默认 / 通用商业 / 科技。 - 🌊 **靛蓝瓷 Indigo Porcelain** — ink `#0a1f3d`, paper `#f1f3f5`, paper-tint `#e4e8ec`, ink-ti Developers invoke deck-guizang-editorial during build/frontend work for design & ui/ux tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills. Review the Security Audits panel on this listing before installing in production environments.
- 【模板: 归藏编辑墨水 Deck (Editorial × E-Ink)】
- 【意图】叙事、观点、分享、个人风格表达。墨纸印刷感, 不要科技感。Inspired by op7418/guizang-ppt-skill Style A。
- 【调色板 — 5 选 1, 严禁改 hex、严禁混用】
- 🖋 **墨水经典 Monocle** — ink `#0a0a0b`, paper `#f1efea`, paper-tint `#e8e5de`, ink-tint `#18181a`. 默认 / 通用商业 / 科技。
- 🌊 **靛蓝瓷 Indigo Porcelain** — ink `#0a1f3d`, paper `#f1f3f5`, paper-tint `#e4e8ec`, ink-tint `#152a4a`. 科技 / 研究 / 数据。
Deck Guizang Editorial by the numbers
- 1,724 all-time installs (skills.sh)
- +124 installs in the week ending Jul 28, 2026 (Skillselion tracking)
- Ranked #194 of 1,896 Design & UI/UX skills by installs in the Skillselion catalog
- Security screen: LOW risk (skills.sh audit)
- Data as of Jul 28, 2026 (Skillselion catalog sync)
deck-guizang-editorial capabilities & compatibility
- Capabilities
- 【模板: 归藏编辑墨水 deck (editorial × e ink)】 · 【意图】叙事、观点、分享、个人风格表达。墨纸印刷感, 不要科技感。inspired by op7 · 【调色板 — 5 选 1, 严禁改 hex、严禁混用】 · 🖋 **墨水经典 monocle** — ink `#0a0a0b`, paper `#f1e · 🌊 **靛蓝瓷 indigo porcelain** — ink `#0a1f3d`, pap
- Use cases
- orchestration
What deck-guizang-editorial says it does
【意图】叙事、观点、分享、个人风格表达。墨纸印刷感, 不要科技感。Inspired by op7418/guizang-ppt-skill Style A。
- 🖋 **墨水经典 Monocle** — ink `#0a0a0b`, paper `#f1efea`, paper-tint `#e8e5de`, ink-tint `#18181a`. 默认 / 通用商业 / 科技。
- 🌊 **靛蓝瓷 Indigo Porcelain** — ink `#0a1f3d`, paper `#f1f3f5`, paper-tint `#e4e8ec`, ink-tint `#152a4a`. 科技 / 研究 / 数据。
npx skills add https://github.com/nexu-io/open-design --skill deck-guizang-editorialAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 1.7k |
|---|---|
| repo stars | ★ 82k |
| Security audit | 3 / 3 scanners passed |
| Last updated | July 28, 2026 |
| Repository | nexu-io/open-design ↗ |
What it does
Editorial magazine meets e-ink: 10 layouts and 5 palettes (Ink, Indigo Porcelain, Forest Ink, Kraft Paper, Dune).
Who is it for?
Developers working on design & ui/ux during build tasks.
Skip if: Tasks outside Design & UI/UX scope described in SKILL.md.
When should I use this skill?
Editorial magazine meets e-ink: 10 layouts and 5 palettes (Ink, Indigo Porcelain, Forest Ink, Kraft Paper, Dune).
What you get
Completed design & ui/ux workflow aligned with SKILL.md steps.
- 16:9 editorial e-ink magazine slide deck in markdown
- palette-styled narrative page sequence
By the numbers
- Provides 10 fixed editorial layouts for 16:9 slide decks
- Includes 5 signature color palettes: Ink, Indigo Porcelain, Forest Ink, Kraft Paper, Dune
- Featured count of 49 in the nexu-io/open-design catalog
Files
【模板: 归藏编辑墨水 Deck (Editorial × E-Ink)】 【意图】叙事、观点、分享、个人风格表达。墨纸印刷感, 不要科技感。Inspired by op7418/guizang-ppt-skill Style A。
【调色板 — 5 选 1, 严禁改 hex、严禁混用】
- 🖋 墨水经典 Monocle — ink
#0a0a0b, paper#f1efea, paper-tint#e8e5de, ink-tint#18181a. 默认 / 通用商业 / 科技。 - 🌊 靛蓝瓷 Indigo Porcelain — ink
#0a1f3d, paper#f1f3f5, paper-tint#e4e8ec, ink-tint#152a4a. 科技 / 研究 / 数据。 - 🌿 森林墨 Forest Ink — ink
#1a2e1f, paper#f5f1e8, paper-tint#ece7da, ink-tint#253d2c. 自然 / 可持续 / 文化。 - 🍂 牛皮纸 Kraft Paper — ink
#2a1e13, paper#eedfc7, paper-tint#e0d0b6, ink-tint#3a2a1d. 怀旧 / 人文 / 文学。 - 🌙 沙丘 Dune — ink
#1f1a14, paper#f0e6d2, paper-tint#e3d7bf, ink-tint#2d2620. 艺术 / 设计 / 时尚。
【布局 — 10 个磁带式版式池, 可复用; 数量由【用户内容】决定, 完整覆盖每个要点; 短内容 6-12 张起步, 长内容应更多 (同一版式可在不同章节重复使用)】
- L01 Hero Cover — 居中大字 hero typography + kicker + subtitle + lead paragraph + 底部元数据 row。
- L02 Act Divider — kicker + 8.5-10vw 巨大 headline + 一句引言; 章节切换可反色 (ink ↔ paper)。
- L03 Big Numbers Grid — 3×2 数据卡 (label / 大数字 / 注释)。
- L04 Quote + Image — 左 kicker + headline + body + callout; 右 16:10 图 (基线对齐 baseline 不是 top)。
- L05 Image Grid — 3×2 或 3×1 等高图网格 (26vh 或 22vh); 严格统一高度。
- L06 Pipeline / Flow — 横向编号步骤组, 每步: №X + 标题 + 描述; 支持键盘逐步推进。
- L07 Hero Question — 7vw 全屏单一问句, 按语义断行, 周围极简。
- L08 Big Quote — 5.8vw 巨大衬线引文 + 英文翻译 + 署名 + 日期。
- L09 Before / After — 1:1 split; 左列 opacity .55 (旧/before); 右列 full brightness (新/after)。
- L10 Mixed Media — 8:4 比例; 左大段文字 (kicker / headline / body / callout) + 右 3:4 竖图作辅助。
【设计细节】
- 严禁: 渐变 / drop-shadow / 圆角 / 圆形装饰 / blur / SVG 图标库 / emoji 装饰。
- 字体: Display 用
Playfair Display(英) /Noto Serif SC(中); Body 用Inter/Noto Sans SC; 编号 / 数字偶尔可用 italic 衬线。 - 杂志感细节: kicker 用 11px uppercase letterspacing 0.12em; folio 右下角
01 / 12; 顶部细 hairline rule + 期刊 logo / topic。 - 不许: 数据捏造、Lorem ipsum、占位图片 URL。所有图请用纯 CSS / SVG 内联描绘 (色块 + 简笔)。
- 键盘 ← / → 切换; hash 同步; 单文件 HTML。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>贵赞编辑墨水 · 章节封页</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,700;1,400&family=Inter:wght@400;500;600&family=Noto+Serif+SC:wght@400;500;700&family=Noto+Sans+SC:wght@400;500&display=swap" rel="stylesheet" />
<style>
body { font-family: 'Inter','Noto Sans SC',system-ui,sans-serif; background:#0a0a0b; margin:0; }
.deck { display:grid; gap:24px; padding:24px; }
.slide { width:100%; aspect-ratio:16/9; max-width:1280px; margin:0 auto; position:relative; overflow:hidden; }
.paper { background:#f1efea; color:#0a0a0b; }
.ink { background:#0a0a0b; color:#f1efea; }
.display { font-family:'Playfair Display','Noto Serif SC',serif; }
.body-serif { font-family:'Playfair Display','Noto Serif SC',serif; font-style:italic; }
.kicker { font-size:11px; letter-spacing:0.12em; text-transform:uppercase; font-weight:500; }
.hairline { border:0; border-top:1px solid currentColor; opacity:0.3; }
.folio { font-feature-settings:'tnum'; font-variant-numeric:tabular-nums; }
</style>
</head>
<body>
<div class="deck">
<!-- L02 Act Divider · ink reverse -->
<section class="slide ink">
<div class="absolute inset-0 p-12 flex flex-col justify-between">
<header class="flex items-baseline justify-between kicker opacity-70">
<span>OPEN DESIGN — Issue №26</span>
<span>Act II</span>
<span class="folio">04 / 12</span>
</header>
<div>
<div class="kicker opacity-80">第二章</div>
<h1 class="display mt-4 leading-[0.95]" style="font-size:clamp(64px,9vw,160px); font-weight:500;">
为什么<br/>
<span class="body-serif">写作者</span>该写 HTML<br/>
而不是 Markdown。
</h1>
</div>
<footer class="flex items-baseline justify-between kicker opacity-60">
<span>BY Open Design · 2026 SPRING</span>
<span class="body-serif normal-case tracking-normal">A magazine for editorial agents.</span>
</footer>
</div>
</section>
<!-- L03 Big Numbers Grid · paper -->
<section class="slide paper">
<div class="absolute inset-0 p-12 flex flex-col justify-between">
<header class="flex items-baseline justify-between kicker" style="color:#3a382f">
<span>OPEN DESIGN — Issue №26</span>
<span>Numbers</span>
<span class="folio">05 / 12</span>
</header>
<div>
<div class="kicker" style="color:#6b665b">By the numbers</div>
<h2 class="display mt-2 leading-[1.0]" style="font-size:clamp(36px,5vw,72px); font-weight:500;">
四个数字, <span class="body-serif">一条线</span> —— HTML 已经赢了。
</h2>
</div>
<div class="grid grid-cols-4 gap-8 mt-4">
<article class="border-t pt-4" style="border-color:#0a0a0b">
<div class="kicker" style="color:#6b665b">现有模板</div>
<div class="display mt-2" style="font-size:84px; font-weight:500; line-height:1;">75</div>
<p class="mt-3 text-[13px] leading-snug" style="color:#3a382f"><span class="body-serif">+16</span> in this release; cover slides, docs, frames.</p>
</article>
<article class="border-t pt-4" style="border-color:#0a0a0b">
<div class="kicker" style="color:#6b665b">本地 Agent</div>
<div class="display mt-2" style="font-size:84px; font-weight:500; line-height:1;">17</div>
<p class="mt-3 text-[13px] leading-snug" style="color:#3a382f">Claude · Codex · Cursor · Gemini · Copilot, all <span class="body-serif">stdin</span>.</p>
</article>
<article class="border-t pt-4" style="border-color:#0a0a0b">
<div class="kicker" style="color:#6b665b">平均生成</div>
<div class="display mt-2" style="font-size:84px; font-weight:500; line-height:1;">80<span class="body-serif text-[40px]">s</span></div>
<p class="mt-3 text-[13px] leading-snug" style="color:#3a382f">一份杂志风 PPT, <span class="body-serif">31KB</span> 自包含 HTML.</p>
</article>
<article class="border-t pt-4" style="border-color:#0a0a0b">
<div class="kicker" style="color:#6b665b">API Keys</div>
<div class="display mt-2" style="font-size:84px; font-weight:500; line-height:1;">0</div>
<p class="mt-3 text-[13px] leading-snug" style="color:#3a382f">复用你 <span class="body-serif">已经登录</span>的 CLI session.</p>
</article>
</div>
<footer class="flex items-baseline justify-between kicker opacity-70" style="color:#3a382f">
<span>Source: HTML-Anything internal · 2026-05</span>
<span class="body-serif normal-case tracking-normal">Set in Playfair & Inter.</span>
</footer>
</div>
</section>
</div>
</body>
</html>
关于「HTML 取代 Markdown」
墨水经典调色板, 双页预览: L02 章节封页 + L03 Big Numbers
主题
Claude Code 团队全面转向 HTML — 我们为什么也该跟上。
关键数据
- 75: HTML Anything 现有模板数
- 17: 已接入的本地 AI agent
- 80s: 平均一次"杂志风网页 PPT"生成耗时
- 0: 用户需要的 API key 数量
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.698k164k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.486k29.4k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst382k15.8k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k470
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.284k66.9k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.282k109kHow it compares
Choose deck-guizang-editorial when you want fixed editorial e-ink magazine aesthetics from markdown; pick general slide or frontend-design skills when you need custom interactive layouts or component-level UI work.
FAQ
What does deck-guizang-editorial do?
Editorial magazine meets e-ink: 10 layouts and 5 palettes (Ink, Indigo Porcelain, Forest Ink, Kraft Paper, Dune).
When should I use deck-guizang-editorial?
During build frontend work for design & ui/ux.
Is deck-guizang-editorial safe to install?
Review the Security Audits panel on this listing before production use.