Skip to content
Get packs

Magazine Article Layout

Turns Markdown or notes into a polished long-form magazine-style HTML essay.

Source Download skill
Repository
nexu-io/open-design
Stars
105,448
Licence
Apache-2.0
Files
3 files

What it does

Once installed, when you ask the agent to turn your Markdown or notes into an article, it lays them out as a single-column, magazine-style web page with a large headline, serif section headings, styled quotes, code blocks and an ending call-to-action card. It follows a visual template inspired by a Chinese-language HTML layout style, so the result looks like a finished long-form essay rather than plain text. The skill is a layout recipe described in SKILL.md, plus an example page.

Great for

  • Bloggers or newsletter writers who want a polished HTML essay from rough notes
  • Marketers producing long-form content pages
  • Students or writers who want a readable, styled version of a Markdown draft

Skip it if

  • Projects needing a specific brand design system, since the template defines its own look and design_system is not required
  • Situations where you need plain, unstyled output for a CMS that strips HTML or CSS

Try asking

  • “Use the Magazine Article template to turn my meeting notes into a long-form HTML essay.”
  • “Turn this Markdown draft into a magazine-style article page with a headline and author line.”
  • “Make my newsletter post into a polished HTML essay with serif headings and a share card at the end.”
Step-by-step guide: how to use Magazine Article LayoutInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 3 original files, the Apache-2.0 licence and an attribution note.

    article-magazine.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip article-magazine.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip article-magazine.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Give the agent real content and data; the template asks it to avoid lorem ipsum and placeholder images, so supply those details yourself.
  • Specify a subtitle, author and date if you want the hero metadata filled in.
  • Review the generated HTML before publishing, especially links and any quoted material from sources.

What's inside

  • example.html
  • open-design.json
  • SKILL.md

Redistributed unmodified from nexu-io/open-design under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.