Mmcp.market

web-prototype-taste-soft skill

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

Apple-tier soft web prototype. Silver/cream canvas, double-bezel cards, button-in-button CTAs, generous squircle radii, spring motion, ambient mesh. Distilled from Leonxlnx/taste-skill `soft-skill` + sections 4–8 of `taste-skill`.

A100/100content scan

Is the web-prototype-taste-soft 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-soft 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-soft ~/.claude/skills/web-prototype-taste-soft
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 — Soft Premium

For briefs that ask for "Apple-like", "Linear-tier", "premium consumer", "calm SaaS", or "$150k agency" finish. The aesthetic is soft, weighty, and obsessive about nested architecture.

Source

Distilled from Leonxlnx/taste-skill — skills/soft-skill/SKILL.md ("Vanguard UI Architect") with the haptic micro-aesthetics, double-bezel architecture, and motion choreography rules. See example.html in this directory for a fully-realized template.

Hard rules

  • Canvas: silver-grey or warm cream (#F2F2F0 or #FDFBF7). Not pure white.
  • Type pairing: display in Geist / Plus Jakarta Sans / Cabinet Grotesk at heavy weight, body in the same family, monospace meta in Geist Mono.
  • Display: clamp(48px, 7vw, 96px), letter-spacing: -0.035em, line-height: 0.96. Heavy weight (700+).
  • Squircle radii: border-radius: 28px–40px (rounded-[2rem] to rounded-[2.5rem]) on major surfaces.
  • Double-bezel mandatory: every important card is a wrapper (p-1.5, hairline border, soft outer shadow) containing an inner core with its own background and a concentric smaller radius (e.g., outer 2rem, inner calc(2rem - 0.375rem)).
  • CTA = button-in-button: primary CTAs are full pills (rounded-full px-6 py-3); the trailing arrow lives inside its own circular wrapper flush-right.
  • Ambient depth: one slow-drifting radial mesh blob behind hero, opacity ≤ 0.18, pointer-events: none, fixed.
  • Eyebrow tag above each section header: pill, uppercase mono, letter-spacing: 0.2em, text-[10px].

Banned

  • Inter, Roboto, Helvetica, Open Sans.
  • Generic 1px solid gray borders (use border-black/5 / ring-1 ring-black/5).
  • shadow-md, shadow-lg, hard drop shadows. Only diffuse, wide-spread, low-opacity (0 20px 40px -15px rgba(0,0,0,0.05)).
  • Edge-to-edge sticky navbars glued to the top. Use a floating glass pill (mt-6 mx-auto w-max rounded-full).
  • Linear or ease-in-out transitions. Use cubic-bezier(0.32, 0.72, 0, 1) or spring physics.
  • h-screen (use min-h-[100dvh]).
  • Animating width / height / top / left. Only transform and opacity.
  • Pure black #000. Use Zinc-950 / Off-Black.

Required components

  • Floating-pill navbar with backdrop-blur-2xl.
  • Asymmetric hero: massive heavy display, eyebrow tag, body lede max-w-[52ch], two CTAs (primary pill with button-in-button arrow + ghost).
  • Bento grid using the double-bezel pattern; at least one wide card and one tall card.
  • Feature row with z-axis cascade or split image module.
  • Marquee strip of customer logos, slow infinite translation (-100% / 20s), pause on hover.
  • Closing band on a soft inverted surface (deep zinc / espresso).
  • Footer: monospace meta, hairline above.

Motion

  • All transitions: transition: transform 700ms cubic-bezier(0.32,0.72,0,1) minimum.
  • Hover on CTAs: outer pill scales 0.98 on :active, inner trailing-icon circle translates (+1px, -1px) and scale(1.05).
  • Scroll entry: translateY(16px) blur(8px) opacity(0) → translateY(0) blur(0) opacity(1). IntersectionObserver only.
  • Marquee: transform: translateX(-50%) over 30s linear infinite, applied to a duplicated track.
  • Hero mesh blob: 24s+ keyframe drift, opacity-only or transform-only.

Pre-flight

  • [ ] Floating pill nav with backdrop-blur + hairline ring
  • [ ] At least one card uses the double-bezel (outer shell + inner core, concentric radii)
  • [ ] Primary CTA uses button-in-button trailing icon
  • [ ] Section padding ≥ py-24
  • [ ] No banned fonts; display weight ≥ 700
  • [ ] Hero uses min-h-[100dvh], never 100vh
  • [ ] All transitions use custom cubic-bezier or spring; no linear / ease-in-out
  • [ ] Mobile: layout collapses to single column under 768px, all rotations + overlaps removed

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