원클릭으로 Manus에서 모든 스킬 실행

web-prototype-taste-soft

스타80,614

포크9,300

업데이트2026년 7월 14일 08:43

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

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

nexu-io

nexu-io/open-design

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

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

이 저장소의 다른 Skills

같은 저장소

humanize-ppt

nexu-io/open-design

A presentation system for agent-made PPTs — born for the talk, not just the template. It turns raw material into an AST (audience-state-transfer) outline with per-page visual-enhancement decisions (image / SVG diagram / video), hands a production brief to a downstream renderer (HTML-PPT skills or native PPTX), then runs a capped 3-round presentation checkup (演讲体检) on the rendered deck. It never renders slides itself. Use before generating PPT/HTML slides from raw material, and after rendering when the user says things like "给这份 deck 做演讲体检" or "PPT 渲染质检". If all you want is one beautiful template page with no outline and no checkup, a rendering skill alone is enough.

2026-07-2180.6k

html-ppt-course-module

nexu-io/open-design

A first-30-days onboarding module for new hospitality hires — the behaviors, the practice, the checks, and the manager follow-up. Built as a decision-grade professional training deck for new hires, managers.

2026-07-1880.6k

html-ppt-graphify-dark-graph

nexu-io/open-design

Open Design's feature business case for the plugin marketplace: the user pain, options, tradeoffs, and the measure of success. Built as a decision-grade product management deck for PM, eng, design, leadership.

2026-07-1880.6k

html-ppt-hermes-cyber-terminal

nexu-io/open-design

Open Design + BYOK: choosing and wiring your own model, hands-on — cost, quality, and the routing decision. Built as a decision-grade AI literacy deck for engineers, IT, applied-AI teams.

2026-07-1880.6k

html-ppt-knowledge-arch-blueprint

nexu-io/open-design

Open Design's incident retro: the daemon-restart data bug, the root cause, the fix, and the systemic follow-ups. Built as a decision-grade product management deck for engineering, SRE, leadership.

2026-07-1880.6k

html-ppt-obsidian-claude-gradient

nexu-io/open-design

Open Design's enterprise AI-adoption brief: local-first agents at work, the risk controls, the ROI, and the rollout plan. Built as a decision-grade AI literacy deck for leadership, IT, security.

2026-07-1880.6k

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

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

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