Mmcp.market

web-prototype-taste-editorial skill

by nexu-io·nexu-io/open-design·98k stars·Apache-2.0

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`.

A100/100content scan

Is the web-prototype-taste-editorial skill safe?

Clean: nothing in its files matched our rules. We read 2 files in the folder on 2026-09-28.

No findings.

Install the web-prototype-taste-editorial skill

A skill is a folder. Copy it into your agent's skills folder and the agent loads it when the task matches its description. 

git clone --depth 1 https://github.com/nexu-io/open-design.git /tmp/open-design
mkdir -p ~/.claude/skills
cp -r /tmp/open-design/design-templates/web-prototype-taste-editorial ~/.claude/skills/web-prototype-taste-editorial
available in every project

In the Claude apps, zip the folder and upload it from the Skills settings. The folder on GitHub

The instructions your agent would load

SKILL.md as published, without the frontmatter. Read it on GitHub

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

More skills from nexu-io/open-design

  • Aarticle-magazineHuashu / huashu-md-html-inspired magazine article layout for turning Markdown or notes into a polished long-form HTML essay.
  • Aaudio-jingleAudio generation skill — jingles, beds, voiceover, and sound effects. Routes music requests to Suno V5 / Udio / Lyria, speech to MiniMax TTS / FishAudio / ElevenLabs V3, and SFX to ElevenLabs SFX or AudioCraft. Output is one MP3/WAV file saved to the project folder.
  • Aaudio-jingleAudio generation skill — jingles, beds, voiceover, and sound effects. Routes music requests to Suno V5 / Udio / Lyria, speech to MiniMax TTS / FishAudio / ElevenLabs V3, and SFX to ElevenLabs SFX or AudioCraft. Output is one MP3/WAV file saved to the project folder.
  • Ablog-postA long-form article / blog post — masthead, hero image placeholder, article body with figures and pull quotes, author byline, related posts. Use when the brief asks for "blog", "article", "post", "essay", or "case study".
  • Ablog-postA long-form article / blog post — masthead, hero image placeholder, article body with figures and pull quotes, author byline, related posts. Use when the brief asks for "blog", "article", "post", "essay", or "case study".
  • Abuild-testRun the project's build / typecheck / lint / test commands and emit the build.passing + tests.passing signals devloop convergence reads.
  • Acard-twitterTwitter quote or data card designed to pair with a post.
  • Acard-xiaohongshuXiaohongshu-style knowledge cards, arranged as a swipeable multi-card carousel.
  • Aclinical-case-reportStructured medical case presentation for clinical rounds, conferences, and documentation. Generates SOAP-format or narrative case reports with physiologically accurate vitals, labs, and evidence-based plans. Use when the brief mentions "case report", "case presentation", "SOAP note", "clinical case", "ward rounds", "case summary", or "patient presentation".
  • Aclinical-case-reportStructured medical case presentation for clinical rounds, conferences, and documentation. Generates SOAP-format or narrative case reports with physiologically accurate vitals, labs, and evidence-based plans. Use when the brief mentions "case report", "case presentation", "SOAP note", "clinical case", "ward rounds", "case summary", or "patient presentation".
  • Acode-importRead an existing repository's structure into the project cwd as a normalised snapshot the agent can analyse without re-walking the tree on every turn.
  • Acodex-interactive-capability-mapTurn a long-form article, thread, memo, or product narrative into a compact clickable capability map with a workflow loop, use-case matrix, and responsive detail panel.

All agent skills → · MCP servers