Skip to content

Editorial Minimalist Web Prototype

Builds single-page web prototypes in a warm, editorial minimalist style with strict design rules.

Stars
105,448
Licence
Apache-2.0
Files
2 files

What it does

When installed, the agent follows a fixed visual style for web page prototypes: warm off-white backgrounds, dark grey text, thin 1px hairline borders, a serif headline font paired with a clean sans-serif body font, soft pastel tags, and lots of empty space. It also tells the agent what to avoid, such as generic fonts, gradients, heavy shadows, and placeholder names. It is a set of design rules plus an example page, not a tool that changes anything outside the conversation.

Great for

  • Designers who want a Notion- or Linear-style marketing or documentation page as a starting point
  • Developers building a quick prototype of a SaaS landing page that should feel premium and clean
  • Teams that want a consistent editorial look across several prototypes

Skip it if

  • Projects that need a specific existing brand look, since the rules force a fixed palette and fonts that may conflict with it
  • Production sites needing accessibility review, because the low-contrast secondary text and motion choices are not checked against accessibility standards in the files

Try asking

  • “Create a single-page prototype for a knowledge base product in an editorial minimalist style”
  • “Build a clean premium SaaS landing page with an asymmetric hero and bento feature grid”
  • “Make a documentation-style homepage with monospace footer metadata and subtle scroll animations”
Step-by-step guide: how to use Editorial Minimalist 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-prototype-taste-editorial.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

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

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip web-prototype-taste-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 style explicitly in your request (for example, 'clean editorial') so the agent triggers this skill
  • If you have brand colours or fonts, state them up front, since the skill's hard rules will otherwise override them
  • Review the output against the pre-flight checklist, and check text contrast yourself before publishing

What's inside

  • example.html
  • 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.