article-magazine
nexu-io/open-design
Transform Markdown into polished long-form HTML essays with magazine-style layout.
What is article-magazine?
A template for converting Markdown notes or articles into professionally formatted HTML essays inspired by Huashu/huashu-md-html design. Use this when you need to publish blog posts, newsletters, or long-form content with a clean, centered single-column layout and typographic polish.
- Converts Markdown to styled HTML with hero section (title, subtitle, author, read time, date)
- Single-column centered layout (max ~700px width) optimized for readability
- Serif typography for headings with visual contrast against body text
- Styled blockquotes with left accent border and italics
- Code blocks with rounded corners, dark background, and language labels
- Custom bullet points for lists and ornamental section dividers
How to install article-magazine
npx skills add https://github.com/nexu-io/open-design --skill article-magazineHow to use article-magazine
- 1.Install the skill using: npx skills add https://github.com/nexu-io/open-design --skill article-magazine
- 2.Prepare your content in Markdown format with title, subtitle, author, and body text
- 3.Use the template prompt to convert your Markdown into the magazine article HTML layout
- 4.Preview the generated HTML in your browser to verify styling and formatting
- 5.Customize colors, fonts, or spacing as needed for your brand
Use cases
- Publishing blog posts or essays with professional typography
- Creating newsletter content with consistent visual branding
- Converting personal notes into polished long-form articles
- Generating magazine-style layouts for content marketing
- Building portfolio pieces or thought leadership articles
- Content creators and bloggers
- Marketing and communications teams
- Newsletter publishers
- Technical writers
- Anyone publishing long-form web content
article-magazine FAQ
The template supports standard Markdown: headings (H2/H3), paragraphs, blockquotes, code blocks with language tags, lists, and horizontal rules. These are converted to styled HTML with the magazine layout.
Yes. The template uses CSS classes and variables that can be modified. The design uses serif fonts for headings and neutral colors (text-neutral-700 with dark mode support).
The template is designed for desktop/A4 viewing with a centered single-column layout. Responsiveness depends on your implementation, but the core design targets longer-form reading experiences.
The hero section supports title, subtitle, author name, read time estimate, and publication date. These appear below the main heading.
Yes, you can include images in your Markdown content. The template will style them within the single-column layout, though specific image styling details depend on your CSS implementation.
Full instructions (SKILL.md)
Source of truth, from nexu-io/open-design.
name: article-magazine zh_name: "杂志文章" en_name: "Magazine Article" emoji: "📖" description: "Huashu / huashu-md-html-inspired magazine article layout for turning Markdown or notes into a polished long-form HTML essay." zh_description: "Huashu / huashu-md-html 风格杂志文章版式, 将 Markdown 或笔记转成精排长文 HTML。" en_description: "Huashu / huashu-md-html-inspired magazine article layout for turning Markdown or notes into a polished long-form HTML essay." category: article scenario: marketing aspect_hint: "A4 / 长页面" featured: 11 tags: ["blog", "essay", "newsletter", "公众号", "博客", "文章"] example_id: sample-article-trq212-html example_name: "杂志文章 · HTML 取代 Markdown" example_format: markdown example_tagline: "灵感来自 @trq212 的推文" example_desc: "围绕「AI 时代 HTML > Markdown」的延伸评论, 含原推附注与可点击链接" example_source_url: "https://x.com/trq212/status/2052809885763747935" example_source_label: "@trq212 / x.com" od: mode: prototype surface: web platform: desktop scenario: marketing upstream: "https://github.com/nexu-io/html-anything" preview: type: html entry: index.html reload: debounce-100 design_system: requires: false example_prompt: "Use the Magazine Article template to turn my content into a Huashu / huashu-md-html-inspired long-form HTML essay. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images." example_prompt_i18n: zh-CN: "用「杂志文章」模板把我的内容做成一份「Huashu / huashu-md-html-inspired magazine article layout for turning Markdown or notes into a polished long-form HTML essay」。保持模板的视觉签名，使用真实内容和数据，避免 lorem ipsum 和占位图片。"
【模板: 杂志文章】
- 顶部 hero: 大标题 (text-5xl/6xl) + 可选副标题 + 作者 / 阅读时间 / 日期元数据。
- 正文: 单栏, 最大宽度约 700px, 居中。段落
text-lg leading-relaxed text-neutral-700 dark:text-neutral-300。 - H2 / H3 标题用 serif 字体, 让正文与标题有视觉对比。
- 引用块使用左侧粗 accent 色边线 + 斜体。
- 代码块: 圆角 + 深色背景 + 浅色文字, 显示语言标签。
- 列表项使用自定义 bullet（小方块 / accent 圆点）。
- 章节之间用
<hr>分隔, 但样式做成中央居中的小 ornament。 - 文末加一个简单的 "如果觉得有用，欢迎转发" 行动卡片。
Related skills
More from nexu-io/open-design and the wider catalog.
artifacts-builder
Create elaborate multi-component HTML artifacts with React, Tailwind CSS, and shadcn/ui for claude.ai
brainstorming
Transform rough ideas into fully-formed designs through structured questioning and alternative exploration.
brand-guidelines
Apply Anthropic's official brand colors and typography for consistent visual identity.
brandkit
Premium brand-kit image generation for logo systems, identity decks, and visual-world presentations.
canvas-design
Create beautiful visual art in PNG and PDF using design principles for posters and illustrations.
card-twitter
16:9 dark quote card template for Twitter posts with grid texture and gradient backgrounds.