跳到正文
cccskills
免费在 GitHub 公开

deck-guizang-editorial

Build a magazine-style presentation with a paper-and-ink look. Ten reusable layouts cover narratives, data, quotes, and comparisons, while five fixed palettes provide consistent styling in a single HTML file with keyboard navigation.

中文简介正在准备中。当前显示英语简介。

原文查看原文说明

电子杂志 × 电子墨水; 10 个版面 + 5 套调色板 (墨水/靛蓝瓷/森林墨/牛皮纸/沙丘)

查看安装方法

适用场景

  • Sharing a viewpoint through a magazine-style presentation
  • Highlighting figures and quotes
  • Explaining steps or before-and-after comparisons
  • Presenting a personal style with a paper-and-ink look

包含的文件(3)

  • SKILL.md3.5 KB
  • example.html4.8 KB
  • example.md368 B

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

【模板: 贵赞编辑墨水 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。

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

Format long articles for blogs and newsletters with a magazine-style layout inspired by Substack and Medium. A centered text column, contrasting headings, styled quotations, and labeled code blocks give readers clear visual cues throughout the page.

中文简介正在准备中。当前显示英语简介。

  • Formatting a long blog article
  • Preparing an essay or newsletter for publication
  • Laying out articles with quotations and code examples
nexu-io/html-anything92072026年10月13日 更新

Turn a concept’s origins into a magazine-style visual story. Six distinct layouts combine diagrams, annotations, and typography to trace a concrete problem through failed attempts and a turning point, revealing the concept’s name at the end.

中文简介正在准备中。当前显示英语简介。

  • Illustrating how a concept emerged
  • Creating visual learning materials about failed attempts
  • Presenting a concept’s history as a magazine feature
nexu-io/html-anything92072026年10月13日 更新

blog-post

免费

Create magazine-style pages for long blog posts, essays, and case studies. The layout combines readable single-column text with a prominent title, captioned figures, highlighted quotations, author details, and related article cards.

中文简介正在准备中。当前显示英语简介。

  • Designing a long-form blog page
  • Presenting an essay with magazine-style typography
  • Laying out a case study with figures and quotations
nexu-io/html-anything92072026年10月13日 更新

Create a landscape card for an X post, featuring a short quote, insight, or data point. The layout combines prominent text with attribution, a handle, a category label, and a brand watermark.

中文简介正在准备中。当前显示英语简介。

  • Sharing a quote with author attribution on X
  • Highlighting a data point in a social post
  • Creating branded cards for short insights
nexu-io/html-anything92072026年10月13日 更新

Create a series of Xiaohongshu-style knowledge cards with a cover, focused content cards, and a closing summary. Soft colors, large text, and spacious layouts make the cards suitable for mobile reading and screenshots for social posts.

中文简介正在准备中。当前显示英语简介。

  • Turn practical tips into a series of social media cards
  • Explain one key idea per card for mobile readers
  • Prepare card layouts for social post screenshots
nexu-io/html-anything92072026年10月13日 更新

Turn supplied competitor research into a product strategy report. Compare positioning, features, pricing, and user feedback, then identify opportunities and propose actions for the next 30, 90, and 180 days, while marking missing evidence.

中文简介正在准备中。当前显示英语简介。

  • Comparing competitors to guide product decisions
  • Reviewing pricing and plan differences
  • Turning research notes into a strategy report
nexu-io/html-anything92072026年10月13日 更新

查看 nexu-io 的全部技能

报告此技能的问题