Agent skill · design visual · nexu-io
web-prototype-taste-soft
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`.
Why this skill is useful
Provides detailed design specifications and aesthetic guidelines for creating premium web prototypes 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 — 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. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills nexu-io/web-prototype-taste-soft--8b3d52