{"id":"22840d51-9831-4323-95be-8576e759ba71","shortId":"MJHTag","kind":"skill","title":"web-prototype-taste-soft","tagline":"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`.","description":"# Web Prototype — Soft Premium\n\nFor 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.\n\n## Source\n\nDistilled from [Leonxlnx/taste-skill](https://github.com/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.\n\n## Hard rules\n\n- **Canvas:** silver-grey or warm cream (`#F2F2F0` or `#FDFBF7`). Not pure white.\n- **Type pairing:** display in Geist / Plus Jakarta Sans / Cabinet Grotesk at heavy weight, body in the same family, monospace meta in Geist Mono.\n- **Display:** `clamp(48px, 7vw, 96px)`, `letter-spacing: -0.035em`, `line-height: 0.96`. Heavy weight (700+).\n- **Squircle radii:** `border-radius: 28px–40px` (`rounded-[2rem]` to `rounded-[2.5rem]`) on major surfaces.\n- **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)`).\n- **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.\n- **Ambient depth:** one slow-drifting radial mesh blob behind hero, `opacity ≤ 0.18`, `pointer-events: none`, fixed.\n- **Eyebrow tag** above each section header: pill, uppercase mono, `letter-spacing: 0.2em`, `text-[10px]`.\n\n## Banned\n\n- Inter, Roboto, Helvetica, Open Sans.\n- Generic 1px solid gray borders (use `border-black/5` / `ring-1 ring-black/5`).\n- `shadow-md`, `shadow-lg`, hard drop shadows. Only diffuse, wide-spread, low-opacity (`0 20px 40px -15px rgba(0,0,0,0.05)`).\n- Edge-to-edge sticky navbars glued to the top. Use a floating glass pill (`mt-6 mx-auto w-max rounded-full`).\n- Linear or `ease-in-out` transitions. Use `cubic-bezier(0.32, 0.72, 0, 1)` or spring physics.\n- `h-screen` (use `min-h-[100dvh]`).\n- Animating `width` / `height` / `top` / `left`. Only `transform` and `opacity`.\n- Pure black `#000`. Use Zinc-950 / Off-Black.\n\n## Required components\n\n- Floating-pill navbar with backdrop-blur-2xl.\n- Asymmetric hero: massive heavy display, eyebrow tag, body lede `max-w-[52ch]`, two CTAs (primary pill with button-in-button arrow + ghost).\n- Bento grid using the **double-bezel** pattern; at least one wide card and one tall card.\n- Feature row with **z-axis cascade** or split image module.\n- Marquee strip of customer logos, slow infinite translation (`-100% / 20s`), pause on hover.\n- Closing band on a soft inverted surface (deep zinc / espresso).\n- Footer: monospace meta, hairline above.\n\n## Motion\n\n- All transitions: `transition: transform 700ms cubic-bezier(0.32,0.72,0,1)` minimum.\n- Hover on CTAs: outer pill scales `0.98` on `:active`, inner trailing-icon circle translates `(+1px, -1px)` and `scale(1.05)`.\n- Scroll entry: `translateY(16px) blur(8px) opacity(0)` → `translateY(0) blur(0) opacity(1)`. `IntersectionObserver` only.\n- Marquee: `transform: translateX(-50%)` over `30s linear` infinite, applied to a duplicated track.\n- Hero mesh blob: 24s+ keyframe drift, opacity-only or transform-only.\n\n## Pre-flight\n\n- [ ] Floating pill nav with `backdrop-blur` + hairline ring\n- [ ] At least one card uses the double-bezel (outer shell + inner core, concentric radii)\n- [ ] Primary CTA uses button-in-button trailing icon\n- [ ] Section padding ≥ `py-24`\n- [ ] No banned fonts; display weight ≥ 700\n- [ ] Hero uses `min-h-[100dvh]`, never `100vh`\n- [ ] All transitions use custom cubic-bezier or spring; no `linear` / `ease-in-out`\n- [ ] Mobile: layout collapses to single column under 768px, all rotations + overlaps removed","tags":["web","prototype","taste","soft","open","design","nexu-io","agent-skills","ai-agents","ai-design","byok","claude"],"capabilities":["skill","source-nexu-io","skill-web-prototype-taste-soft","topic-agent-skills","topic-ai-agents","topic-ai-design","topic-byok","topic-claude","topic-claude-code-for-design","topic-claude-design","topic-coding-agents","topic-design-systems","topic-design-tools","topic-desktop-app","topic-figma-alternative"],"categories":["open-design"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/nexu-io/open-design/web-prototype-taste-soft","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add nexu-io/open-design","source_repo":"https://github.com/nexu-io/open-design","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 36607 github stars · SKILL.md body (3,858 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-11T06:52:27.798Z","embedding":null,"createdAt":"2026-05-03T12:52:15.344Z","updatedAt":"2026-05-11T06:52:27.798Z","lastSeenAt":"2026-05-11T06:52:27.798Z","tsv":"'+1':523 '-0.035':158 '-1':301,525 '-1.5':194 '-100':474 '-15':326 '-24':611 '-3':237 '-50':549 '-6':235,349 '-950':399 '/5':299,305 '/leonxlnx/taste-skill)':82 '0':323,329,330,331,372,505,537,539,541 '0.05':332 '0.18':262 '0.2':280 '0.32':370,503 '0.375':219 '0.72':371,504 '0.96':163 '0.98':514 '000':396 '1':373,506,543 '1.05':529 '100dvh':384,623 '100vh':625 '10px':283 '150k':63 '16px':533 '1px':291 '2.5':178 '20px':324 '20s':475 '24s':562 '28px':172 '2rem':175,215,218 '2xl':413 '30s':551 '4':37 '40px':173,325 '48px':152 '52ch':426 '700':166,617 '700ms':499 '768px':648 '7vw':153 '8':38 '8px':535 '96px':154 'activ':516 'aesthet':67,92 'agenc':64 'ambient':28,250 'anim':385 'appl':7,53 'apple-lik':52 'apple-ti':6 'appli':554 'architect':86 'architectur':75,96 'arrow':240,436 'ask':50 'asymmetr':414 'auto':352 'axi':460 'backdrop':411,580 'backdrop-blur':579 'backdrop-blur-2xl':410 'background':207 'ban':284,613 'band':480 'behind':259 'bento':438 'bezel':16,95,185,444,592 'bezier':369,502,632 'black':298,304,395,402 'blob':258,561 'blur':412,534,540,581 'bodi':140,421 'border':170,196,294,297 'border-black':296 'border-radius':169 'brief':48 'button':19,21,223,225,433,435,603,605 'button-in-button':18,222,432,602 'cabinet':135 'calc':217 'calm':60 'canva':13,114 'card':17,189,450,454,587 'cascad':461 'choreographi':99 'circl':521 'circular':245 'clamp':151 'close':479 'collaps':643 'column':646 'compon':404 'concentr':210,597 'consum':59 'contain':200 'core':203,596 'cream':120 'cta':221,600 'ctas':22,227,428,510 'cubic':368,501,631 'cubic-bezi':367,500,630 'custom':469,629 'deep':486 'depth':251 'diffus':316 'directori':105 'display':129,150,418,615 'distil':30,77 'doubl':15,94,184,443,591 'double-bezel':14,93,183,442,590 'drift':255,564 'drop':313 'duplic':557 'e.g':213 'eas':362,638 'ease-in-out':361,637 'edg':334,336 'edge-to-edg':333 'em':159,281 'entri':531 'espresso':488 'event':265 'everi':187 'example.html':102 'eyebrow':268,419 'f2f2f0':121 'famili':144 'fdfbf7':123 'featur':455 'finish':65 'fix':267 'flight':574 'float':345,406,575 'floating-pil':405 'flush':248 'flush-right':247 'font':614 'footer':489 'full':229,233,358 'fulli':109 'fully-r':108 'geist':131,148 'generic':290 'generous':23 'ghost':437 'github.com':81 'github.com/leonxlnx/taste-skill)':80 'glass':346 'glu':339 'gray':293 'grey':117 'grid':439 'grotesk':136 'h':378,383,622 'h-screen':377 'hairlin':195,492,582 'haptic':89 'hard':112,312 'header':273 'heavi':138,164,417 'height':162,387 'helvetica':287 'hero':260,415,559,618 'hover':478,508 'icon':520,607 'imag':464 'import':188 'infinit':472,553 'inner':202,216,517,595 'insid':242 'inter':285 'intersectionobserv':544 'invert':484 'jakarta':133 'keyfram':563 'layout':642 'least':447,585 'lede':422 'left':389 'leonxlnx/taste-skill':32,79 'letter':156,278 'letter-spac':155,277 'lg':311 'like':54 'line':161 'line-height':160 'linear':56,359,552,636 'linear-ti':55 'live':241 'logo':470 'low':321 'low-opac':320 'major':181 'mandatori':186 'marque':466,546 'massiv':416 'max':355,424 'max-w':423 'md':308 'mesh':29,257,560 'meta':146,491 'micro':91 'micro-aesthet':90 'min':382,621 'min-h':381,620 'minimum':507 'mobil':641 'modul':465 'mono':149,276 'monospac':145,490 'motion':27,98,494 'mt':348 'mx':351 'mx-auto':350 'nav':577 'navbar':338,408 'nest':74 'never':624 'none':266 'obsess':72 'off-black':400 'one':252,448,452,586 'opac':261,322,393,536,542,566 'opacity-on':565 'open':288 'outer':198,214,511,593 'overlap':651 'p':193 'pad':609 'pair':128 'pattern':445 'paus':476 'physic':376 'pill':230,274,347,407,430,512,576 'plus':132 'pointer':264 'pointer-ev':263 'pre':573 'pre-flight':572 'premium':46,58 'primari':226,429,599 'prototyp':3,11,44 'pure':125,394 'px':234,327,524,526 'py':236,610 'radial':256 'radii':25,168,598 'radius':171,212 'realiz':110 'rem':179,220 'remov':652 'requir':403 'rgba':328 'right':249 'ring':300,303,583 'ring-black':302 'roboto':286 'rotat':650 'round':174,177,232,357 'rounded-ful':231,356 'row':456 'rule':100,113 'saa':61 'san':134,289 'scale':513,528 'screen':379 'scroll':530 'section':36,272,608 'see':101 'shadow':199,307,310,314 'shadow-lg':309 'shadow-md':306 'shell':594 'silver':116 'silver-grey':115 'silver/cream':12 'singl':645 'skill':35,42 'skill-web-prototype-taste-soft' 'skills/soft-skill/skill.md':83 'slow':254,471 'slow-drift':253 'smaller':211 'soft':5,9,34,45,69,197,483 'soft-skil':33 'solid':292 'sourc':76 'source-nexu-io' 'space':157,279 'split':463 'spread':319 'spring':26,375,634 'squircl':24,167 'sticki':337 'strip':467 'surfac':182,485 'tag':269,420 'tall':453 'tast':4,41 'taste-skil':40 'templat':111 'text':282 'tier':8,57 'top':342,388 'topic-agent-skills' 'topic-ai-agents' 'topic-ai-design' 'topic-byok' 'topic-claude' 'topic-claude-code-for-design' 'topic-claude-design' 'topic-coding-agents' 'topic-design-systems' 'topic-design-tools' 'topic-desktop-app' 'topic-figma-alternative' 'track':558 'trail':239,519,606 'trailing-icon':518 'transform':391,498,547,570 'transform-on':569 'transit':365,496,497,627 'translat':473,522 'translatex':548 'translatey':532,538 'two':427 'type':127 'ui':85 'uppercas':275 'use':295,343,366,380,397,440,588,601,619,628 'vanguard':84 'w':354,425 'w-max':353 'warm':119 'web':2,10,43 'web-prototype-taste-soft':1 'weight':139,165,616 'weighti':70 'white':126 'wide':318,449 'wide-spread':317 'width':386 'wrapper':192,246 'z':459 'z-axi':458 'zinc':398,487","prices":[{"id":"68d179f8-0cc9-4240-bb4c-8ba20ce3500c","listingId":"22840d51-9831-4323-95be-8576e759ba71","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"nexu-io","category":"open-design","install_from":"skills.sh"},"createdAt":"2026-05-03T12:52:15.344Z"}],"sources":[{"listingId":"22840d51-9831-4323-95be-8576e759ba71","source":"github","sourceId":"nexu-io/open-design/web-prototype-taste-soft","sourceUrl":"https://github.com/nexu-io/open-design/tree/main/skills/web-prototype-taste-soft","isPrimary":false,"firstSeenAt":"2026-05-03T12:52:15.344Z","lastSeenAt":"2026-05-11T06:52:27.798Z"},{"listingId":"22840d51-9831-4323-95be-8576e759ba71","source":"skills_sh","sourceId":"nexu-io/open-design/web-prototype-taste-soft","sourceUrl":"https://skills.sh/nexu-io/open-design/web-prototype-taste-soft","isPrimary":true,"firstSeenAt":"2026-05-07T20:43:49.920Z","lastSeenAt":"2026-05-07T22:42:26.154Z"}],"details":{"listingId":"22840d51-9831-4323-95be-8576e759ba71","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"nexu-io","slug":"web-prototype-taste-soft","github":{"repo":"nexu-io/open-design","stars":36607,"topics":["agent-skills","ai-agents","ai-design","byok","claude","claude-code-for-design","claude-design","coding-agents","design-systems","design-tools","desktop-app","figma-alternative","generative-ai","hermes-agent","local-first","nextjs","no-code","prototyping","ui-generator","vibe-coding"],"license":"apache-2.0","html_url":"https://github.com/nexu-io/open-design","pushed_at":"2026-05-11T06:48:43Z","description":"🎨 Local-first, open-source alternative to Anthropic's Claude Design. ⚡ 19 Skills · ✨ 71 brand-grade Design Systems 🖼 Generate web · desktop · mobile prototypes · slides · images · videos · HyperFrames 📦 Sandboxed preview · HTML/PDF/PPTX/MP4 export 🤖 Runs on Claude Code / Codex / Cursor / Gemini / OpenCode / Qwen / Copilot / Hermes / Kimi CLI.","skill_md_sha":"23e06dc695455327a821b6e81312b4434d1d9140","skill_md_path":"skills/web-prototype-taste-soft/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/nexu-io/open-design/tree/main/skills/web-prototype-taste-soft"},"layout":"multi","source":"github","category":"open-design","frontmatter":{"name":"web-prototype-taste-soft","description":"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`."},"skills_sh_url":"https://skills.sh/nexu-io/open-design/web-prototype-taste-soft"},"updatedAt":"2026-05-11T06:52:27.798Z"}}