首页 / 全部技能 / 设计 / magazine-poster
设计 · nexu-io/html-anything

magazine-poster

Sunday-paper 风格, 大字 serif headline + 双栏正文 + 编号 sections

L1 基础 · 登记来源即可V1 已固定Dual-pass Audit
Author nexu-ioGitHub nexu-io/html-anything ↗Stars 8827License Apache-2.0(仓库根 LICENSE 文件为 Apache License Version 2.0;package.json "license": "Apache-2.0";GitHub API spdx_id Apache-2.0)Commit 553ed98c28
管控等级描述 skill 的能力与建议配套的管控措施,不代表质量或安全认证,也不表示可用或不可用。是否使用由用户和管理者决定。不同 agent 宿主对权限的约束各不相同,请勿假定宿主一定会提供安全兜底。第三方 skill 版权归原作者,使用风险由使用者自行承担。

1实现原理 · 为什么它能做到

Newsprint editorial 版式:dateline 顶栏(publication / date / issue)→ 超大 serif 标题(含 strike-through 词 + 斜体 accent)→ 双栏正文 → 6 个编号 section(每段配 pull-quote)→ 底部 footer 署名/ornament。

next/src/lib/templates/skills/magazine-poster/SKILL.md
- Oversized serif headline (含 strike-through 词 + 斜体 accent)
示例把 dateline 落成 top-rule 两条(`01 · AI ENTHUSIAST` 与 `17 · APR · 2026`),是「报纸全版」的关键识别符。

纸感由暖灰 cream 底 + 黑字构成,示例色板 `--paper: #f3eee2` 落地。

next/src/lib/templates/skills/magazine-poster/SKILL.md
- 纸感: 暖灰 cream 背景 + 细 dot pattern, 黑字
正文另要求细 dot pattern;示例以 --rule/--tint 辅助色维持印刷质感。

字体指定 Playfair Display + IBM Plex Serif + JetBrains Mono。

next/src/lib/templates/skills/magazine-poster/SKILL.md
- 字体: Playfair Display + IBM Plex Serif + JetBrains Mono
示例实际只把 Playfair Display 用作 display 变量,正文衬线回退到 Iowan Old Style/Charter,等宽用 IBM Plex Mono——见确认表的差异项。

模板本体就是 prompt:SKILL.md 正文经 loader 读出后与共享前言、用户内容拼装,交给本机 agent CLI 执行。

next/src/app/api/convert/route.ts
prompt = assemblePrompt({ body: skill.body, content, format });
运行时不吃模板目录里的代码:/api/convert 只收 {agent, templateId, content},用 loadSkill(templateId) 取 SKILL.md 正文当 prompt 主体,再交给本机已登录的 agent CLI;HTML 由 stdout 流回前端。

skill 目录是纯文本资产:loader 读盘取 SKILL.md 正文,目录内无任何可执行代码被加载。

next/src/lib/templates/loader.ts
const raw = safeRead(path.join(dir, "SKILL.md"));
文件系统里的 skill 只是文本:loader 逐个目录读 SKILL.md,frontmatter 抽成 picker 元数据、正文作为 body 返回;本模板目录内没有任何模块被 import 或执行。

共享前言先于模板注入,把「模板只定义版面/风格/配色/字体/组件库,数量由用户内容决定」定为最高优先级。

next/src/lib/templates/shared.ts
【内容驱动数量 — 最高优先级, 覆盖模板里的任何数字】
共享前言在模板正文之前注入,规定「模板只定义版面/风格/配色/字体/组件库,数量由用户内容决定」——所以本模板里的版式清单是「可复用版式池」,不是页数/帧数上限。

共享前言先于模板注入,把「模板只定义版面/风格/配色/字体/组件库,数量由用户内容决定」定为最高优先级。

next/src/lib/templates/shared.ts
- **禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。不要把 HTML 写到任何 \`.html\` 文件里。前端直接捕获你的 stdout 文本, 文件落盘由前端负责。
前言明令禁用文件系统工具、要求纯 HTML 从回复正文流式输出,落盘由前端负责——skill 侧因此没有写盘行为。

skill 目录是纯文本资产:loader 读盘取 SKILL.md 正文,目录内无任何可执行代码被加载。

next/src/lib/templates/loader.ts
const exampleHtml = safeRead(path.join(dir, "example.html"));
目录里的 example.html 是随仓库分发的黄金样本,预览路由直接读盘返回(无构建、无编译),既是质量基线也是详情页素材。

2核心能力

01报纸风超大 serif 标题(删除线 + 斜体 accent)
02双栏正文网格
036 个编号 section(示例 cell-1..cell-6,各带 pull-quote)
04删除线修辞(strike-through 词)
05dateline 顶栏(刊名 + 日期)
06竖版长图海报(aspect_hint:竖版长图)

4管控建议与判定依据

建议配套管控措施
面向 Agent
可自动加载
面向管理者
登记来源与版本
判定依据(文件路径与关键语句摘要)
  • SKILL.md: 纯提示词指令与规则文本,无脚本执行与外部影响
审计说明: 🟢 绿色()。判级对象=skill 自身目录:目录内零 URL(example.html 也无任何 http(s) 端点)。目录内只有 SKILL.md、example.html,零脚本、零可执行代码、零网络端点、零凭证读取、零写盘指令——照 SKILL.md 执行的结果是宿主模型输出一段 HTML 文本,不含任何外发或落盘动作。宿主壳与产物使用侧行为不作为档位依据,只记入 verdict.risks:shared.ts 前言要求产物引 Tailwind CDN(https://cdn.tailwindcss.com) 与 Google Fonts、runtime 会 spawn 本机已登录的 agent CLI(envFor 透传 process.env)、预览 iframe 为 sandbox="allow-scripts allow-same-origin"。

5第二遍独立确认

  • [discrepancy] 规范↔示例:字体 — 正文指定「Playfair Display + IBM Plex Serif + JetBrains Mono」;示例 `--serif-body` 实为 `'Iowan Old Style', 'Charter', Georgia, serif`(无 IBM Plex Serif),等宽是 `'IBM Plex Mono'`(不是 JetBrains Mono),且全文件未引 Google Fonts——Playfair Display 在未装该字体的机器上会回退。
  • [ok] 规范↔示例:编号 section 数 — 正文要求 6 个编号 section,示例命中 cell-1..cell-6 与编号 01–06(「01 · SHIP FAST」等)。
  • [ok] pull-quote 与 dateline — 示例以 `<div class="quote">` 承载每段 pull-quote,以 `.top-rule`(`01 · AI ENTHUSIAST` / `17 · APR · 2026`)承载 dateline 的刊名与日期。
  • [ok] 删除线/斜体 accent — 示例 `h1.headline .strike { text-decoration: line-through; … }` 与 `h1.headline .accent { font-style: italic; … }` 落地正文的标题修辞要求。
  • [ok] 脚本/外链普查 — example.html 无 <script>、无 http(s) 命中——零外链零脚本,离线可开。
  • [ok] 目录资产面普查 — glob 全量:SKILL.md、example.html;无 scripts/、无 references/、无数据文件、无包管理器清单。
  • [ok] 可执行代码普查 — example.html 内 <script> 计数 = 0,fetch/XMLHttpRequest/WebSocket 命中 0;SKILL.md 全篇无脚本或可执行代码。
  • [ok] 外链端点普查 — 目录内(含 example.html)零 http(s) 命中,产物离线自持。

6结论

  • 报纸语汇齐备,观感即「印刷品」
  • 版式密度可控:双栏 grid + 6 编号 section
  • 零外链零脚本,产物离线自持
  • section 带 data-od-id,便于上游定位与编辑
  • 适合: 品牌宣言长图、社媒竖版海报、Newsletter/公众号的「报纸风」头图;需要强烈编辑设计(editorial)气质时最合适。
    不适合: 需要数据图表或交互的页面;需要严格字重/字体一致性的品牌稿(模板不加载字体);短文案场景(报纸风依赖足够正文量撑起双栏与 6 段)。
    Install Agent-Ready
    ① Verified Mirror 2026-09-15
    Option A · Direct DownloadDownload magazine-poster.tar.gz
    sha256: cccc07fdf20a7e6a…
    Option B · Copy Guide for Agent
    install.json
    agent 读 JSON 指南后会自动从本站下载安装,无需更多说明。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit 553ed98c28.