mcpField
A
article-magazine

article-magazine

github.com/nexu-ioDesign & UI104.6k2.7k installsUpdated today
Repository

About article-magazine

A design skill for Agents creating magazine-style article pages, with guidance for editorial typography and styling for quotes, code, lists, and page endings.

Key features

  1. 01Article hero and author metadata
  2. 02Centered single-column body
  3. 03Serif section headings
  4. 04Quote and code block styling
  5. 05Custom list markers
  6. 06End-of-article sharing card

Use cases

  1. 01Creating articles with author and reading-time details
  2. 02Structuring long-form text into sections
  3. 03Presenting quotes, code, and lists in articles

Install

Copy the command and run it in a terminal.

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

After installing, type/article-magazinein Claude Code to confirm it loaded.

Bundled filesexample.htmlexample.md

Details

From the project README

【模板: 杂志文章】

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

Comments

Markdown supported