关于 article-magazine
为 Agent 提供杂志文章页面的 HTML 设计规范,涵盖标题、正文排版与引用、代码和列表样式,适用于制作编辑风格文章页面。
主要功能
- 01文章标题与作者元数据
- 02居中单栏正文排版
- 03衬线章节标题
- 04引用块与代码块样式
- 05自定义列表符号
- 06文末转发行动卡片
适用场景
- 01制作带作者和阅读时间的文章页
- 02为长文设置章节与正文层级
- 03在文章中呈现引用、代码和列表
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ nexu-io/ open-design --skill article-magazine安装后在 Claude Code 中输入/article-magazine确认已加载。
附带文件example.htmlexample.md
README 原文English
来自项目 READMEREADME 暂无中文译文,以下为英文原文;中文介绍见上方。
【模板: 杂志文章】
- 顶部 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