mcpField
W
web-prototype-taste-editorial

web-prototype-taste-editorial

github.com/nexu-ioDesign & UI104.6k169 installsUpdated today
Repository

About web-prototype-taste-editorial

A design skill for building single-page web prototypes with an editorial, minimalist look. It provides concrete visual rules and required components for marketing and documentation-style pages.

Key features

  1. 01Warm off-white palette and serif typography
  2. 02Hairline dividers and restrained shadows
  3. 03Asymmetric hero and uneven bento grid
  4. 04Contrast block, CTA band, and metadata footer
  5. 05Subtle scroll reveals and card hover motion

Use cases

  1. 01Creating a premium SaaS marketing page
  2. 02Prototyping a documentation or knowledge product site

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/nexu-io/open-design --skill web-prototype-taste-editorial

After installing, type/web-prototype-taste-editorialin Claude Code to confirm it loaded.

Bundled filesexample.html

Details

From the project README

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

Comments

Markdown supported