Agent skill · design visual · nexu-io
web-prototype-taste-editorial
Editorial-minimalist web prototype. Warm monochrome canvas, serif display + grotesque body, 1px hairline borders, muted pastel chips, generous macro-whitespace, ambient micro-motion. Distilled from Leonxlnx/taste-skill `minimalist-skill`.
Why this skill is useful
Provides specific design patterns and rules for creating an editorial-style web prototype that the AI wouldn't reliably generate on its own.
What it needs
About 2k tokens when loaded. Last updated 2026-08-07. 84,236 stars on the source repository.
What this skill does
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. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills nexu-io/web-prototype-taste-editorial