What is the main purpose of this skill?

The Web Prototype Editorial skill provides guidelines for creating minimalist web prototypes, focusing on clean design and usability.

Who can benefit from using this skill?

Designers and developers looking to create editorial-style web prototypes for SaaS products, documentation, or knowledge-sharing platforms will find this skill beneficial.

Are there any specific design rules to follow?

Yes, the skill outlines strict design rules regarding colors, typography, layout, and motion to ensure a cohesive and premium look.

Can I customize the design beyond the provided guidelines?

While customization is possible, the skill is designed to maintain a specific aesthetic, so significant deviations may compromise the intended editorial style.

Is there an example provided for reference?

Yes, the skill includes an example HTML file that demonstrates a fully realized template based on the outlined guidelines.

Web Prototype Editorial

Name: Web Prototype Editorial
Availability: InStock
Author: nexu-io

Free

Create clean, minimalist web prototypes effortlessly.

by nexu-io84.9k stars on nexu-io/open-design

3 views

Updated Aug 10, 2026

Get this skill

Free · Opens the source repo

What Web Prototype Editorial does

The Web Prototype Editorial skill provides a structured approach to building a single-page web prototype that embodies editorial minimalism. Designed for developers and designers, this skill is particularly useful when tasked with creating clean, premium-looking sites for SaaS products, documentation, or knowledge-sharing platforms. The skill emphasizes a warm monochrome color palette, specific typography pairings, and meticulous spacing, ensuring that the final product aligns with modern design aesthetics.

The skill is rooted in strict design guidelines that dictate everything from color choices to typographic styles. For instance, it specifies the use of warm off-white backgrounds and off-black text to create a soft visual experience. Typography is carefully curated, recommending specific serif and grotesque fonts to ensure readability and visual appeal. The use of pastel colors for tags and badges is also a notable feature, enhancing the editorial feel without overwhelming the user.

In addition to aesthetic guidelines, the skill provides detailed layout instructions, such as the requirement for asymmetric hero sections and uneven feature grids. These elements not only contribute to a unique visual hierarchy but also help guide user interaction in a more engaging manner. The inclusion of subtle micro-motion effects adds a layer of sophistication, making the interface feel more dynamic without being distracting.

Overall, the Web Prototype Editorial skill is ideal for designers and developers looking to create visually appealing and user-friendly web prototypes that adhere to modern design principles. It streamlines the design process by providing clear guidelines, allowing users to focus on content and functionality rather than getting bogged down by design decisions.

When to use it

Use this skill when you need to create a minimalist, editorial-style web prototype for applications like SaaS marketing sites or documentation.

When not to use it

This skill may not be suitable for projects requiring vibrant colors, complex animations, or non-editorial design styles.

What you can build with it

Creating a SaaS Marketing Site

Utilize the skill to design a clean and professional marketing site for your SaaS product, ensuring it meets modern design standards.

Developing Documentation Pages

Use this skill to create visually appealing documentation pages that enhance user experience and readability.

Prototyping Knowledge Products

Leverage the guidelines to prototype educational or knowledge-sharing platforms that require a premium editorial feel.

How to install Web Prototype Editorial

View source

1. Install with the skills CLI

npx skills add nexu-io/open-design/web-prototype-taste-editorial --agent claude-code

2. Or install it manually

Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.

Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs

Inside SKILL.md

Written by nexu-io

Web Prototype — Editorial Minimalism

A single-page web prototype shaped like a Notion/Linear marketing site or premium documentation surface. Use when the brief asks for "clean", "editorial", "premium SaaS", "documentation", or "knowledge product".

Source

Distilled from Leonxlnx/taste-skill — skills/minimalist-skill/SKILL.md and the spatial-rhythm rules in skills/taste-skill/SKILL.md. See example.html in this directory for a fully-realized template.

Hard rules

Canvas: warm off-white (#FBFBFA or #F7F6F3), never pure white.
Foreground: off-black #111111, secondary text #787774. Never #000000.
Borders: 1px solid #EAEAEA only. No drop shadows above 0 1px 2px rgba(0,0,0,0.04).
Type pairing: display in editorial serif (Instrument Serif / Newsreader / Lyon), body in grotesque (Geist / Switzer / SF Pro), monospace for meta/keystrokes (Geist Mono / JetBrains Mono).
Display tracking: letter-spacing: -0.025em, line-height: 1.05.
Pastel chips only: muted backgrounds (#FDEBEC, #E1F3FE, #EDF3EC, #FBF3DB) for tags/badges. Never as section backgrounds.
Containers: border-radius: 8–12px max. No pill containers, no rounded-full on cards.
Section padding: py-24 minimum, py-32 for hero.

Banned

Inter, Roboto, Open Sans (use Geist / Switzer / SF Pro).
Generic Lucide thin-stroke icons (use Phosphor Bold or Radix).
Gradients, neon, glassmorphism beyond a subtle navbar blur.
Drop shadows above shadow-sm. No glows.
Generic placeholder names (John Doe / Acme / Lorem). Use specific contextual content.
AI copy clichés: "Elevate", "Seamless", "Unleash", "Next-Gen".
Pure black #000000.
Centered hero H1 over a dark image.

Required components

Sticky pill navbar (translucent off-white, backdrop-blur-md, hairline border).
Asymmetric hero: serif display left-aligned, eyebrow tag above, lede paragraph at max-w-[52ch].
Bento feature grid with uneven row heights and visible 1px dividers — never 3 equal cards.
A "what it isn't" or contrast block separated by border-t only, no card.
Pricing or signup band with one accent CTA.
Footer: monospace metadata, single hairline above.

Motion (subtle only)

Scroll entry: translateY(12px) → 0 + opacity 0 → 1 over 600ms cubic-bezier(0.16, 1, 0.3, 1). IntersectionObserver only.
Hover lift on cards: box-shadow from 0 0 0 to 0 2px 8px rgba(0,0,0,0.04) over 200ms.
Stagger lists by --index * 80ms.
Animate only transform and opacity.

Pre-flight

Serif display + grotesque body pairing present
Canvas is warm off-white, foreground is off-black
All cards/dividers use 1px solid #EAEAEA
At least one asymmetric layout (split, eyebrow tag, uneven bento)
Pastel chips used only for tags, never as block backgrounds
Section padding ≥ py-24
No emojis, no banned fonts, no AI clichés

Frequently asked questions about Web Prototype Editorial

Similar skills

Penpot UI/UX Design

Create professional UI/UX designs in Penpot with ease.

UX Theming

Streamline your VS Code theming process with best practices.

Wireframe

Create low-fidelity UI wireframes in SVG format.

Waitlist Page

Create a clean, focused pre-launch landing page.

Hallmark

Design skill for creating unique, structured UIs.

UI Styling

Create beautiful, accessible user interfaces effortlessly.