Article Magazine

Name: Article Magazine
Author: nexu-io

nexu-io/open-design

1.7k installs
82k repo stars
Updated July 28, 2026
nexu-io/open-design

article-magazine is an agent skill that huashu / huashu-md-html-inspired magazine article layout for turning markdown or notes into a polished long-form html essay.

About

article-magazine is an agent skill from nexu-io/open-design that huashu / huashu-md-html-inspired magazine article layout for turning markdown or notes into a polished long-form html essay. 【模板: 杂志文章】 - 顶部 hero: 大标题 (text-5xl/6xl) + 可选副标题 + 作者 / 阅读时间 / 日期元数据。 - 正文: 单栏, 最大宽度约 700px, 居中。段落 `text-lg leading-relaxed text-neutral-700 dark:text-neutral-300`。 - H2 / H3 标题用 serif 字体, 让正文与标题有视觉对比。 - 引用块使用左侧粗 accent 色边线 + 斜体。 - 代码块: 圆角 + 深色背景 + 浅色文字, 显示语言标签。 - 列表项使用自定义 bullet（小方块 / accent 圆点）。 - 章节之间用 `<hr>` 分隔, 但样式做成中央居中的小 ornament。 - 文末加一个简单的 Developers invoke article-magazine 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.

顶部 hero: 大标题 (text-5xl/6xl) + 可选副标题 + 作者 / 阅读时间 / 日期元数据。
正文: 单栏, 最大宽度约 700px, 居中。段落 `text-lg leading-relaxed text-neutral-700 dark:text-neutral-300`。
H2 / H3 标题用 serif 字体, 让正文与标题有视觉对比。
代码块: 圆角 + 深色背景 + 浅色文字, 显示语言标签。
列表项使用自定义 bullet（小方块 / accent 圆点）。

Article Magazine by the numbers

1,679 all-time installs (skills.sh)
+122 installs in the week ending Jul 28, 2026 (Skillselion tracking)
Ranked #206 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)

At a glance

article-magazine capabilities & compatibility

Capabilities: 顶部 hero: 大标题 (text 5xl/6xl) + 可选副标题 + 作者 / 阅读时间 · 正文: 单栏, 最大宽度约 700px, 居中。段落 `text lg leading rela · h2 / h3 标题用 serif 字体, 让正文与标题有视觉对比。 · 代码块: 圆角 + 深色背景 + 浅色文字, 显示语言标签。 · 列表项使用自定义 bullet（小方块 / accent 圆点）。
Use cases: orchestration

From the docs

What article-magazine says it does

- 顶部 hero: 大标题 (text-5xl/6xl) + 可选副标题 + 作者 / 阅读时间 / 日期元数据。

SKILL.md

- 正文: 单栏, 最大宽度约 700px, 居中。段落 `text-lg leading-relaxed text-neutral-700 dark:text-neutral-300`。

SKILL.md

npx skills add https://github.com/nexu-io/open-design --skill article-magazine

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/nexu-io/open-design/article-magazine.svg)](https://skillselion.com/skills/nexu-io/open-design/article-magazine)

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

Huashu / huashu-md-html-inspired magazine article layout for turning Markdown or notes into a polished long-form HTML essay.

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?

Huashu / huashu-md-html-inspired magazine article layout for turning Markdown or notes into a polished long-form HTML essay.

What you get

Completed design & ui/ux workflow aligned with SKILL.md steps.

Magazine-style HTML essay
Long-form publishable article page

By the numbers

Featured rank 11 in the nexu-io open-design catalog
Tags cover blog, essay, newsletter, and long-page publishing scenarios

Files

SKILL.mdMarkdownGitHub ↗

【模板: 杂志文章】

顶部 hero: 大标题 (text-5xl/6xl) + 可选副标题 + 作者 / 阅读时间 / 日期元数据。
正文: 单栏, 最大宽度约 700px, 居中。段落 text-lg leading-relaxed text-neutral-700 dark:text-neutral-300。
H2 / H3 标题用 serif 字体, 让正文与标题有视觉对比。
引用块使用左侧粗 accent 色边线 + 斜体。
代码块: 圆角 + 深色背景 + 浅色文字, 显示语言标签。
列表项使用自定义 bullet（小方块 / accent 圆点）。
章节之间用 <hr> 分隔, 但样式做成中央居中的小 ornament。
文末加一个简单的 "如果觉得有用，欢迎转发" 行动卡片。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>我读完 @trq212 那条推之后, 把所有 markdown 都换成了 HTML</title>
<script src="https://cdn.tailwindcss.com"></script>
<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=Inter:wght@300;400;500;600&family=Noto+Sans+SC:wght@300;400;500;600&family=Noto+Serif+SC:wght@500;700;900&display=swap" rel="stylesheet">
<style>
  :root { --ink:#1a1a1a; --paper:#fafaf7; --line:#e7e5e0; --mute:#6b6760; --accent:#b8553a; --twitter:#1d9bf0; }
  body { font-family:'Inter','Noto Sans SC',sans-serif; background:var(--paper); color:var(--ink); -webkit-font-smoothing:antialiased; }
  .serif { font-family:'Noto Serif SC',Georgia,serif; }
  .ornament { display:flex; align-items:center; justify-content:center; gap:14px; margin:48px 0; color:var(--mute); }
  .ornament::before, .ornament::after { content:""; flex:1; max-width:60px; height:1px; background:var(--line); }
  .article p { font-size:1.0625rem; line-height:1.8; color:#262421; margin:1.1em 0; max-width:65ch; }
  .article h2 { font-family:'Noto Serif SC',serif; font-size:1.875rem; font-weight:700; margin:2.4em 0 0.8em; letter-spacing:-0.01em; }
  .article blockquote { border-left:3px solid var(--accent); padding:0 0 0 20px; margin:1.6em 0; font-style:italic; color:var(--mute); font-family:'Noto Serif SC',serif; font-size:1.0625rem; line-height:1.7; }
  .article a { color:var(--accent); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
  .grain::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:0.4; background-image:radial-gradient(circle at 12% 18%, rgba(106,92,56,0.05), transparent 45%), radial-gradient(circle at 88% 72%, rgba(106,92,56,0.04), transparent 50%); }
</style>
</head>
<body class="grain">
<article class="article max-w-[720px] mx-auto px-6 pt-20 pb-32">

  <!-- Source banner — clearly attributes the inspiration -->
  <a href="https://x.com/trq212/status/2052809885763747935" target="_blank" rel="noopener" class="!no-underline group block mb-10 rounded-2xl border border-[var(--line)] bg-white/70 hover:bg-white transition-colors p-4 flex items-start gap-4">
    <div class="shrink-0 w-10 h-10 rounded-full bg-[var(--twitter)] grid place-items-center text-white">
      <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
    </div>
    <div class="min-w-0 flex-1">
      <div class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[var(--mute)] mb-1">灵感来自 / Source</div>
      <div class="text-[14px] font-medium text-[var(--ink)] leading-snug">@trq212 关于 "在 AI 时代, HTML 已经取代 markdown 成为最终形态" 的推文</div>
      <div class="text-[12px] text-[var(--mute)] mt-1 break-all group-hover:text-[var(--accent)] transition-colors">x.com/trq212/status/2052809885763747935  ↗</div>
    </div>
  </a>

  <div class="text-[11px] font-medium tracking-[0.22em] uppercase text-[var(--accent)] mb-5">Essay · 2026.05 · 评论 / 延伸</div>
  <h1 class="serif text-[3rem] leading-[1.08] font-black tracking-tight mb-5">
    我读完 <a href="https://x.com/trq212/status/2052809885763747935" target="_blank" rel="noopener" class="italic font-bold !no-underline" style="color:var(--accent)">@trq212</a> 那条推之后,<br/>
    把所有 markdown 都换成了 HTML
  </h1>
  <p class="text-[1.125rem] leading-relaxed text-[var(--mute)] font-light max-w-[60ch] mb-8">
    简而言之: 在 AI 写作 / 编辑器 / 代理时代, markdown 这个 "中间态" 已经撑不住了 —— HTML 才是面向读者的最终形态。
  </p>
  <div class="flex items-center gap-3 text-[12px] text-[var(--mute)] pb-12 border-b border-[var(--line)]">
    <div class="w-8 h-8 rounded-full bg-gradient-to-br from-[#c96442] to-[#e9b94a]"></div>
    <span class="font-medium text-[var(--ink)]">Tom Pan</span>
    <span>·</span><span>5 月 11 日</span>
    <span>·</span><span>4 分钟阅读</span>
  </div>

  <h2>让我点头的三个观察</h2>
  <p><span class="serif font-bold text-[1.5rem] float-left mr-2 leading-none mt-1.5" style="color:var(--accent)">第</span>一, 我们对 markdown 的爱, 主要是写起来爽。但读者从来没投过票。读者拿到的永远是某个 markdown 渲染器吐出来的结果 —— 而那个渲染器属于平台, 不属于你。</p>
  <p>第二, 截图发推这件事, markdown 输了。随便挑一段 markdown, 截图发出去都是被 GitHub 默认主题压扁的灰白方块。HTML 可以是壁纸级图片。</p>
  <p>第三, 公众号 / 知乎 / 小红书 / Notion / 飞书 —— 每一家解释 markdown 的方式都不一样。你写一份, 5 个平台得调 5 次。<strong class="font-semibold text-[var(--ink)]">HTML + 内联 CSS, 一次粘贴, 任何平台都还原</strong>。</p>

  <h2>但 HTML 太啰嗦, 这是真的</h2>
  <p><code class="px-1.5 py-0.5 rounded bg-[#f0ece5] text-[0.92em] font-mono text-[#7a3d27]">&lt;div class="..."&gt;</code> 写多了想吐, 这是事实。之前没人愿意花成本写 HTML, 因为同样的内容, markdown 30 秒, HTML 30 分钟。</p>
  <blockquote>变量是 —— AI 把这 30 分钟降到 30 秒了。<br/>你写 markdown, AI 把它升级成可交付的 HTML。你管最终形态, AI 管啰嗦细节。</blockquote>

  <h2>我们顺手做了一个工具</h2>
  <p>灵感来自原推, 加上 Claude Code 团队的实践, 我们做了 <a href="#">HTML Anything</a>。左侧贴 markdown / CSV / JSON, 选一个模板 (杂志、PPT、海报、小红书、数据报告 …), 按 ⌘+Enter —— 本地的 Claude / Cursor / Codex 在你<strong class="font-semibold text-[var(--ink)]">已经登录</strong>的 session 里跑, 几秒后右侧就是一份可以直接复制到公众号 / 推特 / 知乎的 HTML。</p>
  <p>不需要 API Key, 不浪费 token (二次编辑只跑 diff)。</p>

  <h2>结论</h2>
  <p>如果你也觉得 "markdown → 编辑器手动重排" 这件事浪费了你的人生 —— 看一眼原推, 看一眼 Claude Code 团队的迁移, 然后试试任何一个能把 markdown 自动升格为 HTML 的工具。</p>

  <div class="ornament"><span class="serif italic">·  ·  ·</span></div>

  <div class="rounded-2xl border border-[var(--line)] bg-white/60 p-6 mt-12 flex items-start gap-4">
    <div class="text-2xl shrink-0">📩</div>
    <div>
      <div class="font-semibold text-[var(--ink)] mb-1">题图致敬: 推文中那个 "everything is HTML" 的瞬间。</div>
      <div class="text-[13px] text-[var(--mute)]">阅读原推 → <a href="https://x.com/trq212/status/2052809885763747935" target="_blank" rel="noopener" style="color:var(--accent)">x.com/trq212/status/2052809885763747935</a></div>
    </div>
  </div>
</article>
</body>
</html>