Skip to content
Get packs

Editorial Web Prototype

Generates magazine-style, minimalist web page prototypes with serif headings and warm monochrome styling.

Source Download skill
Repository
nexu-io/html-anything
Stars
9,376
Licence
Apache-2.0
Files
2 files

What it does

This skill is a style template for an AI agent that builds web page mockups. Once installed, when asked for a prototype, the agent follows an editorial look: a warm single-color background, serif display headings, a clean sans-serif body font, small monospace labels, thin 1px hairline borders, soft chips, generous white space and subtle motion. It is a design brief rather than a program; the example file shows the result.

Great for

  • Designers who want a quick magazine-style landing page or product mockup
  • Developers prototyping a minimalist editorial layout before building it for real
  • Anyone wanting a consistent, elegant visual direction for a concept page

Skip it if

  • Complex web apps needing logic, data handling or accessibility-tested production code, since the skill only describes styling and layout
  • Brands with a required visual identity, because the fixed palette and fonts will not match their guidelines

Try asking

  • “Make a 1440px desktop prototype of a magazine-style homepage for a coffee brand”
  • “Build an editorial-style landing page for a book launch with serif headlines”
  • “Create a minimalist portfolio page with warm neutral colours and hairline dividers”
Step-by-step guide: how to use Editorial Web PrototypeInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

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

    web-proto-editorial.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip web-proto-editorial.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip web-proto-editorial.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

  • Name the page purpose and target screen size (the skill suggests 1440px desktop) for more focused output.
  • Ask for specific sections, such as hero, feature list or footer, so the whitespace and hierarchy are applied where you need them.
  • Review the output for font availability and contrast, since the skill names font styles but does not bundle fonts.

What's inside

  • example.html
  • SKILL.md

Redistributed unmodified from nexu-io/html-anything 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.