mcpField
A
article-magazine

article-magazine

github.com/nexu-io设计与 UI104.6k2.7k 次安装今天更新
代码仓库

关于 article-magazine

为 Agent 提供杂志文章页面的 HTML 设计规范,涵盖标题、正文排版与引用、代码和列表样式,适用于制作编辑风格文章页面。

主要功能

  1. 01文章标题与作者元数据
  2. 02居中单栏正文排版
  3. 03衬线章节标题
  4. 04引用块与代码块样式
  5. 05自定义列表符号
  6. 06文末转发行动卡片

适用场景

  1. 01制作带作者和阅读时间的文章页
  2. 02为长文设置章节与正文层级
  3. 03在文章中呈现引用、代码和列表

安装

复制下面的命令,在终端中运行。

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

安装后在 Claude Code 中输入/article-magazine确认已加载。

附带文件example.htmlexample.md

README 原文English

来自项目 README

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。
  • 文末加一个简单的 "如果觉得有用,欢迎转发" 行动卡片。

评论

支持 Markdown